/* ============================================================
   DoseIQ — DESIGN SYSTEM
   Clinical · precise · quiet · trustworthy
   ------------------------------------------------------------
   PRINCIPLES
   1. Light is the default. Clinical means white space, not neon.
   2. One accent colour. Deep teal, reserved for Guru and primary
      actions only. Everything else is ink and hairline.
   3. Type does the work. Tabular numerals everywhere numbers
      are compared — a dosing chart that doesn't align is not
      a clinical instrument.
   4. Depth by hairline and shadow, never by glow.
   5. Motion is 160ms and invisible. If you notice it, it's wrong.
   ============================================================ */

/* ─── FONT ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ─── TOKENS ────────────────────────────────────────────── */
:root {
  /* Surface — warm-neutral, never stark white */
  --bg:          #F7F8FA;
  --surface:     #FFFFFF;
  --surface-2:   #F1F3F6;
  --surface-3:   #E8EBF0;

  /* Ink */
  --text:        #0D1520;
  --text-2:      #46536B;
  --text-3:      #6B7A93;
  --muted:       #97A3B6;

  /* Hairlines */
  --border:      #E3E7EE;
  --border-2:    #D2D8E3;

  /* Accent — deep clinical teal. The ONLY colour in the chrome. */
  --accent:      #0D7A6B;
  --accent-hover:#0A6357;
  --accent-soft: #E6F4F1;
  --accent-line: #B4DED6;

  /* Semantic — desaturated, never alarming without cause */
  --success:     #12805C;
  --success-soft:#E7F5EF;
  --warning:     #A66A08;
  --warning-soft:#FDF3E3;
  --danger:      #B3261E;
  --danger-soft: #FCEDEC;

  /* Elevation — layered and soft, no glow */
  --sh-1: 0 1px 2px rgba(13,21,32,.05);
  --sh-2: 0 1px 3px rgba(13,21,32,.06), 0 4px 12px rgba(13,21,32,.05);
  --sh-3: 0 2px 6px rgba(13,21,32,.07), 0 12px 32px rgba(13,21,32,.09);
  --ring: 0 0 0 3px rgba(13,122,107,.14);

  /* Geometry */
  --r-sm: 6px;  --r: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-full: 999px;

  /* Rhythm — 4px grid */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  --nav-h: 60px;
  --maxw: 1120px;
  --ease: cubic-bezier(.32,.72,0,1);
}

[data-theme="dark"] {
  --bg:          #0B0F14;
  --surface:     #121820;
  --surface-2:   #1A222C;
  --surface-3:   #232D3A;

  --text:        #E9EDF3;
  --text-2:      #A6B2C4;
  --text-3:      #7C8A9E;
  --muted:       #5E6B7E;

  --border:      #212B36;
  --border-2:    #2D3945;

  --accent:      #2FBFA8;
  --accent-hover:#4ED0BA;
  --accent-soft: #0F2621;
  --accent-line: #1E4A42;

  --success:     #35B37E;
  --success-soft:#0E2620;
  --warning:     #D99A2B;
  --warning-soft:#2A2013;
  --danger:      #E5675E;
  --danger-soft: #2B1614;

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 1px 3px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.3);
  --sh-3: 0 2px 6px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45);
  --ring: 0 0 0 3px rgba(47,191,168,.2);
}

/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* Base bumped 15 -> 16px. Nearly everything else is in rem, so this
     lifts the whole site one step in a single place. */
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02','cv03','cv04','ss01';
  transition: background .2s var(--ease), color .2s var(--ease);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

::selection { background: var(--accent-soft); color: var(--accent); }

/* ─── TYPE ──────────────────────────────────────────────── */
h1,h2,h3,h4 { font-weight: 600; letter-spacing: -.018em; line-height: 1.25; }
h1 { font-size: 1.75rem; letter-spacing: -.026em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
h4 { font-size: .9375rem; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

.eyebrow {
  font-size: .6875rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3);
}
.lead   { font-size: 1.0625rem; color: var(--text-2); line-height: 1.6; }
.small  { font-size: .8125rem; }
.dim    { color: var(--text-3); }
.dimmer { color: var(--muted); }

/* ═══════════════ NAVIGATION ═══════════════ */

.nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s6);
  padding: 0 var(--s6);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--accent);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: .8125rem; letter-spacing: -.03em;
}
.brand-name {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.03em;
}

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: var(--s4); }

.nav-link {
  position: relative;
  padding: 7px 13px;
  border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 500;
  color: var(--text-3);
  transition: color .16s var(--ease), background .16s var(--ease);
}
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-link.active { color: var(--text); font-weight: 600; }
.nav-link.active::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: -19px;
  height: 2px; background: var(--accent); border-radius: 2px 2px 0 0;
}

/* Guru — the one accented item in the chrome */
.nav-link.guru {
  color: var(--accent); font-weight: 600;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 6px 13px; margin-left: var(--s2);
}
.nav-link.guru:hover { background: var(--accent-line); color: var(--accent-hover); }
.nav-link.guru.active::after { display: none; }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

.nav-status {
  font-size: .75rem; color: var(--text-3);
  display: flex; align-items: center; gap: 5px;
  padding-right: var(--s2);
}
.nav-status::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--success);
}
.nav-status.saving::before { background: var(--warning); }
.nav-status.error::before  { background: var(--danger); }

.avatar-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 9px 4px 4px; border-radius: var(--r-full);
  border: 1px solid var(--border);
  font-size: .8125rem; font-weight: 500; color: var(--text-2);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.avatar-btn:hover { background: var(--surface-2); border-color: var(--border-2); }
.avatar-btn:hover .avatar-chev { color: var(--text-2); }
.avatar-btn[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border-2); }
.avatar-btn[aria-expanded="true"] .avatar-chev { transform: rotate(180deg); }
.avatar-btn.compact { padding: 4px 6px 4px 4px; }
.avatar-name { max-width: 13ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The email has no room in the chip but plenty here, and seeing which account
   you are in is the main reason people open this menu in the first place. */
.menu-head {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px 10px; margin-bottom: 1px;
}
.menu-head .avatar { width: 30px; height: 30px; font-size: .75rem; flex-shrink: 0; }
.menu-head-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.menu-head-text b { font-size: .8125rem; font-weight: 600; color: var(--text); }
.menu-head-text span {
  font-size: .75rem; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px;
}
/* The chevron does the work of saying "this opens something". Without it the
   chip reads as a status label and nobody clicks it. */
.avatar-chev {
  width: 13px; height: 13px; color: var(--text-3);
  transition: transform .16s var(--ease), color .16s var(--ease);
}
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-size: .6875rem; font-weight: 600; letter-spacing: .01em;
}

/* Dropdown */
.menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 232px; padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: .875rem; color: var(--text-2); text-align: left;
  transition: background .12s var(--ease), color .12s var(--ease);
}
/* The svg() helper emits no width/height attributes — every other component
   sizes its own icons in CSS, and this menu was the one that never did. An
   SVG with no intrinsic size and no CSS size falls back to the replaced-
   element default (300×150), which is why these rendered enormous. */
.menu-item svg { width: 17px; height: 17px; flex: none; stroke-width: 2; }
.menu-item:hover { background: var(--surface-2); color: var(--text); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger:hover { background: var(--danger-soft); }
.menu-sep { height: 1px; background: var(--border); margin: 5px 0; }

/* Mobile bottom tabs */
.tabbar { display: none; }

@media (max-width: 860px) {
  .nav-links, .nav-status { display: none; }
  .nav { padding: 0 var(--s4); }

  .tabbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(5, 1fr);
    align-items: end;
    height: 62px; padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--border);
  }
  .tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 0 8px;
    font-size: .6875rem; font-weight: 500; color: var(--muted);
    transition: color .16s var(--ease);
  }
  /* 1.75 is a hairline at phone viewing distance. 23px at 2 weight holds
     up in sunlight, which is where a dosing app actually gets opened. */
  .tab svg { width: 23px; height: 23px; stroke-width: 2; }
  .tab.active { color: var(--accent); font-weight: 600; }

  /* Guru — raised centre tab */
  .tab.tab-guru { position: relative; color: var(--text-3); }
  .tab.tab-guru .tab-fab {
    position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 4px 14px rgba(13,122,107,.34);
    border: 3px solid var(--surface);
    transition: transform .16s var(--ease);
  }
  .tab.tab-guru:active .tab-fab { transform: translateX(-50%) scale(.94); }
  .tab.tab-guru .tab-label { margin-top: 30px; }
  .tab.tab-guru svg { width: 24px; height: 24px; stroke-width: 2.1; }

  body { padding-bottom: 62px; }
}

/* ═══════════════ LAYOUT ═══════════════ */
.page { max-width: var(--maxw); margin: 0 auto; padding: var(--s8) var(--s6) var(--s16); }
@media (max-width: 860px) { .page { padding: var(--s5) var(--s4) var(--s10); } }

.page-head { margin-bottom: var(--s6); }
.page-head h1 { margin-bottom: 3px; }
.page-head .sub { color: var(--text-3); font-size: .9375rem; }

.row  { display: flex; align-items: center; gap: var(--s3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.stack { display: flex; flex-direction: column; }
.spacer { flex: 1; }

.section { margin-bottom: var(--s8); }
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s3);
}

