/* ═══════════════════════════════════════════
   Baseline — n-of-1 variable isolation
   ═══════════════════════════════════════════ */

:root {
  --bg:#efe9dd; --card:#fffdf8; --card2:#f6f1e6; --line:#e3ddcf; --line2:#ece5d7;
  --topbar:#F6F2E7;   /* warm cream — status bar + header read as one surface */
  --tx:#1a1d24; --tx2:#667085; --tx3:#98a2b3;
  /* Separator between CARDS/SECTIONS (the .divider rule, hub-spoke section
     breaks). Deliberately stronger than --line/--line2, which stay hairline
     for rows INSIDE a card. Derived from --tx so all three themes track it. */
  --sep:color-mix(in srgb,var(--tx) 24%,transparent);
  --accent:#0e7f74; --accent-dim:#0e7f741f;
  /* Selection system — terracotta, split from --warn (which stays caution-only).
     Every "selected / active" state: seg pickers, chips, tags, era pills, metric
     pills, active tab. Deepened from #DD8452 so selected text clears AA on cream. */
  --select:#B0532E; --select-dim:#B0532E1f; --select-soft:#B0532E14;
  /* Dropdown carets (see .select) — recoloured per theme; a data-URI stroke can't read a var. */
  --caret-neutral:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23667085' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --caret-terra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23B0532E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --about-bg:color-mix(in srgb,var(--card) 72%,transparent);  /* "How it works" panel frost */
  --good:#2f8f4e; --bad:#c0392b; --warn:#DD8452; --info:#8172B3;
  /* Midpoint of the good→bad slider scale. Deliberately yellower than --warn:
     reusing the chart amber left too little separation from red. */
  --scale-mid:#E8B838; --scale-grey:#b6bcc6;
  /* Chip colours for the trend dots. Deliberately NOT --bad/--warn/--info:
     those say "this is bad", and the app has no business deciding that a chip
     you invented is bad. These are identity colours, nothing more.
     Three, because past three, two dots landing side by side stop being
     reliably tellable apart by a colourblind reader. Both sets validated
     all-pairs against --card in their own mode. --tag-other is the shared
     neutral for everything beyond the three. */
  --tag1:#2a78d6; --tag2:#eb6834; --tag3:#1baf7a; --tag-other:#667085;
  --grid:#e8e1d2; --shadow:0 1px 3px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.04);
  /* Segmented control (iOS-style floating pill): a track deeper than --card2,
     and the pill's ambient lift shadow. */
  --seg-track:#e6ddca; --seg-shadow:rgba(74,54,30,.16);
  --rad:14px; --rad-sm:9px; --gap:13px;
  --safe-b:env(safe-area-inset-bottom,0px);
  /* Brand identity tokens (the logo MARK only — kept separate from the
     functional UI palette above). --logo-ink is the slate part of the mark
     that flips to cream on dark, turning logo.svg into logo-reverse.svg. */
  --brand-slate:#4C5A67; --brand-seafoam:#8FB4B2; --brand-seafoam-deep:#5E8C88;
  --brand-gold:#DDAE62; --brand-gold-deep:#D2984E; --brand-cream:#F6F2E7;
  --logo-ink:#4C5A67;
  /* Drivers chart: "hurts" bars in warm slate (dark→light), within-noise as a
     faded warm grey. Lightened in dark so they don't sink into the background. */
  --bar-hurt:#4C5A67; --bar-hurt-lite:#8A97A1; --noise-bar:#CBC3B4;
  /* Brand page background: a centre-light / edge-dark cream vignette (the spec's
     paper treatment, minus the grain texture). Solid --bg in dark. */
  --page-bg:radial-gradient(ellipse 120% 100% at 50% 34%,#FCF9F2,#E9DFCC);
  color-scheme:light;
  /* Type scale anchor. Every font-size in this file is a rem multiple of this
     one value, so the whole UI scales from a single knob. Phone renders at 16px
     base (pixel-identical to the old fixed sizes); on a wide screen the root
     steps up (below) so text isn't dwarfed by the empty margins around the
     capped 940px column. Layout widths/paddings stay px on purpose. */
  font-size:16px;
}
/* Desktop-only step-up: this one line retunes the entire phone↔desktop type
   relationship (rem text scales off the root; no per-element duplication). The
   gauge dial is a fixed-px structural size that doesn't ride the root, so it gets
   its own desktop bump — but that rule must live AFTER the base .gwrap/.gv rules
   (media queries add no specificity, so an earlier override loses to a later base
   rule). See the gauge block further down. */
@media (min-width:900px){ :root{ font-size:18px } }
:root[data-theme="dark"], :root.dark {
  --logo-ink:#EDE6D6; --page-bg:#131210;
  --bar-hurt:#6B7A88; --bar-hurt-lite:#9FAAB4; --noise-bar:#5C5648;
  --bg:#131210; --card:#1c1915; --card2:#241f19; --line:#302a20; --line2:#28221a; --topbar:#1c1915;
  --tx:#ebe6dc; --tx2:#a9a294; --tx3:#7c7466;
  --accent:#1fa695; --accent-dim:#1fa69524;
  --select:#E89E72; --select-dim:#e59a6a24; --select-soft:#e59a6a1a;
  --caret-neutral:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23a9a294' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --caret-terra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23E89E72' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --about-bg:color-mix(in srgb,var(--card) 70%,transparent);
  --good:#4caf6e; --bad:#e5695a; --warn:#e59a6a; --info:#9d8fd0; --scale-mid:#F5D06A; --scale-grey:#5c6470;
  --tag1:#3987e5; --tag2:#d95926; --tag3:#199e70; --tag-other:#98a2b3;
  --grid:#29241c; --shadow:0 1px 3px rgba(0,0,0,.4);
  --seg-track:#100d0a; --seg-shadow:rgba(0,0,0,.5);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --logo-ink:#EDE6D6; --page-bg:#0e1015;
    --bar-hurt:#6B7A88; --bar-hurt-lite:#9FAAB4; --noise-bar:#5C5648;
    --bg:#0e1015; --card:#171a21; --card2:#1e222b; --line:#272c36; --line2:#212630; --topbar:#171a21;
    --tx:#e6e9ef; --tx2:#98a2b3; --tx3:#6b7484;
    --accent:#1fa695; --accent-dim:#1fa69524;
    --about-bg:color-mix(in srgb,var(--card) 70%,transparent);
    --good:#4caf6e; --bad:#e5695a; --warn:#e59a6a; --info:#9d8fd0; --scale-mid:#F5D06A; --scale-grey:#5c6470;
    --tag1:#3987e5; --tag2:#d95926; --tag3:#199e70; --tag-other:#98a2b3;
    --grid:#29241c; --shadow:0 1px 3px rgba(0,0,0,.4);
    --seg-track:#100d0a; --seg-shadow:rgba(0,0,0,.5);
    color-scheme:dark;
  }
}

/* Must come before any rule that sets `display`, or an element with a display
   property will ignore the hidden attribute entirely. */
[hidden]{display:none !important}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  background:var(--bg); background:var(--page-bg); background-attachment:fixed;
  color:var(--tx); line-height:1.5;
  font-size:1.0625rem; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  /* Stop mobile browsers from "boosting" (auto-enlarging) text — it inflates
     some labels inconsistently and made the day tiles render uneven heights on
     real phones while looking fine in a desktop browser. */
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
h1,h2,h3{line-height:1.25}

/* ── empty state (in-page, never a gate) ── */
.empty-card{border:1px dashed var(--line);box-shadow:none;background:var(--card2)}

/* ── first-run onboarding ──────────────────────────────────────────────
   The dataless first impression. Never a gate: the app stays navigable, and
   every analysis tab shows a stylized preview (ghost chart + one-line "what
   you'll see once connected") instead of empty, broken-looking charts. */
.onboard{padding:6px 2px 4px}
.ob-hero{border:1px dashed var(--line);background:var(--card2);border-radius:var(--rad);
  padding:24px 20px 22px;text-align:center;margin-bottom:16px}
.ob-eyebrow{font-size:0.75rem;font-weight:680;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px}
.ob-title{font-size:1.35rem;font-weight:640;color:var(--tx);margin:0 0 9px;line-height:1.22}
.ob-sub{font-size:0.9375rem;color:var(--tx2);line-height:1.5;margin:0 auto 16px;max-width:34em}
.ob-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.ob-actions .btn{padding:11px 20px}
.ob-preview{display:inline-block;margin-top:13px;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:0.875rem;font-weight:560;color:var(--tx2);
  border-bottom:1px dashed var(--tx3);padding:1px 0}
.ob-preview:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* 3-tile walkthrough of the tabs */
.ob-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
@media (max-width:560px){.ob-steps{grid-template-columns:1fr}}
.ob-step{display:flex;flex-direction:column;gap:5px;padding:13px 13px 15px;
  border:1px solid var(--line);border-radius:var(--rad-sm);background:var(--card)}
.ob-step .ico{color:var(--accent);opacity:.9}
.ob-step .ico svg{width:22px;height:22px}
.ob-step b{font-size:0.9375rem;color:var(--tx);font-weight:640}
.ob-step span{font-size:0.8125rem;color:var(--tx3);line-height:1.42}

/* "Set up what you track" — tappable rows that jump into Sources */
.ob-setup{margin-top:18px}
.ob-setup-head{font-size:1.0625rem;font-weight:640;color:var(--tx);margin:0 2px 4px}
.ob-setup-intro{font-size:0.875rem;color:var(--tx2);line-height:1.5;margin:0 2px 11px}
.ob-setup-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 14px;margin-bottom:8px;cursor:pointer;font-family:inherit;
  border:1px solid var(--line);border-radius:var(--rad-sm);background:var(--card)}
.ob-setup-row:hover{background:var(--card2);border-color:var(--accent)}
.ob-sr-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ob-sr-t{font-size:0.9375rem;font-weight:640;color:var(--tx)}
.ob-sr-sub{color:var(--tx3);font-weight:500}
.ob-sr-d{font-size:0.8125rem;color:var(--tx3);line-height:1.42}
.ob-sr-arw{color:var(--accent);font-size:1.125rem;flex-shrink:0}

/* per-tab ghost previews (Impact / Trends) */
.onboard-tab{padding:2px}
.ob-note{font-size:0.875rem;color:var(--tx2);line-height:1.5;margin:0 2px 15px;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.ob-card{padding:2px 2px 4px;margin-bottom:6px}
.ob-card + .ob-card{border-top:1px solid var(--line);padding-top:15px;margin-top:9px}
.ob-card .cvs-head h2{opacity:.92}
.ob-line{font-size:0.90625rem;color:var(--tx2);line-height:1.45;margin:2px 0 11px}
.ob-ghost{position:relative;border-radius:var(--rad-sm);overflow:hidden}
.ob-ghost svg{display:block;width:100%;height:auto;color:var(--tx3);opacity:.55}
/* the faint sweep that reads "preview, not real data" */
.ob-ghost::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--card) 55%,transparent) 50%,transparent 70%)}
.ob-cta{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:9px 14px;
  border:1px solid var(--line);border-radius:var(--rad-sm);background:var(--card);
  color:var(--tx);font-family:inherit;font-size:0.9375rem;font-weight:580;cursor:pointer}
.ob-cta:hover{background:var(--card2);border-color:var(--accent)}
.ob-cta .arw{color:var(--accent)}
/* inline text link used in .ob-note and copy — quiet, not a teal button */
.ob-link{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:inherit;font-weight:600;color:var(--accent);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.ob-link:hover{border-bottom-color:var(--accent)}

/* "Previewing sample data" banner (transient preview mode) */
.preview-banner{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:7px 14px;background:var(--accent-dim);border-bottom:1px solid var(--line);
  font-size:0.84375rem;color:var(--tx2);text-align:center}
.preview-banner b{color:var(--tx);font-weight:640}
.preview-banner button{background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:0.84375rem;font-weight:640;color:var(--accent);border-bottom:1px solid transparent}
.preview-banner button:hover{border-bottom-color:var(--accent)}

/* ── top bar ── */
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:center;
  gap:10px;padding:5px 15px;background:var(--topbar);border-bottom:1px solid var(--line);
  /* Fill the iOS status-bar strip with the bar's own colour (edge-to-edge under
     the translucent status bar) so the app reaches the top instead of a white
     gap; the logo still sits below the clock. Zero on devices without a notch. */
  padding-top:calc(5px + env(safe-area-inset-top,0px));
}
.brand{display:flex;flex-direction:column;align-items:center;gap:0;min-width:0}
/* archē wordmark — the real brand logo (Comfortaa outlines, delivered as
   vectors; see assets/logo.svg). Inlined so it works offline in Baseline.html.
   Slate/seafoam/gold mark; only the "ink" (slate upper-half of the letters, the
   ē dark end and the frond) swaps to cream in dark via --logo-ink, reproducing
   logo.svg in light and logo-reverse.svg in dark. */
.brandmark{display:block;line-height:0}
.brandmark .logo{display:block;height:40px;width:auto;overflow:visible}

/* Top-bar quick-sync — the daily tap-to-sync surfaced out of Sources (native only;
   wireSettings reveals it when a live source exists). Absolutely placed so the
   centered wordmark — and the splash FLIP that lands on it — stay untouched. */
.topsync{
  position:absolute;right:9px;top:calc(50% + env(safe-area-inset-top,0px)/2);
  transform:translateY(-50%);width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:50%;background:transparent;color:var(--tx2);
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s;
}
.topsync svg{width:22px;height:22px}
.topsync:hover{background:var(--seg-track,rgba(120,120,120,.12));color:var(--brand)}
.topsync:active{transform:translateY(-50%) scale(.9)}
.topsync.syncing{color:var(--brand);pointer-events:none}
.topsync.syncing svg{animation:topspin 1s linear infinite}
@keyframes topspin{to{transform:rotate(360deg)}}

/* ── layout ── */
.wrap{max-width:940px;margin:0 auto;padding:13px 13px calc(78px + var(--safe-b))}
.view{display:none}
.view.on{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

.card{background:var(--card);border-radius:var(--rad);padding:15px 16px;box-shadow:var(--shadow);margin-bottom:var(--gap)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:3px}
.card h2{font-size:1.0625rem;font-weight:650;letter-spacing:-.01em}
/* Soft-grouped panel — the Sources surface (redesign/00-surface-system.md): a
   quiet raised group over the cream canvas (hair-lighter --card2 fill + --line
   hairline, no shadow), replacing the old white .card. Sub-sections inside use
   .ctlblock/.ctlhead dividers. Text inputs go white so a field reads clearly
   against the quiet panel (the .seg track stays --card2 so its white .on pops). */
.grp{background:var(--card2);border:1px solid var(--line);border-radius:var(--rad);padding:15px 16px;margin-bottom:var(--gap)}
.grp h2{font-size:1.0625rem;font-weight:650;letter-spacing:-.01em}
.grp .txtin,.grp .notefield{background-color:var(--card)}   /* .datefield matches the pill (card2) like .select */

/* ── Hub tab: master menu — flush borderless list rows, divided (not framed cards) ── */
#hub-menu{display:flex;flex-direction:column;margin-top:2px}
.hub-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:15px 4px;border:0;background:transparent;border-bottom:1px solid var(--line2);
  cursor:pointer;font-family:inherit;transition:background .12s ease,opacity .08s ease}
