/* =============================================================================
   HELIO — app.css
   App-interior CSS bundle. Loaded only on app.html, after landing.css.
   Tokens resolved from landing.css (canonical token authority).

   Canonical app bundle preserving the production app rendering.
   Slim this file only after visual parity is confirmed across all views.
   Do not add landing-page or auth-page styles here.
   ============================================================================= */

/* ── app interior ── */
/* =============================================================================
   HELIO — App interior (authenticated shell)
   Canonical source of truth: design-references/helio-v13.html (v-appshell).
   Faithful reconstruction of the prototype interior, token-translated onto the
   production semantic token layer (landing.css). Loaded LAST and ONLY on
   app.html, so it owns the app interior and never affects public pages.

   Token translation (prototype -> production):
     --canvas     -> --bg-page          (page surface)
     --paper      -> --surface-paper
     --sink       -> --surface-sunken
     --muted      -> --surface-tinted
     --ink (text) -> --text-primary
     --ink (CTA)  -> --cta-bg / --cta-text
     --ink2       -> --text-secondary   (CTA hover: --cta-bg-hover)
     --ink3       -> --text-faint
     --line       -> --line
     --line-firm  -> --line-strong
     --ok/-tint/-line -> --ok / --ok-soft / --ok-line
     --warn/-tint/-line -> --notice / --notice-soft / --notice-line
     --a-blue     -> --sage (single canonical accent)
   ============================================================================= */

/* ── APP SHELL — interior, calmer than landing (no atmosphere) ──────────── */
/* Public header is hidden when unlocked, so the shell is full-height.       */
.app-shell {
  display: flex;
  height: 100dvh;         /* viewport-locked; .app-main scrolls internally */
  background: var(--canvas);
}

.app-rail {
  width: 188px;           /* FINAL_SHELL_SPEC §3.2 */
  flex: none;
  padding: 0;
  border-right: 0.5px solid var(--border);
  background: var(--warm);  /* FINAL_SHELL_SPEC §2.1 rail background */
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
}

/* The Today context wrapper carries component bundle card chrome on the shared
   .app-rail-today selector, which double-wraps the two .rail-today boxes
   (card-in-card). Strip the outer chrome; the inner boxes are the surfaces.
   Display is left untouched so the mobile [display:none] hide still wins. */
.app-shell .app-rail-today {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  gap: 0;
}

.rail-brand {
  display: flex;
  align-items: center;
  padding: 15px 18px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text-primary);
  text-decoration: none;
}
.rail-brand .wordmark {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.01em;
  color: #1a1916;
}
[data-theme="dark"] .rail-brand .wordmark { color: #f5f2eb; }

.rail-nav { flex: 1; padding: 8px 0; }
.rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  font-size: 13.5px;
  color: var(--text-secondary);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all .1s;
  /* button reset (prototype used divs; production uses <button> for a11y) */
  width: 100%;
  background: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  text-align: left;
  font-family: inherit;
  text-decoration: none;
}
.rail-item:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 3%, transparent); }
.rail-item[aria-current="page"],
.rail-item.on {
  color: var(--text-primary);
  border-left-color: var(--text-primary);
  background: color-mix(in srgb, var(--text-primary) 3.5%, transparent);
  font-weight: 500;
}
.rail-item .ri-ic { width: 16px; height: 16px; flex: none; color: currentColor; opacity: .7; }

.rail-today {
  margin: 0 12px 8px;
  padding: 10px 12px 11px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-paper) 72%, transparent);
}
.rail-today-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px; }
.rail-today-val { font-size: 13px; font-weight: 500; color: var(--text-primary); }

.rail-log-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 24px);
  margin: 0 12px 12px;
  padding: 9px;
  background: var(--cta-bg);
  color: var(--cta-text);
  border: none;
  border-radius: var(--r-sm);
  font-size: 13.25px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s;
}
.rail-log-btn:hover { background: var(--cta-bg-hover); }

.rail-footer {
  padding: 12px 18px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rail-footer-item {
  font-size: 13px;
  color: var(--text-faint);
  padding: 6px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .1s;
  /* button reset */
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  text-decoration: none;
}
.rail-footer-item:hover { color: var(--text-secondary); }
.rail-footer-item .ri-ic { width: 14px; height: 14px; flex: none; }

/* ── PANEL ──────────────────────────────────────────────────────────────── */
/* Own the box model: component bundle also styles .app-panel (padding 30/56px,
   max-width 960px, display:grid gap 48px). Those leak on top of .panel-head /
   .panel-body, double-indenting content (56+36px) and insetting the otherwise
   full-bleed sticky header rule. Reset so panel-head/panel-body own gutters. */
.app-panel {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
  display: block;
  padding: 0;
  max-width: none;
}

.panel-head {
  padding: 24px 36px 19px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg-page) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}
.panel-head-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 5px; }
.panel-head h2 { font-size: 25px; font-weight: 600; letter-spacing: -.02em; line-height: 1.12; margin-top: 11px; color: var(--text-primary); }
.panel-head .serif { font-size: inherit; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -.01em; color: var(--text-primary); }
.panel-saved { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--text-muted); flex: none; }
.panel-dot { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.panel-body { padding: 34px 36px 68px; }

/* ── TODAY — FINAL_SHELL_SPEC §4 ────────────────────────────────────────── */

/* Today panel: heading sits directly on the canvas. No card/glass/sticky.   */
/* Light: --lav atmosphere fades from top-right into canvas.                  */
/* Dark: flat canvas — gradient competes with content, quiet is preferred.   */
/* Transparent so the page's calm four-stop aurora shows through evenly —      */
/* no extra concentrated lavender blob layered on top (prototype parity §4).   */
.today-section {
  background: transparent;
}

.today-canvas {
  padding: 30px 36px 56px;
  max-width: 840px;
}

/* Eyebrow — DM Mono 10px uppercase, sits directly on atmosphere */
.today-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Heading — 25px 600, mt 11px (FINAL_SHELL_SPEC §1.2) */
.today-heading {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.12;
  margin-top: 11px;
  color: var(--text-primary);
}

/* Serif accent — Instrument Serif italic on heading only */
.today-serif {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: inherit;
  letter-spacing: -.01em;
}

/* Hairline rule below heading — margin-bottom 46px per spec */
.today-hedrule {
  height: 0.5px;
  background: var(--border, var(--line));
  margin-top: 20px;
  margin-bottom: 46px;
}

/* Data point container */
.today-dp { margin-bottom: 30px; }
.today-dp[hidden] { display: none; }
.today-dp-dose { margin-bottom: 30px; }

/* Hairline between the data points / action row and the saved record (§4.1) */
.today-record-divider {
  height: 0.5px;
  background: var(--border, var(--line));
  margin: 32px 0;
}

/* Metalbl — DM Mono 9.5px uppercase eyebrow (FINAL_SHELL_SPEC §1.2) */
.today-metalbl {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}

/* Bignum — primary value 36px (FINAL_SHELL_SPEC §1.2) */
.today-bignum {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: var(--text-primary);
}
/* Secondary value 30px (current dose) */
.today-bignum-secondary { font-size: 30px; }

/* Metasub — 13px secondary text */
.today-metasub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.5;
}
/* Site sub demoted to 14px 500 (no named site — claims boundary §4.3) */
.today-site-sub {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft, var(--text-primary));
  margin-top: 6px;
}

.today-state-card {
  display: grid;
  justify-items: start;
  gap: 16px;
  min-height: 150px;
  margin-bottom: 34px;
}

.today-state-card[hidden] {
  display: none;
}

.today-state-card-subtle {
  min-height: auto;
  margin: -18px 0 24px;
}

.today-state-line {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.5;
}

.today-narrative {
  display: block;
}

.today-narrative[hidden],
.today-narrative-section[hidden] {
  display: none;
}

.today-narrative-section {
  display: grid;
  gap: 6px;
}

.today-narrative-value {
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 560;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.today-narrative-value-primary {
  font-size: 26px;
}

.today-narrative-copy {
  margin: 0;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.today-narrative-copy-primary {
  font-size: 16px;
}

.today-narrative-meta {
  display: grid;
  gap: 24px;
}

/* Quiet footer — hairline + vial line + mono-hint (FINAL_SHELL_SPEC §4.1) */
.today-footer { margin-top: 30px; }
.today-footer-rule {
  height: 0.5px;
  background: var(--border, var(--line));
  margin-bottom: 18px;
}
.today-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.today-footer-vial {
  font-size: 13px;
  color: var(--text-faint);
  line-height: 1.5;
}
.today-mono-hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-ghost, var(--text-faint));
  flex-shrink: 0;
}

/* Legacy dp classes — preserved for any existing views referencing them */
.dp-label { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.dp-value { font-size: clamp(24px, 2.85vw, 34px); font-weight: 560; letter-spacing: -.018em; line-height: 1.16; color: var(--text-primary); }
.dp-sub { font-size: 13px; color: var(--text-secondary); margin-top: 3px; line-height: 1.5; }
.dp-divider { height: 1px; background: var(--line); margin: 25px 0; }

.today-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 27px;
  background: var(--cta-bg);
  color: var(--cta-text);
  border: none;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s, transform .07s;
  min-height: 48px;
}
.today-cta:hover { background: var(--cta-bg-hover); }
.today-cta:active { transform: translateY(1px); }
.today-cta-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  font-size: 13.5px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 13px 12px;
  border: none;
  background: none;
  font-family: inherit;
  border-radius: var(--r-sm);
  transition: color .1s, background .1s;
}
.today-cta-note:hover { color: var(--text-primary); background: var(--surface-tinted); }

.today-vial-note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-faint);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── TODAY RECORD LAYER — contextual record summaries ───────────────────────── */
.today-record-layer {
  margin-top: 32px;
}

.trl-sep {
  height: 1px;
  background: var(--line-faint);
  margin-bottom: 24px;
}

.trl-block {
  margin-bottom: 22px;
}

.trl-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 7px;
}

.trl-body {
  display: grid;
  gap: 4px;
}

.trl-line {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.trl-note {
  font-style: italic;
}

/* ── TODAY READBACK / EDIT — progressive disclosure (§4) ─────────────────── */
/* [hidden] must win over the grid/flex display rules on these containers.    */
.today-readback[hidden],
.today-edit[hidden],
.today-record-readback[hidden],
.today-record-empty[hidden],
.trr-section[hidden] {
  display: none;
}

.today-readback {
  display: block;
}

.today-record-readback {
  display: grid;
  gap: 28px;
}

.trr-section {
  display: grid;
  gap: 10px;
}

.trr-aside {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-faint);
  margin-left: 6px;
}

.trr-hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
}

.trr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.trr-chip {
  font-size: 12.5px;
  color: var(--ok, var(--text-primary));
  background: color-mix(in srgb, var(--ok-soft, var(--ok-tint)) 72%, transparent);
  border: 0.5px solid var(--ok-line, var(--line));
  border-radius: var(--r-sm);
  padding: 6px 11px;
}

.trr-note {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-primary);
  margin: 0;
}

.trr-movement {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.trr-saved {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-faint);
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.trr-saved::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-primary, var(--ok));
  flex: none;
}
.trr-saved:empty { display: none; }

/* Body support "Noted · Protein · Hydration" line (mono, green) */
.trr-noted {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ok, var(--accent-primary));
  margin: 2px 0 0;
}
.trr-noted:empty { display: none; }

/* Today readback food-noise pips read slightly larger than Day Detail (§4.1) */
.today-record-readback .pip-read { gap: 7px; }
.today-record-readback .pip-r { width: 36px; height: 36px; }
.today-record-readback .pip-r.sel {
  outline: 3px solid var(--accent-soft, var(--ok-tint));
  outline-offset: 2px;
}