/* ═══════════════ SURFACES ═══════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.card-pad { padding: var(--s5); }
.card-head {
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}
.card-body { padding: var(--s5); }

/* ─── Stat tiles ─── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s4) var(--s4);
  box-shadow: var(--sh-1);
}
.stat-label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: 7px;
}
.stat-value {
  font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat-value .unit { font-size: .9375rem; font-weight: 500; color: var(--text-3); margin-left: 2px; }
.stat-meta { font-size: .75rem; color: var(--muted); margin-top: 4px; }

/* Thin progress rail */
.rail { height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; margin-top: 10px; }
.rail-fill { height: 100%; border-radius: 2px; background: var(--accent); transition: width .5s var(--ease); }
.rail-fill.success { background: var(--success); }
.rail-fill.warning { background: var(--warning); }

/* ═══════════════ DOSE LIST ═══════════════ */
.dose-list { display: flex; flex-direction: column; }

.dose {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
  transition: background .14s var(--ease);
}
.dose:last-child { border-bottom: none; }
.dose:hover { background: var(--surface-2); }
.dose:hover .dose-ask { opacity: 1; }
.dose.done .dose-name { color: var(--text-3); }
.dose.done .dose-name::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--border-2);
}

/* Check control */
.check {
  /* The single most-tapped control in the app. 26px with a 2px edge so it
     reads as a target rather than a decoration. */
  flex-shrink: 0; width: 26px; height: 26px;
  border: 2px solid var(--border-2); border-radius: 8px;
  background: var(--surface);
  display: grid; place-items: center;
  transition: all .16s var(--ease);
}
.check svg { width: 16px; height: 16px; stroke-width: 3; color: #fff; opacity: 0; transform: scale(.7); transition: all .16s var(--ease); }
.check:hover { border-color: var(--accent); }
.check.checked { background: var(--success); border-color: var(--success); }
.check.checked svg { opacity: 1; transform: scale(1); }

.dose-main { flex: 1; min-width: 0; }
.dose-name { position: relative; display: inline-block; font-weight: 600; font-size: .9375rem; letter-spacing: -.01em; }
.dose-meta { font-size: .8125rem; color: var(--text-3); margin-top: 1px; }
.dose-meta .sep { color: var(--border-2); margin: 0 6px; }

.dose-amount { text-align: right; flex-shrink: 0; }
.dose-dose  { font-weight: 600; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.dose-units { font-size: .75rem; color: var(--text-3); font-variant-numeric: tabular-nums; margin-top: 1px; }

.dose-ask {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--accent); background: transparent;
  opacity: 0; transition: all .16s var(--ease);
}
.dose-ask:hover { background: var(--accent-soft); }
.dose-ask svg { width: 18px; height: 18px; stroke-width: 2; }
@media (max-width: 860px) { .dose-ask { opacity: 1; } .dose { padding: var(--s4); gap: var(--s3); } }

/* ═══════════════ WEEK GRID ═══════════════ */
.week { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.week th {
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
  padding: 0 0 var(--s3); text-align: center; width: 40px;
}
.week th:first-child { text-align: left; width: auto; }
.week td { padding: 5px 0; text-align: center; border-top: 1px solid var(--border); }
.week td:first-child {
  text-align: left; font-size: .875rem; font-weight: 500;
  padding-right: var(--s4); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
.week tr:first-child td { border-top: none; }

.cell {
  width: 28px; height: 28px; border-radius: 8px; margin: 0 auto;
  display: grid; place-items: center;
  transition: all .14s var(--ease);
}
.cell.due     { background: var(--surface-2); border: 1px solid var(--border); }
.cell.due:hover { border-color: var(--accent); }
.cell.done    { background: var(--success); }
.cell.done svg{ width: 15px; height: 15px; stroke-width: 3; color: #fff; }
/* Half a day's doses on a 2x schedule. Distinct from both empty and done,
   because "1 of 2" is real progress and showing it as either would lie. */
.cell.part {
  background: var(--accent-soft); border: 1px solid var(--accent);
  color: var(--accent);
}
.cell-part { font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cell.today   { box-shadow: 0 0 0 2px var(--accent-line); }
.cell.off     { color: var(--muted); font-size: .75rem; }
.cell.off::after { content: '·'; }

/* ═══════════════ BUTTONS ═══════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r);
  font-size: .875rem; font-weight: 550; letter-spacing: -.005em;
  border: 1px solid transparent; white-space: nowrap;
  transition: all .16s var(--ease);
}
.btn svg { width: 16px; height: 16px; stroke-width: 2; }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .45; pointer-events: none; }

.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--sh-1); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--sh-2); }

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

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

.btn-guru {
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--accent-line);
}
.btn-guru:hover { background: var(--accent-line); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-sm  { padding: 6px 12px; font-size: .8125rem; border-radius: var(--r-sm); }
.btn-sm svg { width: 14px; height: 14px; }
.btn-lg  { padding: 12px 22px; font-size: .9375rem; }
.btn-block { width: 100%; }

/* ═══════════════ PILLS ═══════════════ */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: .6875rem; font-weight: 600; letter-spacing: .01em;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
}
.pill-accent  { background: var(--accent-soft);  color: var(--accent);  border-color: var(--accent-line); }
.pill-success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.pill-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.pill-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: transparent; }

/* ═══════════════ CALLOUT ═══════════════ */
.callout {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-lg);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  transition: all .16s var(--ease);
}
.callout:hover { border-color: var(--accent); }
.callout-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r);
  background: var(--surface); color: var(--accent);
  display: grid; place-items: center; box-shadow: var(--sh-1);
}
.callout-icon svg { width: 17px; height: 17px; stroke-width: 1.75; }
.callout-text { flex: 1; min-width: 0; }
.callout-title { font-size: .875rem; font-weight: 600; color: var(--text); }
.callout-sub   { font-size: .8125rem; color: var(--text-2); margin-top: 1px; }
.callout svg.chev { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }

.callout-warning { background: var(--warning-soft); border-color: transparent; }
.callout-warning .callout-icon { color: var(--warning); }

/* ═══════════════ EMPTY STATE ═══════════════ */
.empty { text-align: center; padding: var(--s12) var(--s5); }
.empty-icon {
  width: 46px; height: 46px; margin: 0 auto var(--s4);
  border-radius: var(--r-lg); background: var(--surface-2);
  display: grid; place-items: center; color: var(--text-3);
}
.empty-icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.empty h3 { margin-bottom: 5px; }
.empty p { color: var(--text-3); font-size: .875rem; margin-bottom: var(--s5); }
.empty-actions { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; }

/* ═══════════════ FORMS ═══════════════ */
.field { margin-bottom: var(--s4); }
.label {
  display: block; margin-bottom: 6px;
  font-size: .8125rem; font-weight: 550; color: var(--text-2);
}
.input, .select, .textarea {
  width: 100%; padding: 9px 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--r);
  font-size: .9375rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input:hover, .select:hover { border-color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
.input::placeholder { color: var(--muted); }
.select {
  appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A93' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}
.textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.hint { font-size: .75rem; color: var(--muted); margin-top: 5px; }

/* ═══════════════ MODAL ═══════════════ */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(13,21,32,.34);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: var(--s5);
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease), visibility .2s;
}
.overlay.open { opacity: 1; visibility: visible; }
.modal {
  width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--sh-3);
  transform: translateY(10px) scale(.985);
  transition: transform .2s var(--ease);
}
.overlay.open .modal { transform: none; }
.modal-head {
  padding: var(--s5) var(--s5) var(--s4);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
}
.modal-body { padding: 0 var(--s5) var(--s5); }
.modal-foot {
  padding: var(--s4) var(--s5); border-top: 1px solid var(--border);
  display: flex; gap: var(--s2); justify-content: flex-end;
}
@media (max-width: 560px) {
  .overlay { align-items: flex-end; padding: 0; }
  .modal { max-width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92vh; }
}