.hub-row:last-child{border-bottom:0}
.hub-row:hover{background:color-mix(in srgb,var(--tx) 5%,transparent)}
.hub-row:active{opacity:.7}
.hub-ico{flex:none;width:26px;display:grid;place-items:center;color:var(--tx3)}
.hub-row:hover .hub-ico{color:var(--select)}
.hub-ico svg{width:22px;height:22px}
.hub-rmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.hub-rt{font-size:1.03125rem;font-weight:640;color:var(--tx);letter-spacing:-.01em}
.hub-rd{font-size:0.8125rem;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-badge{flex:none;font-size:0.78125rem;font-weight:620;color:var(--select);
  background:var(--select-dim);border-radius:999px;padding:3px 10px;white-space:nowrap}
.hub-chev{flex:none;color:var(--tx3);font-size:1.375rem;line-height:1;margin-left:1px}

/* ── Hub tab: a spoke sub-page (de-boxed, sits on the canvas like the analysis tabs) ── */
.hub-spoke{animation:spoke-in .18s ease}
@media (prefers-reduced-motion:reduce){.hub-spoke{animation:none}}
@keyframes spoke-in{from{opacity:0;transform:translateX(9px)}to{opacity:1;transform:none}}
.spoke-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.spoke-back{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
  background:var(--card2);color:var(--tx2);font-family:inherit;font-size:0.84375rem;font-weight:620;
  padding:6px 13px 6px 10px;border-radius:999px;cursor:pointer;transition:border-color .12s,color .12s}
.spoke-back:hover{border-color:var(--select);color:var(--select)}
.spoke-title{font-size:1.1875rem;font-weight:660;letter-spacing:-.01em;color:var(--tx);margin:0}
/* inline jump to another spoke, e.g. the Data-reset → Data & Storage link */
.spoke-jump{border:0;background:transparent;padding:0;font:inherit;color:var(--accent);
  font-weight:560;cursor:pointer;text-decoration:none}
.spoke-jump:hover{text-decoration:underline;text-underline-offset:2px}
/* Data & Storage: import/download action rows — button + a short inline tag, no paragraph dumps */
.iolist{display:flex;flex-direction:column;gap:9px;margin-top:9px}
.iorow{display:flex;align-items:center;gap:11px;flex-wrap:nowrap}
.iorow .btn{flex:none}
.iotag{flex:1;min-width:0;font-size:0.8125rem;color:var(--tx3);line-height:1.4}
/* one-line data status badge in Data & Storage */
.datastat{display:inline-block;font-size:0.9375rem;color:var(--tx2)}
/* one-line lead framing each analysis view by its time horizon */
.viewlead{font-size:0.90625rem;color:var(--tx2);line-height:1.5;margin:0 2px 13px;padding:0 2px}

/* era composition: each cell is a chip's share of an era's days, with a small
   prevalence bar; the era where a chip lands most is emphasised. */
.ec-sub{font-weight:400;color:var(--tx3);font-size:0.8125rem}
.ec-hi{font-weight:650}
.ec-z{color:var(--tx3)}
.ec-bar{height:3px;border-radius:2px;background:var(--accent);margin-top:3px;margin-left:auto;max-width:100%}

/* era comparison: one stacked card per era, split into biometrics/symptoms.
   Cards wrap into a responsive grid so several eras sit side by side on desktop
   and stack on a phone. */
.era-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.era-card{background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:12px 13px}
.era-card.muted{opacity:.55}
.era-card-h{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.era-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.era-name{font-weight:640;font-size:0.9375rem;color:var(--tx);line-height:1.25}
.era-days{margin-left:auto;font-size:0.8125rem;color:var(--tx3);white-space:nowrap}
.era-sect+.era-sect{margin-top:8px}
.era-sect-t{display:flex;align-items:center;gap:6px;width:100%;padding:3px 0;margin-bottom:2px;
  border:none;background:transparent;cursor:pointer;font-family:inherit;
  font-size:0.6875rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3)}
.era-sect-t:hover{color:var(--tx2)}
.era-sect-t .nat-caret{font-size:0.6875rem}
.era-sect-t[aria-expanded="true"] .nat-caret{transform:rotate(90deg)}
.era-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 0;
  font-variant-numeric:tabular-nums}
.era-ml{font-size:0.875rem;color:var(--tx2)}
.era-mv{font-size:0.875rem;color:var(--tx);font-weight:550}
.era-mv.none{color:var(--tx3);font-weight:400}
.era-mv.best{color:var(--good);font-weight:700}
.era-mv.worst{color:var(--bad);font-weight:700}

/* "What each era is made of" rendered in the ca-tbl style with a dynamic number
   of era columns (grid-template set inline from the era count). */
.ecomp-row{align-items:start}
.ca-thead.ecomp-row div{white-space:normal}   /* let long era names wrap in the slate header */
.ecomp-d{display:block;font-weight:500;font-size:0.6875rem;opacity:.8;margin-top:1px}

/* on-brand toggle switch — teal track when on */
.switchrow{display:flex;align-items:center;gap:11px;margin:2px 0 12px;cursor:pointer;font-size:0.90625rem;color:var(--tx)}
.switch{position:relative;display:inline-block;width:38px;height:22px;flex:none}
.switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.switch i{position:absolute;inset:0;border-radius:22px;background:var(--tx3);opacity:.55;transition:background .18s,opacity .18s}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.35);transition:transform .18s}
.switch input:checked + i{background:var(--accent);opacity:1}
.switch input:checked + i::after{transform:translateX(16px)}
.switch input:focus-visible + i{outline:2px solid var(--accent);outline-offset:2px}
.switch-sub{color:var(--tx2)}
.desc{font-size:0.90625rem;color:var(--tx2);margin-bottom:12px;line-height:1.45}
.legend{font-size:0.84375rem;color:var(--tx3);margin-top:10px;line-height:1.45}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── hero ── */
.hero{background:linear-gradient(150deg,var(--card) 0%,var(--card2) 100%);border:1px solid var(--line)}
.hero-date{font-size:0.875rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.hero-verdict{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-top:3px}
.hero-rec{margin-top:11px;font-size:0.96875rem;color:var(--tx2);line-height:1.55}
.hero-rec b{color:var(--tx);font-weight:620}

/* ── kpis ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:9px;margin-bottom:var(--gap)}
.kpi{background:var(--card);border-radius:var(--rad-sm);padding:11px 13px;box-shadow:var(--shadow)}
.kpi .l{font-size:0.78125rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.kpi .v{font-size:1.4375rem;font-weight:720;letter-spacing:-.02em;margin-top:2px}
.kpi .v small{font-size:0.84375rem;font-weight:500;color:var(--tx2)}
.kpi .n{font-size:0.8125rem;margin-top:1px}
.good{color:var(--good)} .bad{color:var(--bad)} .neut{color:var(--tx3)} .warn{color:var(--warn)}

/* Recovery ("Resilience") — info toggle, methodology, and the stat tiles
   that carry the headline numbers so the chart doesn't have to be decoded. */
.info-btn{border:none;background:transparent;color:var(--tx3);cursor:pointer;font-size:1rem;
  line-height:1;padding:0 2px;vertical-align:middle}
.info-btn:hover,.info-btn[aria-expanded=true]{color:var(--accent)}
.rec-method{font-size:0.875rem;color:var(--tx2);background:var(--card2);border:1px solid var(--line);
  border-radius:var(--rad-sm);padding:11px 13px;margin:0 0 12px;line-height:1.55}
/* Factor / Impact selectors, inline side by side. */
.rec-picks{display:flex;flex-wrap:wrap;gap:9px 16px;margin-bottom:12px}
.rec-pick{display:flex;align-items:center;gap:9px;flex:1 1 190px;min-width:0}
.rec-pick label{font-size:0.90625rem;color:var(--tx2);font-weight:580}
.rec-pick .select{flex:1;min-width:0}

/* Compact horizontal stat strip (canvas surface — no boxes, hairline dividers). */
/* Three stats share one row and never wrap: equal flex basis + min-width:0 lets
   them shrink, so a long stat like "Back to reference" can't push itself onto a
   second line. Labels reserve two lines (min-height) so the values stay aligned
   whether a label is one line ("During") or two ("Back to / reference"). */
.rec-stats{display:flex;flex-wrap:nowrap;margin:6px 0 14px}
.rec-stat{flex:1 1 0;min-width:0;padding:1px 12px;border-left:1px solid var(--line)}
.rec-stat:first-child{border-left:0;padding-left:2px}
.rec-stat .lab{font-size:0.71875rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.4px;font-weight:600;line-height:1.2}
.rec-stat .val{font-size:1.1875rem;font-weight:720;letter-spacing:-.02em;margin:2px 0 1px;line-height:1.15}
.rec-stat .val small{font-size:0.75rem;font-weight:600;color:var(--tx2)}
.rec-stat .sub{font-size:0.71875rem;color:var(--tx3);line-height:1.25}
.rec-chart{margin-top:4px}
.rec-chart svg{width:100%;height:auto;display:block}
@media(max-width:600px){
  /* Snugger padding + a slightly smaller value so all three fit even at 360px. */
  .rec-stat{padding:1px 9px}
  .rec-stat .lab{min-height:2.4em}
  .rec-stat .val{font-size:1.0625rem}
  /* Edge-to-edge chart on a phone: let the SVG bleed to the card edges for max
     resolution on the recovery line (.wrap 13px + .cvs 2px = 15px each side). */
  .rec-chart{margin-left:-15px;margin-right:-15px}
}

/* ── segmented controls ── */
.seg{display:inline-flex;gap:3px;background:var(--seg-track);border:none;border-radius:10px;
  padding:3px;margin:0 7px 10px 0;flex-wrap:wrap}
.seg button{
  border:none;background:transparent;padding:6px 13px;border-radius:8px;
  font-size:0.90625rem;font-weight:580;color:var(--tx2);cursor:pointer;font-family:inherit;
  transition:color .12s ease;
}
.seg button:hover:not(.on){color:var(--tx)}
.seg button.on{background:var(--card);color:var(--select);font-weight:650;
  box-shadow:0 2px 5px var(--seg-shadow),0 1px 2px var(--seg-shadow)}

/* ── charts ── */
.cbx{position:relative;height:320px}
.cbx.sm{height:250px}
@media(max-width:640px){.cbx{height:265px}.cbx.sm{height:225px}}

/* "Compare eras" empty state — shown when no era chip is selected (in place of
   the forest-plot canvas). */
.era-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:120px;padding:22px;border:1.5px dashed var(--line);border-radius:14px;text-align:center}
.era-empty-dots{display:flex;gap:9px;margin-bottom:5px}
.era-empty-dots span{width:11px;height:11px;border-radius:50%;background:var(--tx3);opacity:.32}
.era-empty-t{font-size:0.8125rem;font-weight:600;color:var(--tx2)}
.era-empty-s{font-size:0.71875rem;color:var(--tx3)}

/* ── tables ── */
table{width:100%;border-collapse:collapse;font-size:0.90625rem}
th{text-align:left;padding:8px 9px;border-bottom:1.5px solid var(--line);color:var(--tx2);font-size:0.8125rem;text-transform:uppercase;letter-spacing:.5px;font-weight:650;white-space:nowrap}
td{padding:8px 9px;border-bottom:1px solid var(--line2);white-space:nowrap}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
tr.muted td{color:var(--tx3);font-style:italic}

/* ── logging ── */
.slider{margin-bottom:15px}
.slider-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:10px}
.slider-lab{font-size:0.96875rem;font-weight:580}
.slider-right{display:flex;align-items:center;gap:4px}
.slider-val{font-size:1.0625rem;font-weight:700;font-variant-numeric:tabular-nums;min-width:22px;text-align:right}
.slider-val.unset{color:var(--tx3);font-weight:500;font-size:0.90625rem}
/* Clearing only makes sense once there is an answer to clear. */
.slider-clear{
  border:none;background:transparent;color:var(--tx3);cursor:pointer;font-size:0.875rem;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
}
.slider-clear:hover{background:var(--card2);color:var(--bad)}
.slider.is-unset .slider-clear{visibility:hidden;pointer-events:none}
/* An unanswered slider reads as inactive, so a stray touch is obvious. */
.slider.is-unset input[type=range]::-webkit-slider-thumb{border-color:var(--tx3);opacity:.55}
.slider.is-unset input[type=range]::-moz-range-thumb{border-color:var(--tx3);opacity:.55}
.slider input[type=range]{
  width:100%;height:26px;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;display:block;
}
.slider input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--track,var(--line))}
.slider input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--track,var(--line))}
.slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:21px;height:21px;border-radius:50%;background:var(--card);
  border:2.5px solid var(--thumb,var(--accent));margin-top:-7.5px;box-shadow:0 1px 3px rgba(0,0,0,.22);
  transition:border-color .12s linear;
}
.slider input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--card);
  border:2.5px solid var(--thumb,var(--accent));box-shadow:0 1px 3px rgba(0,0,0,.22);
  transition:border-color .12s linear;
}
/* Notches under each whole number — mainly a phone aid, where landing on a
   specific value by thumb is harder than with a mouse. Inset by the thumb
   radius so the marks line up with where the thumb actually stops. */
.slider-ticks{display:flex;justify-content:space-between;padding:0 10px;margin-top:-4px}
.slider-ticks i{width:1px;height:5px;background:var(--line);border-radius:1px}
.slider.is-unset .slider-ticks i{opacity:.6}
.slider-ends{display:flex;justify-content:space-between;font-size:0.8125rem;color:var(--tx3);margin-top:1px}

/* An aside inside a table cell — "so far" on a cycle still running. */
.mut{color:var(--tx3);font-size:0.8125rem;font-weight:400}
.tagrow{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 13px}
.tag{
  border:1px solid var(--line);background:var(--card2);color:var(--tx2);
  border-radius:20px;padding:6px 13px;font-size:0.90625rem;cursor:pointer;font-family:inherit;font-weight:540;
}
.tag:hover:not(.on){border-color:var(--select);color:var(--tx)}
.tag.on{background:var(--select-dim);border:1.5px solid var(--select);color:var(--select);
  padding:5.5px 12.5px;font-weight:620}
/* The shared metric track — a .seg segmented control that sits above both cards and
   drives Compare eras + Trends. Its "+ More"/"Show less" segment is muted (never on). */
.tr-metricbar{margin:0 2px 13px;max-width:100%}
.tr-metricbar .tr-more{color:var(--tx3);font-weight:540}
.tr-metricbar .tr-more:hover{color:var(--accent)}
.notefield,.datefield,.select,.txtin{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--rad-sm);
  font-size:1.03125rem;background-color:var(--card2);color:var(--tx);font-family:inherit;
}
.notefield::placeholder{color:var(--tx3)}
/* Dropdowns: soften the native "clinical" <select> to sit with the .seg pills —
   drop the OS chevron for a warm taupe one, round the corners, gentle focus ring. */
/* Dropdowns sit on the segmented-pill track (borderless), so a <select> reads as
   one control family with the .seg pills it lives beside. */
