/* ============================================================================
   Baseline — Member app shell
   Phone frame, screen transitions, and the app-specific patterns.
   ========================================================================== */

/* The whole prototype fits the first fold. The phone is 844px tall, which
   needs ~960px of viewport once chrome and padding are counted — more than a
   laptop has. Rather than let the page scroll, the stage is locked to the
   viewport and the phone scales down to fit (see fitPhone() in components.js).
   The only thing that scrolls is the app screen inside the phone, which is
   how a real phone behaves. */
body.app-stage {
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(900px 620px at 50% -8%, oklch(0.24 0.03 113 / 0.30), transparent 65%),
    var(--canvas);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Prototype chrome (outside the phone) ────────────────────────────── */
.poc-topbar {
  width: 100%;
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in oklab, var(--canvas) 82%, transparent);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.poc-topbar__in {
  display: flex; align-items: center; gap: var(--sp-4);
  height: 56px;
}
.poc-mark {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: 600; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap;
}
.poc-mark svg { color: var(--brand); }
.poc-topbar__tag { font-size: var(--fs-xs); color: var(--ink-3); }

.stage-wrap {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-5) var(--sp-4);
  width: 100%;
  /* auto, not hidden: when the 0.6 scale floor binds on a very short window the
     frame must stay reachable. The stage scrolls, never the page. */
  overflow: auto;
}

/* Sized to the SCALED phone, so the layout box matches what you actually see.
   Without this the unscaled 844px box would keep reserving space and the page
   would still overflow. */
.phone-fit {
  width: calc(var(--phone-w) * var(--pscale, 1));
  height: calc(var(--phone-h) * var(--pscale, 1));
  flex-shrink: 0;
}
.phone-fit > .phone {
  transform: scale(var(--pscale, 1));
  transform-origin: top left;
}

/* ── Phone frame ─────────────────────────────────────────────────────── */
.phone {
  position: relative;
  width: var(--phone-w);
  height: var(--phone-h);
  flex-shrink: 0;
  background: #000;
  border-radius: 54px;
  padding: 10px;
  box-shadow:
    0 0 0 2px oklch(0.30 0 0),
    0 0 0 4px oklch(0.12 0 0),
    0 30px 80px rgba(0, 0, 0, 0.6);
}
/* Side buttons — volume pair on the left, power on the right. */
.phone::before {
  content: ''; position: absolute; left: -5px; top: 172px;
  width: 4px; height: 34px; border-radius: 3px;
  background: oklch(0.30 0 0);
  box-shadow: 0 58px 0 oklch(0.30 0 0), 0 116px 0 oklch(0.30 0 0);
}
.phone::after {
  content: ''; position: absolute; right: -5px; top: 232px;
  width: 4px; height: 96px; border-radius: 3px;
  background: oklch(0.30 0 0);
}

.viewport {
  position: relative;
  width: 100%; height: 100%;
  background: var(--canvas);
  border-radius: 44px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
/* Screens stack inside this; the tab bar is its sibling, so it isn't
   duplicated into every screen. */
.screens { position: relative; flex: 1; overflow: hidden; }
/* Full-bleed flows (check-in, logging, crisis) hide the tab bar. */
.viewport.is-full .tabbar { display: none; }

.d-island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 33px; border-radius: 20px;
  background: #000; z-index: 60; pointer-events: none;
}
.statusbar {
  position: absolute; top: 0; left: 0; right: 0; height: 54px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px; z-index: 55;
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  pointer-events: none;
}
.statusbar__right { display: flex; align-items: center; gap: 5px; }

/* ── Screens ─────────────────────────────────────────────────────────────
   CSS transitions, not keyframes — a rapid double-tap retargets smoothly
   instead of restarting from zero. */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--dur-screen) var(--ease-out),
              transform var(--dur-screen) var(--ease-out),
              visibility 0s linear var(--dur-screen);
}
.screen.is-active {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  z-index: 2;
  transition: opacity var(--dur-screen) var(--ease-out),
              transform var(--dur-screen) var(--ease-out),
              visibility 0s;
}
.screen.is-back { transform: translateX(-12px); }

