/* ===================================================================
   Peptific · App UI Kit (component layer)
   Reusable iOS chrome + primitives for every Phase 3 screen.
   Built entirely on the locked Phase 2 tokens (../../styles.css).
   393×852 logical iPhone. Light by default; [data-theme="dark"] flips.
   =================================================================== */

*{box-sizing:border-box;}
.ak, .ak *{ -webkit-font-smoothing:antialiased; }

/* ---------- Device frame ---------- */
.device{
  width:415px; height:874px; flex:none;
  background:#0A0A0C; border-radius:58px; padding:11px;
  box-shadow:0 40px 90px -30px rgba(20,24,30,.5), 0 0 0 2px #1b1b1f inset;
  position:relative;
}
.screen{
  position:relative; width:393px; height:852px; border-radius:47px; overflow:hidden;
  background:var(--canvas); display:flex; flex-direction:column;
  font-family:var(--font-sans); color:var(--ink);
}
.island{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:120px; height:34px; background:#08080A; border-radius:20px; z-index:60;
}

/* ---------- Status bar ---------- */
.statusbar{
  height:54px; flex:none; display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 26px 6px; font-weight:600; font-size:15px; color:var(--ink);
}
.statusbar .t{ font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.statusbar .r{ display:flex; align-items:center; gap:7px; }
.statusbar .r svg{ display:block; }

/* ---------- App bar (back + progress) ---------- */
.appbar{ display:flex; align-items:center; gap:14px; padding:4px 20px 10px; flex:none; }
.backbtn{
  width:36px; height:36px; border-radius:var(--radius-pill); flex:none;
  background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--elev-1);
  display:grid; place-items:center; color:var(--ink);
}
.backbtn svg{ width:18px; height:18px; }
.progress{ flex:1; height:7px; border-radius:var(--radius-pill); background:var(--canvas-sunken); overflow:hidden; display:flex; }
.progress > i{ display:block; height:100%; background:var(--accent); border-radius:var(--radius-pill); transition:width var(--dur-slow) var(--ease-out); }
.stepno{ font:var(--type-mono-s); color:var(--ink-3); flex:none; }

/* ---------- Scroll content ---------- */
.scr{ flex:1; overflow:hidden; padding:6px 20px 0; display:flex; flex-direction:column; }
.scr.center{ justify-content:center; }

/* ---------- Type helpers ---------- */
.kick{ font:var(--type-overline); letter-spacing:var(--tracking-overline); text-transform:uppercase; color:var(--accent-strong); }
.kick svg{ width:13px; height:13px; vertical-align:-1px; }
.branch-badge svg{ width:15px; height:15px; }
.notif .nic svg{ width:18px; height:18px; }
.h1{ font:var(--type-title-1); letter-spacing:var(--tracking-title); margin-top:10px; }
.h2{ font:var(--type-title-2); letter-spacing:var(--tracking-title); }
.sub{ font:var(--type-body); color:var(--ink-2); margin-top:10px; }
.tiny{ font:var(--type-footnote); color:var(--ink-2); }
.big-num{ font:var(--type-display-l); letter-spacing:var(--tracking-display); font-variant-numeric:tabular-nums; }
.big-num .u{ font-size:20px; font-weight:700; color:var(--ink-2); }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ---------- Cards ---------- */
.card{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-lg); box-shadow:var(--elev-1); }
.card.pad{ padding:15px; }

/* ---------- Option rows (single / multi select) ---------- */
.opts{ display:flex; flex-direction:column; gap:12px; }
.opt{
  display:flex; align-items:center; gap:14px; padding:14px; min-height:64px;
  background:var(--surface); border:1.5px solid var(--hairline); border-radius:var(--radius-md);
  box-shadow:var(--elev-1); transition:transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.opt-ic{ width:42px; height:42px; flex:none; border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent-strong); display:grid; place-items:center; }
