/* ── accents ────────────────────────────────────────────────
   Each is a light value and a dark value; light-dark() picks one
   from the computed color-scheme, so the manual theme override
   only has to flip color-scheme and everything else follows. */
:root,
/* "royal" is the default accent: since 2.3 it is the VialForge brand blue (the
   logo's liquid #0e66e2, deepened to #0c5fd5 so it passes AA on every panel),
   with the logo navy #0f436b as the deep tone. */
:root[data-accent="royal"]  { --acc-l:#0c5fd5; --acc-d:#5aa2ff; --acc-deep:#0f436b; }
:root[data-accent="indigo"] { --acc-l:#5457d6; --acc-d:#8b8cf8; --acc-deep:#4338ca; }
:root[data-accent="plum"]   { --acc-l:#a21caf; --acc-d:#e879f9; --acc-deep:#86198f; }
:root[data-accent="amber"]  { --acc-l:#c2650a; --acc-d:#fbbf24; --acc-deep:#92400e; }
:root[data-accent="coral"]  { --acc-l:#d94a3d; --acc-d:#ff8a7a; --acc-deep:#b91c1c; }
:root[data-accent="teal"]   { --acc-l:#0f766e; --acc-d:#35c9c0; --acc-deep:#115e59; }

:root{
  color-scheme: light dark;

  /* VialForge 2.3 palette (Derek's logo): light = the logo's #fdfdfd paper with
     navy-tinted panels and navy-black ink (#000f26, the tagline); dark = deep navy.
     Every text pair is checked to WCAG AA (4.5:1) on bg, panel and panel-2. */
  --bg:        light-dark(#fdfdfd, #06101d);
  --panel:     light-dark(#f3f6fa, #0f1c2e);
  --panel-2:   light-dark(#eaf0f6, #16263b);
  --line:      light-dark(#d8e0ea, #22344b);
  --line-soft: light-dark(#e7edf4, #192a3f);
  --ink:       light-dark(#000f26, #e8eef6);
  --muted:     light-dark(#4a5b70, #9aaabf);
  --dim:       light-dark(#56677c, #8494aa);
  --veil:      light-dark(rgba(253,253,253,.9), rgba(6,16,29,.9));

  /* brand: "Vial" navy + "Forge" orange. The logo orange #f3590f is only 3.3:1 on
     light, so text uses #bb3e0b there; on dark the lighter #ff7a3d. */
  --navy:      light-dark(#0f436b, #e8eef6);
  --forge:     light-dark(#bb3e0b, #ff7a3d);

  --a:         light-dark(var(--acc-l), var(--acc-d));
  --a-soft:    light-dark(var(--acc-d), var(--acc-l));
  --a-deep:    var(--acc-deep);
  --on-a:      light-dark(#ffffff, #08131f);

  --amber: var(--forge);   /* ratings: the brand orange (was #d97706, 3.2:1 on white) */
  --ok:    light-dark(#137a39, #35d07f);
  --warn:  light-dark(#a34a08, #ffb020);
  --crit:  light-dark(#c8211f, #ff5257);

  /* legacy aliases — the original component rules were written against
     these names, so they keep working through the accent swap. */
  --vial: var(--a); --vial-soft: var(--a); --vial-deep: var(--a-deep);

  --r:14px; --r-sm:10px;
  --tabbar-h:76px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
:root[data-theme="light"]{ color-scheme: light }
:root[data-theme="dark"] { color-scheme: dark }
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
.hidden{display:none !important}
.muted{color:var(--muted)} .dim{color:var(--dim)}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--vial-soft)}
.num{font-variant-numeric:tabular-nums}

/* ── login ──────────────────────────────────────────────── */
.login{position:fixed;inset:0;z-index:100;background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:24px}
.login-box{width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px}
.login-box .brand{justify-content:center;font-size:26px;margin-bottom:2px}
.login-box p{margin:0 0 6px;text-align:center;font-size:13.5px}

/* ── header ─────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:30;background:var(--veil);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top)}
.bar{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;gap:12px;max-width:680px;margin:0 auto}
.brand{font-weight:660;letter-spacing:-.02em;font-size:18px;display:flex;align-items:center;gap:9px}
.brand-mark{width:19px;height:23px;flex:0 0 auto}
.bar-right{display:flex;align-items:center;gap:6px}

/* ── layout ─────────────────────────────────────────────── */
main{padding:16px;max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.view{display:flex;flex-direction:column;gap:14px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:2px 2px -4px}
.sec-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);
  font-weight:600}
.link-btn{position:relative;background:none;border:0;color:var(--vial);font-size:13px;padding:2px 0}
.link-btn::after{content:"";position:absolute;inset:-13px -8px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:15px;position:relative;overflow:hidden}
.card.tint::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--accent,var(--vial))}

.empty{text-align:center;color:var(--dim);padding:34px 20px;font-size:14px;
  border:1px dashed var(--line);border-radius:var(--r);line-height:1.6}
.empty b{display:block;color:var(--muted);font-weight:600;margin-bottom:4px}

/* ── today ──────────────────────────────────────────────── */
.today-head{display:flex;align-items:center;gap:15px}
.ring{width:62px;height:62px;flex:0 0 auto;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:640 15px/1 var(--mono);letter-spacing:-.02em}
.today-meta{min-width:0;flex:1}
.today-date{font-size:17px;font-weight:640;letter-spacing:-.01em}
.today-sub{font-size:13px;color:var(--muted);margin-top:3px}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.chip{font-size:11.5px;padding:4px 9px;border-radius:99px;border:1px solid var(--line);
  color:var(--muted);white-space:nowrap}
.chip.on{color:var(--vial-soft);border-color:color-mix(in srgb,var(--vial) 45%,transparent);
  background:color-mix(in srgb,var(--vial) 12%,transparent)}
.chip.off{color:var(--muted)}
.chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 42%,transparent)}
.chip.crit{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 42%,transparent)}

/* dose rows */
.rows{display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;gap:13px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;
  position:relative;overflow:hidden;text-align:left;width:100%}
.row::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--accent,var(--vial));opacity:.85}
.row.done{opacity:.5}
.row.done .row-name{text-decoration:line-through;text-decoration-color:var(--dim)}
.check{position:relative;width:44px;height:44px;margin:-7px;flex:0 0 auto;border-radius:99px;
  border:7px solid transparent;background-color:transparent;background-clip:padding-box;
  box-shadow:inset 0 0 0 2px var(--line);display:flex;align-items:center;justify-content:center;padding:0;
  transition:background-color .14s,box-shadow .14s}
.check svg{opacity:0;transform:scale(.6);transition:opacity .14s,transform .14s}
.row.done .check{background-color:var(--vial);box-shadow:inset 0 0 0 2px var(--vial)}
.row.done .check svg{opacity:1;transform:scale(1);color:var(--on-a)}
.row-body{flex:1;min-width:0}
.row-name{font-weight:590;font-size:15px;letter-spacing:-.01em}
.row-sub{font-size:12.5px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-right{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;
  align-items:flex-end;gap:3px}
.row-time{font:12px/1 var(--mono);color:var(--dim)}
.row-units{font:600 13px/1 var(--mono);color:var(--vial-soft)}

/* ── vials ──────────────────────────────────────────────── */
.vial-card{padding:14px 15px}
.vial-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.vial-name{font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.vial-tag{font-size:12px;color:var(--muted);margin-top:2px}
.vial-conc{font:600 13px/1.3 var(--mono);color:var(--vial-soft);text-align:right;white-space:nowrap}
.vial-conc small{display:block;color:var(--dim);font-weight:400;font-size:11px;margin-top:3px}
.fill{height:8px;border-radius:99px;background:var(--panel-2);overflow:hidden;margin:12px 0 8px;
  border:1px solid var(--line-soft)}
.fill i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--vial-deep),var(--vial-soft));transition:width .3s}
.fill.low i{background:linear-gradient(90deg,#b4600f,var(--amber))}
.fill.crit i{background:linear-gradient(90deg,#8f2020,var(--crit))}
.vial-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12.5px;color:var(--muted)}
.vial-foot b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* who has drawn from a shared vial */
.vial-split{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:8px;padding-top:9px;
  border-top:1px solid var(--line-soft);font-size:12px;color:var(--muted)}
.vial-split b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ── account / household ────────────────────────────────── */
.avatar{width:42px;height:42px;flex:0 0 auto;border-radius:99px;display:flex;
  align-items:center;justify-content:center;font:650 18px/1 system-ui;color:var(--on-a);
  background:linear-gradient(150deg,var(--vial-soft),var(--vial-deep))}
.code{font:650 22px/1 var(--mono);letter-spacing:.16em;text-align:center;
  background:var(--panel-2);border:1px dashed var(--line);border-radius:var(--r-sm);
  padding:15px 10px;color:var(--vial-soft);user-select:all;word-break:break-all}

/* ── stats ──────────────────────────────────────────────── */
/* 2x2 on a phone, one row once there's width — never an orphaned cell. */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:var(--panel);padding:13px 14px}
.stat-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);
  white-space:nowrap}
.stat-value{font:640 21px/1.25 var(--mono);letter-spacing:-.025em;margin-top:4px;
  font-variant-numeric:tabular-nums}
.stat-value .unit{font-size:12px;color:var(--muted);font-weight:500;margin-left:2px}
.stat.accent .stat-value{color:var(--vial-soft)}

.spark{display:flex;align-items:flex-end;gap:2px;height:44px;margin-top:10px}
.spark i{flex:1;background:var(--line);border-radius:2px 2px 0 0;min-height:2px}
.spark i.hot{background:linear-gradient(180deg,var(--vial-soft),var(--vial-deep))}

.pep-row{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line-soft)}
.pep-row:last-child{border-bottom:0}
.dot{width:9px;height:9px;border-radius:99px;flex:0 0 auto;background:var(--accent,var(--vial))}
.pep-name{flex:1;min-width:0;font-weight:560;font-size:14.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pep-meta{font-size:12px;color:var(--muted);margin-top:2px;font-weight:400}
.trend{font:11.5px/1 var(--mono);padding:3px 6px;border-radius:5px;white-space:nowrap}
.trend.up{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.trend.down{color:var(--crit);background:color-mix(in srgb,var(--crit) 14%,transparent)}
.trend.flat{color:var(--muted);background:var(--panel-2)}

/* rating dots */
.rate{display:flex;gap:4px;align-items:center}
.rate i{width:7px;height:7px;border-radius:99px;background:var(--line);display:block}
.rate i.on{background:var(--amber)}
.rate-pick{display:flex;gap:8px}
.rate-pick button{flex:1;height:44px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--panel-2);font:600 15px/1 var(--mono);color:var(--muted)}
.rate-pick button.on{background:color-mix(in srgb,var(--amber) 18%,transparent);
  border-color:var(--amber);color:var(--amber)}

/* ── log list ───────────────────────────────────────────── */
.day-head{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);
  font-weight:600;margin:14px 2px 2px}
.day-head:first-child{margin-top:0}

/* ── tab bar ────────────────────────────────────────────── */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--veil);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);display:flex}
.tabbar button{flex:1;background:none;border:0;color:var(--dim);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:10.5px;letter-spacing:.02em;padding:0}
.tabbar button svg{width:21px;height:21px}
.tabbar button.active{color:var(--vial)}

/* ── buttons & forms ────────────────────────────────────── */
.btn{border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  border-radius:var(--r-sm);padding:11px 15px;font-size:14.5px;font-weight:540;
  display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--vial);border-color:var(--vial);color:var(--on-a);font-weight:650}
.btn.ghost{background:none}
.btn.danger{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 35%,transparent)}
.btn.icon{padding:8px;width:44px;height:44px;border-radius:99px}
.btn.icon svg{width:19px;height:19px}
.btn.block{width:100%}
.btn.sm{padding:7px 11px;font-size:13px;min-height:44px}
.btn:disabled{opacity:.45;pointer-events:none}
.btn-row{display:flex;gap:9px;flex-wrap:wrap}
.btn-row .btn{flex:1 1 auto;white-space:nowrap}
.btn-row .btn.icon{flex:0 0 auto}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);
  font-weight:600}
.input{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 13px;width:100%;outline:none}
.input:focus{border-color:var(--vial);box-shadow:0 0 0 3px color-mix(in srgb,var(--vial) 15%,transparent)}
/* Spinners collide with the unit suffix and are useless on touch. */
.input[type=number]{-moz-appearance:textfield;appearance:textfield}
.input[type=number]::-webkit-outer-spin-button,
.input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
textarea.input{resize:vertical;min-height:70px}
select.input{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.suffix{position:relative}
.suffix .unit-tag{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font:12px/1 var(--mono);color:var(--dim);pointer-events:none}
.suffix .input{padding-right:48px}

.seg{display:flex;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:3px;gap:3px}
.seg button{flex:1;border:0;background:none;color:var(--muted);border-radius:7px;
  padding:9px 6px;font-size:13.5px;font-weight:540;white-space:nowrap}
.seg button.on{background:var(--vial);color:var(--on-a);font-weight:640}

.dow{display:flex;gap:5px}
.dow button{flex:1;aspect-ratio:1;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--panel-2);color:var(--muted);font-size:12px;font-weight:600;padding:0}
.dow button.on{background:var(--vial);border-color:var(--vial);color:var(--on-a)}

.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--line-soft)}
.toggle:last-child{border-bottom:0}
.toggle-txt{flex:1;min-width:0}
.toggle-txt b{display:block;font-weight:560;font-size:14.5px}
.toggle-txt span{font-size:12.5px;color:var(--muted)}
.sw{width:48px;height:29px;border-radius:99px;background:var(--panel-2);
  border:1px solid var(--line);position:relative;flex:0 0 auto;padding:0;transition:background .16s}
