/* ============================================================
   PAGE · APP SHELL
   Reusable chrome for every non-marketing page (signup, sign-in,
   phone linking, dashboard, account, billing, GTD read views).
   Provides: a sticky topbar, a flex-grown main, and a footer
   pinned to the bottom — plus two content compositions:
     · .app-auth  — a centred, constrained card for forms
     · .app-page  — a top-aligned reading column for content
   Composes the system's objects/components; adds no new colours.

   The topbar/footer recipe deliberately mirrors the landing
   (08-pages/_landing.css) so signed-in pages feel like the same
   machine, but is kept separate so app chrome can diverge from
   marketing chrome without disturbing the landing.
   ============================================================ */

/* ---- Shell skeleton -------------------------------------------------- */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.app-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* ---- Signed-in shell: sidebar (c-appnav) | content column ------------ */
/* The shell-owned nav + capture (chunk 01) sit in this row between the sticky
   c-appbar and the footer. Mobile-first single column (the fixed bottom bar is
   the nav); the sidebar appears as a left rail at --bp-md. */
.app-shell {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}
.app-shell__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Phone: breathing room below the sticky appbar (content used to butt straight
   against it), and keep content clear of the fixed bottom tab bar (+ safe-area). */
@media (max-width: 45rem) { /* --bp-md */
  .app-shell__main {
    padding-top: var(--space-4);
    padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0));
  }
}
@media (min-width: 45rem) { /* --bp-md */
  .app-shell {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--space-5);
    padding-inline: var(--space-4);
  }
  /* Breathing room below the sticky appbar so the capture bar doesn't weld to it
     (its rounded top corners need the gap), and so the capture top lines up with
     the sidebar's first item — the c-appnav desktop rail already carries the same
     var(--space-5) top padding. (Mobile gets its own padding-top above.) */
  .app-shell__main { padding-top: var(--space-5); }
}

/* CTAs rendered as <a class="c-button"> shouldn't pick up the bare-link
   underline + glow (same fix the landing applies). */
.app a.c-button { text-decoration: none; }
.app a.c-button:hover { text-shadow: none; }

/* ---- Skip link ------------------------------------------------------- */
.app-skip {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-xs);
  color: var(--color-accent);
  font-family: var(--font-plaque);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--dur-fast) var(--ease-snap);
}
.app-skip:focus-visible { transform: translateY(0); }

/* ---- Background grid (faint telemetry field) ------------------------ */
.app-grid-bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-below);
  pointer-events: none;
  background-image: var(--pattern-grid);
  background-size: var(--grid-cell) var(--grid-cell);
  opacity: 0.25;
  mask-image: radial-gradient(ellipse at top, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at top, black 0%, transparent 75%);
}

/* ---- Topbar ---------------------------------------------------------- */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-overlay);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border-bottom: var(--border-thick) solid var(--color-bezel-dark);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow-color) 71%, transparent);
  backdrop-filter: blur(8px);
}
.app-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
.app-topbar__spacer { flex: 1; }
.app-topbar__status { flex-shrink: 0; }

.app-brand {
  font-family: var(--font-plaque);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.app-brand__name {
  background: var(--gradient-vapor);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c-brand-hi) 40%, transparent));
}
.app-brand:hover { text-shadow: none; }
.app-brand__sub {
  font-family: var(--font-data);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-widest);
  color: var(--color-text-muted);
  -webkit-text-fill-color: var(--color-text-muted);
  background: none;
  filter: none;
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* button_to (sign out) renders a wrapping <form>; keep it inline in the
   nav cluster with no stray margin. */
.app-topbar nav form,
.app-footer nav form { margin: 0; }

/* ---- Footer ---------------------------------------------------------- */
.app-footer {
  margin-top: var(--space-8);
  padding-block: var(--space-6);
  border-top: var(--border-thick) solid var(--color-bezel-dark);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}
.app-footer__fine { font-size: var(--fs-xs); margin-top: var(--space-2); }

/* ---- Auth / form composition (centred constrained card) ------------- */
.app-auth {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-7);
}
.app-auth__card {
  width: 100%;
  max-width: 26rem;
}
.app-auth__head { text-align: center; }
.app-auth__head h1 {
  font-size: var(--fs-xl);
  margin-top: var(--space-2);
}
.app-auth__errors {
  margin: 0;
  padding-left: var(--space-4);
}
.app-auth__foot {
  text-align: center;
  font-size: var(--fs-sm);
}
/* A full-width submit reads better centred. */
.app-auth .c-button.u-fill { justify-content: center; }

/* ---- Auth funnel: chassis card, eyebrow, stepper rail, OTP ----------- */
/* The card wears the landing's chassis (o-panel--chassis/--riveted set in the
   markup) so signing in feels like powering the console back on (chunk 11). */
.app-auth__card { padding: var(--space-6); }

/* Warm, sentence-case eyebrow + reassurance lines (C1 content register). */
.app-auth__eyebrow {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.app-auth__next {
  font-size: var(--fs-xs);
  text-align: center;
}

/* Onboarding progress rail — the existing c-stepper compacted into a 4-step
   horizontal rail (Account → Phone → Code → Ready). The component's per-step
   groove + cyan tick + big glowing number are overridden here; a small numbered
   dot carries the state instead. */
.app-auth__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
}
.app-auth__step {
  padding-top: 0;
  text-align: center;
  min-width: 0;
}
.app-auth__step::before,
.app-auth__step::after { content: none; }   /* drop the component groove + cyan tick */