/* ═══════════════ TOAST ═══════════════ */
.toast {
  position: fixed; bottom: var(--s6); left: 50%;
  transform: translate(-50%, 16px);
  z-index: 200; display: flex; align-items: center; gap: 9px;
  padding: 11px 17px; border-radius: var(--r-full);
  background: var(--text); color: var(--bg);
  font-size: .875rem; font-weight: 500;
  box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden;
  transition: all .22s var(--ease);
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast svg { width: 16px; height: 16px; stroke-width: 2.5; }
.toast.error { background: var(--danger); color: #fff; }
@media (max-width: 860px) { .toast { bottom: 76px; } }

/* ═══════════════ GURU FLOATING ═══════════════ */
.guru-fab {
  position: fixed; right: var(--s6); bottom: var(--s6); z-index: 55;
  display: flex; align-items: center; gap: 9px;
  padding: 11px 18px 11px 14px; border-radius: var(--r-full);
  background: var(--accent); color: #fff;
  font-size: .875rem; font-weight: 600;
  box-shadow: 0 4px 18px rgba(13,122,107,.32);
  transition: all .18s var(--ease);
}
.guru-fab:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 7px 24px rgba(13,122,107,.38); }
.guru-fab svg { width: 18px; height: 18px; stroke-width: 1.75; }
@media (max-width: 860px) { .guru-fab { display: none; } }

/* ═══════════════ SKELETON ═══════════════ */
.skel {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ═══════════════ PROTOCOL EDITOR ═══════════════
   One markup structure, two layouts. Desktop reads as a
   spreadsheet; below 900px the same grid reflows into cards.
   No duplicate DOM, no `toggleMobRow` hack. */

.sec { margin-bottom: var(--s4); }

.sec-head {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; padding: var(--s4) var(--s5);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: background .16s var(--ease), border-radius .16s var(--ease);
}
.sec.open .sec-head { border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom-color: transparent; }
.sec-head:hover { background: var(--surface-2); }

.sec-chev { color: var(--text-3); transition: transform .2s var(--ease); }
.sec-chev svg { width: 17px; height: 17px; }
.sec.open .sec-chev { transform: rotate(90deg); }

.sec-title { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
.sec-count {
  font-size: .75rem; font-weight: 600; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 1px 8px; border-radius: var(--r-full);
}

.sec-body {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  overflow: hidden;
}
.sec.open .sec-body { display: block; }

/* ─── Row grid ─── */
/* Column widths are sized to the longest real value, not the header.
   Schedule was 124px, which clipped "Weekly — Mon" to "Weekly — Mc" — and a
   truncated schedule is worse than no schedule, because it looks like data
   rather than a rendering fault. Actions was 58px for three controls. */
.prow-head, .prow {
  display: grid;
  /* Actions is 152, not 112. At 112 a row that also shows the titration
     button (36 + Ask 66 + Remove 36 + gaps) overflowed its own track and
     crept back over the Schedule column. */
  grid-template-columns: minmax(140px,1.5fr) 88px 116px 100px 100px 158px 152px;
  gap: var(--s3); align-items: center;
  padding: var(--s3) var(--s5);
}
.prow-head {
  padding-top: var(--s3); padding-bottom: var(--s2);
  border-bottom: 1px solid var(--border);
  font-size: .6875rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
}
.prow { border-bottom: 1px solid var(--border); transition: background .14s var(--ease); }
.prow:last-child { border-bottom: none; }
.prow:hover { background: var(--surface-2); }

.pf { min-width: 0; }
.pf-label { display: none; font-size: .6875rem; font-weight: 600; color: var(--text-3); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em; }

/* Compact controls inside rows */
.pin {
  width: 100%; padding: 7px 9px;
  background: transparent; color: var(--text);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: .875rem;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.pin:hover  { border-color: var(--border); background: var(--surface); }
.pin:focus  { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: var(--ring); }
.pin.sel {
  appearance: none; cursor: pointer; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397A3B6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 14px;
}
.pin.name { font-weight: 600; }

/* Computed units — read-only, visibly derived */
.punits {
  font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--accent); text-align: right; padding-right: 4px;
}
.punits.none { color: var(--muted); font-weight: 400; }

.prow-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }

/* Controls used to be invisible until hover, which meant a feature nobody
   knew existed. Now they sit at low opacity — present enough to notice,
   quiet enough not to compete with the numbers — and come up on hover. */
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--text-3);
  opacity: .55; transition: all .14s var(--ease);
}
.prow:hover .icon-btn { opacity: 1; }
/* 19px at 2.1 weight. A 1px stroke on a 17px glyph reads as grey haze on a
   high-DPI screen — the icons were legible but not confidently legible. */
.icon-btn svg { width: 19px; height: 19px; stroke-width: 2.1; }
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn.ask:hover    { background: var(--accent-soft); color: var(--accent); }
.icon-btn.del:hover    { background: var(--danger-soft); color: var(--danger); }

/* Titration is the one row control that changes the dose itself, so it
   reads as an action rather than a utility. */
.icon-btn.titr        { color: var(--accent); opacity: .7; }
.icon-btn.titr:hover  { background: var(--accent-soft); color: var(--accent); }
.icon-btn.titr.on     { background: var(--accent-soft); opacity: 1; }

/* ─── Tooltips ───
   An icon with no label only works once you already know what it means.
   Native `title` waits a second and a half before appearing, which is long
   enough that people give up and click to find out. This is instant. */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: var(--text); color: var(--surface);
  padding: 7px 10px; border-radius: 7px;
  font-size: .75rem; font-weight: 500; line-height: 1.35;
  width: max-content; max-width: 220px; text-align: center;
  white-space: normal; pointer-events: none;
  opacity: 0; transition: opacity .13s var(--ease), transform .13s var(--ease);
  z-index: 40;
}
.tip::before {
  content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  border: 5px solid transparent; border-top-color: var(--text);
  opacity: 0; transition: opacity .13s var(--ease), transform .13s var(--ease);
  pointer-events: none; z-index: 40;
}
.tip:hover::after, .tip:hover::before,
.tip:focus-visible::after, .tip:focus-visible::before {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
/* The rightmost controls would push their tooltip past the card edge. */
.tip-end::after  { left: auto; right: 0; transform: translateX(0) translateY(3px); text-align: right; }
.tip-end::before { left: auto; right: 12px; transform: translateX(0) translateY(3px); }
.tip-end:hover::after, .tip-end:focus-visible::after   { transform: translateX(0) translateY(0); }
.tip-end:hover::before, .tip-end:focus-visible::before { transform: translateX(0) translateY(0); }

/* ─── One-time explainer ───
   Shown until dismissed, then never again. Sits above the table rather
   than pointing at a row, so it cannot cover the thing it describes. */
.row-hint {
  display: flex; align-items: flex-start; gap: var(--s4);
  padding: var(--s4) var(--s5); margin-bottom: var(--s4);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r); font-size: .8125rem; color: var(--text-2);
}
.row-hint-title { font-weight: 650; color: var(--text); margin-bottom: 6px; }
.row-hint-list  { display: flex; flex-direction: column; gap: 5px; }
.row-hint-list span { display: flex; align-items: center; gap: 7px; line-height: 1.45; }
.row-hint-list svg  { width: 15px; height: 15px; flex: none; color: var(--accent); stroke-width: 1.9; }
.row-hint-list b    { color: var(--text); font-weight: 600; }
.row-hint-actions   { margin-left: auto; flex: none; }
@media (max-width: 640px) {
  .row-hint { flex-direction: column; gap: var(--s3); }
  .row-hint-actions { margin-left: 0; }
}

/* The Guru button carries a word. It used to be a bare circle that faded
   in on hover, and beta testers could not tell what it was for — an icon
   with no label only works once you already know what it means. */
.btn-ask {
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 13px 0 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .01em;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid transparent;
  opacity: .55; transition: all .14s var(--ease);
}
.prow:hover .btn-ask { opacity: 1; }
.btn-ask:hover { opacity: 1; border-color: var(--accent); }
.btn-ask svg { width: 16px; height: 16px; stroke-width: 2.1; }

/* Dose = an amount you type and a unit you pick. Two controls, one value.
   They share a single outline so they read as one field rather than two
   unrelated inputs that happen to sit next to each other. */
.pdose {
  display: flex; align-items: stretch;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); overflow: hidden;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.pdose:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.pdose .pin { border: 0; border-radius: 0; background: transparent; }
.pdose .pin:focus { box-shadow: none; }