/* ── archē standard dropdown (redesign/arche-dropdown-standard.md · v1) ──────────
   Every native <select> is a compact fully-rounded pill: NEUTRAL at rest, TERRACOTTA
   on focus/open (native :focus IS the open state), so terracotta keeps its one job
   (selected/active) even on screens holding several selects. Content-width by default;
   add `.full` to span the row. Caret recolours per theme via --caret-* vars (a data-URI
   stroke can't read a CSS var), defined in the :root token blocks. */
.select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:auto;max-width:100%;height:34px;padding:0 34px 0 14px;
  font-size:13px;font-weight:600;line-height:1;
  border-radius:999px;border:1.5px solid var(--line);
  color:var(--tx);background-color:var(--card2);
  background-image:var(--caret-neutral);background-repeat:no-repeat;
  background-position:right 13px center;background-size:11px 7px;
  outline:none;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease,color .15s ease}
.select.full{display:block;width:100%}
.select::-ms-expand{display:none}
.select:hover{border-color:var(--tx3)}
.select:focus{color:var(--select);background-color:var(--select-dim);
  border-color:var(--select);box-shadow:0 0 0 3px var(--select-soft);
  background-image:var(--caret-terra)}
/* Long-label pickrow (e.g. "Stratify timeline by:") — keep the label at full width and
   let the compact pill wrap below rather than crowd it on a very narrow screen. */
#d-strat-row{flex-wrap:wrap}
#d-strat-row label{flex:0 0 auto;min-width:0}
/* Date fields wear the same pill as the standard dropdown (redesign/arche-dropdown-standard.md):
   neutral at rest → terracotta on focus, with the native calendar glyph hidden and the chevron
   drawn in its place. The picker indicator is stretched over the whole field and kept clickable,
   so a tap anywhere still opens the date picker. */
.datefield{position:relative;width:auto;flex:1;min-width:0;
  -webkit-appearance:none;appearance:none;   /* drop the WebView's OWN date arrow so only our chevron shows (no double arrow on iOS/native) */
  height:34px;padding:0 34px 0 14px;font-size:13px;font-weight:600;line-height:1;
  border-radius:999px;border:1.5px solid var(--line);color:var(--tx);background-color:var(--card2);
  background-image:var(--caret-neutral);background-repeat:no-repeat;background-position:right 13px center;background-size:11px 7px;
  outline:none;transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease,color .15s ease}
.datefield:hover{border-color:var(--tx3)}
.datefield:focus,.datefield:focus-within{color:var(--select);background-color:var(--select-dim);
  border-color:var(--select);box-shadow:0 0 0 3px var(--select-soft);background-image:var(--caret-terra)}
.datefield::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer;position:absolute;inset:0;width:auto;height:auto;margin:0}
.datefield::-webkit-inner-spin-button,.datefield::-webkit-clear-button{display:none}
.log-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin-top:12px}
.log-actions .btn{flex:0 1 auto}
/* The status pill sits to the right of Save today — keep it on ONE line (never
   wrap "Saved · today" awkwardly) and let it hold its own width. Amending an
   earlier day used to be a second button here; its label wrapped on a phone and
   stretched into a slab beside the primary action, so it moved to the Hub. */
#log-status{margin-left:auto;flex:0 0 auto;white-space:nowrap;text-align:center}
.chip{font-size:0.8125rem;color:var(--tx2);background:var(--card2);border-radius:20px;padding:4px 11px;white-space:nowrap}
.chip.done{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.chip.unsaved{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn);font-weight:600}

/* Amend-a-past-day drawer. Reuses .dayrow / .d-datebtn from the Day Explorer so
   the date control is the same object in both places. */
.am-state{font-size:0.8125rem;color:var(--tx2);margin:8px 0 2px;min-height:1.2em}
.am-state b{color:var(--tx)}
#amend-drawer .ctlhead{margin-top:18px}
.am-actions{margin-top:18px;display:flex;gap:8px;align-items:center}