.trr-empty-line,
.today-record-empty {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 0.5px solid var(--border, var(--line));
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.today-record-empty .trr-empty-line {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Edit surface — the live composer, opened on demand */
.today-edit {
  margin-top: 28px;
}
.today-edit-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 0.5px solid var(--border, var(--line));
}
.today-edit-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-primary);
}
.today-edit-close {
  font-size: 13px;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 6px;
  border-radius: var(--r-sm);
}
.today-edit-close:hover { color: var(--text-primary); background: var(--surface-tinted); }

.shell-note {
  margin-top: 52px;
  max-width: 48em;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.7;
}

/* ── JOURNAL — calm ledger, no charts, no streaks ───────────────────────── */
.journal-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.journal-tools input,
.journal-tools select {
  min-height: 31px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  font: 12.75px var(--font-sans);
  padding: 5px 10px;
}
.journal-tools input { width: 132px; }
.journal-tools select { width: 116px; }
.journal-custom-range { display: flex; gap: 6px; }
.journal-custom-range input { width: 128px; }
.journal-tools input:focus,
.journal-tools select:focus { outline: 2px solid color-mix(in srgb, var(--sage) 22%, transparent); outline-offset: 2px; }
.dose-journal-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.dose-journal-head h2 { white-space: nowrap; }
.dose-list,
.vial-list { list-style: none; margin: 0; padding: 0; }
.app-shell .dose-list {
  margin-top: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.jc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  font-size: 12.75px;
  color: var(--text-secondary);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  background: transparent;
  font-family: inherit;
  transition: all .1s;
}
.jc-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); background: var(--surface-paper); }
.jc-btn.primary { background: var(--cta-bg); color: var(--cta-text); border-color: var(--cta-bg); }
.jc-btn.primary:hover { background: var(--cta-bg-hover); }

.j-ledger { padding-top: 8px; }
.j-month,
.journal-month {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 36px 8px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app-shell .dose-list .journal-month {
  padding: 0 36px 8px;
  border: 0;
}
.j-month + .j-month,
.journal-month + .journal-month,
.j-entry + .j-month,
.j-entry + .journal-month { margin-top: 8px; }
.j-entry {
  display: grid;
  /* Date/time column widened so the full "Wed, Jun 24" + time fit on their
     two lines without clipping or mid-word wrap (PHASE B6). */
  grid-template-columns: 96px 1fr 70px 52px;
  gap: 10px;
  align-items: baseline;
  padding: 11px 36px 12px;
  border-top: 1px solid var(--line);
  transition: background .1s;
  cursor: pointer;
  /* button/list reset */
  width: 100%;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.j-entry:hover { background: color-mix(in srgb, var(--text-primary) 3%, transparent); }
.j-date { font-family: var(--mono); font-size: 11px; color: var(--text-faint); line-height: 1.4; white-space: nowrap; }
.j-site { font-size: 13.75px; font-weight: 520; color: var(--text-primary); }
.j-note { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.j-note.empty { color: var(--text-faint); }
/* Reflection previews use the same readable body font as Movement — no serif italic */
.j-note-reflection { font-size: 13px; color: var(--text-secondary); }
/* Title + badge row */
.j-title-row { display: flex; align-items: center; gap: 8px; }
.j-badge {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 0.5px solid var(--ok-line, var(--ok-border, var(--ok)));
  color: var(--ok);
  border-radius: 3px;
  padding: 2px 5px;
  white-space: nowrap;
}
.j-note-tag { background: var(--notice-soft); color: var(--notice); font-family: var(--mono); font-size: 9px; padding: 1px 6px; border-radius: 10px; margin-left: 4px; }
.j-dose { font-family: var(--mono); font-size: 12px; color: var(--text-secondary); text-align: right; }
.j-chip {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 12px;
  background: var(--ok-soft);
  color: var(--ok);
  white-space: nowrap;
  text-align: right;
  justify-self: end;
}
.j-action { font-size: 12px; color: var(--text-faint); text-align: right; }
.j-row-btn {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-faint);
  font: inherit;
  cursor: pointer;
}
.j-row-btn + .j-row-btn::before {
  content: " / ";
  color: var(--line-strong);
}
.j-row-btn:hover { color: var(--text-secondary); }
.j-load-more {
  padding: 20px 36px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: .06em;
}
.j-load-more a { color: var(--sage); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ── VIAL — one vial at a time ──────────────────────────────────────────── */
.vial-card {
  background: var(--surface-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 15px;
}
.vial-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.vial-name { font-size: 19px; font-weight: 560; letter-spacing: -.012em; color: var(--text-primary); }
.vial-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.vial-head-aside { text-align: right; }
.vial-head-bud { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.vial-head-bud[data-state="warning"] { color: var(--notice); }
.vl-status-value[data-state="warning"] { color: var(--notice); }
.vl-status-value[data-state="closed"] { color: var(--text-muted); }
.vial-head-remain { font-size: 21px; font-weight: 560; letter-spacing: -.016em; color: var(--text-primary); }
.vial-head-source { font-size: 12px; color: var(--text-secondary); }

.vial-timeline-block { margin-bottom: 21px; }
.vial-timeline-label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; }
.vial-timeline { display: flex; align-items: center; position: relative; }
.vt-point { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: none; z-index: 1; }
.vt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.vt-dot.today { background: var(--text-primary); border: 2px solid var(--bg-page); box-shadow: 0 0 0 1px var(--text-primary); }
.vt-dot.discard { background: var(--notice); }
.vt-line { height: 2px; background: var(--line-strong); margin: 0 -1px; align-self: flex-start; margin-top: 4px; opacity: .8; }
.vt-line.elapsed { background: var(--ok); }
.vt-label { font-family: var(--mono); font-size: 10px; color: var(--text-faint); }
.vt-val { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--text-primary); }

.vial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.vial-grid-label { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; }
.vg-row { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vg-row:last-child { border-bottom: none; }
.vg-k { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.vg-v { font-size: 13.25px; color: var(--text-primary); font-weight: 500; text-align: right; }
.vg-note { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.vg-personal { margin-top: 10px; background: var(--surface-sunken); padding: 10px 12px; border-radius: var(--r-xs); font-size: 12px; color: var(--text-secondary); line-height: 1.55; }

.app-notice {
  background: var(--notice-soft);
  border: 1px solid var(--notice-line);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  margin: 17px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.app-notice-ic { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--notice); }
.app-notice p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
.app-notice strong { color: var(--notice); font-weight: 500; }

.vial-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 19px; }
.vial-boundary { font-family: var(--mono); font-size: 11px; color: var(--text-faint); line-height: 1.65; }
.vial-list {
  margin: 16px 0;
  border-top: 1px solid var(--line);
}

.sr-btn {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  cursor: pointer;
  background: transparent;
  font-family: inherit;
  transition: all .1s;
}
.sr-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.sr-btn.ink { background: var(--cta-bg); color: var(--cta-text); border-color: var(--cta-bg); }
.sr-btn.destructive { color: var(--status-error); border-color: color-mix(in srgb, var(--status-error) 45%, transparent); }
.sr-btn.destructive:hover { border-color: var(--status-error); color: var(--status-error); }

/* ── JOURNAL COMPOSER — food noise + body support, no streak ───────────────────── */
.journal-composer-panel-body { max-width: 620px; }
.ci-section { margin-bottom: 28px; }
.ci-section.bordered { border-top: 1px solid var(--line); padding-top: 24px; }
.ci-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 3px; gap: 12px; }
.ci-section h3 { font-size: 14px; font-weight: 560; letter-spacing: -.004em; margin-bottom: 3px; color: var(--text-primary); }
.ci-section p { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 12px; }
.ci-aside { font-family: var(--mono); font-size: 10px; color: var(--text-faint); }
/* Food-noise scale — 5 unlabeled pips, flanked by Quiet/Loud anchors (prototype parity) */
.fn-scale { display: flex; gap: 8px; align-items: center; }
.pip-anchor {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex: none;
  user-select: none;
}
.fn-opt {
  width: 38px;
  height: 38px;
  flex: none;
  padding: 0;
  position: relative;
  text-align: center;
  border: 0.5px solid var(--border-mid, var(--line-strong));
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  color: var(--text-secondary);
  background: none;
  font-family: inherit;
}
.fn-opt-n,                                          /* numbers removed */
.fn-opt-lbl { display: none; }                      /* labels removed — pip-hint carries the word */
.fn-opt:hover { border-color: var(--text-primary); }
.fn-opt[aria-checked="true"] {
  background: var(--ok-soft, var(--ok-tint));
  border: 1.5px solid var(--ok);
}
.fn-opt[aria-checked="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  transform: translate(-50%, -50%);
}
.pip-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-top: 9px;
  min-height: 14px;
}

.ci-note-label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; margin-top: 10px; }
.ci-note-field {
  width: 100%;
  background: var(--surface-sunken);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text-secondary);
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
}

.hab-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hab-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hab2-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--surface-paper);
  box-sizing: border-box;
  min-height: 36px;
}
.hab2-input:focus { outline: none; border-color: var(--line-strong); }
.hab2-input[hidden] { display: none; }
.hab2 {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px;
  cursor: pointer;
  transition: all .12s;
  background: none;
  font-family: inherit;
  text-align: left;
  width: 100%;
  color: var(--text-primary);
}
.hab2:hover { border-color: var(--line-strong); background: var(--surface-paper); }
.hab2.done,
.hab2[aria-pressed="true"] { background: color-mix(in srgb, var(--ok-soft) 72%, transparent); border-color: var(--ok-line); }
.hab2-box {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 4px;
  border: 1.5px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: transparent;
}
.hab2.done .hab2-box,
.hab2[aria-pressed="true"] .hab2-box { background: var(--ok); border-color: var(--ok); color: var(--surface-paper); }
.hab2-name { font-size: 14px; }
.hab2 > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hab2-note { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
.ci-week-note {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--surface-sunken);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.ci-week-row { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ci-week-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px; }
.ci-week-copy { font-size: 13.5px; color: var(--text-secondary); }
.ci-status { font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-top: 12px; }
.journal-composer-actions {
  max-width: 620px;
  padding: 0 36px 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── JOURNAL COMPOSER THREE-STATE MODEL — FINAL_SHELL_SPEC §5 ─────────────────── */

/* State switcher — only one [data-ci-state] visible at a time */
[data-ci-state] { display: block; }

/* Shared hedrule */
.ci-hedrule { height: 0.5px; background: var(--border, var(--line)); margin-top: 20px; }

/* STATE 1: Empty */
.ci-empty-body { max-width: 540px; }
.ci-add-btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  margin-top: 22px;
}

/* STATE 2: Recording form */
.journal-composer-panel-body { max-width: 540px; }
.ci-section { margin-bottom: 24px; }
.ci-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
  gap: 12px;
}
.ci-cglabel { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ci-cgmeta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ci-cgsub { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 14px; }

/* Body support label */
.ci-body-label { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: var(--text-primary); }
.ci-body-opt { font-weight: 400; color: var(--text-faint); }

/* Habit list — vertical, binary toggles, no text inputs (§5.2) */
.ci-hab-list { display: flex; flex-direction: column; gap: 8px; }
.ci-hab {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0.5px solid var(--border-mid, var(--line-strong));
  border-radius: 9px;
  padding: 13px 15px;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color .12s, background .12s;
}
.ci-hab:hover { border-color: var(--text-secondary); }
.ci-hab[aria-pressed="true"],
.ci-hab.done {
  background: var(--ok-soft, var(--ok-tint));
  border-color: var(--ok-line, var(--ok-line));
}
.ci-hab-box {
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 5px;
  border: 1.5px solid var(--border-mid, var(--line-strong));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: transparent;
}
.ci-hab[aria-pressed="true"] .ci-hab-box,
.ci-hab.done .ci-hab-box {
  background: var(--ink, #1a1916);
  border-color: var(--ink, #1a1916);
  color: var(--canvas, #f5f2eb);
}

/* Save button */
.ci-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  margin-top: 20px;
  height: 44px;
}
.journal-composer-actions {
  max-width: 540px;
  padding: 0 36px 36px;
}
.journal-composer-status {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 10px;
  display: block;
}

/* STATE 3: Saved — journal entry, not a database record.                    */
/* Prose sentence + quiet timestamp. No card. No rows. No category labels.   */

.ci-entry {
  max-width: 520px;
}

/* Timestamp row: small green dot + time, no border, no background */
.ci-entry-when {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.ci-saved-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ok, #2a7a55);
  flex: none;
  opacity: 0.8;
}

.ci-entry-time {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--text-secondary);
}

/* Prose: the note in full — reads like a sentence, not a form summary */
.ci-entry-prose {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-primary);
  margin: 0 0 28px;
}

/* Footer row: hint + edit link, no border above */
.ci-entry-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ci-saved-hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
}