.pdose-n {
  flex: 1 1 auto; min-width: 0; width: 100%;
  text-align: right; padding-right: 4px;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.pdose-n::placeholder { color: var(--muted); font-weight: 400; }

.pdose-u {
  flex: 0 0 auto; width: auto; padding: 0 4px 0 2px;
  color: var(--text-3); font-size: .8125rem;
  border-left: 1px solid var(--border) !important;
}
.pdose-u:hover { color: var(--text); }

/* A field that genuinely does not apply — an oral compound's vial or water.
   Shown rather than hidden so the grid columns stay aligned across rows. */
.pin-na {
  display: flex; align-items: center; height: 32px; padding: 0 8px;
  color: var(--muted); font-size: .8125rem;
}
.pdraw-oral {
  font-size: 1.0625rem; font-weight: 650; color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Onboarding sits in a full-width form, so it matches .select rather than
   the compact row control. */
.pdose-lg { height: 40px; }
.pdose-lg .pdose-n { font-size: .9375rem; padding-left: var(--s3); }
.pdose-lg .pdose-u { font-size: .875rem; padding: 0 var(--s2); }

/* Runs low / out — the one number in the row worth interrupting for. */
.prow-sub .k-warn      { color: var(--warning); }
.prow-sub .k-warn b    { color: var(--warning); }

/* An action that lives in the detail line, next to the figure it changes.
   Always visible — a reset you only discover by hovering the right 28px is
   a reset nobody presses. */
.k-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 6px; border-radius: 999px;
  font-size: .6875rem; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid transparent; transition: all .14s var(--ease);
}
.k-btn:hover { border-color: var(--accent); }
.k-btn svg   { width: 12px; height: 12px; stroke-width: 2; }

/* Route, editable in place. It reads as one of the derived facts on the
   detail line until you go near it, then it admits it is a control — the
   alternative was an eighth column on a row that already has seven. */
.k-route { padding: 0; }
.k-sel {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: .75rem; font-weight: 600;
  color: var(--text-2); background: transparent;
  border: 1px solid transparent; border-radius: 6px;
  padding: 2px 20px 2px 7px; margin: -2px 0;
  cursor: pointer; transition: all .14s var(--ease);
  /* Chevron drawn in the box so there is no extra element to align. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center; background-size: 11px;
}
.k-sel:hover, .k-sel:focus {
  color: var(--text); background-color: var(--surface-2);
  border-color: var(--border-2); outline: none;
}
.k-sel:focus-visible { border-color: var(--accent); }
/* Not yet chosen — reads as a prompt, not as a fact. */
.k-sel.is-empty { color: var(--text-3); font-weight: 500; font-style: italic; }
@media (max-width: 900px) {
  /* Touch has no hover to reveal the affordance, so it is always visible. */
  .k-sel { border-color: var(--border); background-color: var(--surface); padding: 5px 22px 5px 9px; }
}

/* Derived detail line under each row */
.prow-sub {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
  font-size: .75rem; color: var(--text-3);
  padding-left: 9px; margin-top: -2px;
}
.prow-sub .k { display: inline-flex; align-items: center; gap: 4px; }
.prow-sub .k b { font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* The vial count is the one figure on this line the user can correct, so it
   is the one that looks touchable. Dotted rather than solid: it is a fact
   with an edit behind it, not a button. */
.k-vial {
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit; color: inherit; background: none; border: 0;
  padding: 1px 2px; border-radius: 4px; cursor: pointer;
  border-bottom: 1px dashed var(--border-strong, var(--border));
  transition: color .14s var(--ease), border-color .14s var(--ease);
}
.k-vial:hover { color: var(--accent); border-bottom-color: var(--accent); }
.k-vial b { font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.k-vial.k-warn, .k-vial.k-warn b { color: var(--warning, var(--danger)); }
.k-vial svg { width: 11px; height: 11px; stroke-width: 2; opacity: .6; }
/* An assumed open date is a guess we are printing as if it were a fact.
   Say so quietly rather than asserting "Full vial" forever. */
.k-vial.k-guess { font-style: italic; opacity: .85; }

.sec-foot { padding: var(--s3) var(--s5); border-top: 1px solid var(--border); background: var(--surface-2); }

/* ─── Mobile: same grid becomes a card ─── */
@media (max-width: 900px) {
  .prow-head { display: none; }
  .prow {
    grid-template-columns: 1fr 1fr;
    gap: var(--s3); padding: var(--s4) var(--s4) var(--s3);
    position: relative;
  }
  .pf-label { display: block; }
  .pf-name { grid-column: 1 / -1; }
  /* Six fields into two columns leaves Schedule paired with nothing, so it
     sat half-width beside a hole. It also holds the longest value on the
     row ("Weekends (Sat, Sun)"), so give it the full width. */
  .pf-sched { grid-column: 1 / -1; }
  .pin { border-color: var(--border); background: var(--surface); }
  .punits { text-align: left; padding: 7px 0 0; }
  /* Source order puts the actions before the detail line, which on a
     stacked card left "400 mg/mL · 5 doses · refill in 35 days" marooned
     UNDER the buttons — below a divider that reads as the end of the row.
     Reorder so the numbers stay with the numbers. */
  .prow-sub     { order: 1; padding-left: 0; margin-top: 0; }
  .prow-actions { order: 2; }

  /* Floating the actions top-right worked while they were three silent
     circles. A labelled button needs room, so on a narrow screen they
     become an ordinary row at the foot of the card instead. */
  .prow-actions {
    grid-column: 1 / -1; justify-content: flex-start; gap: var(--s2);
    padding-top: var(--s3); border-top: 1px solid var(--border);
    margin-top: var(--s2);
  }
  .icon-btn, .btn-ask { opacity: 1; }

  /* 40px, not 34. Below about 40 a target gets mis-tapped on a phone, and
     the one being mis-tapped here would be Remove. */
  .btn-ask  { height: 40px; padding: 0 16px 0 13px; font-size: .8125rem; border-radius: 999px; }
  .btn-ask svg { width: 17px; height: 17px; }
  .icon-btn { width: 40px; height: 40px; }
  .icon-btn svg { width: 20px; height: 20px; stroke-width: 2; }

  /* Delete sits apart from the rest. Next to Ask it is one slipped thumb
     away from removing a compound. */
  .prow-actions .del { margin-left: auto; }

  /* Hover tooltips are meaningless on touch — there is no hover, and a
     tap fires the action anyway. Suppress rather than leave them to
     flash on press. */
  .tip::after, .tip::before { display: none; }
}

/* ═══════════════ CALCULATOR ═══════════════ */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }
@media (max-width: 760px) { .calc-grid { grid-template-columns: 1fr; } }

.calc-out {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s5);
}
.calc-big {
  font-size: 2.25rem; font-weight: 600; letter-spacing: -.035em;
  color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.05;
}
.calc-big .u { font-size: 1rem; font-weight: 500; color: var(--text-3); margin-left: 4px; }
.calc-sub { font-size: .8125rem; color: var(--text-2); margin-top: 5px; }

/* Syringe */
.syr { margin-top: var(--s5); }
.syr-barrel {
  position: relative; height: 30px;
  background: var(--surface); border: 1.5px solid var(--border-2);
  border-radius: 5px 14px 14px 5px; overflow: hidden;
}
.syr-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--accent); opacity: .82;
  transition: width .35s var(--ease);
}
.syr-ticks { position: absolute; inset: 0; display: flex; }
.syr-ticks span { flex: 1; border-right: 1px solid var(--border); }
.syr-ticks span:last-child { border-right: none; }
.syr-scale {
  display: flex; justify-content: space-between;
  font-size: .6875rem; color: var(--muted);
  font-variant-numeric: tabular-nums; margin-top: 5px;
}
.calc-warn {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: var(--s4); padding: 11px 13px;
  border-radius: var(--r); font-size: .8125rem;
  background: var(--warning-soft); color: var(--warning);
}
.calc-warn svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }

/* ═══════════════ GURU ═══════════════ */
.guru-hero { text-align: center; padding: var(--s8) 0 var(--s6); }
.guru-mark {
  width: 52px; height: 52px; margin: 0 auto var(--s4);
  border-radius: var(--r-lg); background: var(--accent); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 5px 18px rgba(13,122,107,.28);
}
.guru-mark svg { width: 26px; height: 26px; stroke-width: 1.75; }
.guru-hero h1 { font-size: 1.625rem; margin-bottom: 6px; }
.guru-hero p  { color: var(--text-3); font-size: .9375rem; max-width: 400px; margin: 0 auto; }

/* Composer */
.ask {
  display: flex; align-items: flex-end; gap: var(--s2);
  padding: 9px 9px 9px 15px;
  background: var(--surface);
  border: 1px solid var(--border-2); border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.ask:focus-within { border-color: var(--accent); box-shadow: var(--ring), var(--sh-2); }
.ask textarea {
  flex: 1; border: none; background: none; resize: none;
  font-size: .9375rem; line-height: 1.5; padding: 7px 0;
  max-height: 168px; outline: none;
}
.ask textarea::placeholder { color: var(--muted); }
.ask-send {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  transition: all .16s var(--ease);
}
.ask-send:hover:not(:disabled) { background: var(--accent-hover); }
.ask-send:disabled { background: var(--surface-3); color: var(--muted); }
.ask-send svg { width: 16px; height: 16px; stroke-width: 2.5; }

.ask-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap;
}
.ctx-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8125rem; color: var(--text-2); cursor: pointer;
  padding: 5px 11px; border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--surface);
  transition: all .16s var(--ease);
}
.ctx-toggle:hover { border-color: var(--border-2); }
.ctx-toggle input { accent-color: var(--accent); width: 14px; height: 14px; }
.ctx-toggle.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.quota { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Starter cards */
.starters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
@media (max-width: 700px) { .starters { grid-template-columns: 1fr; } }
.starter {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4); text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: all .16s var(--ease);
}
.starter:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.starter-ico {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  background: var(--surface-2); color: var(--accent);
  display: grid; place-items: center;
}
.starter:hover .starter-ico { background: var(--surface); }
.starter-ico svg { width: 15px; height: 15px; stroke-width: 1.75; }
.starter-t { font-size: .875rem; font-weight: 600; line-height: 1.35; }
.starter-s { font-size: .75rem; color: var(--text-3); margin-top: 2px; line-height: 1.4; }

/* Compound chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 12px; border-radius: var(--r-full);
  font-size: .8125rem; font-weight: 500; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  transition: all .14s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.chip.mine { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.chip.mine::before { content: '●'; font-size: .5rem; margin-right: 5px; vertical-align: middle; }

/* Recent list */
.chat-item {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: var(--s3) var(--s4); text-align: left;
  border-bottom: 1px solid var(--border);
  transition: background .14s var(--ease);
}
.chat-item:last-child { border-bottom: none; }
.chat-item:hover { background: var(--surface-2); }
.chat-item svg { width: 15px; height: 15px; color: var(--text-3); flex-shrink: 0; }
.chat-t { flex: 1; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-d { font-size: .75rem; color: var(--muted); flex-shrink: 0; }

/* ─── Thread ─── */
.thread { max-width: 760px; margin: 0 auto; }
.thread-head {
  display: flex; align-items: center; gap: var(--s3);
  padding-bottom: var(--s4); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--border);
}
.thread-title { font-size: .9375rem; font-weight: 600; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.msg { display: flex; gap: var(--s3); margin-bottom: var(--s6); }
.msg-av {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; font-size: .6875rem; font-weight: 600;
}
.msg.user .msg-av { background: var(--surface-3); color: var(--text-2); }
.msg.bot  .msg-av { background: var(--accent); color: #fff; }
.msg.bot  .msg-av svg { width: 15px; height: 15px; stroke-width: 2; }
.msg-body { flex: 1; min-width: 0; padding-top: 2px; }
.msg.user .msg-body { color: var(--text); font-weight: 500; }

.msg-body p  { margin-bottom: var(--s3); }
.msg-body p:last-child { margin-bottom: 0; }
.msg-body h3 { font-size: .9375rem; margin: var(--s4) 0 var(--s2); }
.msg-body h4 { font-size: .875rem; margin: var(--s4) 0 var(--s2); color: var(--text-2); }
.msg-body ul, .msg-body ol { margin: 0 0 var(--s3) var(--s5); }
.msg-body li { margin-bottom: 5px; }
.msg-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8125em; background: var(--surface-2);
  padding: 2px 5px; border-radius: 4px; border: 1px solid var(--border);
}
.guru-pre {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--s3) var(--s4);
  overflow-x: auto; margin-bottom: var(--s3);
}
.guru-pre code { background: none; border: none; padding: 0; font-size: .8125rem; }
.guru-table-wrap { overflow-x: auto; margin-bottom: var(--s3); }
.guru-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.guru-table th, .guru-table td { padding: 7px 11px; border: 1px solid var(--border); text-align: left; }
.guru-table th { background: var(--surface-2); font-weight: 600; }