.opt-ic svg{ width:22px; height:22px; }
.opt-tx{ flex:1; min-width:0; }
.opt-tx .t{ font:var(--type-headline); }
.opt-tx .s{ font:var(--type-footnote); color:var(--ink-2); margin-top:2px; }
.opt-check{ width:24px; height:24px; flex:none; border-radius:var(--radius-pill); border:2px solid var(--hairline); display:grid; place-items:center; color:#fff; }
.opt-check svg{ width:15px; height:15px; opacity:0; }
.opt.sel{ border-color:var(--accent); }
.opt.sel .opt-check{ background:var(--accent); border-color:var(--accent); }
.opt.sel .opt-check svg{ opacity:1; }

/* ---------- Chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; font:var(--type-caption); padding:7px 12px; border-radius:var(--radius-pill); background:var(--canvas-sunken); color:var(--ink-2); border:1px solid var(--hairline); white-space:nowrap; }
.chip svg{ width:14px; height:14px; }
.chip.accent{ background:var(--accent-soft); color:var(--accent-strong); border-color:transparent; }
.chip.sel{ background:var(--accent); color:var(--on-accent); border-color:transparent; }
.reffact{ display:inline-flex; align-items:center; gap:7px; font:var(--type-footnote); color:var(--accent-strong); background:var(--accent-soft); padding:8px 13px; border-radius:var(--radius-pill); }
.reffact svg{ width:15px; height:15px; }

/* ---------- Bottom dock (CTA) ---------- */
.dock{ flex:none; padding:14px 20px calc(14px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:10px; background:linear-gradient(180deg, transparent, var(--canvas) 24%); }
.cta{
  width:100%; min-height:56px; border:0; border-radius:var(--radius-pill); cursor:default;
  background:var(--accent); color:var(--on-accent); font-family:var(--font-sans); font-weight:750; font-size:17px;
  display:flex; align-items:center; justify-content:center; gap:9px; box-shadow:var(--glow-accent);
}
.cta:active{ transform:scale(var(--press-scale)); }
.cta.dark{ background:var(--ink); color:var(--canvas); box-shadow:var(--elev-2); }
.cta svg{ width:19px; height:19px; }
.ghostlink{ text-align:center; font:var(--type-callout); font-weight:600; color:var(--ink-2); padding:6px; }
.ghostlink.accent{ color:var(--accent-strong); }

/* ---------- Home indicator ---------- */
.homebar{ position:absolute; bottom:9px; left:50%; transform:translateX(-50%); width:138px; height:5px; border-radius:var(--radius-pill); background:var(--ink); opacity:.85; z-index:55; }

/* ---------- Live stack card ---------- */
.stackcard{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-xl); box-shadow:var(--elev-1); padding:14px 14px 15px; }
.stackcard .sc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.stackcard .sc-head .l{ font:var(--type-overline); letter-spacing:var(--tracking-overline); text-transform:uppercase; color:var(--ink-3); }
.stackcard .sc-head .r{ font:var(--type-caption); color:var(--accent-strong); }
.sc-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.sc-empty{ border:1.5px dashed var(--hairline); border-radius:var(--radius-md); padding:16px; text-align:center; font:var(--type-footnote); color:var(--ink-3); }
.sc-row{ display:flex; align-items:center; gap:8px; margin-top:11px; padding-top:11px; border-top:1px solid var(--separator); font:var(--type-footnote); color:var(--ink-2); }
.sc-row svg{ width:16px; height:16px; color:var(--accent-strong); flex:none; }

/* ---------- Week strip ---------- */
.weekstrip{ display:flex; gap:6px; }
.ws-day{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.ws-day .d{ font:var(--type-mono-s); color:var(--ink-3); }
.ws-day .dot{ width:100%; height:34px; border-radius:10px; background:var(--canvas-sunken); border:1px solid var(--hairline); display:grid; place-items:center; }
.ws-day .dot small{ width:7px; height:7px; border-radius:2px; background:transparent; }
.ws-day.on .dot{ background:var(--accent-soft); border-color:transparent; }
.ws-day.on .dot small{ background:var(--accent); }
.ws-day.today .d{ color:var(--accent-strong); font-weight:700; }

/* ---------- Rings (svg) ---------- */
.ring-wrap{ position:relative; display:inline-grid; place-items:center; }
.ring-wrap .ring-num{ position:absolute; font:var(--type-display-m); letter-spacing:var(--tracking-display); font-variant-numeric:tabular-nums; }
.ring-wrap .ring-num small{ font-size:14px; font-weight:700; color:var(--ink-2); }

/* ---------- Segmented control ---------- */
.seg{ display:flex; gap:4px; padding:4px; background:var(--canvas-sunken); border-radius:var(--radius-md); }
.seg button{ flex:1; border:0; background:transparent; font:var(--type-subhead); color:var(--ink-2); padding:9px; border-radius:var(--radius-sm); cursor:default; }
.seg button.on{ background:var(--surface); color:var(--ink); box-shadow:var(--elev-1); }

/* ---------- Fields ---------- */
.field{ background:var(--surface); border:1.5px solid var(--hairline); border-radius:var(--radius-md); padding:12px 14px; display:flex; align-items:center; gap:10px; }
.field .lab{ font:var(--type-footnote); color:var(--ink-3); }
.field input{ border:0; background:transparent; font:var(--type-title-2); letter-spacing:var(--tracking-title); color:var(--ink); width:100%; outline:none; font-variant-numeric:tabular-nums; }
.field input::placeholder{ color:var(--ink-3); font-weight:600; }
.field.focus{ border-color:var(--accent); box-shadow:var(--focus-ring); }
.unit-toggle{ display:flex; gap:3px; padding:3px; background:var(--canvas-sunken); border-radius:var(--radius-sm); }
.unit-toggle b{ font:var(--type-caption); padding:5px 9px; border-radius:8px; color:var(--ink-2); }
.unit-toggle b.on{ background:var(--accent); color:var(--on-accent); }

/* ---------- The visual syringe ---------- */
.syr{ position:relative; padding:22px 6px 4px; }
.syr-barrel{ position:relative; height:44px; border-radius:11px; background:var(--surface); border:1.5px solid var(--hairline); overflow:hidden; }
.syr-fill{ position:absolute; inset:0 auto 0 0; background:linear-gradient(180deg,#4fe0d2,var(--accent)); border-right:2.5px solid var(--accent-strong); }
.syr-ticks{ position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0, transparent 9px, rgba(20,32,29,.16) 9px, rgba(20,32,29,.16) 10px); }
.syr-plunger{ position:absolute; left:-12px; top:11px; width:14px; height:22px; border-radius:4px; background:var(--ink-2); }
.syr-needle{ position:absolute; right:-26px; top:20px; width:26px; height:4px; border-radius:2px; background:var(--ink-3); }
.syr-scale{ display:flex; justify-content:space-between; margin-top:6px; padding:0 2px; }
.syr-scale span{ font:var(--type-mono-s); color:var(--ink-3); }
.syr-flag{ position:absolute; top:0; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; }
.syr-flag .lab{ font:var(--type-caption); color:var(--on-accent); background:var(--accent-strong); padding:4px 9px; border-radius:var(--radius-pill); white-space:nowrap; }
.syr-flag .stem{ width:2px; height:14px; background:var(--accent-strong); }

/* ---------- Result chips row ---------- */
.results{ display:flex; gap:8px; }
.result{ flex:1; background:var(--canvas-sunken); border-radius:var(--radius-md); padding:9px 10px; text-align:center; }
.result .v{ font:var(--type-title-3); letter-spacing:var(--tracking-title); font-variant-numeric:tabular-nums; }
.result .k{ font:var(--type-mono-s); color:var(--ink-3); margin-top:3px; }

/* ---------- Trial timeline ---------- */
.timeline{ position:relative; padding-left:6px; }
.tl-item{ display:flex; gap:14px; padding-bottom:20px; position:relative; }
.tl-item:last-child{ padding-bottom:0; }
.tl-rail{ position:absolute; left:17px; top:34px; bottom:0; width:2.5px; background:linear-gradient(180deg,var(--accent),var(--hairline)); }
.tl-item:last-child .tl-rail{ display:none; }
.tl-dot{ width:36px; height:36px; flex:none; border-radius:var(--radius-pill); display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-strong); z-index:2; }
.tl-dot.solid{ background:var(--accent); color:var(--on-accent); }
.tl-dot svg{ width:18px; height:18px; }
.tl-bd .t{ font:var(--type-headline); }
.tl-bd .s{ font:var(--type-footnote); color:var(--ink-2); margin-top:3px; }

/* ---------- Plan selector ---------- */
.plans{ display:flex; flex-direction:column; gap:10px; }
.plan{ display:flex; align-items:center; gap:12px; padding:14px; border:2px solid var(--hairline); border-radius:var(--radius-md); background:var(--surface); position:relative; }
.plan.sel{ border-color:var(--accent); background:var(--accent-soft); }
.plan .radio{ width:22px; height:22px; border-radius:var(--radius-pill); border:2px solid var(--hairline); flex:none; display:grid; place-items:center; }
.plan.sel .radio{ border-color:var(--accent); }
.plan.sel .radio::after{ content:""; width:12px; height:12px; border-radius:var(--radius-pill); background:var(--accent); }
.plan .pl-main{ flex:1; }
.plan .pl-main .t{ font:var(--type-headline); }
.plan .pl-main .s{ font:var(--type-footnote); color:var(--ink-2); margin-top:2px; }
.plan .pl-price{ text-align:right; font:var(--type-title-3); letter-spacing:var(--tracking-title); }
.badge{ position:absolute; top:-10px; right:12px; font:var(--type-caption); font-size:11px; background:var(--accent); color:var(--on-accent); padding:3px 9px; border-radius:var(--radius-pill); }
.badge.warn{ background:var(--warn); color:#3a2a00; }
.branch-badge{ display:inline-flex; align-items:center; gap:6px; font:var(--type-caption); color:var(--support-strong); background:var(--support-soft); padding:6px 11px; border-radius:var(--radius-pill); }

/* ---------- Notification preview / native alert ---------- */
.notif{ background:rgba(255,255,255,.86); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:13px 14px; display:flex; gap:11px; align-items:flex-start; box-shadow:var(--elev-2); }
.notif .nic{ width:34px; height:34px; flex:none; border-radius:9px; background:linear-gradient(150deg,var(--icon-tile-top),var(--icon-tile-bottom)); display:grid; place-items:center; }
.notif .nbd .nt{ font:var(--type-subhead); font-weight:700; }
.notif .nbd .ns{ font:var(--type-footnote); color:var(--ink-2); margin-top:2px; }
.nativealert{ background:rgba(248,248,248,.94); backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--elev-3); width:280px; }
.nativealert .na-bd{ padding:18px 16px; text-align:center; }
.nativealert .na-bd .t{ font:var(--type-headline); font-weight:700; }
.nativealert .na-bd .s{ font:var(--type-footnote); color:var(--ink-2); margin-top:5px; }
.nativealert .na-btns{ display:flex; border-top:1px solid var(--hairline); }
.nativealert .na-btns button{ flex:1; border:0; background:transparent; padding:12px; font:var(--type-body); color:#0a84ff; cursor:default; }
.nativealert .na-btns button:first-child{ border-right:1px solid var(--hairline); }
.nativealert .na-btns button.bold{ font-weight:700; }

/* ---------- Tab bar (for app screens) ---------- */
.tabbar{ position:absolute; bottom:0; left:0; right:0; height:84px; background:rgba(255,255,255,.82); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-top:1px solid var(--hairline); display:flex; padding:8px 6px 22px; z-index:50; }
.tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--ink-3); }
.tab svg{ width:25px; height:25px; }
.tab .lb{ font-size:10px; font-weight:600; }
.tab.on{ color:var(--accent-strong); }

/* confetti dot */
.confetti i{ position:absolute; width:9px; height:9px; border-radius:2px; }

/* ===================================================================
   Batch 2 additions — Today · Calculator · Log sheet
   =================================================================== */

/* large-title nav */
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:2px 20px 6px; flex:none; }
.largetitle{ font-family:var(--font-display); font-weight:800; font-size:32px; letter-spacing:-.02em; }
.iconbtn{ width:36px; height:36px; border-radius:var(--radius-pill); display:grid; place-items:center; color:var(--accent-strong); background:transparent; border:0; }
.iconbtn svg{ width:29px; height:29px; }
.scrollarea{ flex:1; overflow:hidden; padding:4px 16px 90px; display:flex; flex-direction:column; gap:12px; }