.app-auth__step .c-stepper__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto;
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--color-text-muted);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-circle);
  text-shadow: none;
}
.app-auth__step .c-stepper__title {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
}

/* Done: a calm green-lit dot. Current: cyan accent + brighter label. */
.app-auth__step--done .c-stepper__num {
  color: var(--color-ok);
  border-color: var(--color-ok);
}
.app-auth__step--current .c-stepper__num {
  color: var(--color-text-emphasis);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.app-auth__step--current .c-stepper__title { color: var(--color-text-strong); }

/* Segmented OTP — one numeric c-field rendered as a wide, console-like code
   entry: mono digits with generous tracking read as discrete cells, in a framed
   input that stays comfortably thumb-sized (≥44px) with a numeric keyboard. */
.app-auth__otp input {
  font-family: var(--font-data);
  font-size: var(--fs-3xl);
  text-align: center;
  letter-spacing: 0.5em;
  text-indent: 0.5em;        /* offset the trailing tracking so digits stay centred */
  min-height: 3.25rem;
  padding-block: var(--space-3);
}

/* ---- Page composition (top-aligned reading column) ------------------ */
.app-page { padding-block: var(--space-7); }
.app-page__head {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.app-page__head h1 { font-size: var(--fs-2xl); }
.app-page__head p { color: var(--color-text-muted); margin-top: var(--space-1); }

/* The trailing action row on content pages (Manage billing / Sign out). */
.app-page nav { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---- TOTP enrolment QR ---------------------------------------------- */
/* The QR SVG needs a light quiet-zone to scan reliably on the dark field. */
.totp-qr {
  display: inline-block;
  padding: var(--space-3);
  background: #fff;
  border-radius: var(--radius-xs);
}
.totp-qr svg { display: block; }

/* ---- MCP credential controls (chunk 10) ----------------------------- */
/* The reveal / copy controls on the API-key page are touched on a phone, so they
   keep a ≥44px target even at the --sm size (C5). Scoped to the reveal behavior so
   no other --sm button changes. */
[data-controller~="reveal"] .c-button { min-height: 2.75rem; }

/* ---- Admin layout ---------------------------------------------------- */
/* The admin layout keeps its own (.admin-*) markup — it carries WebAuthn CSP
   nuances and no theme toggle — but reuses the shell's visual language. */
.admin-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.admin-header {
  position: sticky;
  top: 0;
  z-index: var(--z-overlay);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border-bottom: var(--border-thick) solid var(--color-bezel-dark);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow-color) 71%, transparent);
  backdrop-filter: blur(8px);
}
.admin-header nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3) var(--space-5);
}
.admin-header__brand {
  font-family: var(--font-plaque);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-strong);
}
.admin-header__user {
  margin-left: var(--space-4);
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* Always-on health readout — pushed to the right tail of the header bar, the
   account email sitting just after it. Instrument cells = plaque + readout
   (+ an LED for the failed-job lamp). */
.admin-health {
  margin-left: auto;
}
.admin-health__cell {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.admin-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--space-7) var(--space-5);
}

/* ---- Operator console home (the status board the operator lands on) -- */
.admin-console {
  margin-bottom: var(--space-6);
}
.admin-console__board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-4);
}
.admin-console__tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--seam-embossed);
}
.admin-console__tile-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Failed-jobs danger toolbar: the hazard strip + Retry-all confirm sit above
   the table with breathing room. */
.admin-failed-toolbar {
  margin: var(--space-3) 0 var(--space-5);
}

/* Prompt-library cards: spacing between the per-block cards, and the muted,
   wrapped prose preview under each. (Replaces the old page-local <style> greys,
   now built from c-card/c-plaque/c-badge + theme tokens.) */
.admin-prompt-list {
  margin-bottom: var(--space-6);
}
.admin-prompt-desc {
  margin-top: var(--space-2);
  white-space: pre-wrap;
  color: var(--color-text-muted);
}
/* The assembled/built-in prompt previews render in a c-terminal; trim the inner
   <pre>'s default margins so the phosphor panel hugs its content. */
.admin-prompt-preview pre {
  margin: 0;
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 720px) {
  .app-topbar__status { display: none; }
  /* Same non-wrapping-row trap as the landing topbar, and worse here: a
     signed-in user has four nav buttons. Wrap the row so the brand sits on
     top and the account actions drop to their own full-width row below. */
  .app-topbar__inner { flex-wrap: wrap; }
  .app-topbar__spacer { display: none; }
  .app-topbar nav { width: 100%; justify-content: flex-start; }
  /* The admin header is the same recipe (brand + auto-pushed user/actions);
     let it wrap rather than overflow on a phone. */
  .admin-header nav { flex-wrap: wrap; }
  /* The health readout drops to its own full-width row below the nav links. */
  .admin-health { margin-left: 0; width: 100%; }
}