@media (prefers-reduced-motion: reduce) {
  .screen, .screen.is-active { transform: none !important; }
}

/* ── In-app bars ─────────────────────────────────────────────────────── */
.appbar {
  flex-shrink: 0;
  padding: 58px var(--sp-5) var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--canvas);
  border-bottom: 1px solid transparent;
}
.appbar--bordered { border-bottom-color: var(--hairline); }
.appbar__title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.02em; }
.appbar__sub { font-size: var(--fs-xs); color: var(--ink-3); }

.sc-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-2) var(--sp-5) var(--sp-8);
}
.sc-body--flush { padding-inline: 0; }
.sc-body::-webkit-scrollbar { width: 0; }

.sc-foot {
  flex-shrink: 0;
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  background: linear-gradient(to top, var(--canvas) 62%, transparent);
  display: flex; flex-direction: column; gap: var(--sp-3);
}

/* ── Tab bar ─────────────────────────────────────────────────────────── */
.tabbar {
  flex-shrink: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  background: color-mix(in oklab, var(--canvas) 92%, transparent);
  backdrop-filter: blur(12px);
  padding-bottom: 18px;                 /* home indicator space */
}
.tabbar__btn {
  appearance: none; border: 0; background: transparent;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--sp-3) 0 var(--sp-2);
  color: var(--ink-3);
  font-size: 10.5px; font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-press) var(--ease-out);
}
.tabbar__btn[aria-current='page'] { color: var(--brand); }
.tabbar__btn:active { transform: scale(0.94); }

.home-indicator {
  position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: 3px;
  background: var(--ink); opacity: 0.35; z-index: 58; pointer-events: none;
}

/* ── The hero readout ────────────────────────────────────────────────────
   The single element that carries the whole "instrument" concept. */
.readout {
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
}
.readout__v { font-size: var(--fs-display); font-weight: 500; }
.readout__sep { font-size: 2.4rem; font-weight: 300; color: var(--ink-3); margin: 0 2px; }
.readout__u { font-size: var(--fs-sm); color: var(--ink-3); margin-left: var(--sp-2); letter-spacing: 0; }
.readout--sm .readout__v { font-size: 2rem; }
.readout--sm .readout__sep { font-size: 1.5rem; }

.hero {
  text-align: center;
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
}
.hero__glow {
  position: absolute; inset: -40% -20% auto; height: 180px;
  background: radial-gradient(closest-side, var(--glow, var(--brand)), transparent);
  opacity: 0.16; pointer-events: none;
}

/* ── Check-in ────────────────────────────────────────────────────────── */
.q { display: flex; flex-direction: column; gap: var(--sp-5); }
.q__label { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.q__hint { font-size: var(--fs-sm); color: var(--ink-3); }

.scale10 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); }
.scale5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.scale-btn {
  appearance: none; min-height: 52px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: transparent; color: var(--ink-2);
  font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-press) var(--ease-out),
              border-color var(--dur-press) var(--ease-out),
              color var(--dur-press) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
.scale-btn:active { transform: scale(0.95); }
.scale-btn[aria-pressed='true'] {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
}

.prefill {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent);
  background: color-mix(in oklab, var(--brand) 9%, var(--surface-1));
  border-radius: var(--r-md);
}

/* ── Insight card ────────────────────────────────────────────────────── */
.insight {
  display: block; width: 100%; text-align: left;
  padding: var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  cursor: pointer;
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-press) var(--ease-out),
              background-color var(--dur-press) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
.insight:active { transform: scale(0.99); }
.insight__top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.insight__icon {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-3);
}
.insight__effect {
  font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.insight__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); color: var(--ink-3); }