/* streak pill */
.streak{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font:var(--type-subhead); color:var(--ink); background:var(--accent-soft); border:1px solid transparent; padding:8px 13px; border-radius:var(--radius-pill); align-self:flex-start; }
.streak svg{ width:16px; height:16px; color:var(--accent-strong); }
.streak b{ font-weight:800; }

/* card section header */
.cardhead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cardhead .l{ display:flex; align-items:center; gap:7px; font:var(--type-overline); letter-spacing:var(--tracking-overline); text-transform:uppercase; color:var(--ink-3); }
.cardhead .l svg{ width:14px; height:14px; color:var(--ink-3); }
.cardhead .r{ font:var(--type-caption); color:var(--ink-2); }
.cardhead .r.accent{ color:var(--accent-strong); font-family:var(--font-mono); font-weight:700; }

/* due-today rows */
.due-row{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--separator); }
.due-row:first-of-type{ padding-top:2px; }
.due-row:last-child{ border-bottom:0; padding-bottom:2px; }
.due-main{ flex:1; min-width:0; }
.due-main .nm{ font:var(--type-headline); }
.due-pills{ display:flex; gap:7px; margin-top:8px; }
.logbtn{ flex:none; border:0; background:var(--accent); color:var(--on-accent); font:var(--type-subhead); font-weight:750; padding:10px 20px; border-radius:var(--radius-pill); box-shadow:var(--glow-accent); }
.logged-ic{ flex:none; color:var(--accent); display:grid; place-items:center; }
.logged-ic svg{ width:30px; height:30px; }