.ci-edit-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ci-edit-btn:hover { color: var(--text-primary); }

/* ── SETTINGS — quiet account management ───────────────────────────────── */
.settings-section { border-bottom: 1px solid var(--line); padding: 25px 0; }
.settings-section:first-child { padding-top: 0; }
.settings-section:last-child { border-bottom: none; }
.settings-section h3 { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.settings-row:last-child { border-bottom: none; }
.sr-k { font-size: 13.75px; color: var(--text-primary); }
.sr-k small { font-size: 12px; color: var(--text-faint); }
.sr-v { font-size: 14px; color: var(--text-secondary); text-align: right; display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.sr-v a { color: var(--sage); text-decoration: underline; text-underline-offset: 2px; font-size: 13px; }
.sr-v.mono { font-family: var(--mono); font-size: 12.5px; }
.settings-line { font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 3px; }
.settings-sub { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 12px; }
.settings-note { font-size: 12px; color: var(--text-faint); padding: 6px 0; }
.settings-boundary { font-size: 13.25px; color: var(--text-secondary); line-height: 1.68; }
.settings-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.theme-seg { display: inline-flex; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px; }
.ts-opt {
  flex: 1;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  border-radius: 5px;
  cursor: pointer;
  transition: all .12s;
  text-align: center;
  background: none;
  border: none;
  font-family: inherit;
  white-space: nowrap;
}
.ts-opt.sel,
.ts-opt[aria-pressed="true"] { background: var(--surface-paper); color: var(--text-primary); box-shadow: var(--shadow-sm); }

/* ── RESPONSIVE — rail becomes a bottom tab bar (prototype mobile doctrine) ─ */
@media (max-width: 767px) {
  /* Release the desktop viewport height-lock so the whole document scrolls
     behind the fixed bottom tab bar (see "releases scroll to the document"). */
  .app-shell { flex-direction: column; height: auto; min-height: 100dvh; }
  .app-shell .app-main { overflow-y: visible; }
  .app-rail {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    height: auto;
    flex-direction: row;
    border-right: none;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-page) 94%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    z-index: 100;
    overflow: visible;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .rail-brand,
  .rail-today,
  .app-rail-today,
  .rail-log-btn,
  .rail-footer { display: none; }
  .rail-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0;
    width: 100%;
  }
  .rail-item {
    flex-direction: column;
    gap: 3px;
    padding: 9px 4px;
    font-size: 10px;
    border-left: none;
    border-top: 2px solid transparent;
    justify-content: center;
    text-align: center;
  }
  .rail-item[aria-current="page"],
  .rail-item.on { border-left-color: transparent; border-top-color: var(--text-primary); background: none; }
  .rail-item .ri-ic { width: 18px; height: 18px; }
  /* Inner containers (.panel-head, .panel-body, .today-canvas) own the mobile
     horizontal padding; the panel itself must not re-add the desktop 56px gutter
     (which pushed .today-canvas past the viewport edge). The bottom padding clears
     the fixed tab bar (~58px) plus the iOS home-indicator inset. */
  .app-shell .app-panel { padding: 0 0 calc(72px + env(safe-area-inset-bottom)); }
  .today-canvas { padding-left: 20px; padding-right: 20px; }
  .panel-head { padding: 18px 20px 14px; position: static; }
  .panel-body { padding: 24px 20px 48px; }
  .dose-journal-head h2 { white-space: normal; }
  .j-month,
  .journal-month,
  .app-shell .dose-list .journal-month { padding: 0 20px 8px; }
  .j-entry { padding: 12px 20px; grid-template-columns: 78px 1fr 48px; }
  .j-dose { grid-column: 3; grid-row: 1; text-align: right; }
  .j-action { grid-column: 3; grid-row: 2; text-align: right; }
  .journal-tools { width: 100%; justify-content: flex-start; margin-top: 12px; }
  .journal-tools input,
  .journal-tools select { width: auto; flex: 1 1 130px; }
  .journal-custom-range { width: 100%; }
  .journal-custom-range input { width: 100%; }
  .vial-grid { grid-template-columns: 1fr; }
  .hab-grid2 { grid-template-columns: 1fr; }
  /* Next available site is a desktop/tablet-only third data point (prototype). */
  [data-today-next-site-block] { display: none !important; }

  /* Injection composer reads as a full-width bottom sheet on mobile; its body
     scrolls internally so Save/Cancel stay reachable above the home indicator. */
  .dose-composer-body {
    width: 100%;
    max-height: 90dvh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }
  .dose-composer .dose-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dose-composer .dose-form-wide { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .fn-scale { gap: 6px; }
  .vial-header { flex-direction: column; }
  .vial-head-aside { text-align: left; }
}


/* ── component bundle ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: var(--bg-page);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--text-primary);
  text-decoration: none;
}

.wordmark {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.01em;
  color: #1a1916;
}
[data-theme="dark"] .wordmark { color: #f5f2eb; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-link,
.footer-link {
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color var(--transition-ui);
}

.nav-link:hover,
.footer-link:hover {
  color: var(--text-primary);
}

.nav-link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nav-link[aria-current="page"] {
  color: var(--text-primary);
}

.nav-link[aria-current="page"]::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 0.18rem;
  background: var(--sage);
}

.nav-link:focus-visible,
.footer-link:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

.nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: color var(--transition-ui), border-color var(--transition-ui);
}

.nav-toggle:hover {
  color: var(--text-primary);
  border-color: var(--text-primary);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 54px;
  padding: 0 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  background: var(--surface-tinted);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: var(--transition-surface), transform var(--dur-quick) var(--ease-standard);
}

.theme-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--surface-card);
}

.theme-toggle:active {
  transform: scale(0.96);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--focus-ring);
}

/* reflect active explicit theme state */
html[data-theme="light"] .theme-toggle {
  background: var(--surface-tinted);
  border-color: var(--border-strong);
}

html[data-theme="dark"] .theme-toggle {
  border-color: var(--border-strong);
  background: var(--surface-tinted);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--touch-target);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: 500 14px/1 var(--font-sans);
  letter-spacing: -0.002em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--transition-ui), var(--transition-surface);
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    transform: translateY(-1px);
  }

  .btn:active {
    transform: translateY(0.5px);
  }
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.52;
  pointer-events: none;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--cta-bg);
  color: var(--cta-text);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--cta-bg-hover);
  box-shadow: var(--shadow-md);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-sm), 0 0 0 3px var(--focus-ring);
}

.btn-secondary {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text-primary);
}

.btn-secondary:hover {
  border-color: var(--text-primary);
  background: var(--surface-paper);
}

.btn-secondary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--focus-ring);
}

/* Quiet variant for in-card actions (Edit/Delete on a row, Cancel inline). */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background: var(--surface-tinted);
  color: var(--text-primary);
}

.btn-ghost:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Destructive variant — used only inside an inline confirm prompt, never standalone. */
.btn-destructive {
  background: color-mix(in srgb, var(--status-error) 92%, transparent);
  border-color: transparent;
  color: var(--bg-page);
}

.btn-destructive:hover {
  background: var(--status-error);
}

.btn-destructive:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-error) 35%, transparent);
}

.card {
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-ui), box-shadow var(--transition-ui);
}

.soft-card {
  border: 1px solid var(--sage-border);
  border-radius: var(--r-lg);
  background: var(--accent-soft);
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-xs);
  background: var(--surface-tinted);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.form {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-elev);
  transition: border-color var(--transition-ui), box-shadow var(--transition-ui);
}

.form:focus-within {
  border-color: var(--focus-ring);
  box-shadow: var(--shadow-focus);
}

.form input {
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0.7rem 1.1rem;
  background: transparent;
  color: var(--text-primary);
  align-self: stretch;
}

.form input::placeholder {
  color: var(--text-dim);
}

.form-status {
  grid-column: 1 / -1;
  min-height: 0;
  margin-top: 0;
  color: var(--text-dim);
  font-size: 0.88rem;
}

.form-status:not(:empty) {
  padding: 0.4rem 1.1rem;
}

.form-status[data-state="success"] {
  color: var(--success);
}

.form-status[data-state="error"] {
  color: var(--error);
}

.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border-default);
  padding: 3rem 0 2rem;
}

.footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer-tagline {
  margin-top: 0.35rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
}

.footer-bottom {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-default);
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

/* ── MARQUEE ─────────────────────────────── */

.marquee-wrap {
  background: var(--surface-elev);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  padding: 0.85rem 0;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  animation: marquee 34s linear infinite;
  will-change: transform;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-item {
  display: inline-flex;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.marquee-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sage);
  opacity: 0.45;
  flex-shrink: 0;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

/* ── TRUST ROW ───────────────────────────── */

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.trust-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-primary);
  flex-shrink: 0;
}

/* Hero eyebrow accent line */
.hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-copy .eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--accent-primary);
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .nav { position: relative; }

  /* Canonical mobile nav — hamburger reveals a dropdown of the links.
     nav.js injects the .nav-toggle button and toggles .nav-open. */
  .nav-toggle { display: inline-flex; }

  .nav-links {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px 16px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
    display: none;
  }

  .nav.nav-open .nav-links { display: flex; }

  .nav-links .nav-link {
    display: inline-flex;
    padding: 10px 4px;
    font-size: 15px;
  }

  .nav-links .nav-link[aria-current="page"]::after { display: none; }

  .nav-links .theme-toggle,
  .nav-links .btn {
    width: 100%;
    margin-top: 6px;
  }

  /* App shell rail nav (.app-rail) is unaffected; legacy .app-nav stays inline */
  .app-nav .nav-link {
    display: inline-flex;
    font-size: 12px;
  }

  .form {
    grid-template-columns: 1fr;
    border-radius: var(--r-md);
    padding: 0.5rem;
  }

  .form .btn {
    width: 100%;
  }

  .footer-grid {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .nav {
    min-height: 64px;
  }

  .nav-links {
    gap: 0.75rem;
  }

  .nav-link {
    font-size: 12px;
  }

  .theme-toggle {
    min-width: 48px;
    padding-inline: 0.7rem;
  }
}

/* ── 7-B: PRIMITIVE EXPANSION ────────────────────────────────────────── */

