/*
  Page structure: app-bar, the vertical "trail" of stage cards, and the
  sticky bottom action bar. Card *contents* (inputs, buttons, signature pad)
  are styled in components.css — this file is concerned with placement and
  responsiveness only.
*/

.app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ---------------------------------------------------------------- */
/* App bar                                                           */
/* ---------------------------------------------------------------- */

.app-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--app-bar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  background: var(--color-forest-800);
  color: var(--color-stone-50);
  background-image: var(--contour-motif);
  background-repeat: no-repeat;
  background-position: right -40px top -60px;
  background-size: 340px;
}

.app-bar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
}

.app-bar__mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

.app-bar__brand strong {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.app-bar__brand span {
  font-size: var(--text-xs);
  color: var(--color-moss-200);
}

.app-bar__status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
}

.app-bar__link {
  color: var(--color-stone-50);
  font-weight: 600;
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: 1px solid transparent;
}

.app-bar__link:hover,
.app-bar__link:focus-visible {
  border-bottom-color: var(--color-moss-200);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}

.status-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-moss-200);
}

.status-chip[data-state="offline"] .status-chip__dot {
  background: var(--color-amber-600);
}

/* ---------------------------------------------------------------- */
/* Main content: the stage stack                                     */
/* ---------------------------------------------------------------- */

.app-main {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) calc(var(--action-bar-height) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  --line-offset: 66px;
}

/* A quiet dotted line linking the numbered stage badges, visible only in
   the gaps between cards (the cards themselves sit above it and cover it).
   This is the same "trail" idea as the contour motif, expressed as
   wayfinding rather than decoration — the four stages really are a path. */
.app-main::before {
  content: "";
  position: absolute;
  top: var(--space-7);
  bottom: var(--space-7);
  left: var(--line-offset);
  width: 2px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--color-moss-400) 0,
    var(--color-moss-400) 6px,
    transparent 6px,
    transparent 14px
  );
  z-index: 0;
}

@media (max-width: 599px) {
  .app-main::before {
    display: none;
  }
}

.stage-card {
  position: relative;
  z-index: 1;
  background: var(--color-stone-50);
  border: 1px solid var(--color-stone-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  overflow: hidden;
}

.stage-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.stage-card__badge {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-forest-800);
  color: var(--color-stone-50);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage-card__titles h2 {
  margin-bottom: var(--space-1);
}

.stage-card__titles p {
  margin: 0;
  color: var(--color-slate-700);
  font-size: var(--text-sm);
}

/* A quiet echo of the app-bar's contour motif, used once more here so the
   "trail" idea threads through the whole page without repeating on every
   card. */
.stage-card--signature::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--contour-motif);
  background-repeat: no-repeat;
  background-position: right -60px bottom -80px;
  background-size: 380px;
  opacity: 0.5;
  pointer-events: none;
}
/* ---------------------------------------------------------------- */
/* Sticky bottom action bar                                          */
/* ---------------------------------------------------------------- */

.action-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  height: var(--action-bar-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--color-stone-50);
  border-top: 1px solid var(--color-stone-200);
  box-shadow: 0 -6px 20px rgba(20, 38, 29, 0.06);
}

.action-bar__meta {
  margin-right: auto;
  font-size: var(--text-xs);
  color: var(--color-slate-700);
}

/* ---------------------------------------------------------------- */
/* Responsiveness                                                    */
/* ---------------------------------------------------------------- */

/* Phones: tighten padding, stack app-bar status under brand if needed. */
@media (max-width: 480px) {
  .app-bar {
    padding: 0 var(--space-3);
  }

  .app-bar__brand span {
    display: none;
  }

  .app-bar__status {
    gap: var(--space-2);
  }

  .app-main {
    padding: var(--space-4) var(--space-3) calc(var(--action-bar-height) + var(--space-5));
    gap: var(--space-4);
    --line-offset: 46px;
  }

  .stage-card {
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }

  .action-bar {
    padding: var(--space-3);
    gap: var(--space-2);
  }

  .action-bar__meta {
    display: none;
  }
}

@media (max-width: 420px) {
  .action-bar .btn {
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
  }

  .action-bar {
    overflow-x: auto;
  }
}

/* Very narrow phones (e.g. small Android devices in portrait): let the
   app-bar wrap rather than crush its contents. */
@media (max-width: 360px) {
  .app-bar {
    height: auto;
    min-height: var(--app-bar-height);
    flex-wrap: wrap;
    padding: var(--space-2) var(--space-3);
  }
}

/* Tablets and up: a little more breathing room. */
@media (min-width: 768px) {
  .app-main {
    padding-top: var(--space-7);
    gap: var(--space-6);
    --line-offset: 74px;
  }

  .stage-card {
    padding: var(--space-7);
  }
}