/* week stack (the hero differentiator) */
.weekstack{ display:flex; gap:5px; }
.wk-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:9px 0 11px; border-radius:13px; }
.wk-col.today{ background:var(--accent-soft); }
.wk-col .wd{ font:var(--type-mono-s); color:var(--ink-3); }
.wk-col.today .wd{ color:var(--accent-strong); font-weight:800; }
.wk-dots{ display:flex; flex-direction:column; gap:5px; min-height:32px; justify-content:flex-end; }
.wk-dot{ width:10px; height:10px; border-radius:3px; }
.wk-dot.bpc{ background:var(--accent); }
.wk-dot.sema{ background:var(--accent-strong); }
.wk-dot.nad{ background:#7FD9CE; }
.wk-legend{ display:flex; gap:14px; margin-top:14px; padding-top:13px; border-top:1px solid var(--separator); }
.wk-legend span{ display:flex; align-items:center; gap:6px; font:var(--type-footnote); color:var(--ink-2); }
.wk-legend i{ width:9px; height:9px; border-radius:3px; }

/* pro upsell row */
.upsell{ display:flex; align-items:center; gap:11px; margin-top:14px; padding:12px 13px; background:var(--accent-soft); border-radius:var(--radius-md); }
.upsell svg{ width:20px; height:20px; color:var(--accent-strong); flex:none; }
.upsell .ut{ flex:1; font:var(--type-subhead); color:var(--accent-strong); }
.pro-pill{ flex:none; display:inline-flex; align-items:center; gap:5px; font:var(--type-caption); font-size:10.5px; font-weight:800; letter-spacing:.04em; color:var(--ink); background:var(--surface); border:1px solid var(--hairline); padding:5px 9px; border-radius:var(--radius-pill); }
.pro-pill svg{ width:12px; height:12px; color:var(--ink-2); }

/* feel slider */
.slider{ position:relative; height:10px; border-radius:var(--radius-pill); background:var(--accent-soft); margin:14px 8px 6px; }
.slider .fill{ position:absolute; inset:0 auto 0 0; border-radius:var(--radius-pill); background:var(--accent); }
.slider .knob{ position:absolute; top:50%; width:26px; height:26px; border-radius:var(--radius-pill); background:var(--surface); border:3px solid var(--accent); transform:translate(-50%,-50%); box-shadow:var(--elev-1); }
.slider-scale{ display:flex; justify-content:space-between; padding:0 4px; }
.slider-scale span{ font:var(--type-mono-s); color:var(--ink-3); }

/* empty state */
.empty{ text-align:center; padding:30px 18px; }
.empty .ei{ width:72px; height:72px; border-radius:22px; background:var(--accent-soft); color:var(--accent-strong); display:grid; place-items:center; margin:0 auto 16px; }
.empty .ei svg{ width:36px; height:36px; }
.empty .et{ font:var(--type-title-2); letter-spacing:var(--tracking-title); }
.empty .eb{ font:var(--type-callout); color:var(--ink-2); margin-top:9px; }

/* segmented (mode switch) — bigger than .seg */
.modeseg{ display:flex; gap:4px; padding:4px; background:var(--canvas-sunken); border-radius:var(--radius-md); }
.modeseg button{ flex:1; border:0; background:transparent; font:var(--type-subhead); font-weight:700; color:var(--ink-2); padding:9px; border-radius:var(--radius-sm); }
.modeseg button.on{ background:var(--surface); color:var(--accent-strong); box-shadow:var(--elev-1); }

/* calculator quick chips */
.qchips{ display:flex; gap:7px; margin-top:8px; }
.qchip{ flex:1; text-align:center; font:var(--type-subhead); color:var(--ink-2); background:var(--canvas-sunken); border:1.5px solid transparent; padding:9px 0; border-radius:var(--radius-sm); }
.qchip.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-strong); font-weight:700; }