/* ── buttons ── */
.btn{
  border:1px solid var(--line);background:var(--card);color:var(--tx);
  border-radius:var(--rad-sm);padding:10px 16px;font-size:1rem;font-weight:580;
  cursor:pointer;font-family:inherit;
}
.btn:hover{background:var(--card2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.btn.sm{padding:7px 13px;font-size:0.9375rem}
.btn.sq{padding:9px 13px;flex-shrink:0}
.brow{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
/* Reveal / opens-a-drawer — the frequent "Detailed breakdown →". NOT a primary
   (teal is reserved for one committing CTA per screen); a quiet full-width row. */
.reveal-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);background:var(--card2);color:var(--tx);
  border-radius:var(--rad-sm);padding:11px 14px;font-family:inherit;font-size:0.90625rem;
  font-weight:600;cursor:pointer;text-align:left}
.reveal-row:hover{background:var(--card);border-color:var(--select)}
.reveal-row .chev{color:var(--tx3)}

/* ── discover ── */
.pickrow{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.pickrow label{font-size:0.90625rem;color:var(--tx2);min-width:64px;font-weight:580;white-space:nowrap}
.pickrow .select{min-width:0}   /* let the dropdown shrink so the label never wraps */
.eralegend{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.erakey{display:inline-flex;align-items:center;gap:5px;font-size:0.84375rem;color:var(--tx2);
  padding:3px 9px;border-radius:20px;background:var(--card2)}
.erakey i{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.erakey b{color:var(--tx);font-weight:620;font-variant-numeric:tabular-nums}
.erakey.cur{outline:1.5px solid var(--select);outline-offset:-1px}

/* ── Cycle Analysis (merged section + detail sheet) ── */
.ca-strip{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.ca-pill{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  background:var(--card2);border:1px solid var(--line);border-radius:10px;
  padding:6px 11px;cursor:pointer;font-family:inherit}
.ca-pill .cap-name{font-size:0.78125rem;font-weight:600;color:var(--tx2);white-space:nowrap}
.ca-pill .cap-d{font-size:0.90625rem;font-weight:680;color:var(--tx2);font-variant-numeric:tabular-nums}
.ca-pill.on{background:var(--select-soft);border-color:var(--select);border-width:1.5px;padding:5.5px 10.5px}
.ca-pill.on .cap-name{color:var(--tx)}
.ca-pill.on .cap-d{color:var(--select)}
.ca-delta{font-size:1.875rem;font-weight:700;color:var(--tx);line-height:1.05;font-variant-numeric:tabular-nums}
.ca-du{font-size:0.9375rem;font-weight:600;color:var(--tx2);margin-left:3px}
.ca-sub{font-size:0.8125rem;color:var(--tx3);margin:2px 0 8px;font-variant-numeric:tabular-nums}
.ca-badge{display:inline-block;font-size:0.78125rem;font-weight:640;padding:3px 11px;border-radius:20px}
.ca-badge.tentative{border:1.5px dashed var(--tx3);color:var(--tx3)}
.ca-badge.decay{background:var(--warn);color:#fff}
.ca-badge.holds{background:var(--good);color:#fff}
.ca-empty{font-size:0.875rem;color:var(--tx2);padding:6px 0;line-height:1.45}
#ca-pause{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 8px;
  padding:9px 11px;border-radius:var(--rad-sm);background:var(--card2);border:1px solid var(--line)}
#ca-pause .ca-pausetxt{flex:1;min-width:170px;font-size:0.875rem;color:var(--tx2);line-height:1.4}
.ca-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 4px;font-size:0.8125rem;color:var(--tx2)}
.ca-key{display:inline-flex;align-items:center;gap:6px}
.ca-key .ln{width:16px;height:3px;border-radius:2px;flex-shrink:0}
.ca-key .ln.dsh{height:0;background:none;border-top:2px dashed var(--tx3)}
/* Drawer-opener ("Detailed breakdown →", "Full era breakdown →", "See recovery
   over time →"): a quiet reveal, never a teal fill (teal = one primary/screen). */
.ca-more{display:flex;align-items:center;justify-content:center;width:100%;margin-top:12px;
  padding:11px 14px;border:1px solid var(--line);border-radius:var(--rad-sm);
  background:var(--card2);color:var(--tx);
  font-family:inherit;font-size:0.90625rem;font-weight:600;cursor:pointer}
.ca-more:hover{background:var(--card);border-color:var(--select)}
/* Merged into the .desc scale (was its own near-duplicate size). */
.ca-ssub{font-size:0.90625rem;color:var(--tx2);margin:2px 0 12px;line-height:1.45}
.ca-tbl{border-radius:9px;overflow:hidden;border-bottom:2px solid var(--bar-hurt);font-variant-numeric:tabular-nums}
.ca-trow{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:8px;padding:9px 12px;align-items:center;font-size:0.875rem}
.ca-trow .num{text-align:right}
.ca-thead{background:var(--bar-hurt);color:var(--bg);font-weight:640;font-size:0.8125rem}
.ca-thead div{white-space:nowrap;line-height:1.2}
.ca-trow:not(.ca-thead){border-top:1px solid var(--line);color:var(--tx)}
.ca-diff{color:var(--warn);font-weight:600}
.ca-ci{color:var(--tx3);font-size:0.6875rem;margin-left:3px;font-weight:500}
.ca-scap{font-size:0.8125rem;color:var(--tx3);margin:10px 0 4px;line-height:1.4}
.ca-exhead{font-size:0.8125rem;font-weight:640;color:var(--tx2);margin:14px 0 4px}
.ca-excl{margin:0;padding-left:18px;font-size:0.84375rem;color:var(--tx2)}
.ca-excl li{margin:2px 0}
.ca-excl li::marker{color:var(--warn)}
.ca-guide{margin-top:14px;padding:11px 13px;background:var(--bg);border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0;font-size:0.84375rem;color:var(--tx);line-height:1.45}
.trendpick{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.trendpick .select{flex:1;min-width:150px}   /* layout only; visual style from the standard .select */
.trendpick .seg{margin:0}
/* Treatment report — the ELEVATED SUMMARY PANEL that anchors the Trends tab. Unlike the
   flat cards below, it sits on a raised surface with a brand hairline, so it reads as the
   header/answer for everything beneath it. */
#tr-report{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  box-shadow:var(--shadow);padding:15px 17px 17px;position:relative;overflow:hidden;margin-bottom:12px}
#tr-report::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand-gold),var(--accent))}
/* Treatment picker sits at the very top as the card header. */
#tr-report #tr-pick{margin:0 0 14px}
/* Both question headers ("Is it working?" / "Does it last?") share this gold eyebrow. */
.tr-eyebrow{font-size:0.71875rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand-gold-deep);margin-bottom:8px}
.tr-subhead{font-size:0.875rem;color:var(--tx2);margin-bottom:9px}
.tr-subhead b{color:var(--tx);font-weight:650}
/* Answer-first: the biggest takeaway promoted to larger type; the rest secondary. Both
   share the bold-metric lead-in and carry no bullet, so the reads look uniform. */
.tr-lead-read{font-size:1rem;color:var(--tx);line-height:1.5;margin:0 0 9px}
.tr-sub-read{font-size:0.84375rem;color:var(--tx2);line-height:1.5;margin:0 0 9px}
.tr-lead-read b,.tr-sub-read b,.tr-find-inline b{color:var(--tx);font-weight:600}
.tr-lead-read b:first-child,.tr-sub-read b:first-child{font-weight:650}
/* "Does it last?" — a divided secondary section, same eyebrow as the top. */
.tr-lasts{margin-top:14px;padding-top:13px;border-top:1px solid var(--line2)}
.tr-lasts .tr-eyebrow{margin-bottom:6px}
.tr-find-inline{font-size:0.84375rem;color:var(--tx2);line-height:1.5;margin:0}
/* Inline "add a timeline" action inside a synthesis read — reads as a link, not a button. */
.tr-link{display:inline;padding:0;border:0;background:none;font:inherit;color:var(--accent);
  font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.tr-link:hover{color:var(--brand-gold-deep)}
/* The same action inside a card's first-run empty state. */
.tr-empty-add{margin-top:12px}
.checkrow{display:flex;gap:9px;align-items:flex-start;margin:2px 0 12px;cursor:pointer;
  font-size:0.875rem;color:var(--tx2);line-height:1.45}
.checkrow input{width:17px;height:17px;flex-shrink:0;margin-top:1px;accent-color:var(--accent);cursor:pointer}
.checkrow b{color:var(--tx);font-weight:620}
.sdet-empty{font-size:0.9375rem;color:var(--tx3);padding:14px 0;text-align:center}

/* A muted single-line metadata badge under the variable selector, e.g.
   "165 logged days · next-night effect · pooled across 3 eras". */
.sel-meta{font-size:0.8125rem;color:var(--tx2);margin:-2px 2px 4px;line-height:1.4}
.sel-meta:empty{display:none}
/* ↻-marker legend under the Single Variable picker (snug, not the default .legend gap) */
.rec-hint{margin:2px 2px 8px;letter-spacing:.01em}

/* Single-variable outcomes — canvas rows (de-boxed): each metric floats on the
   cream with a thin hairline divider, its with/without means muted beneath the
   name and the coloured shift pill on the right. */
.smet-list{display:flex;flex-direction:column;margin-top:6px}
.smet-card{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 2px;border-bottom:1px solid var(--line2)}
.smet-card:last-child{border-bottom:0}
.smet-main{min-width:0}
.smet-label{font-size:0.96875rem;font-weight:580;color:var(--tx)}
.smet-sub{font-size:0.8125rem;color:var(--tx3);margin-top:2px}
/* shift badge: coloured pill for e.g. +7.1 ±4.8 */
.pill{display:inline-flex;align-items:baseline;gap:5px;flex:none;padding:5px 11px;border-radius:999px;
  font-size:1rem;font-weight:680;font-variant-numeric:tabular-nums;white-space:nowrap;
  background:color-mix(in srgb,var(--tx3) 15%,transparent);color:var(--tx2)}
.pill.good{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.pill.bad{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.pill.neut{background:color-mix(in srgb,var(--tx3) 14%,transparent);color:var(--tx2)}
/* Emerging — a lean that doesn't yet clear its CI. Gold, between real and noise. */
.pill.emerging{background:color-mix(in srgb,var(--brand-gold-deep) 17%,transparent);color:var(--brand-gold-deep)}
.pill-ci{font-size:0.8125rem;font-weight:500;opacity:.75}
/* "Emerging" group header in the Single Variable card */
.emg-head{display:flex;align-items:center;gap:7px;margin:14px 0 7px;font-size:0.8125rem;
  font-weight:600;color:var(--brand-gold-deep);letter-spacing:.01em}
.emg-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-gold-deep);flex:none}
/* "Natural variations" — collapsed group of within-noise outcomes */
.nat-toggle{display:flex;align-items:center;gap:7px;width:100%;margin-top:10px;padding:8px 2px;
  border:none;background:transparent;cursor:pointer;font-family:inherit;
  font-size:0.84375rem;font-weight:640;text-transform:uppercase;letter-spacing:.5px;color:var(--tx2)}
.nat-toggle:hover{color:var(--tx)}
.nat-caret{display:inline-block;font-size:0.78125rem;color:var(--tx3);transition:transform .18s}
.nat-toggle[aria-expanded="true"] .nat-caret{transform:rotate(90deg)}
.nat-count{margin-left:auto;font-weight:600;letter-spacing:0;color:var(--tx3);
  background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:0.8125rem;text-transform:none}
.nat-body{margin-top:2px}
/* "Each occasion separately" header: the collapse toggle plus an inline outcome
   picker that retargets the per-occasion table (defaults to the factor's strongest
   outcome). The <select> sits outside the button — see episodeBreakdown(). */
.epi-head{display:flex;align-items:center;gap:8px;margin-top:10px}
.epi-head .nat-toggle{width:auto;flex:1 1 auto;min-width:0;margin-top:0}
.epi-met{flex:0 0 auto;width:auto;margin:0;min-width:0;padding:5px 30px 5px 10px;font-size:0.875rem}
.tl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:16px 0 8px;font-size:0.875rem;font-weight:660;text-transform:uppercase;
  letter-spacing:.5px;color:var(--tx2)}
.tl-head:first-child{margin-top:0}
.tl-rename{border:none;background:transparent;color:var(--tx3);font-family:inherit;
  font-size:0.8125rem;cursor:pointer;text-transform:none;letter-spacing:0;padding:2px 6px;border-radius:5px}
.tl-rename:hover{color:var(--accent);background:var(--card2)}
.tl-head-actions{display:flex;align-items:center;gap:6px}
/* The "prioritise this metric" pill, shared by treatment rows and timeline headers. */
.tx-focus,.tl-focus{border:1px solid var(--line);background:var(--card2);color:var(--tx2);
  font-family:inherit;font-size:0.75rem;text-transform:none;letter-spacing:0;line-height:1.3;
  padding:3px 10px;border-radius:20px;cursor:pointer;white-space:nowrap;max-width:11em;
  overflow:hidden;text-overflow:ellipsis}
.tx-focus:hover,.tl-focus:hover{border-color:var(--accent);color:var(--accent)}
.tx-focus.on,.tl-focus.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
/* Per-timeline "+ Add segment" row, and its start-date+name modal. */
.tl-add{margin:8px 0 4px}
.seg-add{display:flex;flex-direction:column;gap:6px}
/* .emove ("Move to another timeline") is a text button now — class="emove btn sm" —
   so it takes the plain .btn.sm shape. It used to be a 26px round icon, and that
   fixed width survived the change: it squeezed the word Move down to nothing but
   padding, and the overflowing text ran under the Delete button beside it. */
#d-strat-row:has(select[hidden]){display:none}

.ctlblock{margin:12px 0;padding-top:11px;border-top:1px solid var(--line2)}
/* Hub spokes: more air around each section separator so the eye can switch gears
   between sections (founder's note). The first block of a spoke has border-top:0
   inline, so drop its extra top margin. */
.hub-spoke .ctlblock{margin:26px 0 0;padding-top:23px;border-top-color:var(--sep)}
.hub-spoke .ctlblock[style*="border-top:0"]{margin-top:0}
.ctlhead{font-size:0.8125rem;font-weight:660;text-transform:uppercase;letter-spacing:.5px;
  color:var(--tx2);margin-bottom:5px}
.drv-line{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.drv-why{margin-top:7px;padding:9px 11px;border-radius:var(--rad-sm);background:var(--card2);
  border:1px solid var(--line);line-height:1.5}
/* "Worth watching" — a light callout under the drivers chart holding one pill
   chip per lead (label · signed effect · day count). */
.drv-watch{margin-top:9px;padding:11px 12px;border-radius:var(--rad-sm);
  background:color-mix(in srgb,var(--accent) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 16%,transparent)}
.drv-watch-head{font-size:0.8125rem;font-weight:660;text-transform:uppercase;letter-spacing:.5px;
  color:var(--tx2);margin-bottom:8px}
.wv-list{display:flex;flex-wrap:wrap;gap:7px}
.wv-chip{display:inline-flex;align-items:baseline;gap:6px;padding:5px 10px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);font-size:0.875rem;white-space:nowrap}
.wv-name{font-weight:620;color:var(--tx)}
.wv-num{font-weight:680;font-variant-numeric:tabular-nums}
.wv-num.good{color:var(--good)}
.wv-num.bad{color:var(--bad)}
.wv-days{font-size:0.8125rem;color:var(--tx3)}
.drv-watch-sub{margin-top:8px;color:var(--tx3);font-size:0.84375rem;line-height:1.5}
.linkbtn{border:none;background:transparent;color:var(--accent);font-family:inherit;
  font-size:0.84375rem;font-weight:620;cursor:pointer;padding:2px 4px;border-radius:5px;white-space:nowrap}
.linkbtn:hover{background:var(--accent-dim)}

/* ── day explorer ── */
.dayrow{display:flex;gap:8px;align-items:center;margin-bottom:10px}
/* "Change shown vs 90-day baseline" now rides inline on the drawer title — a quiet
   qualifier, not its own centred line. */
.d-basecap{font-size:0.78125rem;color:var(--tx3);font-weight:500;letter-spacing:0;white-space:nowrap}
/* Reorder helper sits directly under the date bar, above the tiles. */
.d-reorder-hint{font-size:0.78125rem;color:var(--tx3);line-height:1.4;margin:0 0 11px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:8px}
.mtile{position:relative;background:var(--card2);border-radius:var(--rad-sm);padding:9px 12px}
.mtile .l{font-size:0.8125rem;color:var(--tx2);font-weight:560}
.mtile .v{font-size:1.1875rem;font-weight:700;letter-spacing:-.01em}
.mtile .v small{font-size:0.8125rem;font-weight:500;color:var(--tx2)}
.mtile .d{font-size:0.8125rem}
.ann{border-radius:var(--rad-sm);padding:10px 13px;font-size:0.90625rem;margin-top:11px;line-height:1.5}
.ann.notes{background:color-mix(in srgb,var(--warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--warn) 28%,transparent)}
.ann.log{background:var(--accent-dim);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}

/* ── bottom tab bar ── */
/* Surface: Waymo-style. The bar itself has NO fill — the icons float over the
   content, and a translucent scrim + blur lives on a ::before layer BEHIND the
   icons. That decoupling is the whole trick: the scrim can be see-through (you
   read the chart underneath) AND the icons stay crisp, because the scrim's fade
   mask never touches the glyphs (they're separate, unmasked children on top).
   The scrim is strongest behind the labels and thins upward, so the icon tops
   sit over lightly-veiled content — natural, no hard line, no opaque slab. */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
  padding-top:16px;padding-bottom:var(--safe-b);border-top:0;
}
.tabbar::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,
    color-mix(in srgb,var(--card) 64%,transparent) 0%,
    color-mix(in srgb,var(--card) 54%,transparent) 42%,
    color-mix(in srgb,var(--card) 24%,transparent) 74%,
    transparent 100%);
  backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
  -webkit-mask-image:linear-gradient(to top,#000 50%,transparent 100%);
          mask-image:linear-gradient(to top,#000 50%,transparent 100%);
}
.tabbar button{
  flex:1;border:none;background:transparent;color:var(--tx3);cursor:pointer;font-family:inherit;
  font-size:0.8125rem;font-weight:580;padding:8px 2px 7px;display:flex;flex-direction:column;
  align-items:center;gap:3px;
}
.tabbar button .ti{width:22px;height:22px;line-height:1}
.tabbar button.on{color:var(--select);font-weight:680}

/* ── data / settings view ── */
.hint{font-size:0.875rem;color:var(--tx3);margin-top:8px;line-height:1.5}
.hint a,.gm-help a{color:var(--accent);font-weight:560;text-decoration:none}
.hint a:hover,.gm-help a:hover{text-decoration:underline}
.gm-help{margin-top:10px;border:1px solid var(--line);border-radius:var(--rad-sm);
  background:var(--card2);overflow:hidden}
.gm-help>summary{cursor:pointer;list-style:none;padding:10px 13px;font-size:0.90625rem;
  font-weight:580;color:var(--tx2);display:flex;align-items:center;gap:7px}
.gm-help>summary::-webkit-details-marker{display:none}
.gm-help>summary::before{content:"›";font-size:1.0625rem;color:var(--tx3);
  transition:transform .15s;display:inline-block}
.gm-help[open]>summary::before{transform:rotate(90deg)}
.gm-help>summary:hover{color:var(--tx)}
.gm-help ol{margin:0;padding:2px 15px 13px 34px;font-size:0.90625rem;color:var(--tx2);line-height:1.55}
.gm-help li{margin-bottom:7px}
.gm-help li:last-child{margin-bottom:0}
.gm-help b{color:var(--tx)}
.progress{margin-top:10px;padding:10px 13px;border-radius:var(--rad-sm);background:var(--card2);
  border:1px solid var(--line);font-size:0.90625rem;line-height:1.5}
.addrow{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.addrow .datefield{flex:0 1 auto;min-width:135px}
.addrow .txtin{flex:1 1 130px;min-width:0;padding:9px 11px;font-size:1rem}
/* .addrow selects (e.g. treatment kind) inherit the standard .select pill — no override. */
.hint.disclaimer{font-style:italic}

/* About archē — quiet closing card at the foot of Sources. Theme-aware mark. */
.about{padding:6px 0 4px}
.about-mark{display:flex;justify-content:center;margin:12px 0 20px}
.about-mark svg{height:50px;width:auto;max-width:82%}
.about-say{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:10px;margin:0 0 10px}
.about-name{font-size:1.25rem;font-weight:680;letter-spacing:.01em;color:var(--tx1)}
.about-ipa{font-size:0.9375rem;font-weight:620;color:var(--accent);letter-spacing:.04em}
.about-ipa2{font-size:0.875rem;color:var(--tx3);font-variant-numeric:normal}
.about-def{text-align:center;font-size:0.9375rem;color:var(--tx2);line-height:1.5;margin:0 auto 14px;max-width:34ch}
.about-def [lang="grc"]{font-size:1.05em;color:var(--tx1)}
.about-body{font-size:0.90625rem;color:var(--tx2);line-height:1.55;margin:0 0 10px}
.about-body:last-child{margin-bottom:0}
.sinfo{font-size:0.9375rem;color:var(--tx2);line-height:1.6}
.srow{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line2)}
.srow:last-child{border-bottom:none}
.srow .sname{flex:1;font-size:0.96875rem;min-width:0}
button.srename{border:none;background:transparent;color:var(--tx);font-family:inherit;
  text-align:left;cursor:pointer;padding:4px 0;border-radius:6px;font-size:0.96875rem}
button.srename:hover{color:var(--accent)}
.erameta{display:block;color:var(--tx3);font-size:0.84375rem;font-weight:450;margin-top:2px}

/* ── era editor ── */
.etimeline{position:relative;height:22px;background:var(--card2);border-radius:6px;
  margin-bottom:14px;overflow:hidden;border:1px solid var(--line)}
.eseg{position:absolute;top:0;bottom:0;opacity:.85}
.eseg.off{opacity:.22}
.erarow2{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid var(--line2)}
.erarow2:last-of-type{border-bottom:none}
.eswatch{width:15px;height:15px;border-radius:4px;border:none;cursor:pointer;flex-shrink:0;
  margin-top:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.einfo{flex:1;min-width:0}
.ename{border:none;background:transparent;color:var(--tx);font-family:inherit;font-size:0.96875rem;
  font-weight:600;text-align:left;cursor:pointer;padding:0;border-radius:4px}
.ename:hover{color:var(--accent)}
.ebadge{display:inline-block;margin-left:7px;font-size:0.8125rem;font-weight:600;padding:2px 7px;
  border-radius:20px;background:var(--accent-dim);color:var(--accent);vertical-align:middle}
.erarow2.combined .eswatch{box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),0 0 0 2px var(--accent-dim)}
.edates{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}
.edates input[type=date]{width:auto;min-width:0}   /* layout only; pill visual from the standard .datefield */
.earrow{color:var(--tx3);font-size:0.875rem}
.eactions{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-top:3px}
.eactions .eshow{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
.ewarn{margin-top:12px;padding:11px 13px;border-radius:var(--rad-sm);font-size:0.875rem;line-height:1.55;
  background:color-mix(in srgb,var(--warn) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);color:var(--tx2)}
.ewarn ul{margin:6px 0 0 16px}
.ewarn li{margin-bottom:3px}
.srow .sdel{border:none;background:transparent;color:var(--tx3);cursor:pointer;font-size:1.0625rem;padding:4px 7px;border-radius:6px}
.srow .sdel:hover{color:var(--bad);background:var(--card2)}

/* ── Sources Phase 2 controls ── */
/* Outcomes: inline "which direction is better" toggle per measure */
/* Compact sibling of the standard dropdown (same neutral→terracotta pill language,
   smaller so it stays dense in the Outcomes/Treatments rows). */
.dirsel{width:auto;max-width:100%;font-size:0.8125rem;font-weight:600;line-height:1;
  padding:5px 28px 5px 11px;border-radius:999px;border:1.5px solid var(--line);
  background-color:var(--card2);color:var(--tx);font-family:inherit;cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;
  background-image:var(--caret-neutral);background-repeat:no-repeat;
  background-position:right 10px center;background-size:10px 7px;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease,color .15s ease}
.dirsel::-ms-expand{display:none}
.dirsel:hover{border-color:var(--tx3)}
.dirsel:focus{color:var(--select);background-color:var(--select-dim);border-color:var(--select);
  box-shadow:0 0 0 3px var(--select-soft);background-image:var(--caret-terra)}
/* Treatments: an optional "every N days" cadence per row, sitting between the
   name and the remove button (same shell as the Outcomes direction selector). */
.tx-cad{display:inline-flex;align-items:center;gap:5px;font-size:0.8125rem;color:var(--tx3);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.tx-cad .cadin{width:3.4em;font-size:0.8125rem;padding:4px 6px;border:1px solid var(--line);
  border-radius:6px;background:var(--card);color:var(--tx);font-family:inherit;text-align:center}
.tx-cad .cadin::placeholder{color:var(--tx3)}
/* Greyed placeholder rows shown when no treatments exist yet — illustrative only. */
.srow.tx-ex{opacity:.42;pointer-events:none;user-select:none}
.srow.tx-ex .sname{font-style:italic}
/* Factors: rounded pill chips (mirror the Today check-in look) */
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0}
.fchip{display:inline-flex;align-items:center;gap:4px;padding:6px 6px 6px 13px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);font-size:0.90625rem;color:var(--tx)}
.fchip .x{border:none;background:transparent;color:var(--tx3);cursor:pointer;font-size:0.9375rem;
  line-height:1;padding:2px 5px;border-radius:50%}
.fchip .x:hover{color:var(--bad);background:var(--card2)}
/* The chip carries its own day count, so "is this actually being recorded?" is
   answered without opening anything. The name is the button that opens it. */
.fchip{padding:0 6px 0 0}
.fchip-open{border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;
  padding:6px 2px 6px 13px;display:inline-flex;align-items:center;gap:7px;border-radius:999px}
.fchip-n{font-weight:640;font-size:0.75rem;color:var(--tx3);font-variant-numeric:tabular-nums}
.fchip.on{border-color:var(--select);background:var(--select-soft)}
.fchip.on .fchip-n{color:var(--select)}
/* The factor calendar: same grid as the dose page, one factor at a time. */
/* Lives in a drawer now, so no card of its own — the drawer is the container. */
.tagsheet{padding:0}
.tagsheet .dg-list{max-height:none}
.tagsheet .dg-days{background:var(--card)}
.tg-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tg-t{font-weight:660;font-size:1.125rem;letter-spacing:-.01em}
.tg-sub{font-size:0.75rem;color:var(--tx2);margin-top:2px;line-height:1.5}
.tg-list li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:9px;
  padding:6px 10px;font-size:0.8125rem;border-bottom:1px solid var(--line2);scroll-margin:8px}
.tg-list li:last-child{border-bottom:0}
.tg-d{font-variant-numeric:tabular-nums}
.tg-open{border:0;background:transparent;color:var(--accent);font:inherit;font-size:0.75rem;
  font-weight:560;cursor:pointer;padding:2px 0}
.tg-open:hover{text-decoration:underline}
/* Eras: green Current/Ongoing badge shown in place of an empty end-date */
.ecurrent{border:1px solid color-mix(in srgb,var(--good) 42%,var(--line));
  background:color-mix(in srgb,var(--good) 12%,transparent);color:var(--good);border-radius:999px;
  padding:5px 12px;font-size:0.8125rem;font-weight:600;cursor:pointer;font-family:inherit}
.ecurrent:hover{background:color-mix(in srgb,var(--good) 20%,transparent)}
/* Treatments filter pills reuse .seg; notes search + list toggles */
.inj-filter,.notes-search{margin-bottom:10px}
.cur-tag{color:var(--accent);font-weight:600}
.inj-current{background:color-mix(in srgb,var(--accent) 5%,transparent);border-radius:8px}
/* Search field with a leading monoline icon */
.search-wrap{position:relative;margin-bottom:10px}
.search-wrap .search-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--tx3);pointer-events:none}
.search-wrap .txtin{padding-left:34px}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* Clean monoline button icons (import/export/erase) — inherit the button's text
   colour, sit on the text baseline. Buttons carrying one become flex-aligned. */
.btn:has(.bico){display:inline-flex;align-items:center;justify-content:center;gap:8px}
.bico{width:18px;height:18px;flex:none}
.btn.sm .bico{width:16px;height:16px}
/* Batch / recurrence generator modal */
.batchgen{display:flex;flex-direction:column}
.batchgen .bg-l{font-size:0.8125rem;color:var(--tx2);font-weight:600;margin:10px 0 4px}
.batchgen .select,.batchgen .datefield,.batchgen .txtin{width:100%}
.batchgen #bg-mode{margin-top:12px;align-self:flex-start}
.bg-preview{margin-top:12px;padding:10px 12px;border-radius:var(--rad-sm);background:var(--card2);
  border:1px solid var(--line);font-size:0.875rem;line-height:1.5;color:var(--tx2)}
.bg-warn{color:var(--bad)}
.bg-note{color:var(--tx3);font-size:0.8125rem}
/* State-tab dose reminder banner */
.dose-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 2px 16px;
  padding:12px 14px;border-radius:var(--rad);
  background:color-mix(in srgb,var(--accent) 8%,var(--card2));
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line))}
.db-ico{color:var(--accent);flex:none;display:flex}
.db-ico svg{width:22px;height:22px}
.db-body{flex:1 1 150px;min-width:0}
.db-title{font-weight:650;font-size:0.96875rem}
.db-sub{color:var(--tx2);font-size:0.84375rem;margin-top:1px}
.db-actions{display:flex;gap:6px;flex-wrap:wrap}
.srow input.txtin{flex:1;padding:7px 10px;font-size:0.96875rem}