/* Canonical surface primitives shared by landing, account, and app shell. */
.surface-paper,
.paper {
  background: var(--surface-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.surface-elev,
.paper-elev {
  background: var(--surface-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.surface-tinted,
.tinted {
  background: var(--surface-tinted);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.surface-sunken,
.sunken {
  background: var(--surface-sunken);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-md);
}

.h-sans {
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.12;
}

.label-mono {
  color: var(--text-muted);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.display {
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.02;
  font-variation-settings: "opsz" 144;
}

.display em {
  color: var(--text-primary);
  font-style: italic;
  font-weight: 400;
}

/* Canonical kicker — bullet + uppercase mono label */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kicker .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
.kicker.ok .dot { background: var(--ok); }
.kicker.notice .dot { background: var(--notice); }
.kicker.muted .dot { background: var(--text-muted); }

.serif-i {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.hr-faint {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--line-faint);
}

.section-divider {
  border-top: 1px solid var(--line-faint);
}

.panel-head {
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line-faint);
}

.panel-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.editorial-heading {
  margin: var(--s-2) 0 0;
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

.editorial-heading em {
  color: var(--text-primary);
  font-style: italic;
}

.section-lede {
  max-width: 58ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.55;
}

.meta-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.btn-outline {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-primary);
}

.btn-outline:hover {
  border-color: var(--text-primary);
  background: var(--surface-paper);
}

.btn-outline:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn-sm {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.tag.ok {
  border-color: var(--ok-line);
  background: var(--ok-soft);
  color: var(--ok);
}

.tag.notice {
  border-color: var(--notice-line);
  background: var(--notice-soft);
  color: var(--notice);
}

.note {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-paper);
  color: var(--text-secondary);
  font: 13.5px/1.55 var(--font-sans);
}

.note strong {
  color: var(--text-primary);
  font-weight: 500;
}

.note.ok {
  border-color: var(--ok-line);
  background: var(--ok-soft);
  color: var(--text-primary);
}

.note.notice {
  border-color: var(--notice-line);
  background: var(--notice-soft);
  color: var(--text-primary);
}

.note.error {
  border-color: var(--error);
  background: var(--error-soft);
  color: var(--text-primary);
}

/* Card variants */
.card-elev {
  background: var(--surface-elev);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.card-tinted {
  background: var(--surface-tinted);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
}

/* Field / input system */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

:where(.field label) {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--field-height);
  padding: 0 var(--s-4);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-sm);
  font-size: 0.95rem;
  font-family: var(--sans);
  color: var(--text-primary);
  outline: none;
  transition: var(--transition-surface);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-dim);
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--text-primary);
  box-shadow: var(--shadow-focus);
}

.textarea {
  height: auto;
  padding: var(--s-3) var(--s-4);
  min-height: 96px;
  resize: vertical;
  line-height: 1.55;
}

.field.error .input,
.field.error .textarea,
.field.error .select {
  border-color: var(--status-error);
  box-shadow: 0 0 0 3px var(--status-error-soft);
}

.field-error {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--status-error);
}

/* Banner */
.banner {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.banner.quiet {
  background: var(--accent-soft);
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.banner.success {
  background: var(--status-success-soft);
  border-color: var(--status-success);
  color: var(--text-primary);
}

.banner.warn {
  background: var(--status-warning-soft);
  border-color: var(--status-warning);
  color: var(--text-primary);
}

.banner.error {
  background: var(--status-error-soft);
  border-color: var(--status-error);
  color: var(--text-primary);
}

/* Tag variants */
.tag.accent {
  background: var(--accent-soft);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.tag.success {
  background: var(--status-success-soft);
  color: var(--status-success);
  border-color: var(--status-success);
}

.tag.warn {
  background: var(--status-warning-soft);
  color: var(--status-warning);
  border-color: var(--status-warning);
}

.tag.error {
  background: var(--status-error-soft);
  color: var(--status-error);
  border-color: var(--status-error);
}

/* Button variants */
.btn-lg {
  min-height: 52px;
  padding: 0 26px;
  font-size: 15px;
}

.btn-sm {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
}

.btn-block {
  width: 100%;
}

/* Utilities */
.hr {
  height: 1px;
  background: var(--border-default);
  border: 0;
  margin: 0;
}

.tnum {
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums;
}

/* ── 8-A: SKELETON + SPINNER ─────────────────────────────────────────── */

.skel {
  background: linear-gradient(
    90deg,
    var(--bg-page-2) 0%,
    var(--surface-card) 50%,
    var(--bg-page-2) 100%
  );
  background-size: 200% 100%;
  animation: skel-sweep 1.4s var(--ease-standard) infinite;
  border-radius: var(--r-xs);
}

@keyframes skel-sweep {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skel {
    animation: none;
    background: var(--bg-page-2);
  }
}

.spin {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin-rot 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin-rot {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spin {
    animation: none;
    opacity: 0.5;
  }
}

/* Segmented underline tabs */
.seg-line {
  display: inline-flex;
  gap: 24px;
  border-bottom: 1px solid var(--border-default);
}

.seg-line button {
  background: transparent;
  border: 0;
  padding: 14px 0;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--sans);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 1.5px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-ui), border-color var(--transition-ui);
}

.seg-line button.active {
  color: var(--text-primary);
  border-color: var(--text-primary);
}

/* ── 8-CDE: TYPE PRIMITIVES ──────────────────────────────────────────── */

.lede {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  max-width: 56ch;
}

/* font-variation-settings: "opsz" 144 is now canonical in .display directly. */

/* ── 8-G: AUTH LAYOUT + INTRO ───────────────────────────────────────── */

.auth-layout {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 880px) {
  .auth-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
  }
}

.auth-intro {
  max-width: 520px;
  margin: 0 auto;
}

@media (min-width: 880px) {
  .auth-intro {
    margin: 0;
  }
}

.auth-intro .display {
  margin: 0.5rem 0 0.9rem;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  text-wrap: balance;
}

.auth-intro-lede {
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0 0 1.6rem;
  max-width: 42ch;
}

.auth-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.auth-trust li {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface-card) 92%, var(--cream) 8%);
}

.auth-trust-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.auth-trust-note {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.auth-card-heading {
  margin: 0.5rem 0 0.6rem;
  font-family: var(--font-serif, var(--font-sans));
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  text-wrap: balance;
}

/* ── 8-G: AUTH TABS (migrated from inline style) ─────────────────────── */

.auth-tabs {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-1);
  margin: 0 0 var(--s-5);
  background: var(--surface-sunken);
  border: 0;
  border-radius: var(--r-md);
}

.auth-tab {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition-surface);
}

.auth-tab:hover {
  color: var(--text-secondary);
}

.auth-tab[aria-selected="true"] {
  background: var(--surface-paper);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.auth-tab:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.auth-secondary-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.875rem;
  flex-wrap: wrap;
}

.auth-text-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-ui);
}

.auth-text-button:hover {
  color: var(--text-primary);
}

.auth-text-button:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

.auth-provider-stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.auth-provider-button {
  width: 100%;
}

.auth-form-status {
  margin: 0.85rem 0 0;
  min-height: 1.1rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.auth-form-status[data-state="success"] { color: var(--status-success); }
.auth-form-status[data-state="error"]   { color: var(--status-error); }
.auth-form-status[data-state="pending"] { color: var(--text-secondary); }

/* ── 8-F: EMPTY + LOADING STATES ─────────────────────────────────────── */

/* Shared icon glyph used inside empty-state blocks. */
.empty-state-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--sage-border);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 0.65rem;
}

/* Skeleton shape variants — build on existing .skel sweep animation. */
.skel-line {
  height: 12px;
  width: 100%;
}

.skel-line.short  { width: 42%; }
.skel-line.medium { width: 68%; }
.skel-line.tall   { height: 18px; }

.skel-block {
  height: 72px;
  width: 100%;
  border-radius: var(--r-sm);
}

.skel-stack {
  display: grid;
  gap: 10px;
}

/* Loading shell — skeleton shaped like the unlocked dashboard while we fetch. */
.loading-shell {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.1rem, 2.4vw, 1.45rem);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  background: var(--surface-card);
}

.loading-shell-head {
  display: grid;
  gap: 10px;
}

.loading-shell-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 720px) {
  .loading-shell-grid { grid-template-columns: 1fr; }
}

/* Stagger the shimmer phase across loading-shell children so the surface */
/* reads as a composed scene rather than four boxes blinking in lockstep. */
.loading-shell-head .skel { animation-delay: 0ms; }
.loading-shell-head .skel + .skel { animation-delay: 90ms; }
.loading-shell-grid .skel:nth-child(1) { animation-delay: 180ms; }
.loading-shell-grid .skel:nth-child(2) { animation-delay: 270ms; }

/* ── EDITORIAL EMPTY STATE ───────────────────────────────────────────── */
/* A single italic line in serif, surrounded by breathing room. No dashed   */
/* border, no icon-circle. Empty states should feel composed, not vacant.   */

.empty-state {
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
  background: transparent;
  border: 0;
}

.empty-state-line {
  margin: 0 auto;
  max-width: 36ch;
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2vw, 1.1rem);
  line-height: 1.55;
  font-weight: 400;
  text-wrap: balance;
}

/* Inside an empty-state line, italic emphasis is meant to recede, not punctuate. */
.empty-state-line em {
  color: var(--text-dim);
  font-style: italic;
}

/* Calm secondary line under an empty-state heading (e.g. Vial Notes boundary). */
.empty-state-sub {
  margin: 10px auto 0;
  max-width: 44ch;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.65;
  text-wrap: balance;
}

/* ── INLINE CONFIRM PROMPT ───────────────────────────────────────────── */
/* Replaces native window.confirm() at every destructive moment. */

.confirm-prompt {
  display: grid;
  gap: 0.85rem;
  padding: 1rem clamp(1rem, 2vw, 1.25rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-tinted);
  animation: confirm-enter var(--dur-base) var(--ease-out-quart) both;
}

.confirm-prompt-text {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 400;
  text-wrap: balance;
}

.confirm-prompt-text em {
  color: var(--text-secondary);
  font-style: italic;
}

.confirm-prompt-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@keyframes confirm-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .confirm-prompt { animation: none; }
}

/* Quiet pulse used for status text + .status-dot. */
@keyframes status-dot-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 0.5rem;
  vertical-align: middle;
  animation: status-dot-pulse 1.4s var(--ease-standard) infinite;
  opacity: 0.6;
}

/* Reuse the same pulse on async status text without changing JS. */
.auth-status[data-state="pending"]::before,
.dose-status[data-state="pending"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 0.55rem;
  vertical-align: middle;
  animation: status-dot-pulse 1.4s var(--ease-standard) infinite;
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .status-dot,
  .auth-status[data-state="pending"]::before,
  .dose-status[data-state="pending"]::before {
    animation: none;
    opacity: 0.7;
  }
}

/* ── [hidden] ENFORCEMENT ────────────────────────────────────────────── */
/* Author display rules (e.g. display:grid on .app-panel) win over the   */
/* UA-stylesheet [hidden]{display:none} at equal specificity. Force it.  */

[hidden] {
  display: none !important;
}

/* ── APP SHELL LAYOUT ────────────────────────────────────────────────── */
/* ── (dead system removed in PR1; live rail system is above at .app-rail L43) ── */

/* ── MAIN PANEL ──────────────────────────────────────────────────────── */

.app-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-page);
}

.app-panel {
  padding: 30px 56px 56px;
  max-width: 960px;
  display: grid;
  gap: var(--s-5);
}

.app-panel[data-panel="home"] {
  gap: var(--s-7);
}