/* two-up input row */
.inrow{ display:flex; gap:10px; }
.inrow .field{ flex:1; flex-direction:column; align-items:flex-start; gap:5px; }
.inrow .field .lab{ font:var(--type-overline); letter-spacing:.1em; }
.field .suffix{ font:var(--type-subhead); color:var(--ink-3); }

/* big visual syringe (calculator) */
.syrx{ padding:14px 18px 6px; }
.syrx-wrap{ position:relative; }
.syrx-needle{ position:absolute; left:-16px; top:50%; transform:translateY(-50%); width:18px; height:3px; background:var(--ink-3); border-radius:2px; }
.syrx-hub{ position:absolute; left:0; top:50%; transform:translateY(-50%); width:7px; height:16px; background:var(--ink-3); border-radius:3px; z-index:2; }
.syrx-flange{ position:absolute; right:-9px; top:50%; transform:translateY(-50%); width:7px; height:30px; background:var(--ink-2); border-radius:3px; }
.syrx-barrel{ position:relative; height:38px; margin:0 8px; border-radius:10px; background:var(--surface); border:1.5px solid var(--hairline); overflow:hidden; }
.syrx-fill{ position:absolute; inset:0 auto 0 0; background:linear-gradient(180deg,#5fe6d8,var(--accent)); }
.syrx-fill.over{ background:repeating-linear-gradient(45deg,var(--danger) 0 7px,#e85a5f 7px 14px); }
.syrx-ticks{ position:absolute; inset:0; }
.syrx-ticks i{ position:absolute; top:0; width:1.5px; background:rgba(20,32,29,.22); }
.syrx-ticks i.minor{ height:9px; }
.syrx-ticks i.mid{ height:16px; background:rgba(20,32,29,.4); }
.syrx-drawline{ position:absolute; top:-5px; bottom:-5px; width:3px; background:var(--accent-strong); box-shadow:0 0 10px 2px rgba(17,181,166,.7); border-radius:2px; z-index:3; }
.syrx-drawline.over{ background:var(--danger-strong); box-shadow:0 0 10px 2px rgba(220,61,67,.6); }
.syrx-nums{ position:relative; height:16px; margin:7px 8px 0; }
.syrx-nums span{ position:absolute; transform:translateX(-50%); font:var(--type-mono-s); color:var(--ink-3); }
.syr-caption{ text-align:center; font:var(--type-callout); font-weight:700; color:var(--accent-strong); margin-top:8px; }
.syr-caption.warn{ color:var(--danger-strong); display:flex; align-items:center; justify-content:center; gap:7px; }
.syr-caption.warn svg{ width:17px; height:17px; }

/* action button row */
.actionrow{ display:flex; gap:10px; margin-top:10px; }
.btn-soft{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; border:0; background:var(--accent-soft); color:var(--accent-strong); font:var(--type-subhead); font-weight:750; padding:14px; border-radius:var(--radius-md); }
.btn-soft svg{ width:18px; height:18px; }
.btn-outline{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; border:1.5px solid var(--hairline); background:var(--surface); color:var(--ink); font:var(--type-subhead); font-weight:750; padding:14px; border-radius:var(--radius-md); }
.btn-outline svg{ width:18px; height:18px; }

/* big result number (plan the water) */
.bigresult{ text-align:center; padding:14px 0 6px; }
.bigresult .v{ font-family:var(--font-display); font-weight:800; font-size:58px; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.bigresult .u{ font:var(--type-title-3); color:var(--ink-2); margin-top:6px; }

/* toast */
.toast{ position:absolute; left:50%; bottom:104px; transform:translateX(-50%); background:var(--ink); color:var(--canvas); font:var(--type-subhead); font-weight:650; padding:12px 18px; border-radius:var(--radius-pill); box-shadow:var(--elev-2); display:flex; align-items:center; gap:9px; z-index:70; white-space:nowrap; }
.toast svg{ width:17px; height:17px; color:var(--accent); }

/* bottom sheet */
.scrim{ position:absolute; inset:0; background:rgba(8,12,11,.42); z-index:40; }
.sheet{ position:absolute; left:0; right:0; bottom:0; max-height:90%; background:var(--canvas); border-radius:var(--radius-2xl) var(--radius-2xl) 0 0; z-index:45; display:flex; flex-direction:column; box-shadow:0 -20px 50px -20px rgba(8,12,11,.5); }
.grab{ width:38px; height:5px; border-radius:var(--radius-pill); background:var(--hairline); margin:9px auto 2px; flex:none; }
.sheet-nav{ display:flex; align-items:center; justify-content:space-between; padding:8px 20px 10px; flex:none; }
.sheet-nav .cancel{ font:var(--type-body); color:var(--accent-strong); }
.sheet-nav .stitle{ font:var(--type-title-3); letter-spacing:var(--tracking-title); }
.sheet-nav .spacer{ width:48px; }
.sheet-body{ overflow:hidden; padding:4px 16px 16px; display:flex; flex-direction:column; gap:10px; }

/* body map */
.bodymap{ position:relative; width:166px; margin:4px auto 2px; aspect-ratio:166/232; }
.bodymap > svg{ width:100%; height:100%; display:block; }
.site{ position:absolute; width:22px; height:22px; border-radius:var(--radius-pill); transform:translate(-50%,-50%); background:var(--canvas-sunken); border:2px solid var(--hairline); display:grid; place-items:center; }
.site.sel{ background:var(--accent); border-color:var(--accent); color:#fff; }
.site.sel svg{ width:13px; height:13px; }
.site.suggest{ border-color:var(--accent); background:var(--accent-soft); animation:sitepulse 1.6s ease-out infinite; }
@keyframes sitepulse{ 0%{ box-shadow:0 0 0 0 rgba(17,181,166,.5);} 70%{ box-shadow:0 0 0 12px rgba(17,181,166,0);} 100%{ box-shadow:0 0 0 0 rgba(17,181,166,0);} }
.site-label{ text-align:center; font:var(--type-subhead); font-weight:700; color:var(--accent-strong); margin-top:8px; }

/* toggle switch */
.switch{ width:48px; height:30px; border-radius:var(--radius-pill); background:var(--accent); position:relative; flex:none; }
.switch::after{ content:""; position:absolute; top:3px; left:21px; width:24px; height:24px; border-radius:var(--radius-pill); background:#fff; box-shadow:var(--elev-1); }
.switch.off{ background:var(--canvas-sunken); }
.switch.off::after{ left:3px; }

/* ===================================================================
   Batch 3 additions — Vials · Progress · Settings · Builder · viral
   =================================================================== */

/* vial card */
.vialcard{ display:flex; gap:14px; }
.vialcard .vc-main{ flex:1; min-width:0; }
.vialcard .vc-title{ font:var(--type-headline); }
.vialcard .vc-sub{ font:var(--type-footnote); color:var(--ink-2); margin-top:3px; }
.vialcard .vc-pills{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.expiry-ring{ position:relative; width:64px; height:64px; flex:none; display:grid; place-items:center; }
.expiry-ring .en{ position:absolute; text-align:center; line-height:1; }
.expiry-ring .en b{ font-family:var(--font-display); font-weight:800; font-size:20px; font-variant-numeric:tabular-nums; }
.expiry-ring .en small{ display:block; font:var(--type-mono-s); color:var(--ink-3); margin-top:1px; }
.vc-banner{ display:flex; align-items:center; gap:9px; margin-top:13px; padding:10px 12px; border-radius:var(--radius-md); background:var(--warn-soft); color:var(--warn-strong); font:var(--type-footnote); font-weight:600; }
.vc-banner svg{ width:17px; height:17px; flex:none; }
.discard{ display:flex; align-items:center; gap:7px; margin-top:13px; font:var(--type-footnote); color:var(--ink-3); }
.discard svg{ width:15px; height:15px; }

/* progress rings pair */
.ringpair{ display:flex; gap:18px; justify-content:center; padding:6px 0 2px; }
.ringpair figure{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.ringpair figcaption{ font:var(--type-footnote); color:var(--ink-2); }
.status-line{ text-align:center; font:var(--type-callout); font-weight:650; color:var(--accent-strong); margin-top:14px; }

/* line chart */
.chart{ position:relative; height:120px; margin-top:6px; }
.chart svg{ width:100%; height:100%; overflow:visible; }
.chart-latest{ font:var(--type-footnote); color:var(--ink-2); margin-top:8px; }
.chart-latest b{ color:var(--ink); font-weight:700; }

/* feel bars */
.bars{ display:flex; align-items:flex-end; gap:6px; height:84px; padding-top:6px; }
.bars .bar{ flex:1; background:var(--accent); border-radius:5px 5px 2px 2px; min-height:6px; }
.bars-scale{ display:flex; justify-content:space-between; margin-top:7px; }
.bars-scale span{ font:var(--type-mono-s); color:var(--ink-3); }

/* side-effect rows */
.se-row{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--separator); }
.se-row:last-child{ border-bottom:0; }
.se-row .se-nm{ flex:1; font:var(--type-subhead); }
.sev{ display:flex; gap:4px; }
.sev i{ width:8px; height:8px; border-radius:var(--radius-pill); background:var(--hairline); }
.sev i.on{ background:var(--accent); }
.sev i.hi{ background:var(--warn); }
.se-date{ font:var(--type-mono-s); color:var(--ink-3); flex:none; }

/* entry row (link forward) */
.entryrow{ display:flex; align-items:center; gap:12px; padding:14px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-md); box-shadow:var(--elev-1); }
.entryrow .er-ic{ width:38px; height:38px; border-radius:11px; background:var(--accent-soft); color:var(--accent-strong); display:grid; place-items:center; flex:none; }
.entryrow .er-ic svg{ width:20px; height:20px; }
.entryrow .er-main{ flex:1; }
.entryrow .er-t{ font:var(--type-subhead); font-weight:700; }
.entryrow .er-s{ font:var(--type-footnote); color:var(--ink-2); margin-top:2px; }
.entryrow .chev{ color:var(--ink-3); }
.entryrow .chev svg{ width:18px; height:18px; }

/* settings: pro card */
.procard{ display:flex; align-items:center; gap:14px; }
.procard .pc-orb{ width:54px; height:54px; border-radius:17px; background:linear-gradient(150deg,var(--icon-tile-top),var(--icon-tile-bottom)); display:grid; place-items:center; color:#fff; flex:none; box-shadow:var(--elev-1); }
.procard .pc-orb svg{ width:28px; height:28px; }
.procard .pc-main{ flex:1; }
.procard .pc-t{ font:var(--type-headline); }
.procard .pc-s{ font:var(--type-footnote); color:var(--ink-2); margin-top:3px; }
.upgrade-pill{ flex:none; font:var(--type-subhead); font-weight:750; color:var(--on-accent); background:var(--accent); padding:9px 17px; border-radius:var(--radius-pill); box-shadow:var(--glow-accent); }

/* settings list */
.setrow{ display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--separator); }
.setrow:last-child{ border-bottom:0; }
.setrow .sr-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none; background:var(--canvas-sunken); color:var(--ink-2); }
.setrow .sr-ic svg{ width:18px; height:18px; }
.setrow .sr-ic.accent{ background:var(--accent-soft); color:var(--accent-strong); }
.setrow .sr-ic.support{ background:var(--support-soft); color:var(--support-strong); }
.setrow .sr-main{ flex:1; min-width:0; }
.setrow .sr-t{ font:var(--type-subhead); font-weight:600; }
.setrow .sr-s{ font:var(--type-footnote); color:var(--ink-2); margin-top:2px; }
.setrow .sr-trail{ flex:none; color:var(--ink-3); display:flex; align-items:center; gap:8px; }
.setrow .sr-trail svg{ width:17px; height:17px; }
.recovered{ display:flex; align-items:center; gap:9px; margin-top:11px; padding:10px 12px; border-radius:var(--radius-md); background:var(--warn-soft); color:var(--warn-strong); font:var(--type-footnote); font-weight:600; }
.recovered svg{ width:16px; height:16px; flex:none; }
.disclaimer{ font:var(--type-footnote); color:var(--ink-3); line-height:1.55; padding:4px 2px 0; }

/* builder category */
.cat-head{ display:flex; align-items:center; gap:8px; margin:14px 0 9px; font:var(--type-overline); letter-spacing:var(--tracking-overline); text-transform:uppercase; color:var(--ink-3); }
.cat-head svg{ width:14px; height:14px; }
.comp-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--separator); }
.comp-row:last-child{ border-bottom:0; }
.comp-main{ flex:1; }
.comp-main .cn{ font:var(--type-subhead); font-weight:600; }
.comp-main .cn svg{ width:16px; height:16px; vertical-align:-3px; }
.comp-main .cb{ font:var(--type-footnote); color:var(--ink-2); margin-top:2px; }
.hl-pill{ flex:none; display:inline-flex; align-items:center; gap:5px; font:var(--type-caption); color:var(--ink-2); background:var(--canvas-sunken); padding:5px 10px; border-radius:var(--radius-pill); }
.hl-pill svg{ width:13px; height:13px; }

/* day toggles */
.daytoggles{ display:flex; gap:6px; }
.daytoggle{ flex:1; aspect-ratio:1; border-radius:var(--radius-pill); display:grid; place-items:center; font:var(--type-subhead); font-weight:700; background:var(--canvas-sunken); color:var(--ink-3); border:1.5px solid transparent; }
.daytoggle.on{ background:var(--accent); color:var(--on-accent); }

/* badge grid */
.badgegrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.badge-tile{ text-align:center; padding:14px 8px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--hairline); }
.badge-tile .bt-ic{ width:54px; height:54px; border-radius:var(--radius-pill); margin:0 auto 9px; display:grid; place-items:center; background:linear-gradient(150deg,#4fe0d2,var(--accent)); color:#fff; }
.badge-tile .bt-ic svg{ width:28px; height:28px; }
.badge-tile.locked{ opacity:1; }
.badge-tile.locked .bt-ic{ background:var(--canvas-sunken); color:var(--ink-3); }
.badge-tile .bt-n{ font:var(--type-caption); font-weight:700; color:var(--ink); }
.badge-tile .bt-p{ font:var(--type-mono-s); color:var(--ink-3); margin-top:3px; }

/* unlock moment */
.unlock{ position:absolute; inset:0; background:linear-gradient(180deg,var(--accent-soft),var(--canvas)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:0 30px; text-align:center; z-index:30; overflow:hidden; }
.unlock .big-badge{ width:128px; height:128px; border-radius:var(--radius-pill); background:linear-gradient(150deg,#4fe0d2,var(--accent)); display:grid; place-items:center; color:#fff; box-shadow:0 24px 50px -16px rgba(17,181,166,.6); position:relative; z-index:3; }
.unlock .big-badge svg{ width:64px; height:64px; }

/* share cards */
.sharecard{ aspect-ratio:1; border-radius:var(--radius-xl); padding:26px; display:flex; flex-direction:column; color:#fff; position:relative; overflow:hidden; }
.sharecard.streak{ background:linear-gradient(155deg,#0E1A19,#10302D); }
.sharecard.calc{ background:var(--surface); color:var(--ink); border:1px solid var(--hairline); }
.sc-mark{ display:flex; align-items:center; gap:9px; font:var(--type-subhead); font-weight:750; }
.sc-mark .m-tile{ width:26px; height:26px; border-radius:8px; background:linear-gradient(150deg,var(--icon-tile-top),var(--icon-tile-bottom)); position:relative; }

/* widgets */
.widget{ background:var(--surface); border-radius:22px; box-shadow:var(--elev-2); padding:16px; }
.widget.sm{ width:170px; height:170px; display:flex; flex-direction:column; }
.widget.md{ width:364px; height:170px; }
.wg-head{ display:flex; align-items:center; justify-content:space-between; }
.wg-streak{ display:inline-flex; align-items:center; gap:4px; font:var(--type-caption); font-weight:800; color:var(--accent-strong); }
.wg-streak svg{ width:14px; height:14px; }
.wg-label{ font:var(--type-overline); letter-spacing:var(--tracking-overline); text-transform:uppercase; color:var(--ink-3); }