/* ── modal dialogs (replacing prompt/confirm) ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:190;animation:fade .15s}
.modal{
  position:fixed;z-index:200;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(420px,calc(100vw - 32px));background:var(--card);border-radius:var(--rad);
  padding:20px;box-shadow:0 12px 40px rgba(0,0,0,.3);animation:pop .18s cubic-bezier(.32,.72,0,1);
}
@keyframes pop{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* Bottom-sheet variant. Anchored to the bottom so the on-screen keyboard pushes
   it up rather than covering it — the reason creation is a sheet and not a form
   under the chart. */
.modal.sheet{top:auto;bottom:0;left:0;transform:none;width:100%;max-width:none;
  border-radius:var(--rad) var(--rad) 0 0;max-height:88vh;overflow-y:auto;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));animation:sheetup .2s cubic-bezier(.32,.72,0,1)}
@keyframes sheetup{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
@media (min-width:560px){.modal.sheet{left:50%;transform:translateX(-50%);width:min(460px,100vw)}}
.esn-l{display:block;font-size:0.75rem;color:var(--tx2);font-weight:580;margin:12px 0 4px}
.esn-l:first-child{margin-top:0}
.esn-l i{font-style:normal;color:var(--tx3);font-weight:400}
.esn-q{font-size:0.75rem;color:var(--tx2);font-weight:580;margin:14px 0 6px}
.esnew .yn{display:inline-flex;background:var(--card2);border:1px solid var(--line);
  border-radius:9px;padding:2px;gap:2px}
.esn-ch{font:inherit;font-size:0.8125rem;padding:6px 12px;border-radius:7px;border:0;
  background:transparent;color:var(--tx2);cursor:pointer}
.esn-ch.on{background:var(--select-dim);color:var(--select);font-weight:640}
.esn-cons{font-size:0.75rem;color:var(--tx3);line-height:1.45;margin-top:14px}
.modal h3{font-size:1.125rem;font-weight:660;margin-bottom:8px;letter-spacing:-.01em}
.modal .m-msg{font-size:0.96875rem;color:var(--tx2);line-height:1.5;margin-bottom:14px}
.modal .txtin,.modal .datefield{width:100%;margin-bottom:4px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.m-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.m-opt{
  border:1.5px solid var(--line);background:var(--card2);border-radius:var(--rad-sm);
  padding:13px 15px;text-align:left;cursor:pointer;font-family:inherit;font-size:1.03125rem;
  font-weight:580;color:var(--tx);
}
.m-opt:hover{border-color:var(--accent);background:var(--accent-dim)}
.m-opt.sel{border-color:var(--accent);background:var(--accent-dim)}
.m-opt .m-sub{display:block;font-size:0.875rem;font-weight:450;color:var(--tx2);margin-top:2px}

/* ── first-run onboarding modal ── */
.onb{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow-y:auto}
.onb-steps{display:flex;gap:6px;margin-bottom:14px}
.onb-dot{width:26px;height:4px;border-radius:2px;background:var(--line);transition:background .15s}
.onb-dot.on{background:var(--accent)}
.onb-prompt{font-weight:620;font-size:0.96875rem;margin:2px 0 10px;color:var(--tx);letter-spacing:-.005em}
.onb-pill{text-align:center}
.onb-check{display:flex;align-items:center;gap:11px}
.onb-box{width:20px;height:20px;border-radius:6px;border:1.8px solid var(--line);flex:none;position:relative;transition:.12s}
.onb-check.sel .onb-box{background:var(--accent);border-color:var(--accent)}
.onb-check.sel .onb-box::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid var(--card);border-width:0 2px 2px 0;transform:rotate(45deg)}
.onb-callouts{display:flex;flex-direction:column;gap:8px;margin:2px 0 14px}
.onb-callout{display:flex;gap:9px;align-items:flex-start;background:var(--accent-dim);border:1px solid var(--line);
  border-radius:var(--rad-sm);padding:11px 13px;font-size:0.9375rem;line-height:1.45;color:var(--tx2)}
.onb-callout b{color:var(--tx);font-weight:640}
.onb-bolt{flex:none;width:17px;height:17px;color:var(--accent);margin-top:1px}
.onb-grant{width:100%;display:flex;align-items:center;justify-content:center;padding:14px;font-size:1.03125rem;font-weight:620}
.onb-grant.ok{background:var(--good);border-color:var(--good);color:#fff;opacity:1}
.onb-status{font-size:0.90625rem;color:var(--tx2);margin-top:10px;line-height:1.45}
.onb-status.bad{color:var(--bad)}

/* ── State: four-tab overview banner ── */
.tsum{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  padding:15px 15px 16px;margin:4px 0 6px}
.tsum-x{position:absolute;top:9px;right:10px;width:26px;height:26px;border:none;background:transparent;
  color:var(--tx3);font-size:15px;cursor:pointer;border-radius:50%;line-height:1}
.tsum-x:hover{background:var(--card2);color:var(--tx)}
.tsum-head{font-size:0.75rem;font-weight:680;letter-spacing:.04em;text-transform:uppercase;color:var(--tx3);margin-bottom:11px}
.tsum-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tsum-cell{background:var(--card2);border-radius:var(--rad-sm);padding:12px 12px 13px}
.tsum-ic{color:var(--accent);margin-bottom:5px}
.tsum-ic .ti{width:20px;height:20px}
.tsum-t{font-size:0.96875rem;font-weight:660;letter-spacing:-.01em;color:var(--tx)}
.tsum-s{font-size:0.78125rem;font-weight:560;color:var(--accent);margin-bottom:5px}
.tsum-d{font-size:0.8125rem;line-height:1.45;color:var(--tx2)}

/* ── check-in: defaults-pre-loaded notice ── */
.preload-note{display:flex;align-items:flex-start;gap:10px;margin:12px 0 2px;padding:10px 12px;
  background:var(--accent-dim);border-radius:var(--rad-sm);font-size:0.875rem;line-height:1.45;color:var(--tx2)}
.preload-note b{color:var(--tx);font-weight:620}
.preload-link{border:none;background:none;padding:0;font:inherit;font-weight:620;color:var(--accent);cursor:pointer}
.preload-link:hover{text-decoration:underline}
.preload-x{margin-left:auto;flex:none;border:none;background:transparent;color:var(--tx3);font-size:13px;
  cursor:pointer;border-radius:50%;width:22px;height:22px;line-height:1}
.preload-x:hover{color:var(--tx)}

/* ── State: no-data connect prompt (in place of the hero) ── */
.empty-note{text-align:center;padding:22px 16px 8px}
.en-title{font-size:1.0625rem;font-weight:660;letter-spacing:-.01em;color:var(--tx)}
.en-sub{font-size:0.9375rem;line-height:1.5;color:var(--tx2);margin:6px auto 14px;max-width:34ch}
.en-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.about-build{margin-top:14px;font-size:0.75rem;color:var(--tx3);font-variant-numeric:tabular-nums}

/* ── blind morning check-in ── */
/* Veil the snapshot's numbers while the check-in is up, so last night's Sleep
   Score can't anchor the 1–5 read. Removed on close → the numbers "arrive". */
.snapshot.veil .snap-verdict,
.snapshot.veil .snap-line,
.snapshot.veil .kpis-base,
.snapshot.veil .kpis,
.snapshot.veil .snap-prompt{visibility:hidden}
.ci-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:6px 0 4px}
.ci-dot{
  aspect-ratio:1;border:1.5px solid var(--line);background:var(--card2);border-radius:var(--rad-sm);
  font-family:inherit;font-size:1.25rem;font-weight:640;font-variant-numeric:tabular-nums;
  color:var(--tx);cursor:pointer;transition:border-color .12s,background .12s,transform .06s;
}
.ci-dot:hover{border-color:var(--accent);background:var(--accent-dim)}
.ci-dot:active{transform:scale(.94)}
.ci-dot.on{border-color:var(--accent);background:var(--accent-dim);font-weight:760}
.ci-ends{display:flex;justify-content:space-between;font-size:0.8125rem;color:var(--tx3);margin-bottom:12px}

/* Modal fade-out — the check-in dissolves to reveal the State tab. */
.modal.mfade,.modal-bg.mfade{opacity:0;transition:opacity .3s ease;pointer-events:none}

/* Step-2 quiet acknowledgement (no quiz-style score reveal). */
.ci-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:8px 0 4px}
.ci-check{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good);
  font-size:1.5rem;font-weight:700;line-height:1;
}
.ci-done-t{font-size:1.03125rem;color:var(--tx)}
.ci-done-s{font-size:0.8125rem;color:var(--tx3);line-height:1.45;max-width:30ch}

/* State-tab "This morning" row — score + editable rating + over-time link. */
#morning-row{margin-bottom:10px}
.mr{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:0.90625rem;color:var(--tx2)}
.mr-lab{font-weight:640;color:var(--tx3);font-size:0.78125rem;text-transform:uppercase;letter-spacing:.04em}
.mr-val b,.mr-score b{color:var(--tx);font-weight:700}
.mr-sep{color:var(--tx3)}
.mr-score{color:var(--tx2)}
.mr-score.mr-pending{color:var(--tx3);font-style:italic}
.mr-q{color:var(--tx2)}
.mr .ci-scale.sm{display:inline-flex;gap:5px;margin:0}
.ci-scale.sm .ci-dot{width:30px;height:30px;aspect-ratio:auto;font-size:0.90625rem;border-radius:8px}
.mr-edit,.mr-cmp{
  border:none;background:none;font-family:inherit;font-size:0.84375rem;font-weight:620;
  color:var(--accent);cursor:pointer;padding:2px 0;
}
.mr-edit{color:var(--tx3)}
/* Inline reveal ("Compare over time →"): ink text, not teal (teal = links/primary). */
.mr-cmp{color:var(--tx2)}
.mr-edit:hover,.mr-cmp:hover{text-decoration:underline}

/* "This morning" manual top-up accordion — type the overnight numbers Garmin
   withholds from Health Connect. Collapsed = one calm line; terracotta appears
   only on the ACTIVELY-focused field (:focus-within), not a resting-filled one. */
.mt{margin-top:12px;margin-bottom:15px}
.mt-add{border:none;background:none;color:var(--tx3);font-family:inherit;font-size:0.90625rem;font-weight:600;cursor:pointer;padding:5px 0}
.mt-add:hover{color:var(--select)}
.mt-head{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;font-family:inherit;
  font-size:0.90625rem;font-weight:640;color:var(--tx);cursor:pointer;padding:5px 0;text-align:left}
.mt-cv{color:var(--tx3);transition:transform .15s;display:inline-block;font-size:1.0625rem;line-height:1}
.mt.open .mt-cv{transform:rotate(90deg)}
.mt-sum{color:var(--tx2);font-size:0.84375rem;margin-left:auto;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mt-sum b{color:var(--tx);font-weight:700}
.mt-sum.opt{color:var(--tx3);font-weight:560}
.mt-sum.done{color:var(--good);font-weight:600}
.mt-body{margin-top:9px}
.mt-opt{color:var(--tx3);font-weight:500}
/* Subtitle now sits ABOVE the metric tiles, explaining what the manual entry is for. */
.mt-sub{font-size:0.84375rem;color:var(--tx3);line-height:1.4;margin:0 0 9px}
.mt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px}
.mtu{display:flex;flex-direction:column;gap:2px;min-width:0;background:var(--card2);border:1px solid var(--line);
  border-radius:var(--rad-sm);padding:8px 11px;cursor:text;transition:border-color .12s,background .12s}