/* Home panel typography */

.app-panel-lede {
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 58ch;
}

/* ── APP INTERIOR FIDELITY TUNING ────────────────────────────────────── */
/* Scoped convergence: lower app energy without changing behavior hooks. */

.app-shell .btn {
  min-height: 42px;
  padding-inline: 18px;
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.002em;
  transition: var(--transition-surface);
}

@media (prefers-reduced-motion: no-preference) {
  .app-shell .btn:hover,
  .app-shell .btn:active {
    transform: none;
  }
}

.app-shell .btn-primary {
  box-shadow: none;
}

.app-shell .btn-primary:hover {
  box-shadow: none;
}

.app-shell .btn-secondary,
.app-shell .btn-outline {
  border-color: var(--line);
  background: transparent;
  color: var(--text-secondary);
}

.app-shell .btn-secondary:hover,
.app-shell .btn-outline:hover {
  border-color: var(--line-strong);
  background: var(--surface-paper);
  color: var(--text-primary);
}

.app-shell .btn-ghost {
  color: var(--text-muted);
}

.app-shell .btn-ghost:hover {
  background: transparent;
  color: var(--text-primary);
}

.app-shell .btn-lg {
  min-height: 50px;
  padding-inline: 24px;
  font-size: 14px;
}

.app-shell .btn-sm {
  min-height: 32px;
  padding-inline: 12px;
  font-size: 12.5px;
}

.app-shell .panel-head {
  padding-bottom: 22px;
}

.app-shell .editorial-heading {
  margin-top: 7px;
  font-size: 27px;
  line-height: 1.04;
}

.app-shell .section-lede {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
  max-width: 54ch;
}

.app-shell .label-mono,
.app-shell .today-row-label,
.app-shell .dose-item-grid dt,
.app-shell .vial-item-grid dt,
.app-shell .settings-row-state,
.app-shell .dose-form label span,
.app-shell .vial-form label span,
.app-shell .vial-math span {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.105em;
}

.app-shell .today-view {
  max-width: 720px;
}

.app-shell .today-rows {
  gap: 30px;
}

.app-shell .today-row {
  gap: 5px;
}

.app-shell .today-row strong {
  font-size: clamp(1.85rem, 3.1vw, 2.15rem);
  line-height: 1.04;
}

.app-shell .today-row span:last-child {
  color: var(--text-secondary);
  font-size: 14px;
}

.app-shell .today-actions {
  margin-top: 50px;
}

.app-shell .dose-journal,
.app-shell .vial-tracker {
  gap: 22px;
}

.journal-tools {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto auto;
  align-items: end;
  gap: 10px;
}

.journal-tools label {
  display: grid;
  gap: 6px;
  margin: 0;
}

.journal-tools span {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.journal-search input,
.journal-range select,
.journal-custom-range input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line-faint);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface-paper) 78%, transparent);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
}

.journal-custom-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 8px;
}

.app-shell .dose-status,
.app-shell .vial-status {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.app-shell .dose-list,
.app-shell .vial-list {
  border-color: var(--line-faint);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-paper) 64%, transparent);
}

.journal-month {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 9px;
  border-bottom: 1px solid var(--line-faint);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.journal-month:first-child {
  padding-top: 15px;
}

.journal-empty-row {
  padding: 22px 22px;
  color: var(--text-muted);
  font-size: 13px;
}

.app-shell .dose-item,
.app-shell .vial-item {
  padding: 17px 22px;
  gap: 20px;
  border-bottom-color: var(--line-faint);
  transition: background var(--transition-ui);
}

.app-shell .dose-item:hover,
.app-shell .vial-item:hover {
  background: color-mix(in srgb, var(--surface-sunken) 52%, transparent);
  transform: none;
}

.app-shell .dose-item h4,
.app-shell .vial-item h4 {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.001em;
}

.app-shell .dose-item-summary,
.app-shell .vial-item-summary {
  margin-bottom: 8px;
}

.app-shell .dose-item-amount,
.app-shell .vial-item-amount {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.app-shell .dose-item-grid div,
.app-shell .vial-item-grid div {
  border-top-color: var(--line-faint);
}

.app-shell .dose-item-grid dd,
.app-shell .vial-item-grid dd {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.app-shell .dose-item-grid div:first-child dd,
.app-shell .vial-item-grid div:first-child dd {
  color: var(--text-primary);
}

.app-shell .dose-item-actions,
.app-shell .vial-item-actions {
  gap: 6px;
}

.app-shell .dose-item-actions .btn,
.app-shell .vial-item-actions .btn {
  min-height: 30px;
  padding-inline: 10px;
  border-color: transparent;
  color: var(--text-muted);
}

.app-shell .vial-item[data-active="true"] {
  background: color-mix(in srgb, var(--surface-tinted) 58%, transparent);
}

.app-shell .vial-item[data-inactive="true"] {
  opacity: 0.72;
}

.vial-lifecycle {
  display: grid;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--line-faint);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-paper) 68%, transparent);
}

.vial-lifecycle-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.vial-lifecycle-head h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.vial-lifecycle-head p,
.vial-lifecycle-note {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.vial-timeline {
  display: grid;
  gap: 9px;
}

.vial-timeline-track {
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-faint);
}

.vial-timeline-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--text-primary);
}

.vial-timeline-stops {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.vial-timeline-stops span {
  display: grid;
  gap: 4px;
}

.vial-timeline-stops strong {
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.105em;
}

.vial-timeline-stops em {
  color: var(--text-muted);
  font-style: normal;
  text-transform: none;
}

.vial-timeline-stops span:nth-child(2) {
  text-align: center;
}

.vial-timeline-stops span:last-child {
  text-align: right;
}

.button-row.compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.app-shell .vial-math div {
  min-height: 5rem;
  padding: 13px;
  border-color: var(--line-faint);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface-sunken) 74%, transparent);
}

.app-shell .vial-math strong {
  font-size: 13.5px;
  font-weight: 500;
}

.app-interior-surface {
  display: grid;
  gap: 22px;
}

.app-calm-card {
  padding: 24px 26px;
  display: grid;
  gap: 10px;
  border-color: var(--line-faint);
  background: color-mix(in srgb, var(--surface-paper) 70%, transparent);
  box-shadow: none;
}

.app-card-title {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.muted-copy {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.62;
}

.journal-composer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Canonical journal controls: substantial selectable buttons in a grid,
   with the sage affirmation state for the chosen option / met habit
   (matches design-references/components/app-surfaces.jsx). */
.quiet-scale,
.habit-note-list {
  display: grid;
  gap: 8px;
  padding-top: 6px;
}

.quiet-scale {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.habit-note-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quiet-scale button,
.habit-note-list button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: var(--transition-surface);
}

.quiet-scale button[aria-checked="true"],
.habit-note-list button[aria-pressed="true"] {
  border-color: var(--ok-line);
  background: var(--ok-soft);
  color: var(--text-primary);
}

.settings-theme-choices [data-theme-choice][data-active="true"] {
  border-color: color-mix(in srgb, var(--text-primary) 26%, var(--line-faint));
  background: color-mix(in srgb, var(--surface-tinted) 76%, transparent);
  color: var(--text-primary);
}

.journal-composer-form,
.journal-composer-actions {
  display: grid;
  gap: 14px;
}

.journal-composer-note-field {
  display: grid;
  gap: 7px;
}

.journal-composer-note-field span {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.journal-composer-note-field textarea {
  min-height: 92px;
  resize: vertical;
  border: 1px solid var(--line-faint);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface-paper) 76%, transparent);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  padding: 10px 11px;
}

.journal-composer-actions {
  grid-template-columns: auto auto 1fr;
  align-items: center;
}

.journal-composer-status {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.app-empty-soft {
  border-color: var(--line-faint);
  background: color-mix(in srgb, var(--surface-tinted) 74%, transparent);
}

.settings-list {
  padding: 0;
  overflow: hidden;
  border-color: var(--line-faint);
  background: color-mix(in srgb, var(--surface-paper) 68%, transparent);
  box-shadow: none;
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: 17px 22px;
  border-bottom: 1px solid var(--line-faint);
}

.settings-row:last-child {
  border-bottom: 0;
}

.settings-row-label {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.settings-row p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 12.75px;
  line-height: 1.5;
}

.settings-row-state {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.settings-row .btn {
  min-height: 34px;
  padding-inline: 12px;
}

.settings-theme-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

/* Legacy mobile "rail becomes top nav strip" block removed in mobile-tab-bar
   convergence — the canonical fixed bottom tab bar lives in the
   @media (max-width: 860px) block above. */


/* ── page bundle ── */
.hero {
  min-height: clamp(680px, 100dvh, 880px);
  display: flex;
  align-items: center;
  padding: clamp(3rem, 8vw, 6rem) 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.76fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 0.3rem 0.7rem 0.3rem 0.5rem;
  border: 1px solid var(--sage-border);
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
  flex-shrink: 0;
}

.hero-copy .eyebrow {
  margin-bottom: 1.2rem;
}

.hero-lede {
  max-width: 560px;
  margin-bottom: 1.75rem;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.preview-panel {
  position: relative;
  padding: 1.25rem;
  overflow: hidden;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-soft), var(--shadow-card);
}

.preview-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--sage-border) 40%, var(--sage-border) 60%, transparent 95%);
  pointer-events: none;
  z-index: 1;
}

/* ── orientation preview mockup ── */

.preview-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border-default);
}

.preview-title {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.preview-status,
.preview-kicker,
.preview-orientation-list dt {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.preview-home-card {
  padding: clamp(1.1rem, 3vw, 1.45rem);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-card) 88%, var(--cream) 12%);
}

.preview-kicker {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--sage);
}

.preview-home-card h2 {
  max-width: 13ch;
  margin-bottom: 1.15rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 400;
  line-height: 0.98;
  color: var(--text-primary);
}

.preview-orientation-list {
  display: grid;
  gap: 0;
  margin: 0 0 1.25rem;
}

.preview-orientation-list div {
  display: grid;
  grid-template-columns: minmax(6.8rem, 0.62fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--border-default);
}

.preview-orientation-list dd {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.35;
  text-align: right;
}

.preview-primary-action {
  width: 100%;
  pointer-events: none;
}

.section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 1px solid var(--border-default);
}

.section-head {
  max-width: 680px;
  margin-bottom: 3rem;
}

.feature-group + .feature-group {
  margin-top: 1.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.feature-card {
  padding: 2rem;
  transition: border-color var(--transition-ui), box-shadow var(--transition-ui), transform var(--transition-ui);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 0%, rgba(210, 200, 230, 0.12), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
}

.feature-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: no-preference) {
  .feature-card:hover {
    transform: translateY(-2px);
  }
}

.feature-card:hover::before {
  opacity: 1;
}

.note-card {
  padding: 1.35rem;
}

.feature-card p,
.note-card p {
  margin-bottom: 0;
  font-size: 0.95rem;
}

.feature-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--sage-soft);
  border: 1px solid var(--sage-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.feature-list li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sage);
  flex-shrink: 0;
}

.note-card .tag {
  margin-bottom: 1rem;
}

.steps {
  display: grid;
  gap: 0.8rem;
  counter-reset: step;
}

.step-card {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  overflow: hidden;
}