.sw::before{content:"";position:absolute;inset:-10px -4px}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:99px;
  background:var(--muted);transition:transform .16s,background .16s}
.sw.on{background:color-mix(in srgb,var(--vial) 35%,transparent);border-color:var(--vial)}
.sw.on::after{transform:translateX(19px);background:var(--vial)}

.err{color:var(--crit);font-size:13px;min-height:18px;text-align:center}

/* ── calc readout ───────────────────────────────────────── */
.readout{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;display:flex;flex-direction:column;gap:9px}
.readout .big{display:flex;align-items:baseline;gap:8px}
.readout .big b{font:700 30px/1 var(--mono);letter-spacing:-.03em;color:var(--vial-soft)}
.readout .big span{font-size:13px;color:var(--muted)}
.readout .lines{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)}
.readout .lines div{display:flex;justify-content:space-between;gap:10px}
.readout .lines b{color:var(--ink);font-weight:560;font-family:var(--mono);font-size:12px}

/* ── sheets ─────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(3,6,10,.68);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .2s}
.scrim.show{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;background:var(--panel);
  border-top:1px solid var(--line);border-radius:20px 20px 0 0;
  max-height:92vh;overflow-y:auto;overscroll-behavior:contain;
  padding:8px 16px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.3,1);
  max-width:680px;margin:0 auto}
.sheet.show{transform:translateY(0)}
.grip{width:38px;height:4px;border-radius:99px;background:var(--line);margin:6px auto 14px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:16px}
.sheet-title{font-size:19px;font-weight:650;letter-spacing:-.02em}
.sheet-form{display:flex;flex-direction:column;gap:14px}

.pick-list{display:flex;flex-direction:column;gap:7px;max-height:52vh;overflow-y:auto}
.pick{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel-2);width:100%;text-align:left}
.pick.on{border-color:var(--vial);background:color-mix(in srgb,var(--vial) 12%,transparent)}
.pick-name{flex:1;font-weight:560;font-size:14.5px}
.pick-meta{font:12px/1 var(--mono);color:var(--muted)}

/* ── in-app confirm (above sheets, below toasts) ───────── */
.cfm-scrim{position:fixed;inset:0;z-index:70;background:rgba(3,6,10,.6);display:flex;
  align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .15s}