.msg-tools { display: flex; gap: 2px; margin-top: var(--s2); opacity: 0; transition: opacity .16s var(--ease); }
.msg:hover .msg-tools { opacity: 1; }
.msg-tools button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: var(--r-sm);
  font-size: .75rem; color: var(--text-3);
  transition: all .14s var(--ease);
}
.msg-tools button:hover { background: var(--surface-2); color: var(--text); }
.msg-tools button.on { color: var(--accent); }
.msg-tools svg { width: 13px; height: 13px; }

.msg-err {
  background: var(--danger-soft); color: var(--danger);
  border-radius: var(--r); padding: var(--s3) var(--s4); font-size: .875rem;
}
.msg-err.quota { background: var(--warning-soft); color: var(--warning); }

.typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
  animation: bounce 1.3s infinite;
}
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes bounce { 0%,60%,100% { opacity:.3; transform:translateY(0) } 30% { opacity:1; transform:translateY(-3px) } }

.thread-composer {
  position: sticky; bottom: 0; padding: var(--s4) 0 var(--s5);
  background: linear-gradient(to bottom, transparent, var(--bg) 22%);
}
@media (max-width: 860px) { .thread-composer { bottom: 62px; } }

.disclaimer {
  font-size: .75rem; color: var(--muted); text-align: center;
  max-width: 520px; margin: var(--s8) auto 0; line-height: 1.6;
}

/* ═══════════════ TABS ═══════════════ */
.tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); margin-bottom: var(--s6);
}
.tab-btn {
  padding: 7px 15px; border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 500; color: var(--text-3);
  transition: all .16s var(--ease);
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  background: var(--surface); color: var(--text); font-weight: 600;
  box-shadow: var(--sh-1);
}

/* ═══════════════ ADHERENCE BARS ═══════════════ */
.bars { display: flex; flex-direction: column; }
.bar-row {
  display: grid; grid-template-columns: minmax(120px,1.4fr) 1fr 56px 62px;
  gap: var(--s4); align-items: center;
  padding: var(--s3) var(--s5); border-bottom: 1px solid var(--border);
}
.bar-row:last-child { border-bottom: none; }
.bar-name { font-size: .875rem; font-weight: 500; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 3px; background: var(--success); transition: width .5s var(--ease); }
.bar-fill.mid { background: var(--warning); }
.bar-fill.low { background: var(--danger); }
.bar-pct {
  font-size: .875rem; font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums;
}
.bar-meta { font-size: .75rem; color: var(--muted); text-align: right;
  font-variant-numeric: tabular-nums; }
.bar-delta { font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-delta.up   { color: var(--success); }
.bar-delta.down { color: var(--danger); }
@media (max-width: 700px) {
  .bar-row { grid-template-columns: 1fr 52px; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); }
  .bar-name { grid-column: 1; }
  .bar-pct  { grid-column: 2; grid-row: 1; }
  .bar-track{ grid-column: 1 / -1; }
  .bar-meta { grid-column: 1 / -1; text-align: left; }
}

/* ═══════════════ MONTH CALENDAR ═══════════════ */
.cal-head {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
  margin-bottom: var(--s2);
}
.cal-head span {
  text-align: center; font-size: .6875rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-cell {
  aspect-ratio: 1; border-radius: var(--r-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: .8125rem; font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  transition: all .14s var(--ease);
}
.cal-cell.blank { visibility: hidden; }
.cal-cell.none  { color: var(--muted); }
.cal-cell.future{ color: var(--muted); background: var(--surface-2); }
.cal-cell.full  { background: var(--success); color: #fff; font-weight: 600; }
.cal-cell.part  { background: var(--warning-soft); color: var(--warning); font-weight: 600; }
.cal-cell.miss  { background: var(--danger-soft);  color: var(--danger);  font-weight: 600; }
.cal-cell.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cal-dot { font-size: .5625rem; opacity: .85; }

.legend { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s4); }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--text-3); }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ═══════════════ JOURNAL ═══════════════ */
.scale { display: flex; gap: 5px; }
.scale button {
  flex: 1; padding: 9px 0; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  font-size: .875rem; font-weight: 500; color: var(--text-2);
  font-variant-numeric: tabular-nums;
  transition: all .14s var(--ease);
}
.scale button:hover { border-color: var(--border-2); }
.scale button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.jentry { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); }
.jentry:last-child { border-bottom: none; }
.jentry-top { display: flex; align-items: center; gap: var(--s3); margin-bottom: 7px; }
.jentry-date { font-size: .8125rem; font-weight: 600; }
.jentry-text { font-size: .875rem; color: var(--text-2); line-height: 1.6; white-space: pre-wrap; }
.jentry .icon-btn { opacity: 0; }
.jentry:hover .icon-btn { opacity: 1; }

/* ═══════════════ SETTINGS ═══════════════ */
.settings { display: grid; grid-template-columns: 186px 1fr; gap: var(--s8); align-items: start; }
@media (max-width: 820px) { .settings { grid-template-columns: 1fr; gap: var(--s5); } }

.set-nav { position: sticky; top: calc(var(--nav-h) + var(--s5)); display: flex; flex-direction: column; gap: 1px; }
@media (max-width: 820px) {
  .set-nav {
    position: static; flex-direction: row; gap: 4px;
    overflow-x: auto; padding-bottom: var(--s2);
    scrollbar-width: none;
  }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-nav button { white-space: nowrap; }
}
.set-nav button {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 500; color: var(--text-3);
  text-align: left; transition: all .14s var(--ease);
}
.set-nav button:hover { background: var(--surface-2); color: var(--text); }
.set-nav button.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.set-nav svg { width: 15px; height: 15px; stroke-width: 1.75; flex-shrink: 0; }

.set-pane { min-width: 0; }
.set-pane h2 { font-size: 1.125rem; margin-bottom: 3px; }
.set-pane .sub { color: var(--text-3); font-size: .875rem; margin-bottom: var(--s5); }

.set-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
}
.set-row:last-child { border-bottom: none; }
.set-row-label { font-size: .875rem; font-weight: 500; }
.set-row-sub   { font-size: .75rem; color: var(--text-3); margin-top: 2px; }
.set-row-ctl   { flex-shrink: 0; min-width: 180px; }
@media (max-width: 620px) {
  .set-row { flex-direction: column; align-items: stretch; }
  .set-row-ctl { min-width: 0; }
}

/* Switch */
.switch { position: relative; display: inline-block; width: 40px; height: 23px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--surface-3); border-radius: var(--r-full);
  transition: background .18s var(--ease);
}
.switch span::before {
  content: ''; position: absolute; height: 17px; width: 17px;
  left: 3px; bottom: 3px; background: #fff; border-radius: 50%;
  box-shadow: var(--sh-1); transition: transform .18s var(--ease);
}
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::before { transform: translateX(17px); }

/* Reminders */
.rem {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border);
}
.rem:last-child { border-bottom: none; }
.rem-time {
  font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums;
  min-width: 78px; letter-spacing: -.02em;
}
.rem-main { flex: 1; min-width: 0; }
.rem-name { font-size: .875rem; font-weight: 500; }
.rem-meta { font-size: .75rem; color: var(--text-3); margin-top: 1px; }
.rem.off .rem-time, .rem.off .rem-name { color: var(--muted); }

/* ─── Markers ───
   A row is: what it is, how it has moved, and where it sits. The
   sparkline carries the trend so the number does not have to. */
.mk-row {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border);
}
.mk-row:last-child { border-bottom: none; }
.mk-main { flex: 1 1 150px; min-width: 0; }
.mk-name { font-size: .875rem; font-weight: 500; }
.mk-meta { font-size: .75rem; color: var(--text-3); margin-top: 1px; }

.mk-chart { width: 92px; flex: none; color: var(--accent); }
.mk-chart.out { color: var(--warning, var(--danger)); }
.mk-spark { width: 100%; height: 26px; display: block; overflow: visible; }

.mk-val { text-align: right; flex: none; min-width: 82px; }
.mk-num {
  font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.mk-num.out { color: var(--warning, var(--danger)); }
.mk-unit  { font-size: .6875rem; color: var(--text-3); margin-left: 3px; }
.mk-range { display: block; font-size: .6875rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Typing a value outside the range tints the field — the range gets felt
   rather than read back off a hint underneath. */
#mValue.is-out { color: var(--warning, var(--danger)); }

@media (max-width: 640px) {
  .mk-row { flex-wrap: wrap; gap: var(--s2) var(--s3); }
  .mk-main { flex: 1 1 100%; }
  .mk-chart { width: 70px; }
  .mk-val { margin-left: auto; }
}

/* ─── Fertility timeline ───
   Six months on a bar, with a tick at three. The point is that month two
   looks like progress instead of failure. */
.fert-track {
  position: relative; height: 8px; border-radius: var(--r-full);
  background: var(--surface-2); overflow: visible;
}
.fert-fill {
  height: 100%; border-radius: var(--r-full);
  background: var(--accent); transition: width .4s var(--ease);
}
.fert-tick {
  position: absolute; top: -3px; width: 2px; height: 14px;
  background: var(--border-strong, var(--muted)); border-radius: 1px;
}
.fert-scale {
  display: flex; justify-content: space-between;
  font-size: .6875rem; color: var(--text-3); margin-top: 6px;
}

/* ─── Delivery status ───
   The dot is the whole feature in one glyph: green means something
   actually reaches you, amber means nothing does. */
.deliv-state {
  display: flex; align-items: center; gap: var(--s2);
  font-size: .875rem; font-weight: 500; color: var(--text-2);
}
.deliv-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted); flex: none;
}
.deliv-state.ok   { color: var(--text-1); }
.deliv-state.ok   .deliv-dot { background: var(--success, var(--accent)); }
.deliv-state.warn .deliv-dot { background: var(--warning, var(--danger)); }