.mtu:focus-within{border-color:var(--select);background:var(--card)}
.mtu .n{font-size:0.6875rem;color:var(--tx2);font-weight:660;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtu .row{display:flex;align-items:baseline;gap:3px;min-width:0}
.mtu input{border:none;background:none;font:inherit;font-size:1.15rem;font-weight:700;color:var(--tx);width:100%;min-width:0;font-variant-numeric:tabular-nums;padding:0;outline:none}
.mtu input::placeholder{color:var(--tx3);font-weight:500}
.mtu input::-webkit-outer-spin-button,.mtu input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mtu input[type=number]{-moz-appearance:textfield}
.mtu .u{font-size:0.75rem;color:var(--tx2);flex:none}
.mt-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:11px}
.mt-note{font-size:0.84375rem;color:var(--tx3);line-height:1.4}
.mt-choose{border:none;background:none;color:var(--tx3);font-family:inherit;font-size:0.8125rem;font-weight:600;cursor:pointer;white-space:nowrap}
.mt-choose:hover{color:var(--select)}
/* Sources-tab backfill: a day picker + the same fields; a day the zip already
   covers shows read-only ("synced") instead of an editable input. */
.sm-top{display:flex;gap:8px;align-items:center;margin-bottom:9px}
.sm-date{flex:1;min-width:0}
.mtu.synced{opacity:.8;cursor:default}
.mtu .mtu-v{font-size:1.15rem;font-weight:700;color:var(--tx2);width:100%;font-variant-numeric:tabular-nums}
.mtu .mtu-tag{font-size:0.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--good);margin-top:1px}

/* Perception-vs-sleep sheet (Phase B). Divergence uses good/bad, not teal. */
.ci-sum{font-size:0.96875rem;color:var(--tx);line-height:1.5;margin:14px 0 6px}
.ci-rows{display:flex;flex-direction:column}
.ci-row{
  display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:10px;
  padding:9px 2px;border-top:1px solid var(--line);font-size:0.90625rem;
}
.ci-rd{color:var(--tx2)}
.ci-rr{font-weight:700;color:var(--tx);font-variant-numeric:tabular-nums}
.ci-rs{color:var(--tx3);font-variant-numeric:tabular-nums}
.ci-tag{font-size:0.78125rem;font-weight:640;padding:2px 9px;border-radius:999px;white-space:nowrap}
.ci-tag.up{color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent)}
.ci-tag.dn{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}
.ci-tag.neut{color:var(--tx3);background:var(--card2)}
/* Calibration breakdown — what each 1–5 rating has meant (avg Sleep Score). */
.pc-h{font-size:0.9375rem;font-weight:700;color:var(--tx);margin:20px 0 2px}
.pc-sub{font-size:0.84375rem;color:var(--tx3);margin:0 0 10px}
.pc-cal{display:flex;flex-direction:column;gap:9px}
.pc-crow{display:grid;grid-template-columns:2.4em 1fr auto;align-items:center;gap:11px}
.pc-rlab{font-weight:700;color:var(--tx);font-variant-numeric:tabular-nums;text-align:right}
.pc-rlab small{font-weight:500;color:var(--tx3)}
.pc-track{height:8px;border-radius:999px;background:var(--card2);overflow:hidden}
.pc-fill{display:block;height:100%;border-radius:999px;background:var(--accent)}
.pc-sc{font-variant-numeric:tabular-nums;color:var(--tx);font-weight:640;white-space:nowrap}
.pc-sc small{font-weight:500;color:var(--tx3)}
.pc-recent .ci-row{grid-template-columns:1fr auto auto}
.pc-note{font-size:0.8125rem;color:var(--tx3);line-height:1.5;margin-top:16px}

/* ── toast ── */
.toast{
  /* Above drawers/scrims (z 180/200) so a confirmation fired from inside an open
     sheet — e.g. Copy / Download in the AI summary — isn't hidden behind it. */
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + var(--safe-b));z-index:250;
  background:var(--tx);color:var(--bg);padding:11px 19px;border-radius:22px;
  font-size:0.96875rem;font-weight:560;box-shadow:0 4px 16px rgba(0,0,0,.25);animation:fade .18s;
  max-width:88vw;text-align:center;
}

/* ═══════════════════════════════════════════
   STATE tab — canvas redesign
   The logging surface floats on the cream canvas: no card boxes, sections
   split by dividers that fade out at both edges. See redesign/00-surface-system.
   ═══════════════════════════════════════════ */

/* Section separation (§7b): an uppercase eyebrow kicker + air for a major break,
   and a whisper-quiet --card2 band to group a chart / data-dense section by
   content type (not an every-other stripe). Available app-wide; placed per section. */
.section-eyebrow{font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:6px}
.section-tint{background:var(--card2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}

/* The signature divider: a hairline that fades to transparent at both ends. */
.divider{height:1px;border:0;margin:36px 22px;
  background:linear-gradient(90deg,transparent,
    var(--sep) 12%,var(--sep) 88%,transparent)}

/* Section head with an optional (i). Reuses .card h2 sizing without the box. */
.cvs{padding:0 2px}
.cvs-head{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.cvs-head h2{font-size:1.0625rem;font-weight:650;letter-spacing:-.01em}

/* ── Per-card "How it works" overlay ──
   A frosted panel that slides in from the right over just its card (matching the
   card's footprint) to give prose + cross-tab links room, without tooltips or a
   swipe gesture that would fight the charts. Keep each panel's copy tight so it
   fits the card; a longer one scrolls internally. Opt a card in with .has-about. */
.cvs.has-about{position:relative;overflow:hidden}
.about-open{margin-left:auto;border:none;background:none;color:var(--select);
  font:inherit;font-size:0.8125rem;font-weight:640;cursor:pointer;white-space:nowrap;
  padding:2px 0;display:inline-flex;align-items:center;gap:4px}
.about-open .arw{transition:transform .18s ease}
.about-open:hover .arw{transform:translateX(2px)}
.card-about{position:absolute;inset:0;z-index:6;border-radius:14px;overflow:auto;
  -webkit-overflow-scrolling:touch;border:1px solid var(--line);
  background:var(--about-bg);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);backdrop-filter:blur(16px) saturate(1.08);
  box-shadow:-16px 0 30px -20px rgba(0,0,0,.22);
  transform:translateX(101%);visibility:hidden;
  transition:transform .36s cubic-bezier(.32,.72,0,1),visibility 0s linear .36s}
.card-about.on{transform:translateX(0);visibility:visible;
  transition:transform .36s cubic-bezier(.32,.72,0,1),visibility 0s}
.ca-inner{padding:14px 16px 16px}
.about-back{border:none;background:none;color:var(--select);font:inherit;font-size:0.9rem;
  font-weight:640;cursor:pointer;padding:2px 0;margin-bottom:8px;
  display:inline-flex;align-items:center;gap:5px}
.card-about h3{margin:2px 0 8px;font-size:1.03125rem;font-weight:650;color:var(--tx)}
.card-about p{margin:0 0 11px;font-size:0.90625rem;line-height:1.55;color:var(--tx2)}
/* Link rows — quiet editorial list (no boxes): leading icon, hairline dividers. */
.ca-links{display:flex;flex-direction:column;margin-top:12px}
.ca-link{display:flex;align-items:center;gap:11px;width:100%;
  padding:12px 4px;border:0;border-top:1px solid var(--line);border-radius:0;background:none;
  color:var(--tx);font:inherit;font-size:0.875rem;font-weight:560;text-align:left;
  text-decoration:none;cursor:pointer}
.ca-link .ca-ico{color:var(--select);flex:none;display:inline-flex}
.ca-link .ca-lab{flex:1}
.ca-link:hover,.ca-link:hover .ca-lab{color:var(--select)}
.ca-link .arw{color:var(--select);flex:none;font-weight:700}

/* Small unit caption above a chart (replaces the vertical y-axis title):
   e.g. "Overnight HRV · ms", right-aligned + muted. */
.chart-cap{text-align:right;color:var(--tx3);font-size:0.6875rem;font-weight:500;
  font-variant-numeric:tabular-nums;margin:2px 2px 3px;line-height:1.3}
.chart-cap:empty{display:none}

/* Single CTA that replaces the inline Daily-Impact filters: a quiet soft-grouped
   pill on the canvas that opens the analysis drawer. Main label + a live count
   below it, arrow on the right. */
.filters-cta{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;
  width:100%;margin:14px 0 2px;padding:11px 14px;border:1px solid var(--line);
  border-radius:var(--rad-sm);background:var(--card2);color:var(--tx);font:inherit;
  cursor:pointer;text-align:left}
.filters-cta:hover{border-color:var(--accent)}
.filters-cta .fc-main{grid-column:1;font-weight:600;font-size:0.90625rem}
.filters-cta .fc-sub{grid-column:1;margin-top:2px;color:var(--tx2);font-size:0.8125rem}
.filters-cta .fc-sub:empty{display:none}
.filters-cta .fc-arrow{grid-column:2;grid-row:1 / span 2;color:var(--tx3);font-size:1.15rem}

/* (i) info affordance — hover (desktop) or tap (.open, set in JS). */
.info-i{position:relative;border:none;background:transparent;color:var(--tx3);
  cursor:pointer;font-size:0.96875rem;line-height:1;padding:0 1px;display:inline-flex;align-items:center}
.info-i:hover{color:var(--accent)}
.info-i .tip{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  width:max-content;max-width:210px;background:var(--tx);color:var(--bg);
  font-size:0.84375rem;font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;
  border-radius:10px;padding:8px 11px;box-shadow:0 6px 20px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transition:opacity .15s;z-index:120;text-align:left;pointer-events:none}
.info-i:hover .tip,.info-i.open .tip{opacity:1;visibility:visible}
/* Keep bubbles on-screen: the far-right Active-Era tip opens leftward, and the
   content column clips stray horizontal overflow so no bubble adds a page
   scrollbar (vertical is untouched, so tips still rise above their icon). */
.active-era .info-i .tip{left:auto;right:-4px;transform:none}
/* A spoke-head sits at the very top of the scroll area, so an upward tip clips
   off-screen — open these downward instead. */
.spoke-head .info-i .tip{top:calc(100% + 7px);bottom:auto}
.wrap{overflow-x:clip}

/* ── Eras & Timelines: one shared vertical axis, lanes against one date ruler ──
   Blocks are strictly proportional — a 15-day era looks like 15 days — so the
   tap target is padded invisibly instead of the block being inflated. */
.tlbox{border:1px solid var(--line);border-radius:var(--rad,14px);background:var(--card2);
  overflow:hidden;margin-top:4px}
.tl-head{display:flex;gap:4px;padding:7px 8px 6px;border-bottom:1px solid var(--line);background:var(--card)}
.tl-gutspace{width:34px;flex:none}
.tl-railspace{width:5px;flex:none}
.tl-col{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px}
.tl-cn{font-size:0.625rem;font-weight:640;color:var(--tx2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
  /* a button now (it opens the timeline sheet) — keep it looking like the label
     it was, and give it a real tap target without moving the row */
  border:0;background:transparent;font-family:inherit;letter-spacing:inherit;
  padding:4px 2px;margin:-4px 0;cursor:pointer;max-width:100%}
.tl-cn:hover{color:var(--accent)}
.tl-cn.on{color:var(--select)}
.tl-plus{width:17px;height:17px;flex:none;border-radius:5px;background:var(--card2);
  border:1px solid var(--line);color:var(--tx3);font-size:0.75rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0}
.tl-plus:hover{border-color:var(--select);color:var(--select)}
.tl-plus.on{background:var(--select);border-color:var(--select);color:#fff}
/* isolate: the blocks inside stack against each other, not against the page. */
.tl-body{display:flex;gap:4px;padding:8px;position:relative;isolation:isolate}
.tl-gut{width:34px;flex:none;position:relative}
.tl-gut i{position:absolute;right:3px;font-style:normal;font-size:0.5625rem;color:var(--tx3);
  transform:translateY(-50%);white-space:nowrap}
.tl-lane{flex:1;position:relative;min-width:0}
.tl-era{position:absolute;left:0;right:0;border:0;border-radius:4px;padding:0 4px;cursor:pointer;
  display:flex;align-items:center;font:inherit;color:var(--tx);text-align:left;overflow:visible}
/* invisible hit area — keeps a 15-day era reachable without drawing it bigger */
.tl-era::after{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:100%;min-height:28px}
.tl-era .tl-n{font-size:0.5625rem;font-weight:640;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;position:relative;z-index:1;pointer-events:none}
.tl-era.lt{color:#fff}
.tl-era.off{opacity:.35}
.tl-era.new{background:var(--card)!important;border:1.5px dashed var(--select);color:var(--select)}
.tl-era:focus-visible{outline:2px solid var(--select);outline-offset:1px}
.tl-forced{position:absolute;right:3px;top:50%;transform:translateY(-50%);font-size:0.625rem;
  opacity:.75;pointer-events:none}
.tl-rail{width:5px;flex:none;position:relative}
.tl-state{position:absolute;left:0;right:0;border-radius:3px;background:var(--line)}
.tl-state.thin{background:var(--tc-muddy)}
.tl-cuts{position:absolute;top:8px;left:46px;right:17px;pointer-events:none;z-index:260}
.tl-cut{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--line2)}
.tl-new{margin-top:10px;display:flex;flex-direction:column;gap:8px}

/* Era sheet — four rows and one disclosure. */
.erasheet{margin-top:12px;border:1px solid var(--line);border-radius:var(--rad,14px);
  background:var(--card);padding:11px 12px 12px;display:flex;flex-direction:column;gap:8px}
.es-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:0.9375rem;color:var(--tx)}
.erasheet .frow{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card2);font-size:0.8125rem}
.erasheet .frow .l{color:var(--tx2)}
.erasheet .frow .v{font-variant-numeric:tabular-nums;color:var(--tx);border:0;background:transparent;
  font:inherit;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis}
.erasheet .frow .v.link{color:var(--accent);cursor:pointer}
.erasheet .yn{display:inline-flex;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:2px;gap:2px;flex:none}
.es-ch{font:inherit;font-size:0.75rem;padding:3px 10px;border-radius:6px;border:0;background:transparent;
  color:var(--tx2);cursor:pointer;font-weight:520}
.es-ch.on{background:var(--select-dim);color:var(--select);font-weight:640}
.es-help{font-size:0.75rem;color:var(--tx2);line-height:1.45;padding:0 2px;margin-top:-2px}
.es-more{margin-top:2px}
.es-more ul{margin:6px 0 0;padding-left:18px;font-size:0.75rem;color:var(--tx2);line-height:1.7}
.es-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px;
  padding-top:9px;border-top:1px solid var(--line2)}
.es-show{display:inline-flex;align-items:center;gap:6px;font-size:0.75rem;color:var(--tx2);
  margin-right:auto;cursor:pointer}

/* ── Trends: the contrast report (hero + marked list) ──
   A grade is a magnitude with three states, so it reads as a mark you learn once
   rather than a sentence you re-read. Three grade colours, reused everywhere:
   clean = teal (the app's affirmative), read-the-context = gold (the existing
   "emerging" amber), not-comparable = neutral grey. */