.cfm-scrim.show{opacity:1}
.cfm{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:20px 18px 16px;width:100%;max-width:360px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.cfm p{margin:0 0 16px;font-size:15px;line-height:1.45}
.cfm-row{display:flex;gap:10px;justify-content:flex-end}
.cfm-row .btn{min-width:96px}

.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom));
  transform:translate(-50%,14px);z-index:80;background:var(--panel-2);
  border:1px solid var(--line);border-radius:18px;padding:10px 18px;font-size:13.5px;
  font-weight:540;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;
  box-shadow:0 8px 26px rgba(0,0,0,.5);width:max-content;max-width:min(88vw,420px);
  white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.35}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{border-color:color-mix(in srgb,var(--crit) 45%,transparent);color:var(--crit)}

@media (min-width:560px){
  .grid3{grid-template-columns:repeat(3,1fr)}
  .stat-grid{grid-template-columns:repeat(4,1fr)}
}

/* ══ Shotsy-style summary ═══════════════════════════════════ */

/* three-across stat tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stile{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:11px 11px 12px;min-width:0}
.stile-l{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted);
  margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stile-l i{width:11px;height:11px;border-radius:3px;background:var(--a);flex:0 0 auto}
.stile-v{font:670 20px/1 var(--mono);letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stile-v small{font-size:10.5px;font-weight:500;color:var(--muted);margin-left:1px}

/* estimated-levels chart */
.levels svg{display:block;width:100%;height:124px;overflow:visible}
.levels-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.levels-now{font:640 13px/1 var(--mono);color:var(--a)}
.range{display:flex;background:var(--panel-2);border:1px solid var(--line);
  border-radius:9px;padding:3px;gap:2px;margin:10px 0 8px}