.deliv-sub { display: block; font-size: .75rem; color: var(--text-3); line-height: 1.5; }
.deliv-opt b { font-weight: 600; font-size: .875rem; }
.deliv-quiet {
  display: flex; align-items: center; gap: var(--s2);
  flex-wrap: wrap; margin-top: var(--s3);
}
.deliv-quiet .deliv-sub { display: inline; }
.deliv-quiet select { width: auto; }

/* ─── Reminder rows (one per protocol compound) ─── */
.rem-row { flex-wrap: wrap; gap: var(--s3) var(--s4); }
.rem-row .rem-main { flex: 1 1 180px; }
.rem-times { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.rem-times input[type="time"] { width: 128px; }
.rem.off .rem-times { opacity: .55; }

/* Counter + upgrade button under each list */
.meta-row { font-size: .8125rem; gap: var(--s3); align-items: center; }
.meta-row .is-low { color: var(--warning, var(--danger)); font-weight: 600; }

/* ─── Vial tracking rows ─── */
.vial-row { flex-wrap: wrap; gap: var(--s3) var(--s4); }
.vial-row .rem-main { flex: 1 1 160px; }
.vial-row .rem-meta.is-low { color: var(--warning, var(--danger)); font-weight: 600; }
.vial-row .rem-meta b { font-variant-numeric: tabular-nums; }
.vial-fields { display: flex; gap: var(--s3); flex-wrap: wrap; }
.vial-f { display: flex; flex-direction: column; gap: 3px; }
.vial-f > span {
  font-size: .6875rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--text-3);
}
.input-sm { padding: 6px 9px; font-size: .8125rem; border-radius: var(--r-sm); }
.vial-f input[type="date"]   { width: 148px; }
.vial-f input[type="number"] { width: 88px; }

@media (max-width: 640px) {
  /* Several fields side by side stop being readable well before the row
     runs out of width, so they wrap to a full-width grid instead. */
  .vial-fields { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .vial-f input, .vial-f select { width: 100% !important; }
  .rem-times { width: 100%; }
  .rem-times input[type="time"] { flex: 1; width: auto; }
}

.pill-pro {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-full);
  font-size: .625rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--accent); color: #fff;
}

/* Plan card */
.plan-card {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s5); background: var(--surface);
}
.plan-card.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-price { font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; }
.plan-price .per { font-size: .875rem; font-weight: 500; color: var(--text-3); }
.plan-list { list-style: none; margin: var(--s4) 0 0; font-size: .8125rem; }
.plan-list li { display: flex; gap: 8px; padding: 4px 0; color: var(--text-2); }
.plan-list svg { width: 14px; height: 14px; color: var(--success); flex-shrink: 0; margin-top: 3px; }

/* Danger zone */
.danger-zone {
  border: 1px solid var(--danger); border-radius: var(--r-lg);
  background: var(--danger-soft); padding: var(--s5); margin-top: var(--s8);
}
.danger-zone h3 { color: var(--danger); font-size: .9375rem; margin-bottom: 4px; }
.danger-zone p  { font-size: .8125rem; color: var(--text-2); margin-bottom: var(--s4); }

.msg-inline {
  padding: 10px 13px; border-radius: var(--r); font-size: .8125rem;
  margin-bottom: var(--s4);
}
.msg-inline.ok  { background: var(--success-soft); color: var(--success); }
.msg-inline.err { background: var(--danger-soft);  color: var(--danger); }

/* ═══════════════ AUTH ═══════════════ */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display: none; } }

.auth-main { display: flex; flex-direction: column; padding: var(--s6) var(--s8); }
.auth-form { width: 100%; max-width: 356px; margin: auto; padding: var(--s8) 0; }
.auth-form h1 { font-size: 1.5rem; margin-bottom: 5px; }
.auth-form .sub { color: var(--text-3); font-size: .9375rem; margin-bottom: var(--s6); }

.auth-aside {
  background: var(--surface); border-left: 1px solid var(--border);
  padding: var(--s16) var(--s10); display: flex; flex-direction: column; justify-content: center;
}
.auth-points { list-style: none; margin-top: var(--s6); }
.auth-points li { display: flex; gap: var(--s3); padding: var(--s3) 0; }
.auth-points svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.auth-points b { display: block; font-size: .9375rem; font-weight: 600; }
.auth-points span { font-size: .8125rem; color: var(--text-3); }

.pw-wrap { position: relative; }
.pw-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--text-3);
}
.pw-eye:hover { background: var(--surface-2); color: var(--text); }
.pw-eye svg { width: 16px; height: 16px; }

.auth-alt { text-align: center; font-size: .875rem; color: var(--text-3); margin-top: var(--s5); }
.auth-alt a { color: var(--accent); font-weight: 500; }

/* ═══════════════ ONBOARDING ═══════════════ */
.steps { display: flex; gap: 6px; margin-bottom: var(--s8); }
.step-dot { flex: 1; height: 3px; border-radius: 2px; background: var(--surface-3); transition: background .3s var(--ease); }
.step-dot.on { background: var(--accent); }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 560px) { .choice-grid { grid-template-columns: 1fr; } }
.choice {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4); text-align: left;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); transition: all .16s var(--ease);
}
.choice:hover { border-color: var(--border-2); }
.choice.on { border-color: var(--accent); background: var(--accent-soft); }
.choice-check {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  border: 1.5px solid var(--border-2); display: grid; place-items: center;
}
.choice.on .choice-check { background: var(--accent); border-color: var(--accent); }
.choice-check svg { width: 12px; height: 12px; stroke-width: 3; color: #fff; opacity: 0; }
.choice.on .choice-check svg { opacity: 1; }
.choice-t { font-size: .9375rem; font-weight: 600; }
.choice-s { font-size: .75rem; color: var(--text-3); }

/* ═══════════════ LIBRARY ═══════════════ */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: var(--s3); }

/* The landing "honesty" row. A fixed flex-basis overflowed the 1120px
   container once there were four cards, dropping the last one onto its own
   line. Columns that divide the available width cannot do that, whatever
   the card count. Type is a step up from the library grid because this row
   is doing marketing work, not reference work. */