:root{ --tc-clean:#0E7F74; --tc-muddy:#9A6410; --tc-none:#8B8B93; }
:root[data-theme="dark"],:root.dark{ --tc-clean:#41B5A6; --tc-muddy:#D6A44E; --tc-none:#9AA0AC; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --tc-clean:#41B5A6; --tc-muddy:#D6A44E; --tc-none:#9AA0AC; } }

.tc-hero{border:1px solid var(--line);border-radius:var(--rad,14px);background:var(--card);
  padding:12px 13px;display:flex;flex-direction:column;gap:3px;margin-top:2px}
.tc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tc-mark{display:inline-flex;align-items:center;gap:5px;font-size:0.625rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.tc-mark i{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:0.5625rem;color:var(--card);flex:none}
.tc-mark.tc-clean{color:var(--tc-clean)} .tc-mark.tc-clean i{background:var(--tc-clean)}
.tc-mark.tc-muddy{color:var(--tc-muddy)} .tc-mark.tc-muddy i{background:var(--tc-muddy)}
.tc-mark.tc-none{color:var(--tc-none)}   .tc-mark.tc-none i{background:var(--tc-none)}
.tc-n{font-size:0.6875rem;color:var(--tx3);font-variant-numeric:tabular-nums}
.tc-pair{font-size:0.84375rem;font-weight:620;margin-top:2px;color:var(--tx)}
.tc-big{font-size:2rem;line-height:1;font-weight:640;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--tx)}
.tc-big small{font-size:0.75rem;font-weight:500;color:var(--tx3);margin-left:6px}
.tc-why{font-size:0.71875rem;color:var(--tx2);margin:2px 0 0;line-height:1.45}
/* The dot ties the sentence to the mark at the top of the card, so it is clear
   the grade is about the COMPARISON and not about the numbers above it. */
.tc-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;
  margin-right:6px;position:relative;top:-1px}
.tc-dot.tc-clean{background:var(--tc-clean)} .tc-dot.tc-muddy{background:var(--tc-muddy)}
.tc-dot.tc-none{background:var(--tc-none)}
/* The comparison is the unit; the outcomes are its content. Names left, values
   right, one per line — the eye runs down a column of figures instead of
   picking them out of a sentence. */
.tc-mets{margin-top:9px}
.tc-met{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:6px 0;border-bottom:1px solid var(--line2)}
.tc-met:last-child{border-bottom:0}
.tc-mn{font-size:0.8125rem;color:var(--tx2)}
.tc-mv{font-size:1rem;font-weight:650;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;white-space:nowrap;color:var(--tx)}
.tc-mv small{font-size:0.6875rem;font-weight:500;color:var(--tx3);margin-left:3px}
.tc-mv.up{color:var(--good)} .tc-mv.down{color:var(--bad)}
/* What did NOT move matters as much as what did. */
.tc-quiet{font-size:0.71875rem;color:var(--tx3);margin:8px 0 0;line-height:1.45}
.tc-none-moved{font-size:1rem;font-weight:600;color:var(--tx2);margin-top:9px}
.tc-exp .tc-mets{margin-top:0;margin-bottom:7px}
.tc-exp .tc-mv{font-size:0.875rem}
/* A timeline you can't compare yet: say what to do, don't answer another question. */
.tc-none-yet{font-size:0.84375rem;color:var(--tx2);line-height:1.5;margin:8px 0 0;
  padding:14px 15px;border:1px dashed var(--line);border-radius:var(--rad,14px);
  background:var(--card2)}
.tc-all{display:block;width:100%;margin-top:7px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--rad-sm);background:var(--card);color:var(--tx2);font:inherit;
  font-size:0.75rem;font-weight:580;cursor:pointer}
.tc-all:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.tc-key .tc-info{margin-left:auto;font-size:0.875rem;line-height:1;padding:0 2px;
  border:0;background:transparent;color:var(--tx3);cursor:pointer}
.tc-key .tc-info:hover,.tc-key .tc-info.on{color:var(--accent)}
/* The grade key, opened from the (i). A panel, not a hover bubble: three
   definitions cannot wrap legibly inside a 210px tooltip on a phone. */
.tc-legend{margin-top:7px;padding:11px 12px;background:var(--card2);
  border:1px solid var(--line);border-radius:var(--rad-sm);
  display:flex;flex-direction:column;gap:8px}
.tc-ldef{display:flex;align-items:flex-start;gap:8px;font-size:0.75rem;
  color:var(--tx2);line-height:1.5}
.tc-ldef i{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px;font-style:normal}
.tc-ldef i.tc-clean{background:var(--tc-clean)} .tc-ldef i.tc-muddy{background:var(--tc-muddy)}
.tc-ldef i.tc-none{background:var(--tc-none)}
.tc-ldef b{color:var(--tx);font-weight:640}
.tc-exp .tc-why{margin-top:6px}

.tc-lbl{font-size:0.625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3);
  font-weight:600;margin:13px 0 6px}
.tc-rows{border:1px solid var(--line);border-radius:var(--rad,14px);overflow:hidden}
.tc-row{display:grid;grid-template-columns:1fr auto 20px;gap:9px;align-items:center;width:100%;
  padding:9px 11px;border:0;border-bottom:1px solid var(--line2);background:var(--card);
  font:inherit;font-size:0.78125rem;text-align:left;cursor:pointer;color:var(--tx)}
.tc-rows .tc-row:last-of-type{border-bottom:0}
.tc-row:hover{background:color-mix(in srgb,var(--tx) 4%,var(--card))}
.tc-row.open{background:var(--card2)}
.tc-p{font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tc-p em{font-style:normal;color:var(--tx3);font-weight:400;font-size:0.6875rem;display:block}
.tc-v{font-variant-numeric:tabular-nums;font-weight:620}
/* House rule: a number that hasn't cleared its own error bar greys out rather
   than hiding. The grade mark rates the comparison; this rates the number. */
.tc-weak{color:var(--tx3);font-weight:560}
.tc-big.tc-weak{color:var(--tx3)}
.tc-g{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  font-size:0.59375rem;color:var(--card);justify-self:end}
.tc-g.tc-clean{background:var(--tc-clean)} .tc-g.tc-muddy{background:var(--tc-muddy)}
.tc-g.tc-none{background:var(--tc-none)}
.tc-exp{padding:0 11px 11px;background:var(--card2);border-bottom:1px solid var(--line2);
  display:flex;flex-direction:column;gap:7px;font-size:0.75rem;color:var(--tx2);line-height:1.5}
.tc-exp p{margin:0}
.tc-exp .tc-q{border-left:2px solid var(--line);padding-left:9px;font-style:italic}
.tc-key{display:flex;gap:12px;flex-wrap:wrap;font-size:0.6875rem;color:var(--tx3);margin:8px 0 0}
.tc-key span{display:inline-flex;align-items:center;gap:4px}
.tc-key i{width:9px;height:9px;border-radius:50%;font-style:normal;flex:none}
.tc-key i.tc-clean{background:var(--tc-clean)} .tc-key i.tc-muddy{background:var(--tc-muddy)}
.tc-key i.tc-none{background:var(--tc-none)}

/* ── Treatments dose calendar (GitHub-style heatmap + tabbed capped list) ──
   Per-treatment colours from a fixed 6-hue palette, deliberately clear of the
   app's terracotta(--select)/teal(--accent) so data reads apart from UI state. */
:root{ --dose-empty:#E9E1D3;
  --dose-c1:#B4632E; --dose-c2:#3F5FA6; --dose-c3:#4F8A5B;
  --dose-c4:#7A5AA6; --dose-c5:#A84A7B; --dose-c6:#8A6D4B; }
:root[data-theme="dark"],:root.dark{ --dose-empty:#2A241F;
  --dose-c1:#E0975F; --dose-c2:#8FA6E8; --dose-c3:#7FBF8C;
  --dose-c4:#B79BE0; --dose-c5:#E08FB8; --dose-c6:#C4A57A; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --dose-empty:#2A241F;
  --dose-c1:#E0975F; --dose-c2:#8FA6E8; --dose-c3:#7FBF8C;
  --dose-c4:#B79BE0; --dose-c5:#E08FB8; --dose-c6:#C4A57A; } }

.dosegrid{display:flex;flex-direction:column;gap:12px;margin-top:11px}
.dg-gridwrap{overflow-x:auto;padding-bottom:2px}
.dg-scroll{width:max-content}
.dg-months{position:relative;height:14px;margin-left:21px;margin-bottom:4px}
.dg-months span{position:absolute;top:0;font-size:0.625rem;color:var(--tx3);letter-spacing:.02em;white-space:nowrap}
.dg-plot{display:flex;gap:0;position:relative}
.dg-days{display:grid;grid-template-rows:repeat(7,13px);gap:3px;width:21px;padding-right:5px;
  font-size:0.5625rem;color:var(--tx3);position:sticky;left:0;z-index:2;background:var(--bg)}
.dg-days span{line-height:13px;text-align:right}
.dg-cells{display:grid;grid-template-rows:repeat(7,13px);grid-auto-flow:column;grid-auto-columns:13px;gap:3px}
.dg-yline{position:absolute;top:0;width:1px;height:109px;background:var(--tx3);opacity:.32;z-index:1}
.dg-cell{width:13px;height:13px;border-radius:3px;background:var(--dose-empty)}
.dg-cell.dg-sched{background:transparent!important;box-shadow:inset 0 0 0 2px var(--c)}
.dg-cell.dg-today{outline:2px solid var(--accent);outline-offset:1px}
.dg-cell.dg-dim{opacity:.2}
.dg-cell[data-date]{cursor:pointer}
.dg-cell[data-date]:focus-visible{outline:2px solid var(--select);outline-offset:2px}
.dg-legend{display:flex;flex-wrap:wrap;gap:5px 14px;align-items:center;font-size:0.75rem;color:var(--tx2)}
.dg-k{display:inline-flex;align-items:center;gap:6px}
.dg-sw{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.dg-sw-sched{background:transparent;box-shadow:inset 0 0 0 2px var(--tx3)}
.dg-sw-today{background:var(--dose-empty);outline:2px solid var(--accent);outline-offset:-1px}
.dg-earlier{align-self:flex-start;border:0;background:transparent;color:var(--accent);
  font:inherit;font-size:0.8125rem;font-weight:560;cursor:pointer;padding:0}
.dg-earlier:hover{text-decoration:underline}
.dg-listhead{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line2);padding-top:11px}
.dg-lt{font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);font-weight:600}
.dg-n{font-size:0.6875rem;color:var(--tx3);font-variant-numeric:tabular-nums;margin-left:2px}
.dg-list{max-height:236px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;background:var(--card2)}
.dg-list ol{list-style:none;margin:0;padding:0}
.dg-list li{display:grid;grid-template-columns:88px 1fr 58px 40px 16px;align-items:center;gap:9px;
  padding:6px 10px;font-size:0.8125rem;border-bottom:1px solid var(--line2);scroll-margin:8px}
.dg-list li:last-child{border-bottom:0}
.dg-d{font-variant-numeric:tabular-nums;color:var(--tx)}
.dg-t{color:var(--tx2);display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-g{font-variant-numeric:tabular-nums;color:var(--tx3);text-align:right}
.dg-tagcell{text-align:right}
.dg-tag{font-size:0.625rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);font-weight:600;white-space:nowrap}
.dg-tag-sched{color:var(--tx3)}
.dg-x{border:0;background:transparent;color:var(--tx3);cursor:pointer;font-size:0.8125rem;line-height:1;justify-self:end;padding:0}
.dg-x:hover{color:var(--bad,#c0432e)}
.dg-list li.dg-flash{background:var(--select-soft)}
.dg-empty{padding:14px;font-size:0.8125rem;color:var(--tx3)}
@media (max-width:560px){ .dg-list li{grid-template-columns:78px 1fr 52px 34px 16px;gap:7px} }

/* Baseline snapshot (de-boxed hero) */
.snapshot{padding:4px 2px 0}
.snap-tag{font-size:0.8125rem;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--tx2)}
.snap-verdict{font-size:1.875rem;font-weight:740;letter-spacing:-.025em;margin-top:4px;line-height:1.1}
.snap-line{font-size:0.96875rem;color:var(--tx2);line-height:1.55;margin-top:6px}
.snap-line b{color:var(--tx);font-weight:620}
.snap-prompt{font-size:0.84375rem;font-style:italic;color:var(--tx3);text-align:center;
  margin-top:13px;line-height:1.5}
.explore-btn{display:block;margin:14px auto 2px;font-family:inherit;font-size:0.9375rem;font-weight:600;
  color:var(--tx);background:var(--card2);cursor:pointer;border-radius:22px;padding:9px 20px;
  border:1px solid var(--line)}
.explore-btn:hover{background:var(--card);border-color:var(--select)}

/* Hero gauge tiles — exactly three, no wrap (Design "value-forward + legend", 2c).
   The dial shows only the big value; the metric name + a bare graded delta share
   one compact legend line below, led by a dot in the graded colour. The tick still
   marks where the value falls in its trailing-90-day band. The "vs baseline"
   framing sits once in .kpis-base above the row, so tiles don't repeat it. */
.kpis-base{font-size:0.65625rem;color:var(--tx2);text-align:center;line-height:1.4;margin:13px 0 0}
.kpis-base b{color:var(--tx);font-weight:650}
#kpis{display:flex;gap:6px;margin:8px 0 0;grid-template-columns:none}
.gtile{flex:1;min-width:0;text-align:center}
.gwrap{position:relative;width:90px;max-width:100%;margin:0 auto}
.gauge{width:100%;height:auto;display:block}
.gv{position:absolute;left:0;right:0;bottom:0;font-size:1.25rem;font-weight:720;letter-spacing:-.02em;color:var(--tx);white-space:nowrap}
.gv small{font-size:0.53125rem;font-weight:500;color:var(--tx2)}
.glegend{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:6px}
.gdot{width:6px;height:6px;border-radius:50%;flex:none}
.gname{font-size:0.6875rem;font-weight:600;color:var(--tx2)}
.gdelta{font-size:0.6875rem;font-weight:700}
.gtile.nodata .gv{color:var(--tx3)}
/* A stale hero value (carried over from the last import, not today's) — dim the
   dial + number so it reads as "not fresh", but keep the name + date legible. */
.gtile.stale .gwrap{opacity:.42}
.gtile.stale .gdelta{opacity:.5}
/* Date on its own centered line under the legend (not inline, which wrapped the
   long "Resting HR · Aug 19" messily). Legends stay top-aligned across tiles. */
.gstale{font-size:0.625rem;color:var(--tx3);font-weight:500;text-align:center;line-height:1.2;margin-top:2px}
/* Desktop: the dial is fixed px, so on a wide tile it reads small next to the
   scaled-up text. Enlarge the dial + its value here (placed after the base rules
   above so it actually wins inside the media query). Phone is untouched. */
@media (min-width:900px){
  .gwrap{width:152px}
  .gv{font-size:1.6rem}
  .gv small{font-size:0.65rem}
}

/* Context & Treatments — 2-column grid of borderless check-rows. Scoped to the
   State containers so .tag stays a pill everywhere else. Markup is unchanged
   (still .tag/.on with dataset.t/k) — the check look is pure CSS. */
#log-tags,#log-shots{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:4px 0 0}
#log-tags .tag,#log-shots .tag{
  display:flex;align-items:center;justify-content:flex-start;gap:9px;text-align:left;
  border:none;border-radius:11px;padding:9px 11px;font-size:0.90625rem;font-weight:540;
  background:color-mix(in srgb,var(--tx) 4%,transparent);color:var(--tx2)}
#log-tags .tag::before,#log-shots .tag::before{
  content:"";width:17px;height:17px;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 1.5px var(--tx3);transition:background .15s,box-shadow .15s}
#log-tags .tag.on,#log-shots .tag.on{background:var(--select-dim);color:var(--select);font-weight:600}
#log-tags .tag.on::before,#log-shots .tag.on::before{
  content:"✓";background:var(--select);box-shadow:none;color:#fff;font-size:0.8125rem;
  display:grid;place-items:center;line-height:1}