.range button{flex:1;border:0;background:none;color:var(--muted);border-radius:6px;
  padding:7px 4px;font-size:12.5px}
.range button.on{background:var(--bg);color:var(--ink);font-weight:640;
  box-shadow:0 1px 2px rgba(0,0,0,.12)}
.pep-pick{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.pep-pick::-webkit-scrollbar{display:none}
.pep-pick button{flex:0 0 auto;border:1px solid var(--line);background:var(--panel-2);
  color:var(--muted);border-radius:99px;padding:6px 12px;font-size:12.5px;white-space:nowrap}
.pep-pick button.on{border-color:var(--a);color:var(--a);
  background:color-mix(in srgb,var(--a) 12%,transparent);font-weight:600}

/* countdown gauge */
.gauge{text-align:center;padding:4px 0 0}
.gauge svg{display:block;margin:0 auto}
.gauge-txt{margin-top:-40px;padding-bottom:10px}
.gauge-v{font-size:27px;font-weight:700;letter-spacing:-.035em;line-height:1.15}
.gauge-l{font-size:13px;color:var(--muted)}
.gauge-d{font-size:12px;color:var(--dim);margin-top:3px}
.gauge.due .gauge-v{color:var(--a)}
.gauge.late .gauge-v{color:var(--crit)}

/* weight chart */
.wchart svg{display:block;width:100%;height:158px;overflow:visible}
.wlegend{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* severity picker */
.sev{display:flex;gap:6px}
.sev button{flex:1;height:40px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--muted);font:600 14px/1 var(--mono)}
.sev button.on{background:color-mix(in srgb,var(--warn) 18%,transparent);
  border-color:var(--warn);color:var(--warn)}

/* side-effect chips */
.efc{display:flex;flex-wrap:wrap;gap:7px}
.efc button{border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
  border-radius:99px;padding:8px 13px;font-size:13px}
.efc button.on{border-color:var(--a);color:var(--a);
  background:color-mix(in srgb,var(--a) 12%,transparent);font-weight:600}
.ef-row{display:flex;align-items:center;gap:11px;padding:10px 0;
  border-bottom:1px solid var(--line-soft)}
.ef-row:last-child{border-bottom:0}
.ef-bar{width:56px;height:6px;border-radius:99px;background:var(--panel-2);overflow:hidden;
  flex:0 0 auto}
.ef-bar i{display:block;height:100%;background:var(--warn);border-radius:99px}

/* theme + accent pickers */
.accents{display:flex;gap:10px;flex-wrap:wrap}
.accents button{width:40px;height:40px;border-radius:99px;padding:0;position:relative;
  border:2px solid transparent;background:none}
.accents button i{position:absolute;inset:2px;border-radius:99px}
.accents button.on{border-color:var(--ink)}
.accents button.on::after{content:"";position:absolute;inset:0;border-radius:99px;
  border:2px solid var(--bg)}

/* ── pricing: the web (Stripe) sheet, and the in-app sheet only
      when Google Play Billing is available ───────────────── */
.price{display:block;width:100%;text-align:left;cursor:pointer;
  transition:border-color .15s,transform .06s}
.price:hover{border-color:var(--a)}
.price:active{transform:translateY(1px)}
.price:disabled{opacity:.5;pointer-events:none}
.price-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.price-amt{font:700 24px/1 var(--mono);letter-spacing:-.04em;color:var(--a);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.price-save{color:var(--ok);font-weight:600}

/* wrapping preset rows (vial strengths, water volumes, routes) */
.seg.wrap{flex-wrap:wrap}
.seg.wrap button{flex:1 0 auto;min-width:60px}

/* ── calendar ───────────────────────────────────────────── */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:12px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.cal-dows{margin-bottom:4px}
.cal-dows div{text-align:center;font:600 10px/1 var(--mono);letter-spacing:.08em;
  color:var(--dim);padding:4px 0}
.cal-cell{aspect-ratio:.82;border:1px solid transparent;border-radius:9px;min-width:0;
  background:none;padding:4px 2px 3px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:2px;position:relative}
.cal-cell:not(.blank):not(.future):hover{background:var(--panel-2)}
.cal-cell.blank{pointer-events:none}
.cal-cell.future{opacity:.28;pointer-events:none}
.cal-cell.today{border-color:var(--a)}
.cal-num{font:500 13px/1 var(--body,inherit);color:var(--ink)}
.cal-cell.today .cal-num{color:var(--a);font-weight:700}
.cal-dots{display:flex;gap:2.5px;min-height:5px}
.cal-dots i{width:5px;height:5px;border-radius:99px;display:block}
.cal-meta{font:600 10px/1 var(--mono);min-height:10px;display:flex;gap:3px}
.cal-meta b{color:var(--frost,var(--muted));font-weight:700}
.cal-meta u{color:var(--warn);text-decoration:none}
.cal-legend{display:flex;gap:16px;justify-content:center;margin-top:12px;
  font-size:11.5px;color:var(--dim)}
.cal-legend .dot{display:inline-block;vertical-align:-1px;margin-right:3px}
.cal-legend b{color:var(--muted)} .cal-legend u{color:var(--warn);text-decoration:none}

/* bathroom-scale marker on calendar days */
.cal-scale{width:12px;height:12px;color:var(--frost);vertical-align:-1px}
.cal-scale.lg{width:14px;height:14px;vertical-align:-2px;margin-right:2px}
.cal-meta{align-items:center}

/* ═══════════════════════════════════════════════════════════
   POLISH PASS (2026-08-02) — the landing's identity, brought
   into the app: Archivo for titles, IBM Plex for voice and
   data, more air everywhere. Override layer: later rules win.
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url(/static/fonts/archivo-800.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/plexsans-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(/static/fonts/plexsans-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/plexmono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(/static/fonts/plexmono-600.woff2) format('woff2')}

:root{
  --display:'Archivo',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,"SF Mono",Menlo,monospace;
  --r:16px;
}
html,body{font:16px/1.55 'IBM Plex Sans',system-ui,-apple-system,"Segoe UI",sans-serif}

/* accessibility floor */
:focus-visible{outline:2px solid var(--a);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion: reduce){
  .sheet,.scrim,.fill i,.check,.check svg{transition:none !important}
  html{scroll-behavior:auto}
}

/* brand + per-view page title */
.brand{font:800 16px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.page-title{font:800 27px/1.1 var(--display);letter-spacing:-.02em;margin:6px 2px 0}

/* breathing room */
main{padding:14px 18px 24px;gap:16px}
.view{gap:16px}
.card{padding:18px;border-radius:var(--r)}
.sec-head{margin:6px 2px -2px}
.sec-title{letter-spacing:.12em}
.row{padding:15px 16px;gap:14px;border-radius:var(--r)}
.row-name{font-size:16px}
.row-sub{font-size:13px;margin-top:3px}
.vial-name{font-size:16.5px}
.vial-tag{font-size:12.5px;margin-top:3px}
.today-date{font-size:19px}
.empty{padding:40px 22px;font-size:14.5px}

/* controls: bigger targets, calmer shapes */
.btn{padding:13px 18px;font-size:15px;border-radius:12px}
.btn.sm{padding:8px 13px;font-size:13.5px}
.btn.icon{width:44px;height:44px;padding:9px}
.input{padding:13px 14px;border-radius:12px}
.seg button{padding:10px 8px}
.seg.wrap button{min-width:62px}
.tabbar button{font-size:11px;gap:5px}
.tabbar button svg{width:22px;height:22px}

/* sheets: roomier, titled in the display face */
.sheet{padding:10px 18px calc(24px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0}
.sheet-title{font:800 21px/1.15 var(--display);letter-spacing:-.015em}
.sheet-form{gap:16px}
.field label{letter-spacing:.1em}

/* stats: numbers deserve the room */
.stat{padding:15px 16px}
.stat-value{font-size:24px;margin-top:5px}
.stile{padding:13px 13px 14px;border-radius:14px}
.stile-v{font-size:22px}
.gauge-v{font-size:29px}
.readout .big b{font-size:32px}

/* login gets the brand treatment */
.login-box .brand{font-size:22px}

/* 2.3 brand: the wordmark colours, and the logo lockup on the sign-in screens.
   Two images (light paper / dark navy); the visible one follows the same
   rule as the colour scheme: the manual theme wins, otherwise the OS. */
.brand .b-vial{color:var(--navy)} .brand .b-forge{color:var(--forge)}
.brand-lockup{display:block;margin:0 auto 4px;width:min(250px,78%);height:auto}
.hdr-lockup{display:block;height:32px;width:auto}
.brand-lockup.lk-dark,.hdr-lockup.lk-dark{display:none}
:root[data-theme="dark"] .brand-lockup.lk-light,:root[data-theme="dark"] .hdr-lockup.lk-light{display:none}
:root[data-theme="dark"] .brand-lockup.lk-dark,:root[data-theme="dark"] .hdr-lockup.lk-dark{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand-lockup.lk-light,:root:not([data-theme="light"]) .hdr-lockup.lk-light{display:none}
  :root:not([data-theme="light"]) .brand-lockup.lk-dark,:root:not([data-theme="light"]) .hdr-lockup.lk-dark{display:block}
}

/* ── install banner ─────────────────────────────────────── */
.install-banner{display:flex;align-items:center;gap:12px;max-width:680px;
  margin:12px auto 0;padding:12px 12px 12px 16px;border-radius:14px;
  background:color-mix(in srgb, var(--a) 10%, var(--panel));
  border:1px solid color-mix(in srgb, var(--a) 35%, transparent)}
.install-banner .ib-mark{width:16px;height:20px;color:var(--a);flex:0 0 auto}
.ib-txt{flex:1;min-width:0;line-height:1.35}
.ib-txt b{display:block;font-size:14.5px}
.ib-txt span{font-size:12.5px;color:var(--muted)}
@media (max-width:679px){ .install-banner{margin:12px 14px 0} }

/* colour swatches: selection ring that survives inline backgrounds */
.swatch-row button{position:relative;border-radius:99px;transition:transform .12s}
.swatch-row button.on{transform:scale(1.12);
  box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ink)}
.swatch-row button.on::after{content:"✓";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.7)}

/* Sheets opened FROM the sign-in screen (forgot password / forgot username)
   must stack above it — .login is z-index 100, a plain sheet only 51. Scoped
   to while the login screen is showing so in-app stacking is unchanged. */
body:has(#login:not(.hidden)) .scrim{z-index:101}
body:has(#login:not(.hidden)) .sheet{z-index:102}

/* ── landscape phones and tablets (2026-10-09) ─────────────
   The Android wrapper no longer locks portrait. Short landscape screens get a
   compact header and tab bar so the log keeps most of the height, and sheets
   may use nearly all of it. Wide screens keep the tab buttons in the same
   680px column as the content instead of spreading them edge to edge. */
.tabbar{justify-content:center}
.tabbar button{max-width:136px}
@media (orientation:landscape) and (max-height:520px){
  :root{--tabbar-h:54px}
  .bar{padding:6px 16px}
  .page-title{font-size:22px;margin:2px 2px 0}
  main{padding-top:10px}
  .tabbar button{flex-direction:row;gap:8px}
  .sheet{max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);padding-top:4px}
  .grip{margin:4px auto 8px}
}

/* ── 2.2 daily check-in (static/checkin.js) ─────────────────
   Today card, Calendar day sheet, Stats trends. Tap targets are at least
   44px; the chosen value is also written out in the row label, so the
   selection never rests on colour alone. */
.ck-card{display:flex;flex-direction:column;gap:12px}
.ck-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ck-title{font-size:15px;font-weight:650}
.ck-status{font-size:12px;color:var(--dim);min-height:1em}
.ck-grid{display:grid;grid-template-columns:1fr;gap:12px 16px}
@media (min-width:560px){ .ck-grid{grid-template-columns:1fr 1fr} }
.ck-row{display:flex;flex-direction:column;gap:6px;min-width:0}
.ck-label{font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.ck-val{font:600 13px/1.2 var(--mono);color:var(--ink)}
.ck-val.dim{color:var(--dim);font-weight:500;font-family:inherit}
.ck-scale{display:flex;gap:6px}
.ck-scale button{flex:1;min-height:48px;min-width:44px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
  font:600 16px/1 var(--mono)}
.ck-scale button.on{background:var(--vial);border-color:var(--vial);color:var(--on-a);
  font-weight:750;box-shadow:0 0 0 2px var(--bg) inset}
.ck-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--dim)}
.ck-step{display:grid;grid-template-columns:56px 1fr 56px;gap:8px;align-items:stretch}
.ck-step .ck-pm{min-height:48px;padding:0;font-size:22px;font-weight:600}
.ck-hours{text-align:center;min-height:48px;font-size:16px}
.ck-clear{align-self:flex-start;min-height:28px}
#ck-trends{display:flex;flex-direction:column;gap:14px}
#ck-trends:empty{display:none}
.ck-trends{display:flex;flex-direction:column;gap:12px}
.ck-trends .range{margin:0}
.ck-trends .range button{min-height:44px}
.ck-trend svg{display:block;width:100%;height:56px;overflow:visible;margin-top:6px}
.ck-trend-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ck-trend-name{font-size:13.5px;font-weight:600}
.ck-trend-val{font:12px/1.2 var(--mono);color:var(--muted);text-align:right}
.ck-trend-val.dim{color:var(--dim);font-family:inherit}
.ck-patterns{display:flex;flex-direction:column;gap:8px}
.ck-obs{margin:0;font-size:14px;line-height:1.45}