.lib-grid.featured {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
.lib-grid.featured .lib-card { justify-content: space-between; padding: var(--s5); }
.lib-grid.featured .lib-name { font-size: 1.0625rem; }
.lib-grid.featured .lib-sum  { font-size: .8125rem; -webkit-line-clamp: 3; }
.lib-grid.featured .lib-foot { margin-top: auto; padding-top: var(--s3); }
.lib-grid.featured .pill     { font-size: .6875rem; }
@media (max-width: 1000px) { .lib-grid.featured { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .lib-grid.featured { grid-template-columns: 1fr; } }

.lib-card { flex: 0 1 268px; }
/* Cards in a centred row must share a baseline. Left to themselves they size
   to their own content, so one compound wrapping to a second line of pills
   makes the whole row look broken rather than just taller. */
.lib-card {
  display: flex; flex-direction: column; gap: 7px;
  padding: var(--s4); text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); transition: all .16s var(--ease);
}
.lib-card:hover { border-color: var(--accent); box-shadow: var(--sh-2); }
.lib-name { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
.lib-sum {
  font-size: .75rem; color: var(--text-3); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lib-foot { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 5px; }

.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s5); }
.filter {
  padding: 6px 13px; border-radius: var(--r-full);
  font-size: .8125rem; font-weight: 500; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  transition: all .14s var(--ease);
}
.filter:hover  { border-color: var(--border-2); }
.filter.on { background: var(--text); color: var(--bg); border-color: var(--text); }

.lib-detail { max-width: 720px; }
.lib-detail h1 { font-size: 1.75rem; margin-bottom: 6px; }
.lib-aka { font-size: .875rem; color: var(--text-3); margin-bottom: var(--s4); }
.spec { display: grid; grid-template-columns: 152px 1fr; gap: var(--s3) var(--s5);
  padding: var(--s5) 0; border-top: 1px solid var(--border); }
@media (max-width: 620px) { .spec { grid-template-columns: 1fr; gap: 4px var(--s3); } }
.spec dt { font-size: .8125rem; font-weight: 600; color: var(--text-3); }
.spec dd { font-size: .875rem; line-height: 1.6; }
.caution-box {
  background: var(--warning-soft); border-radius: var(--r-lg);
  padding: var(--s4) var(--s5); margin-top: var(--s5);
}
.caution-box h3 { font-size: .875rem; color: var(--warning); margin-bottom: 6px; }
.caution-box p  { font-size: .875rem; color: var(--text-2); line-height: 1.65; }

/* ═══════════════ MARKETING ═══════════════ */
.hero { text-align: center; padding: var(--s16) 0 var(--s12); }
.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.04em;
  line-height: 1.08; margin-bottom: var(--s4);
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p { font-size: 1.0625rem; color: var(--text-2); max-width: 500px; margin: 0 auto var(--s6); line-height: 1.6; }
.hero-cta { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: var(--s5); }
.feature { padding: var(--s5); }
.feature-ico {
  width: 48px; height: 48px; border-radius: var(--r-lg); margin-bottom: var(--s4);
  background: var(--accent-soft); color: var(--accent); display: grid; place-items: center;
}
.feature-ico svg { width: 24px; height: 24px; stroke-width: 1.6; }
.feature h3 { font-size: 1rem; margin-bottom: 6px; }
.feature p  { font-size: .875rem; color: var(--text-3); line-height: 1.65; }

/* Single column on phones — centre it and give the icon more presence.
   Left-aligned text needs a left edge to sit against; in one narrow
   column there isn't one, so centring reads better. */
@media (max-width: 700px) {
  .feature-grid { gap: var(--s8); }
  .feature { text-align: center; padding: 0 var(--s3); }
  .feature-ico { width: 60px; height: 60px; margin-inline: auto; }
  .feature-ico svg { width: 30px; height: 30px; }
  .feature h3 { font-size: 1.0625rem; }
  .feature p  { font-size: .9375rem; max-width: 34ch; margin-inline: auto; }
}

.band { border-top: 1px solid var(--border); padding: var(--s16) 0; }
.band-head { text-align: center; max-width: 520px; margin: 0 auto var(--s8); }
.band-head h2 { font-size: 1.75rem; letter-spacing: -.03em; margin-bottom: var(--s3); }
.band-head p  { color: var(--text-3); font-size: .9375rem; }

.site-foot {
  border-top: 1px solid var(--border); padding: var(--s8) 0;
  display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center;
  font-size: .8125rem; color: var(--text-3);
}
.site-foot a { color: var(--text-3); }
.site-foot a:hover { color: var(--accent); }

/* ═══════════════ LONG-FORM PROTOCOL GUIDE ═══════════════ */
.guide-wrap { display: grid; grid-template-columns: 216px minmax(0,1fr); gap: var(--s10); align-items: start; }
@media (max-width: 1000px) { .guide-wrap { grid-template-columns: 1fr; gap: var(--s5); } }

.toc { position: sticky; top: calc(var(--nav-h) + var(--s5)); max-height: calc(100vh - var(--nav-h) - var(--s10)); overflow-y: auto; }
.toc-title { font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: var(--s3); }
.toc a {
  display: block; padding: 5px 11px; border-left: 2px solid var(--border);
  font-size: .8125rem; color: var(--text-3); line-height: 1.45;
  transition: all .14s var(--ease);
}
.toc a:hover { color: var(--text); border-left-color: var(--border-2); }
.toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
@media (max-width: 1000px) {
  .toc { position: static; max-height: none; }
  .toc-inner { display: flex; gap: 4px; overflow-x: auto; padding-bottom: var(--s2); scrollbar-width: none; }
  .toc-inner::-webkit-scrollbar { display: none; }
  .toc a { border-left: none; border: 1px solid var(--border); border-radius: var(--r-full);
           white-space: nowrap; padding: 5px 12px; }
  .toc a.active { background: var(--accent-soft); border-color: var(--accent-line); }
}

.guide { max-width: 720px; }
.guide h1 { font-size: clamp(1.5rem, 3.2vw, 2rem); letter-spacing: -.032em; line-height: 1.15; margin-bottom: var(--s3); }
.guide-intro { font-size: 1.0625rem; color: var(--text-2); line-height: 1.65; margin-bottom: var(--s4); }
.guide-byline { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: .8125rem;
  color: var(--text-3); padding-bottom: var(--s5); border-bottom: 1px solid var(--border); }

.gsec { padding-top: var(--s10); scroll-margin-top: calc(var(--nav-h) + var(--s5)); }
.gsec > h2 { font-size: 1.375rem; letter-spacing: -.026em; margin-bottom: var(--s4); }
.gsec > h3 { font-size: 1rem; margin: var(--s6) 0 var(--s3); }
.gsec p { line-height: 1.7; margin-bottom: var(--s4); color: var(--text-2); }
.gsec p strong { color: var(--text); font-weight: 600; }
.gsec > ul { margin: 0 0 var(--s4) var(--s5); }
.gsec > ul li { line-height: 1.7; margin-bottom: 9px; color: var(--text-2); }

/* Quick-start definition grid */
.qs { display: grid; grid-template-columns: 138px minmax(0,1fr); gap: 0; }
@media (max-width: 620px) { .qs { grid-template-columns: 1fr; } }
.qs dt {
  font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3); padding: var(--s4) var(--s4) var(--s4) 0; border-top: 1px solid var(--border);
}
.qs dd { padding: var(--s4) 0; border-top: 1px solid var(--border); font-size: .9375rem; line-height: 1.65; }
@media (max-width: 620px) {
  .qs dt { border-top: 1px solid var(--border); padding-bottom: 4px; }
  .qs dd { border-top: none; padding-top: 0; }
}

/* Data tables */
.gtable-wrap { overflow-x: auto; margin-bottom: var(--s4); border: 1px solid var(--border); border-radius: var(--r-lg); }
.gtable { width: 100%; border-collapse: collapse; font-size: .875rem; }
.gtable th {
  background: var(--surface-2); text-align: left; padding: 11px 15px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap; border-bottom: 1px solid var(--border);
}
.gtable td { padding: 12px 15px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.55; }
.gtable tr:last-child td { border-bottom: none; }
.gtable td.num, .gtable th.num { font-variant-numeric: tabular-nums; }
.gtable td:first-child { font-weight: 500; color: var(--text); }
.gtable .note { color: var(--text-3); font-size: .8125rem; }
.gtable tr.hl td { background: var(--accent-soft); }

/* Callout blocks */
.note-box {
  border-left: 3px solid var(--border-2); border-radius: 0;
  padding: var(--s3) 0 var(--s3) var(--s4); margin-bottom: var(--s4);
  font-size: .875rem; color: var(--text-2); line-height: 1.65;
}
.note-box.accent  { border-left-color: var(--accent); }
.note-box.warning { border-left-color: var(--warning); }

.boundary {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s5); margin-bottom: var(--s4);
}
.boundary h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: .875rem; color: var(--text); margin: 0 0 var(--s3);
}
.boundary h3 svg { width: 16px; height: 16px; color: var(--accent); }
.boundary p { font-size: .9375rem; line-height: 1.7; margin: 0 0 var(--s3); color: var(--text-2); }
.boundary p:last-child { margin-bottom: 0; }

.avoid-list { list-style: none; margin: 0; }
.avoid-list li {
  display: flex; gap: var(--s3); padding: var(--s3) 0;
  border-bottom: 1px solid var(--border); font-size: .9375rem; line-height: 1.65; color: var(--text-2);
}
.avoid-list li:last-child { border-bottom: none; }
.avoid-list svg { width: 16px; height: 16px; color: var(--danger); flex-shrink: 0; margin-top: 4px; }

.se-grid { display: grid; gap: var(--s4); }
.se-block h4 {
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: var(--s2);
}
.se-block.common   h4 { color: var(--text-3); }
.se-block.uncommon h4 { color: var(--warning); }
.se-block.serious  h4 { color: var(--danger); }
.se-block ul { margin: 0 0 0 var(--s5); }
.se-block li { font-size: .875rem; line-height: 1.65; color: var(--text-2); margin-bottom: 6px; }

/* Numbered steps */
.steps-list { list-style: none; counter-reset: st; margin: 0; }
.steps-list li { counter-increment: st; display: flex; gap: var(--s4); padding: var(--s4) 0;
  border-bottom: 1px solid var(--border); }
.steps-list li:last-child { border-bottom: none; }
.steps-list li::before {
  content: counter(st, decimal-leading-zero);
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface-2); color: var(--text-3);
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.steps-list b { display: block; font-size: .9375rem; margin-bottom: 3px; }
.steps-list span { font-size: .875rem; color: var(--text-2); line-height: 1.65; }

/* Timeline */
.tl { list-style: none; margin: 0; }
.tl li { display: grid; grid-template-columns: 128px minmax(0,1fr); gap: var(--s4);
  padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.tl li:last-child { border-bottom: none; }
.tl b { font-size: .8125rem; font-weight: 600; color: var(--accent); }
.tl span { font-size: .875rem; color: var(--text-2); line-height: 1.65; }
@media (max-width: 620px) { .tl li { grid-template-columns: 1fr; gap: 2px; } }

/* FAQ */
.faq details {
  border-bottom: 1px solid var(--border);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) 0; cursor: pointer; list-style: none;
  font-size: .9375rem; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; width: 9px; height: 9px; flex-shrink: 0;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq details p { font-size: .9375rem; line-height: 1.7; color: var(--text-2);
  padding-bottom: var(--s4); margin: 0; }

/* References */
.refs { list-style: none; margin: 0; counter-reset: rf; }
.refs li { counter-increment: rf; display: flex; gap: var(--s3); padding: var(--s3) 0;
  border-bottom: 1px solid var(--border); font-size: .875rem; }
.refs li:last-child { border-bottom: none; }
.refs li::before { content: counter(rf) '.'; color: var(--muted); flex-shrink: 0;
  font-variant-numeric: tabular-nums; }
.refs b { font-weight: 500; display: block; line-height: 1.5; }
.refs span { color: var(--text-3); font-size: .8125rem; }

/* Supplier slot — content-neutral placeholder until partners exist */
.supplier-slot {
  border: 1px dashed var(--border-2); border-radius: var(--r-lg);
  padding: var(--s5); text-align: center; color: var(--text-3); font-size: .875rem;
}

/* ═══════════════ UTILITIES ═══════════════ */
.hidden { display: none !important; }
.mt-1 { margin-top: var(--s1); } .mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); } .mt-6 { margin-top: var(--s6); }
.mb-2 { margin-bottom: var(--s2); } .mb-4 { margin-bottom: var(--s4); } .mb-6 { margin-bottom: var(--s6); }
.divider { height: 1px; background: var(--border); border: none; }