.step-card::before {
  counter-increment: step;
  content: "0" counter(step);
  display: grid;
  place-items: center;
  border-right: 1px solid var(--border-default);
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.step-body {
  padding: 1.15rem 1.25rem;
}

.callout {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.section-elev {
  background: var(--bg-page-2);
}

/* tighter padding for the short boundary section */
.section.section-elev {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.boundary-inner {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
}

.boundary-inner h2 {
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  margin-bottom: 1.1rem;
  text-wrap: balance;
}

.boundary-sub {
  max-width: 480px;
  margin: 0 auto 1.75rem;
  font-size: 0.97rem;
}

.cta {
  padding: clamp(3rem, 6vw, 5.5rem) 0;
}

.cta-card {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
  text-align: left;
  position: relative;
  overflow: hidden;
}

.cta-card h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  margin-bottom: 0.6rem;
  text-wrap: balance;
}

.cta-card::before {
  content: "";
  position: absolute;
  top: -110px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(210, 200, 230, 0.16), transparent 68%);
  pointer-events: none;
}

.cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.cta-eyebrow {
  display: block;
  margin-bottom: 1rem;
}

.cta-sub {
  max-width: 400px;
  margin: 0 0 0;
}

.cta-note {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doc-hero {
  padding: clamp(3.5rem, 8vw, 6rem) 0 3rem;
  border-bottom: 1px solid var(--border-default);
}

.doc-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(2rem, 7vw, 5rem);
  padding: 4rem 0 6rem;
}

.toc {
  position: sticky;
  top: 96px;
  align-self: start;
}

.toc a {
  display: block;
  padding: 0.45rem 0;
  color: var(--text-dim);
  font-size: 0.9rem;
  text-decoration: none;
}

.toc a:hover {
  color: var(--text-primary);
}

.doc-section {
  padding: 0 0 3.2rem;
  margin-bottom: 3.2rem;
  border-bottom: 1px solid var(--border-default);
}

.doc-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.doc-section h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.doc-section p,
.doc-section li {
  max-width: 740px;
  color: var(--text-secondary);
}

.doc-list {
  display: grid;
  gap: 0.8rem;
  padding: 0;
  list-style: none;
}

.doc-list li {
  padding: 1rem;
}

.legal-text {
  max-width: 820px;
}

.legal-text h2 {
  margin-top: 2.4rem;
  font-size: 1.8rem;
}

/* ── ACCOUNT / AUTH ──────────────────────── */

.auth-page {
  min-height: calc(100dvh - 64px);
  padding: 0;
  border-top: 1px solid var(--line-faint);
}

.auth-page > .container {
  width: 100%;
  max-width: none;
  padding: 0;
}

.auth-page .auth-layout {
  display: grid;
  min-height: calc(100dvh - 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}

.auth-intro {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  padding: 64px 56px;
  border-right: 1px solid var(--line-faint);
}

.auth-intro-mark {
  flex: 0 0 auto;
}

.auth-intro .display-heading {
  max-width: 18ch;
  margin: clamp(5.5rem, 11vw, 7.5rem) 0 1rem;
  font-size: 2.25rem;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.auth-intro-lede {
  max-width: 40ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.55;
}

.auth-intro-fine {
  max-width: 44ch;
  margin: auto 0 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.auth-form-region {
  display: flex;
  align-items: center;
  padding: 64px 56px;
}

.auth-card {
  width: 100%;
  max-width: 460px;
  margin: 0;
  padding: var(--s-6);
  border-color: var(--line);
  background: var(--surface-paper);
}

.app-card {
  max-width: 680px;
  margin-top: clamp(1.5rem, 4vw, 3rem);
}

.app-card:has([data-app-unlocked]:not([hidden])) {
  max-width: 1040px;
  padding: clamp(1rem, 2.6vw, 1.4rem);
}

.app-card .auth-status {
  margin-bottom: 0.25rem;
}

.auth-card h1 {
  margin: var(--s-3) 0 var(--s-2);
  font-size: 2rem;
  line-height: 1.02;
  text-wrap: balance;
}

.auth-lede {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 1.5rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.auth-form input {
  width: 100%;
  height: 48px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--surface-elev);
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1;
  font-family: var(--font-sans);
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.auth-form input:focus-visible {
  border-color: var(--text-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.auth-form .btn {
  margin-top: var(--s-1);
  width: 100%;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-faint);
}

.auth-status {
  margin: var(--s-4) 0 0;
  min-height: 1.2rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.auth-status[data-state="success"] { color: var(--status-success); }
.auth-status[data-state="error"]   { color: var(--status-error); }
.auth-status[data-state="pending"] { color: var(--text-secondary); }

.auth-signed-in {
  text-align: center;
}

.auth-signed-in .eyebrow {
  display: inline-block;
  margin-bottom: var(--s-2);
}

.auth-signed-in .auth-email {
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-size: 0.92rem;
  margin: 0 0 var(--s-5);
  word-break: break-all;
}

.auth-help {
  margin: var(--s-5) 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 879px) {
  .auth-page .auth-layout {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .auth-intro {
    min-height: 0;
    padding: 48px 24px 28px;
    border-right: 0;
    border-bottom: 1px solid var(--line-faint);
  }

  .auth-intro .display-heading {
    margin: 3.75rem 0 0.875rem;
    font-size: clamp(2rem, 10vw, 2.5rem);
  }

  .auth-intro-fine {
    margin-top: 2rem;
  }

  .auth-form-region {
    padding: 28px 24px 48px;
  }

  .auth-card {
    max-width: none;
    padding: 28px 24px;
  }
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.app-dashboard {
  display: grid;
  gap: 1.4rem;
  margin-top: 1.6rem;
}

.app-dashboard-head {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: flex-start;
  padding: clamp(1.4rem, 2.8vw, 1.85rem);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-card) 94%, var(--cream) 6%);
}

.app-dashboard-head h2 {
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  line-height: 1.08;
  margin-bottom: 0.35rem;
  text-wrap: balance;
}

.app-dashboard-head .auth-lede {
  max-width: 52ch;
  margin-bottom: 0;
}

.app-pill {
  flex-shrink: 0;
  min-height: 28px;
  padding: 0.32rem 0.65rem;
  border: 1px solid var(--sage-border);
  border-radius: var(--r-xs);
  background: var(--sage-soft);
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.protocol-summary {
  padding: clamp(1.25rem, 2.4vw, 1.6rem);
  border: 1px solid var(--sage-border);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-card) 92%, var(--cream) 8%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.protocol-summary h3 {
  margin-bottom: 0.35rem;
  font-size: 1.15rem;
}

.protocol-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.85rem 0 0;
}

.protocol-summary-grid div {
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg-page-2) 82%, transparent);
}

.protocol-summary-grid dt,
.protocol-form label span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.protocol-summary-grid dd {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums;
}

.protocol-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem;
  padding: clamp(1.25rem, 2.4vw, 1.6rem);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-card) 94%, transparent);
}

.protocol-form label:first-child,
.protocol-form label[data-protocol-custom-wrap]:not([hidden]),
.protocol-form .protocol-help,
.protocol-form .button-row {
  grid-column: 1 / -1;
}

.protocol-form input,
.protocol-form select {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--bg-page-2);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: var(--font-sans);
  outline: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease, background 150ms ease;
}

.protocol-form input:focus-visible,
.protocol-form select:focus-visible {
  border-color: var(--text-primary);
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.protocol-form input:disabled,
.protocol-form select:disabled {
  opacity: 0.72;
}

.protocol-help {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.86rem;
}

/* ── TODAY ORIENTATION ──────────────────────────────────────────────── */

.today-view {
  max-width: 760px;
}

.today-rows {
  display: grid;
  gap: 32px;
}

.today-row {
  display: grid;
  gap: 6px;
}

.today-row-label {
  margin-bottom: 4px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.today-row strong {
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

.today-row span:last-child {
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.45;
}

.today-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 56px;
}

.protocol-form .button-row {
  margin-top: 0.2rem;
}

.dose-journal,
.vial-tracker {
  display: grid;
  gap: 24px;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.dose-item h4,
.vial-item h4 {
  margin-bottom: 0.35rem;
  font-size: 1.15rem;
}

.dose-item h4 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.003em;
  line-height: 1.25;
}

.dose-status,
.vial-status {
  min-height: 1.1rem;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-paper);
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.55;
}

.dose-status:empty,
.vial-status:empty {
  display: none;
}

.dose-status[data-state="success"],
.vial-status[data-state="success"] {
  border-color: color-mix(in srgb, var(--status-success) 32%, transparent);
  background: color-mix(in srgb, var(--status-success) 10%, transparent);
  color: var(--status-success);
}

.dose-status[data-state="error"],
.vial-status[data-state="error"] {
  border-color: color-mix(in srgb, var(--status-error) 32%, transparent);
  background: color-mix(in srgb, var(--status-error) 10%, transparent);
  color: var(--status-error);
}

.dose-status[data-state="pending"],
.vial-status[data-state="pending"] {
  border-color: var(--border-default);
  background: color-mix(in srgb, var(--bg-page-2) 78%, transparent);
  color: var(--text-secondary);
}

.dose-journal .empty-state,
.vial-tracker .empty-state {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding-top: clamp(1.45rem, 4vw, 2.35rem);
  padding-bottom: clamp(1.45rem, 4vw, 2.35rem);
}

.dose-loading-list,
.vial-loading-list {
  display: grid;
  gap: 0.8rem;
}

.dose-form,
.vial-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.dose-form label span,
.vial-form label span,
.vial-math span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dose-form input,
.dose-form textarea,
.vial-form input,
.vial-form select,
.vial-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 0.875rem;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--surface-elev);
  color: var(--text-primary);
  font-size: 1rem;
  font-family: var(--font-sans);
  outline: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease, background 150ms ease;
}

.dose-form input[type="number"],
.dose-form input[type="datetime-local"],
.vial-form input[type="number"],
.vial-form input[type="date"],
.protocol-form input[type="number"] {
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums;
}

.dose-form textarea,
.vial-form textarea {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  line-height: 1.55;
  resize: vertical;
}

.dose-form input:focus-visible,
.dose-form textarea:focus-visible,
.vial-form input:focus-visible,
.vial-form select:focus-visible,
.vial-form textarea:focus-visible {
  border-color: var(--text-primary);
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.dose-form input:disabled,
.dose-form textarea:disabled,
.vial-form input:disabled,
.vial-form select:disabled,
.vial-form textarea:disabled {
  opacity: 0.72;
}

.dose-form-wide,
.vial-form-wide,
.dose-form .protocol-help,
.vial-form .protocol-help,
.vial-math,
.dose-form .button-row,
.vial-form .button-row {
  grid-column: 1 / -1;
}

.dose-form .button-row,
.vial-form .button-row {
  margin-top: 0.2rem;
}

.dose-list,
.vial-list {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-paper);
  overflow: hidden;
}

.dose-item,
.vial-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: start;
  padding: 16px 22px;
  border: 0;
  border-bottom: 1px solid var(--line-faint);
  border-radius: 0;
  background: transparent;
  transition: border-color var(--transition-ui), background var(--transition-ui), transform var(--transition-ui);
}

.dose-item:last-child,
.vial-item:last-child {
  border-bottom: 0;
}

.dose-item:hover,
.vial-item:hover {
  border-color: var(--line-faint);
  background: var(--surface-sunken);
}

@media (prefers-reduced-motion: no-preference) {
  .dose-item:hover,
  .vial-item:hover {
    transform: translateY(-1px);
  }
}

.dose-item-grid,
.vial-item-grid {
  display: grid;
  gap: 0;
  margin: 0;
}

.dose-item-summary,
.vial-item-summary {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.dose-item-summary {
  margin-bottom: 10px;
}

.dose-item-amount,
.vial-item-amount {
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.vial-item h4 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.003em;
  line-height: 1.25;
}

.vial-item-grid div {
  display: grid;
  grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
  column-gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line-faint);
}