.insight.is-learning { border-style: dashed; opacity: 0.86; }

/* ── Simulator ───────────────────────────────────────────────────────── */
.sim-row { display: flex; flex-direction: column; gap: var(--sp-1); }
.sim-row__head { display: flex; justify-content: space-between; align-items: baseline; }
.sim-row__val { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink); font-variant-numeric: tabular-nums; }
.sim-out {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  text-align: center;
  position: sticky; top: 0; z-index: 3;
}

/* ── Lock screen & push notification ─────────────────────────────────────
   The brief names push as the trigger for the whole daily loop, so it gets a
   real view rather than living only in settings.

   Note the frosted notification card: DESIGN.md bans glassmorphism as a
   DEFAULT surface treatment, but an iOS notification genuinely is a blurred
   glass panel. Reproducing the platform faithfully is the point here. */
.screen--lock {
  background:
    radial-gradient(120% 80% at 50% 8%, oklch(0.30 0.05 113 / .55), transparent 62%),
    linear-gradient(180deg, oklch(0.22 0.02 232), oklch(0.12 0 0));
}
.lock-clock { text-align: center; padding-top: var(--sp-9); }
.lock-clock__t {
  font-family: var(--font-mono);
  font-size: 4.6rem; font-weight: 300;
  letter-spacing: -0.05em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lock-clock__d { font-size: var(--fs-md); color: var(--ink-2); margin-top: var(--sp-2); }

.notif {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  text-align: left; width: 100%;
  cursor: pointer;
  transition: background-color var(--dur-press) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
.notif:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .notif:hover { background: rgba(255,255,255,.18); } }
.notif__icon {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--brand); color: var(--on-brand);
}
.notif__app {
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink-2); text-transform: uppercase;
}
/* Block, not inline — these are <span>s inside a flex column and would
   otherwise run together into one paragraph. */
.notif__title { display: block; font-size: var(--fs-sm); font-weight: 600; margin-top: 1px; }
.notif__body { display: block; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.35; margin-top: 2px; }
.notif > .grow { display: flex; flex-direction: column; min-width: 0; }
.notif__time { font-size: 11px; color: var(--ink-3); margin-left: auto; flex-shrink: 0; }

.lock-hint {
  text-align: center; font-size: var(--fs-xs); color: var(--ink-3);
  padding-bottom: var(--sp-6);
}

/* ── Crisis ──────────────────────────────────────────────────────────── */
.screen--crisis { background: color-mix(in oklab, var(--st-crisis) 18%, var(--canvas)); }
.crisis-mark {
  width: 76px; height: 76px; margin: 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--st-crisis);
  color: var(--on-status);
}

/* ── Report ──────────────────────────────────────────────────────────── */
.report-sheet {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.report-kv { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.report-kv dt { color: var(--ink-3); }
.report-kv dd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ── Streak dots ─────────────────────────────────────────────────────── */
.streak { display: flex; gap: 4px; }
.streak i {
  width: 100%; height: 26px; border-radius: 3px;
  background: var(--surface-3); display: block;
}
.streak i.on { background: var(--brand); }
.streak i.part { background: var(--brand-dim); }

/* ── Responsive: below 600px the frame disappears and the app goes
   full-bleed, so the prototype is genuinely usable on a real phone. ─── */
@media (max-width: 620px) {
  .stage-wrap { padding: 0; display: block; }
  .phone-fit { width: 100%; height: 100%; }
  .phone-fit > .phone { transform: none; }
  .phone {
    width: 100%; height: 100%;
    border-radius: 0; padding: 0; box-shadow: none;
  }
  .phone::before, .phone::after { display: none; }
  .viewport { border-radius: 0; }
  .d-island { display: none; }
  .statusbar { display: none; }
  .appbar { padding-top: var(--sp-5); }
  .home-indicator { display: none; }
  .tabbar { padding-bottom: var(--sp-2); }
  .poc-topbar__tag { display: none; }
}