/* ═══════════════ MOTION / A11Y ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ═══════════════ PRINT ═══════════════ */
@media print {
  :root { --bg:#fff; --surface:#fff; --text:#000; --border:#ccc; }
  .nav, .tabbar, .guru-fab, .toast, .btn, .dose-ask { display: none !important; }
  .page { max-width: 100%; padding: 0; }
  .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  body { padding-bottom: 0; }
}

/* A draw that exceeds one U-100 syringe. Flagged, not alarmed — it is a
   practical detail, and the fix (use less water) sits right beside it. */
.gtable .note.warn { color: var(--warning); font-weight: 500; }

/* ─── LIBRARY, GROUPED ───────────────────────────────────────
   Showing all 55 at once only works if the eye has somewhere to
   rest. Category headings give the list structure, so browsing
   feels like a catalogue rather than a wall. */
.lib-cat { margin-bottom: var(--s8); scroll-margin-top: 80px; }
/* Cards inside a category flow left-to-right and wrap — so a category with
   14 compounds becomes three tidy rows rather than one very tall column. */
.lib-cat .lib-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.lib-cat-head {
  display: flex; align-items: baseline; gap: var(--s2);
  margin-bottom: var(--s3); padding-bottom: var(--s2);
  border-bottom: 1px solid var(--border);
}
.lib-cat-head h2 {
  font-size: 1rem; font-weight: 600; letter-spacing: -.01em; margin: 0;
}
.lib-cat-count {
  font-size: .75rem; color: var(--text-3); font-variant-numeric: tabular-nums;
}

/* ─── TODAY HUB ──────────────────────────────────────────────
   A signed-in home has to answer "what else is here" without
   making anyone hunt. Two columns keeps every destination above
   the fold on a laptop; one column on phones, where the tab bar
   already does this job. */
.hub-grid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) { .hub-grid { grid-template-columns: 1fr; } }

.hub-card {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4); border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.hub-card:hover { border-color: var(--accent); box-shadow: var(--sh-2); }
.hub-card.accent { border-color: var(--accent-line); background: var(--accent-soft); }
.hub-card .chev { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; align-self: center; }

.hub-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.hub-icon svg { width: 17px; height: 17px; }
.hub-card.accent .hub-icon { background: var(--accent); color: #fff; }

.hub-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.hub-title { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
.hub-sub   { font-size: .8125rem; color: var(--text-3); line-height: 1.5; }
.hub-count {
  flex-shrink: 0; align-self: center; font-size: .75rem; color: var(--text-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 480px) { .hub-count { display: none; } }

/* ─── SOFT PRO NUDGE ─────────────────────────────────────────
   Shown only when the message is actually true for this person —
   near the message cap, or tracking enough to benefit. A banner
   that appears on day one to someone who has used nothing is an
   advert; one that appears when you hit a limit is information. */
.pro-nudge {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s6); padding: var(--s4) var(--s5);
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  border-radius: var(--r-lg);
}
.pro-nudge-icon { flex-shrink: 0; color: var(--accent); }
.pro-nudge-icon svg { width: 20px; height: 20px; }
.pro-nudge-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pro-nudge-title { font-size: .875rem; font-weight: 500; color: var(--text); }
.pro-nudge-sub   { font-size: .8125rem; color: var(--text-3); }
.pro-nudge .btn  { flex-shrink: 0; }
@media (max-width: 620px) {
  .pro-nudge { flex-wrap: wrap; }
  .pro-nudge .btn { width: 100%; }
}

/* ─── JOURNAL SCALES ─────────────────────────────────────────
   Several scales stacked need to stay compact, or the daily
   entry starts to feel like paperwork and people stop doing it.
   The hint line is reserved space so nothing jumps when a
   rating is chosen. */
.scale-hint {
  min-height: 15px; margin-top: 4px; font-size: .75rem;
  color: var(--accent); font-weight: 500;
}
#jMetrics .field { margin-bottom: var(--s3); }
#jMetrics .scale button { padding: 7px 0; font-size: .8125rem; }
@media (max-width: 560px) { #jMetrics .scale { gap: 4px; } }

/* ─── BETA FEEDBACK ──────────────────────────────────────────
   Visible only to trial accounts. A general user does not need a
   feedback tab competing with the product for attention, but a
   tester needs it within reach of whatever just annoyed them. */
.beta-bar {
  position: fixed; left: var(--s5); bottom: var(--s5); z-index: 90;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 15px 9px 12px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--accent-line);
  color: var(--accent); font-size: .8125rem; font-weight: 500;
  box-shadow: var(--sh-2);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.beta-bar:hover { transform: translateY(-1px); box-shadow: var(--sh-3); }
.beta-bar svg { width: 15px; height: 15px; }
@media (max-width: 720px) {
  /* Clear of the tab bar and the Ask Guru button on phones. */
  .beta-bar { bottom: calc(var(--s16) + 12px); left: var(--s4); font-size: .75rem; }
}

.fb-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fb-kinds button {
  padding: 9px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  font-size: .8125rem; color: var(--text-2); text-align: left;
  transition: all .14s var(--ease);
}
.fb-kinds button:hover { border-color: var(--border-2); }
.fb-kinds button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 500; }

.fb-consent {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: .8125rem; color: var(--text-2); margin-top: var(--s2);
}
.fb-consent input { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }

/* ─── WALKTHROUGH ────────────────────────────────────────────
   Shown once on first sign-in. Kept short and skippable — a tour
   longer than the setup it describes teaches people to dismiss
   things without reading them. */
.modal.tour { max-width: 420px; }
.modal.tour .modal-head { padding-bottom: 0; align-items: center; }

.tour-icon {
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.tour-icon svg { width: 20px; height: 20px; }

.tour-title { font-size: 1.0625rem; letter-spacing: -.02em; margin: 0 0 6px; }
.tour-body  { font-size: .9375rem; line-height: 1.65; color: var(--text-2); margin: 0; }

.tour-dots { display: flex; gap: 6px; justify-content: center; margin-top: var(--s5); }
.tour-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border-2); transition: all .18s var(--ease);
}
.tour-dots span.on { background: var(--accent); width: 18px; border-radius: 3px; }

.tour-foot { flex-direction: column; align-items: stretch; gap: var(--s3); }
.tour-foot .row { justify-content: flex-end; }
.tour-skip { margin: 0; font-size: .78125rem; color: var(--text-3); }

/* ─── TITRATION ──────────────────────────────────────────────
   GLP-1s climb a ladder over months. The schedule editor has to
   make "which step am I on right now" obvious at a glance. */
.titr-row {
  display: grid; grid-template-columns: 1fr 1fr auto auto;
  gap: 8px; align-items: center; margin-bottom: 8px;
  padding: 8px; border-radius: var(--r-md);
  border: 1px solid transparent;
}
.titr-row.on { background: var(--accent-soft); border-color: var(--accent-line); }
.titr-row .input { padding: 7px 9px; font-size: .8125rem; }
.titr-tag {
  font-size: .6875rem; font-weight: 500; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.titr-row.on .titr-tag { color: var(--accent); }

/* The dose cell on a titrating row is read-only — it is owned by the
   schedule, and letting it be edited here would silently fight it. */
.titr-dose {
  text-align: left; cursor: pointer;
  border: 1px dashed var(--accent-line) !important;
  color: var(--accent) !important;
}
.titr-dose:hover { background: var(--accent-soft); }

/* ─── DRAW READOUT ───────────────────────────────────────────
   "10u" assumes you already know what a U-100 syringe is. Beta
   feedback was that the number meant nothing on its own, so the
   millilitres sit beside it and a small bar shows how far up the
   barrel that actually is. */
.pf-draw { min-width: 0; }
.pdraw { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.pdraw-num {
  font-size: 1.0625rem; font-weight: 600; color: var(--accent);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.pdraw-unit { font-size: .75rem; color: var(--accent); font-weight: 500; }
/* On its own line — "10 units · 0.10 mL" is too wide for the column and
   was colliding with Schedule. */
.pdraw-ml {
  flex-basis: 100%; margin-top: 1px;
  font-size: .6875rem; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.pdraw.none { font-size: .75rem; color: var(--text-3); line-height: 1.4; }

.pdraw-bar {
  margin-top: 4px; height: 3px; border-radius: 2px;
  background: var(--surface-3); overflow: hidden; max-width: 92px;
}
.pdraw-bar span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.pdraw-warn { margin-top: 4px; font-size: .6875rem; color: var(--warning); font-weight: 500; }

/* Intranasal rows: the syringe barrel is replaced by a spray tally — one
   droplet per pump — and a pump-size select, because 0.05 mL and 0.1 mL
   sprayers are both common and the count doubles between them. */
.spray-row { display: flex; align-items: center; gap: 3px; margin-top: 4px; }
.spray-row .spr { width: 13px; height: 13px; stroke: var(--accent); fill: none; opacity: .85; }
.spray-more { font-size: .6875rem; color: var(--accent); font-weight: 600; }
.pdraw-note { margin-top: 3px; font-size: .6875rem; color: var(--text-3); }
.pdraw-pump { display: flex; align-items: center; gap: 4px; }
.pdraw-pump .k-sel { font-size: .6875rem; }