.dose-item-grid dt,
.vial-item-grid dt {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dose-item-grid dt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dose-item-grid dd,
.vial-item-grid dd {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.875rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.dose-item-grid dd {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.dose-item-grid div:first-child dd {
  color: var(--text-primary);
  font-size: 14.5px;
}

.dose-item-actions,
.vial-item-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.dose-item-actions .btn,
.vial-item-actions .btn {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.vial-math {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.vial-math div {
  min-height: 5.5rem;
  padding: 0.875rem;
  border: 1px solid var(--line-faint);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}

.vial-math strong {
  display: block;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ── PROTOCOL STRIP ── */

.protocol-strip {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-paper);
  overflow: hidden;
}

.protocol-strip:has([data-protocol-summary]:not([hidden])) {
  display: none;
}

.protocol-strip .empty-state {
  padding: clamp(1.25rem, 2.2vw, 1.5rem) clamp(1.25rem, 2.4vw, 1.6rem);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.protocol-strip .empty-state-line {
  max-width: 52ch;
  text-align: left;
  margin: 0;
}

.protocol-strip-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 24px;
  flex-wrap: wrap;
}

.protocol-strip-content {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1;
}

.protocol-strip-label {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
}

.protocol-strip-dl {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  flex-wrap: wrap;
}

.protocol-strip-dl div {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.protocol-strip-dl dt {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.105em;
  text-transform: uppercase;
  white-space: nowrap;
}

.protocol-strip-dl dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums;
}

/* ── COLLAPSIBLE PANELS ── */

.protocol-panel,
.dose-composer,
.vial-composer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-deliberate) var(--ease-out-quart);
  overflow: hidden;
}

.protocol-panel-body,
.dose-composer-body,
.vial-composer-body {
  min-height: 0;
}

.protocol-panel[data-open],
.dose-composer[data-open],
.vial-composer[data-open] {
  grid-template-rows: 1fr;
}

.vial-composer-body .vial-form {
  padding-top: 0.2rem;
  padding-bottom: 0.6rem;
}

/* ── INJECTION COMPOSER — prototype modal/sheet ──────────────────────────────
   Overrides the inline collapsible behaviour above. The composer is a fixed
   overlay: a dimmed scrim with a rounded panel anchored to the lower-right on
   desktop and a full-width bottom sheet on mobile. */
.dose-composer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  grid-template-rows: none;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0;
  overflow: visible;
  background: rgba(26, 25, 22, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms var(--ease-out-quart), visibility 0s linear 180ms;
}
.dose-composer[data-open] {
  grid-template-rows: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 180ms var(--ease-out-quart);
}
.dose-composer-body {
  width: 440px;
  max-width: 100%;
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface-elev, var(--bg-card));
  border: 0.5px solid var(--border-default, var(--line));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 22px 26px 28px;
  box-shadow: var(--sh-lg);
  transform: translateY(18px);
  transition: transform 220ms var(--ease-out-quart);
}
.dose-composer[data-open] .dose-composer-body {
  transform: translateY(0);
}

/* Composer header — title + close X (matches prototype) */
.composer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.composer-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.composer-close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--r-sm);
  color: var(--text-faint);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.composer-close:hover { background: var(--surface-tinted, var(--line-faint)); color: var(--text-primary); }
.composer-close svg { width: 16px; height: 16px; }

/* The composer's action row is internal — neutralise the global unlocked-shell
   button-row treatment so it reads as part of the sheet, not a page footer. */
.dose-composer .button-row {
  margin-top: 18px;
  padding-top: 0;
  border-top: none;
  justify-content: flex-start;
}

[data-app-unlocked]:not([hidden]) > .button-row {
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-default);
}

@media (max-width: 920px) {
  .hero-grid,
  .doc-layout {
    grid-template-columns: 1fr;
  }

  .cta-inner {
    grid-template-columns: 1fr;
  }

  .cta-card {
    text-align: center;
  }

  .cta-sub {
    margin: 0 auto;
  }

  .toc {
    display: none;
  }

  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .button-row .btn {
    width: 100%;
  }

  .app-dashboard-head,
  .protocol-summary-grid,
  .protocol-form {
    grid-template-columns: 1fr;
  }

  .app-dashboard-head {
    display: grid;
  }

  .app-card {
    margin-top: 1rem;
  }

  .dose-form,
  .vial-form,
  .dose-item,
  .vial-item,
  .dose-item-grid,
  .vial-item-grid,
  .vial-math {
    grid-template-columns: 1fr;
  }

  .vial-item-grid div {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  .dose-item-actions,
  .vial-item-actions {
    justify-content: stretch;
  }

  .dose-item-actions .btn,
  .vial-item-actions .btn {
    flex: 1 1 9rem;
  }

  .protocol-strip .empty-state {
    flex-direction: column;
    align-items: flex-start;
  }

  .protocol-strip-meta,
  .protocol-strip-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .dose-journal-head,
  .vial-tracker-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ── 6L-C: AURORA BACKGROUND — canonical atmospheric system ──────────────
   Single source of truth (no duplicated --aurora tokens). Four-stop radial
   diffusion per design-references/styles.css. Literal rgba (no color-mix)
   so every browser renders the falloff. Default = dark (matches :root dark
   base); light overrides for explicit-light and auto + prefers-light.
     Light: lavender bloom · cool mist · rose warmth · warm clay grounding
     Dark:  deep violet · cool slate · warm undertone · deep clay anchor
   Environmental, not graphic — present but never a visible design object.
   ─────────────────────────────────────────────────────────────────────── */

body.aurora-page {
  min-height: 100dvh;
  background:
    radial-gradient(72% 58% at 88% 0%,
      rgba(52, 42, 80, 0.55) 0%, rgba(38, 32, 60, 0.18) 45%, transparent 70%),
    radial-gradient(58% 48% at 0% 22%,
      rgba(22, 38, 58, 0.45) 0%, rgba(18, 30, 46, 0.12) 50%, transparent 72%),
    radial-gradient(44% 38% at 72% 44%,
      rgba(38, 28, 20, 0.22) 0%, transparent 65%),
    radial-gradient(80% 52% at 38% 108%,
      rgba(30, 22, 14, 0.30) 0%, transparent 65%),
    var(--bg);
  background-attachment: fixed;
  transition: background 0.32s ease;
}

html[data-theme="light"] body.aurora-page {
  background:
    radial-gradient(72% 58% at 88% 0%,
      rgba(210, 200, 230, 0.42) 0%, rgba(210, 200, 230, 0.14) 45%, transparent 70%),
    radial-gradient(58% 48% at 0% 22%,
      rgba(190, 212, 228, 0.28) 0%, rgba(190, 212, 228, 0.08) 50%, transparent 72%),
    radial-gradient(44% 38% at 72% 44%,
      rgba(226, 206, 196, 0.18) 0%, transparent 65%),
    radial-gradient(80% 52% at 38% 108%,
      rgba(224, 200, 168, 0.26) 0%, rgba(224, 200, 168, 0.08) 50%, transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

/* Dark mode app shell: flat warm charcoal canvas. No gradient.               */
/* Atmosphere competes with content at night. Quiet canvas preferred.        */
html[data-theme="dark"] body.aurora-page {
  background: var(--bg);
}

/* Light aurora retained for explicit light and auto+light-preference */
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] body.aurora-page {
    background:
      radial-gradient(72% 58% at 88% 0%,
        rgba(210, 200, 230, 0.42) 0%, rgba(210, 200, 230, 0.14) 45%, transparent 70%),
      radial-gradient(58% 48% at 0% 22%,
        rgba(190, 212, 228, 0.28) 0%, rgba(190, 212, 228, 0.08) 50%, transparent 72%),
      radial-gradient(44% 38% at 72% 44%,
        rgba(226, 206, 196, 0.18) 0%, transparent 65%),
      radial-gradient(80% 52% at 38% 108%,
        rgba(224, 200, 168, 0.26) 0%, rgba(224, 200, 168, 0.08) 50%, transparent 70%),
      var(--bg);
    background-attachment: fixed;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.aurora-page {
    background: var(--bg);
  }
}

/* ── 6L-C: TYPE PRIMITIVES ───────────────────────────────────────────── */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.kicker.accent {
  color: var(--sage);
}

.kicker .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.kicker.ok .dot {
  background: var(--ok);
}

.kicker.notice .dot {
  background: var(--notice);
}

.kicker.muted .dot {
  background: var(--text-muted);
}

.display-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--text-primary);
  margin: 0.45rem 0 0.9rem;
}

.display-heading em {
  font-style: italic;
  color: var(--text-primary);
}

/* ── 6L-C: ICON CIRCLES (lock / success) ────────────────────────────── */

.icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto 1.25rem;
  flex-shrink: 0;
}

.icon-circle.lock {
  width: 72px;
  height: 72px;
  background: var(--surface-sunken);
  border: 1px solid var(--line-strong);
  color: var(--text-secondary);
}

.icon-circle.success-icon {
  width: 88px;
  height: 88px;
  background: color-mix(in srgb, var(--status-success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-success) 35%, transparent);
  color: var(--status-success);
  margin-bottom: 1.5rem;
}

/* ── 6L-C: LOCKED GATE STATE ─────────────────────────────────────────── */

/* Gate card (loading + locked) is a single centred card, matching the
   canonical locked screen. Scoped to the auth gate so the unlocked
   app-shell layout is untouched. */
main[data-auth-section] .auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 3rem) 1.5rem;
}

main[data-auth-section] .auth-page > .container {
  display: flex;
  justify-content: center;
  width: 100%;
}

main[data-auth-section] .app-card {
  width: 100%;
  max-width: 440px;
  margin: 0;
}

/* In the locked state the card shows only the lock content — the shared
   "App access / Helio" header belongs to the loading state. */
.app-card:has([data-app-locked]:not([hidden])) > .kicker,
.app-card:has([data-app-locked]:not([hidden])) > h1 {
  display: none;
}

[data-app-locked]:not([hidden]) {
  text-align: center;
  padding-top: 0.5rem;
}