/* Active Era — a status line under the Treatments subtitle, not a chip. */
.active-era{display:flex;align-items:center;gap:8px;margin:11px 0 3px;padding:8px 0;
  border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.active-era .ae-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-dim);flex:none}
.active-era .ae-lab{font-size:0.78125rem;text-transform:uppercase;letter-spacing:.5px;color:var(--tx3);font-weight:600}
.active-era .ae-val{font-size:0.90625rem;color:var(--tx);font-weight:600}
.active-era .info-i{margin-left:auto}

/* Explore-more drawer — the one raised (soft-grouped) layer on this screen. */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:180;
  opacity:0;visibility:hidden;transition:opacity .32s}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;left:0;right:0;bottom:0;height:85%;z-index:200;
  background:color-mix(in srgb,var(--card) 78%,transparent);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-radius:24px 24px 0 0;box-shadow:0 -16px 46px rgba(0,0,0,.32);
  transform:translateY(101%);transition:transform .42s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;max-width:940px;margin:0 auto}
.drawer.open{transform:translateY(0)}
/* While the user is dragging the sheet by its handle, kill the transition so it
   tracks the finger 1:1; it's restored on release to animate the snap/dismiss. */
.drawer.dragging{transition:none}
/* Lock the background while a sheet is open: no page scroll and no pull-to-refresh
   competing with the drag. The sheet (position:fixed) and its own scrollable body
   are unaffected. */
html.sheet-open, html.sheet-open body{overflow:hidden;overscroll-behavior:none}
/* The grab strip. touch-action:none on the head AND the handle itself (a child's
   default touch-action could otherwise let the browser claim a fast flick as a
   scroll). Taller padding = an easier, more reliable target. */
.drawer-head{position:relative;padding:16px 0 8px;flex:none;touch-action:none;cursor:grab}
.drawer.dragging .drawer-head{cursor:grabbing}
.drawer-handle{width:44px;height:5px;border-radius:3px;background:var(--tx3);opacity:.5;margin:0 auto;
  touch-action:none;transition:opacity .15s,width .15s}
.drawer.dragging .drawer-handle{opacity:.8;width:52px}
.drawer-close{position:absolute;top:5px;right:14px;width:30px;height:30px;border-radius:50%;border:none;
  background:color-mix(in srgb,var(--tx) 8%,transparent);color:var(--tx);cursor:pointer;font-size:1rem}
.drawer-body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:8px 22px calc(30px + var(--safe-b))}
.drawer-body h2{font-size:1.0625rem;font-weight:650;letter-spacing:-.01em;margin-bottom:3px}
/* AI summary sheet: a read-only monospace pane for the digest text + Copy. */
.ai-cap{font-size:.8rem;color:var(--tx3);margin:8px 0 6px;font-variant-numeric:tabular-nums}
.ai-out{width:100%;box-sizing:border-box;min-height:40vh;margin-bottom:12px;
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--tx);background:var(--card2);border:1px solid var(--line);border-radius:10px;
  padding:10px;white-space:pre;overflow:auto;resize:vertical}
.btn.ok{background:var(--good);border-color:var(--good);color:#fff}
.drawer-body .divider{margin:22px 0}
/* Look-closer date stepper: a centered "Thu · Aug 7, 2026" button between the
   arrows; the native date input is kept for the picker but visually hidden. */
.drawer-body .dayrow{position:relative}
.d-datebtn{flex:1;min-width:0;text-align:center;font-family:inherit;font-size:0.96875rem;
  font-weight:600;color:var(--tx);background:var(--card2);border:1px solid var(--line);
  border-radius:9px;padding:9px 12px;cursor:pointer}
.d-datebtn:hover{border-color:var(--accent)}
/* The native date input is only there to summon the OS picker; the visible
   control is .d-datebtn. Left unhidden it renders its own dd/mm/yyyy field and
   squeezes the label onto two lines. Both drawers use it. */
#d-pick,#am-pick{position:absolute;left:50%;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none}
/* look-closer inside the drawer: 3-up, centered (was left-aligned + ragged).
   grid-auto-rows:1fr forces EVERY row to the tallest row's height, so a tile that
   lacks a delta line (no baseline) or wraps its content can't make its row shorter
   or taller than the others — the whole grid stays uniform regardless of content. */
/* minmax(0,1fr) (not a bare 1fr, which is minmax(auto,1fr)): the auto floor lets a
   column with a long unbreakable label (e.g. "Readiness") grow past its equal share
   and steal width, so columns came out unequal. Zeroing the floor keeps all 3 equal. */
.drawer-body .mgrid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr}
/* Flex-column + center so the value/delta sit centred in the now-uniform box
   (a shorter tile no longer top-aligns and leaves a ragged gap at the bottom). */
.drawer-body .mtile{text-align:center;cursor:grab;user-select:none;-webkit-user-select:none;
  display:flex;flex-direction:column;justify-content:center;gap:1px}
.drawer-body .mtile.dragging{cursor:grabbing;opacity:.92;transform:scale(1.05);
  box-shadow:0 8px 22px rgba(0,0,0,.22);position:relative;z-index:3}

/* Give the label room to clear the top-right (i): pad it in so it wraps before
   the corner, and reserve a uniform 2-line zone so wrapped and single-line tiles
   stay the same height across the grid. */
.drawer-body .mtile .l{padding:0 16px;min-height:2.5em;line-height:1.14;
  display:flex;align-items:center;justify-content:center}
/* Per-tile (i): a small info affordance top-right; taps open one shared panel. */
.minfo{position:absolute;top:4px;right:5px;width:17px;height:17px;border-radius:50%;border:none;
  background:color-mix(in srgb,var(--tx) 8%,transparent);color:var(--tx2);
  font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;font-size:0.6875rem;
  line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;z-index:2}
.minfo:hover,.minfo.on{background:var(--accent-dim);color:var(--accent)}
/* The shared definition panel below the grid (one at a time, not 12 bubbles). */
.metric-defn{position:relative;background:var(--card2);border:1px solid var(--line);
  border-radius:var(--rad-sm);padding:12px 34px 12px 14px;margin-top:11px;
  opacity:0;transform:translateY(-3px);transition:opacity .16s,transform .16s}
.metric-defn.open{opacity:1;transform:none}
.metric-defn .defn-h{font-size:0.8125rem;font-weight:680;color:var(--tx);letter-spacing:.01em;margin-bottom:3px}
.metric-defn .defn-b{font-size:0.8125rem;line-height:1.5;color:var(--tx2)}
.metric-defn .defn-x{position:absolute;top:7px;right:8px;width:22px;height:22px;border-radius:50%;
  border:none;background:transparent;color:var(--tx3);font-size:0.8125rem;cursor:pointer;display:grid;place-items:center}
.metric-defn .defn-x:hover{background:color-mix(in srgb,var(--tx) 8%,transparent);color:var(--tx)}

/* (Tab-bar translucency is now handled by the progressive-fade gradient above;
   the old flat-background override was removed so it can't flatten the fade.) */

/* ═══════════ app-open transition (Take C: rise to seat) ═══════════
   Overlay painted over the booting app; animates once then removes itself,
   revealing the State tab. Spec: redesign/arche-open-transition-handoff.md.
   Applied to .splash-mark (the svg, an HTML-flow element) rather than an inner
   <g> so px transforms behave; the colour parts animate on top. */
:root{
  --splash-enter:1000ms; --splash-hold:340ms; --splash-exit:560ms;
  --splash-warm:400ms; --splash-hero:850ms; --splash-ease:cubic-bezier(.22,.61,.36,1);
}
/* The app is held back until the splash wordmark has seated, then dissolves in.
   OPACITY only — never display/visibility — so layout, ResizeObserver and chart
   sizing all settle underneath while it is hidden. The header is excluded: it
   holds the seat the mark flies into, and veiling it would hide the target. */
#app > main, #app > .tabbar{transition:opacity 460ms var(--splash-ease)}
/* transition:none on the VEILED state, so the transition above governs the
   removal only. Without it the veil fades ON as well as off, and the app sat
   visible for the first ~460ms before dimming out and coming back — the exact
   flash this was meant to remove. Caught by measuring when opacity reached 1,
   not by looking. */
#app.opening > main, #app.opening > .tabbar{opacity:0;transition:none}
@media (prefers-reduced-motion: reduce){
  /* No fly, no reveal to choreograph — show the app at once. */
  #app.opening > main, #app.opening > .tabbar{opacity:1}
  #app > main, #app > .tabbar{transition:none}
}

.splash{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;pointer-events:none}
/* Opening WASH — seafoam→gold entrance curtain. A cold (first-of-day) open clears it as
   the wordmark assembles so the mark reads on the clean bg; warm keeps the plain bg. */
.splash-ground{position:absolute;inset:0;background:linear-gradient(140deg,#8FB4B2 0%,#9FB487 42%,#D2984E 100%)}
.splash.warm .splash-ground{background:var(--page-bg)}
/* HERO frond — cream, centred, blooms alone on the wash before the wordmark (cold only). */
.splash-hero{position:absolute;width:180px;height:auto;opacity:0;transform:scale(.82);transform-origin:center}
.splash-hero svg{width:100%;height:auto;display:block;overflow:visible}
.splash-hero svg path{fill:#F6F1E6}
.splash.warm .splash-hero{display:none}
.splash.run:not(.warm) .splash-hero{animation:heroBloom var(--splash-hero) var(--splash-ease) both}
.splash.assemble:not(.warm) .splash-hero{animation:heroClear 520ms var(--splash-ease) both}
.splash.assemble:not(.warm) .splash-ground{animation:groundFade 620ms var(--splash-ease) both}
.splash-mark{position:relative;width:72%;max-width:250px;height:auto;overflow:visible;
  transform-origin:center center;opacity:0}
/* colour parts staged before the run */
.splash .mk-macron{opacity:0}
.splash .mk-frond{opacity:0;transform-box:fill-box;transform-origin:center bottom}
.splash .mk-underline{clip-path:inset(0 100% 0 0)}
/* ENTRANCE — cold: the wordmark assembles during .assemble (after the hero beat).
   :not(.exit) on the mark releases it so the exit's flyToSeat wins once it begins. */
.splash.assemble:not(.warm):not(.exit) .splash-mark{animation:mkSettle var(--splash-enter) var(--splash-ease) both}
.splash.assemble:not(.warm) .mk-underline{animation:wipeOn 300ms var(--splash-ease) 170ms both}
.splash.assemble:not(.warm) .mk-macron{animation:settleIn 240ms var(--splash-ease) 300ms both}
.splash.assemble:not(.warm) .mk-frond{animation:frondIn 320ms var(--splash-ease) 370ms both}
/* EXIT — rise to seat. Cold already cleared the ground during .assemble; only warm here. */
.splash.exit.warm .splash-ground{animation:groundFade calc(var(--splash-exit) * .62) var(--splash-ease) both}
.splash.exit .splash-mark{animation:flyToSeat var(--splash-exit) var(--splash-ease) both,
                                    markFade var(--splash-exit) linear both}
/* seat wordmark: held hidden through enter+hold, cross-fades in during exit */
.brandmark.seating .logo{opacity:0}
.brandmark.landing .logo{animation:seatIn var(--splash-exit) var(--splash-ease) both}
/* WARM open — quick fade, no per-stroke choreography */
.splash.warm .mk-underline{clip-path:none}
.splash.warm .mk-macron,.splash.warm .mk-frond{opacity:1;transform:none}
/* :not(.exit) so the quick-fade entrance stops matching once the exit begins —
   otherwise its higher specificity would override the exit's flyToSeat and the
   mark would jump instead of flying to its seat on a warm (repeat) open. */
.splash.warm.run:not(.exit) .splash-mark{animation:mkFade var(--splash-warm) var(--splash-ease) both}
.splash.warm.run .mk-underline,.splash.warm.run .mk-macron,.splash.warm.run .mk-frond{animation:none}
/* FALLBACK — Take A cross-fade (SPLASH_FALLBACK flag); seat stays visible */
.splash.exit.fallback .splash-mark{animation:splashOut var(--splash-exit) var(--splash-ease) both}
.splash.exit.fallback .splash-ground{animation:groundFade var(--splash-exit) var(--splash-ease) both}

@keyframes mkSettle{from{opacity:0;transform:translateY(9px) scale(.986)} to{opacity:1;transform:none}}
@keyframes wipeOn{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes settleIn{from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none}}
@keyframes frondIn{from{opacity:0;transform:translateY(6px) scale(.94)} to{opacity:1;transform:none}}
@keyframes heroBloom{from{opacity:0;transform:scale(.82)} to{opacity:1;transform:scale(1)}}
@keyframes heroClear{from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(1.22) translateY(-6px)}}
@keyframes groundFade{from{opacity:1} to{opacity:0}}
@keyframes splashOut{from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-8px)}}
@keyframes markFade{0%,80%{opacity:1} 100%{opacity:0}}
@keyframes seatIn{0%,82%{opacity:0} 100%{opacity:1}}
@keyframes mkFade{from{opacity:0} to{opacity:1}}
@keyframes flyToSeat{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(var(--seat-tx,0),var(--seat-ty,-292px)) scale(var(--seat-s,.369))}
}
/* REDUCED MOTION — no movement, plain opacity cross-fade both ways */
@media (prefers-reduced-motion:reduce){
  /* No motion, no wash, no hero — a plain opacity cross-fade both ways. !important so
     the simple fade beats the more-specific .assemble entrance rules. */
  .splash-ground{background:var(--page-bg)!important}
  .splash-hero{display:none!important}
  .splash.run .splash-mark,.splash.assemble .splash-mark{animation:mkFade var(--splash-enter) linear both!important}
  .splash.assemble .mk-underline{animation:none!important;clip-path:none!important}
  .splash.assemble .mk-macron,.splash.assemble .mk-frond{animation:none!important;opacity:1!important;transform:none!important}
  .splash.exit .splash-mark{animation:mkFade var(--splash-exit) linear reverse both!important}
  .splash.exit .splash-ground{animation:groundFade var(--splash-exit) linear both}
  .brandmark.landing .logo{animation:mkFade var(--splash-exit) linear both}
}
.tl-gut i.yr{color:var(--tx2);font-weight:640}