.locked-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.locked-reassurance {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 0.75rem;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ── 6L-C: SUCCESS PAGE ──────────────────────────────────────────────── */

.success-page .auth-card {
  text-align: center;
}

.success-page .button-row {
  justify-content: center;
}

/* ── 6L-C: FADE-UP ENTRY ─────────────────────────────────────────────── */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.fade-up {
  animation: fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ── FINAL REFINEMENT SPRINT OVERRIDES ─────────────────────────────────
   Surgical hierarchy/copy alignment for launch readiness. Keep these
   scoped to the app shell so public marketing surfaces remain unchanged. */

.app-shell .panel-saved {
  color: var(--text-muted);
  background: transparent;
}

.app-shell .panel-dot {
  display: none;
}

.today-actions-row {
  margin-top: 32px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.journal-tools {
  grid-template-columns: minmax(180px, 240px) auto;
  align-items: center;
}

.app-shell .dose-list {
  display: block;
  margin-top: 16px;
  padding: 0 0 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.app-shell .dose-list .journal-month {
  margin: 24px 0 12px;
  padding: 0;
  border: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.app-shell .dose-list .journal-month:first-child {
  margin-top: 0;
}

/* Flat journal rows — hairline dividers, no card fill (prototype). Hover lifts
   a quiet warm wash, matching the V3 reference. */
.app-shell .dose-list .j-entry {
  margin: 0;
  padding: 15px 0;
  border: 0;
  border-bottom: 0.5px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.app-shell .dose-list .j-entry:hover {
  background: var(--warm, color-mix(in srgb, var(--text-primary) 3%, transparent));
  margin: 0 -12px;
  padding: 15px 12px;
  border-radius: var(--r-sm);
}
.app-shell .dose-list .j-entry:last-child {
  border-bottom: 0;
}
.app-shell .dose-list .j-entry + .j-entry {
  margin-top: 0;
}

.app-shell .dose-list .journal-empty-row {
  padding: 18px 0;
  color: var(--text-muted);
}

.journal-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* PHASE A3 — the date-range control isn't in the prototype header; keep the
   behaviour but tuck it into a quiet, secondary mono treatment so search stays
   the primary filter affordance. */
.journal-filter-row .journal-range select,
.journal-filter-row .journal-custom-range input {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--label-ink, var(--text-faint));
  font: 11.5px var(--mono);
  letter-spacing: .02em;
  padding: 4px 8px;
}

.journal-filter-row .journal-custom-range {
  display: flex;
  gap: 8px;
}

.app-shell .dose-status[data-state="success"],
.app-shell .vial-status[data-state="success"],
.journal-composer-status {
  color: var(--text-muted);
  border-color: transparent;
  background: transparent;
}

.hab-grid2 {
  grid-template-columns: 1fr;
}

.journal-composer-actions {
  grid-template-columns: auto 1fr;
  column-gap: 32px;
  row-gap: 12px;
}

.journal-composer-actions .journal-composer-status {
  grid-column: 1 / -1;
}

.export-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px 0 18px;
}

.export-choice .btn {
  min-height: 44px;
}

.vial-lifecycle-summary {
  display: grid;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-sunken) 72%, transparent);
  border: 1px solid var(--line-faint);
}

.vl-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-faint);
}

.vl-progress {
  height: 100%;
  border-radius: inherit;
  background: var(--text-primary);
}

.vl-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.vl-item {
  display: grid;
  gap: 5px;
}

.vl-label,
.vl-status-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Opened and Beyond-use are reference dates — secondary weight */
.vl-value {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

/* Today column is the temporal anchor — primary weight */
.vl-details .vl-item:nth-child(2) .vl-value {
  color: var(--text-primary);
  font-weight: 560;
}

.vl-status-value {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.vl-status {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line-faint);
}

.subscription-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--line-faint);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-sunken) 72%, transparent);
}

.subscription-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.subscription-status {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.subscription-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.subscription-card-grid div {
  display: grid;
  gap: 4px;
}

.subscription-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.subscription-card-grid strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.subscription-card-actions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}

.subscription-card-actions .subscription-portal-link {
  font-size: 13px;
  color: var(--text-secondary, inherit);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.subscription-card-actions .subscription-portal-link:hover,
.subscription-card-actions .subscription-portal-link:focus-visible {
  text-decoration: underline;
  color: var(--text-primary);
}

.subscription-card-actions .subscription-portal-link:disabled {
  opacity: 0.5;
  cursor: default;
  text-decoration: none;
}

.subscription-portal-error {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
}

@media (max-width: 720px) {
  .journal-tools {
    grid-template-columns: 1fr;
  }

  .journal-filter-row,
  .journal-filter-row .journal-range,
  .journal-filter-row .journal-custom-range,
  .journal-filter-row .journal-custom-range label {
    width: 100%;
  }

  .journal-filter-row .journal-custom-range {
    flex-direction: column;
  }

  .app-shell .dose-list {
    padding: 0 0 32px;
  }

  .app-shell .dose-list .j-entry {
    padding: 12px;
  }

  .vl-details,
  .subscription-card-grid {
    grid-template-columns: 1fr;
  }

  .vl-item {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
  }

  .today-actions-row,
  .journal-composer-actions,
  .export-choice {
    grid-template-columns: 1fr;
    display: grid;
  }

  .today-cta,
  .today-cta-note {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }
}

/* ─── DAY DETAIL ─────────────────────────────────────────────────────────────
   Read-only readback of one journal day. Sub-view of Journal, opened via a
   row "View" button. Ported from the V3 prototype (design-references/active). */
.day-detail-title {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--text-primary);
}
.day-detail-title em { font-family: var(--serif); font-weight: 400; font-style: italic; }

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 24px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 140ms ease;
}
.back-btn:hover { color: var(--text-primary); }
.back-btn svg { width: 14px; height: 14px; }

.detail-section {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 0.5px solid var(--border-default, var(--line));
}
.detail-section.detail-section-last { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.detail-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 12px;
}

.detail-injection {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--border-default, var(--line));
}
.detail-injection:last-of-type { border-bottom: none; }
.inj-time { font-family: var(--mono); font-size: 11px; color: var(--text-faint); width: 80px; flex: none; }
.inj-info { flex: 1; font-size: 14px; color: var(--text-primary); }
.inj-dose { font-size: 14px; font-weight: 500; }
.inj-note { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

.detail-fn-window { margin-bottom: 14px; }
.detail-fn-window:last-child { margin-bottom: 0; }
.detail-fn-lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.pip-read { display: flex; gap: 6px; }
.pip-r { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-default, var(--line)); background: none; }
.pip-r.sel { background: var(--accent-soft, var(--ok-tint)); border-color: var(--accent-primary, var(--ok)); }
.detail-fn-word { font-size: 12px; color: var(--text-faint); margin-top: 6px; }

.detail-nutr-list { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-nutr-item {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--surface-tinted, var(--muted));
  border: 0.5px solid var(--border-default, var(--line));
  border-radius: var(--r-sm);
  padding: 4px 10px;
}

.detail-note { font-size: 15px; line-height: 1.65; color: var(--text-primary); }

/* =============================================================================
   FINALIZATION PASS — PHASE A/B/C
   Loaded LAST so these intentional convergence rules win the cascade.
   ============================================================================= */

/* ── PHASE B5 — eyebrow / structural-label legibility ──────────────────────
   The mono eyebrows and section labels used --text-faint (#8A8782), which reads
   thin on the warm page (#F5F3EE). --label-ink nudges them darker toward
   --text-secondary without going loud — uppercase mono tracking is preserved. */
:root { --label-ink: #565350; }
html[data-theme="dark"] { --label-ink: #C4BDB4; }

.panel-head-eyebrow,
.today-eyebrow,
.today-metalbl,
.dp-label,
.settings-section h3,
.vial-grid-label,
.vg-k,
.vial-timeline-label,
.vt-label,
.vial-head-bud,
.detail-label,
.detail-fn-lbl,
.ci-note-label,
.ci-week-lbl,
.rail-today-lbl,
.j-month,
.journal-month,
.trr-aside,
.ci-aside { color: var(--label-ink); }

/* ── PHASE A1 — mobile top header ──────────────────────────────────────────
   Part of the final mobile app shell (prototype .top-chrome): Helio serif
   wordmark left, quiet settings icon-button right. Desktop keeps the rail and
   never shows this bar. */
.app-topbar { display: none; }
.app-shell .app-topbar { display: none; }

@media (max-width: 767px) {
  .app-shell .app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-page) 94%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    position: sticky;
    top: 0;
    z-index: 60;
  }
  .app-topbar-word {
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--text-primary);
  }
  .app-topbar-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface-paper);
    color: var(--text-secondary);
  }
  .app-topbar-btn:hover { color: var(--text-primary); border-color: var(--line-strong, var(--line)); }
  .app-topbar-btn svg { width: 16px; height: 16px; }
}

/* ── PHASE C — first-run onboarding + empty-state convergence ──────────────── */
.onboarding {
  max-width: 560px;
  margin: 0 auto;
}
.onboarding-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--label-ink);
  margin-bottom: 8px;
}
.onboarding-title {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.onboarding-title .serif {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}
.onboarding-lede {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 14px 0 0;
  max-width: 46ch;
}
.onboarding-records {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.onboarding-records li {
  font-size: 13.5px;
  color: var(--text-secondary);
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 10px;
}
.onboarding-records li:last-child { border-bottom: none; }
.onboarding-records .ob-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--label-ink);
  flex: none;
  width: 96px;
  padding-top: 2px;
}
.onboarding-boundary {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
  background: var(--surface-tinted, var(--muted));
  border-radius: var(--r-md, 10px);
  padding: 14px 16px;
  margin-top: 20px;
}
.onboarding-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.onboarding-hr { height: 1px; background: var(--line); margin: 24px 0; }

/* Calm "what Helio records" line for the no-protocol Today state. */
.today-empty-sub {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 10px 0 0;
  max-width: 46ch;
}
.today-empty-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}

@media (max-width: 767px) {
  .onboarding { max-width: 100%; }
  .onboarding-title { font-size: 22px; }
  .onboarding-records .ob-k { width: 84px; }
}
.detail-movement { font-size: 14px; line-height: 1.65; color: var(--text-secondary); }
.empty-note { font-size: 13px; color: var(--text-faint); font-style: italic; }

/* ── FIX 4: Today edit — reflection/movement note fields use borderless underline style */
.journal-composer-note-field textarea {
  border: none;
  border-bottom: 1.5px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 8px 0 10px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  resize: none;
  min-height: 72px;
  outline: none;
  box-shadow: none;
}
.journal-composer-note-field textarea:focus {
  border-bottom-color: var(--text-secondary);
  outline: none;
  box-shadow: none;
}
.journal-composer-note-field textarea::placeholder {
  color: var(--text-faint);
}

/* ── FIX 5: Mobile Journal header — demote range select; Log injection not dominant */
@media (max-width: 767px) {
  /* Hide the date-range select on mobile; search stays; the range context is
     low-value on mobile and clutters the quiet header (Fix 5). */
  .journal-filter-row { display: none; }

  /* Log injection button: inline auto-width, not full-width stretch */
  .app-shell [data-dose-section] .journal-tools .jc-btn.primary {
    width: auto;
    flex: none;
  }
  .app-shell [data-dose-section] .journal-tools {
    justify-content: flex-start;
    gap: 8px;
  }
}

/* ── FIX 3: Quiet the date-range filter row when journal is truly empty.
   Log injection button stays interactive so users can still log. */
[data-dose-section][data-journal-truly-empty] .journal-filter-row {
  opacity: 0.38;
  pointer-events: none;
  user-select: none;
}

/* ── FINAL POLISH: Mobile containment ─────────────────────────────────────────
   Ensures Journal rows, Day Detail, and Vial Notes stay within safe horizontal
   bounds at 390px and 430px. Desktop layout is unchanged. */

/* Mobile Journal — body column must not overflow its 1fr grid track */
@media (max-width: 767px) {
  .j-entry > div:nth-child(2) {
    min-width: 0;
    overflow: hidden;
  }
  /* j-date column: clamp to column, never expand the row */
  .j-date {
    min-width: 0;
    overflow: hidden;
  }
}

/* Mobile Day Detail — the panel uses no panel-head/panel-body wrapper,
   so horizontal padding must be set on the panel itself. */
@media (max-width: 767px) {
  .app-shell .app-panel.day-detail {
    padding: 20px 20px calc(72px + env(safe-area-inset-bottom));
  }
  .day-detail .back-btn { margin-left: 0; }
}

/* Mobile Vial Notes — the vial card, action buttons, and boundary copy are
   rendered into [data-vial-lifecycle] which sits outside .panel-body, so
   it inherits no horizontal padding from the app-panel reset. Add here. */
@media (max-width: 767px) {
  [data-vial-lifecycle] {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* vial-actions wraps cleanly within the padded container */
  .vial-actions { flex-wrap: wrap; }
  .vial-boundary { padding-left: 20px; padding-right: 20px; }
}