:root {
  --bg: #f6f7f8;
  --surface: #ffffff;
  --text: #16181d;
  --muted: #5f6673;
  --border: #e2e5ea;
  --accent: #0f766e;
  --accent-hover: #0d645d;
  --accent-soft: #ccfbf1;
  --accent-text: #ffffff;
  --danger: #b42318;
  --danger-soft: #fee4e2;
  --ribbon: #facc15;
  --ribbon-text: #3b2f00;
  --ribbon-soft: #fef3c7;
  --ribbon-strong: #92400e;
  --info: #1d4ed8;
  --info-soft: #dbeafe;
  /* Library dosage-tier bar (Beginner/Intermediate/Advanced) -- see Phase 10's foundation pass.
     Adapted per colorway below, same pattern as --accent/--danger/--ribbon. */
  --tier-beginner: #16a34a;
  --tier-intermediate: #eab308;
  --tier-advanced: #dc2626;
  --radius: 10px;
  --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 8px 24px rgb(16 24 40 / 8%);
  color-scheme: light;
}

:root {
  /* Per-goal accent colors, shared by the Library's tag chips and the
     Protocols page's Goal Cards. One definition for all colorways (see
     Global Constraints) -- these are saturated enough to read on any of
     the app's existing surface colors. */
  --goal-fat-loss: #f97316;
  --goal-muscle-recovery: #22c55e;
  --goal-gh-performance: #8b5cf6;
  --goal-longevity: #6366f1;
  --goal-skin-beauty: #ec4899;
  --goal-wellness: #eab308;
  --goal-glp1-weight: #06b6d4;
  --goal-sleep-recovery: #3b82f6;
  --goal-supplements: #84cc16;
  --goal-prescriptions: #f43f5e;
  /* All 8 goal colors above are mid-to-high-luminance hues where white text
     fails WCAG AA contrast (4.5:1) at tag-chip size -- confirmed by
     computing each one's white-text ratio (1.92:1 to 4.47:1, all below
     4.5:1). One dark token works for all of them, so no per-goal text
     color is needed. */
  --goal-text: #111827;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --surface: #171a21;
    --text: #e8eaed;
    --muted: #9aa3b2;
    --border: #2a2f3a;
    --accent: #2dd4bf;
    --accent-hover: #5eead4;
    --accent-soft: #134e4a;
    --accent-text: #04201d;
    --danger: #f97066;
    --danger-soft: #3b1512;
    --ribbon: #facc15;
    --ribbon-text: #2a2100;
    --ribbon-soft: #3a2f0a;
    --ribbon-strong: #fcd34d;
    --info: #93c5fd;
    --info-soft: #172554;
    --tier-beginner: #4ade80;
    --tier-intermediate: #fbbf24;
    --tier-advanced: #f87171;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 40%);
    color-scheme: dark;
  }
}

/* Explicit colorways override the system-preference default above regardless of source order,
   since an attribute selector on :root is more specific than a bare :root (with or without a
   media query wrapper). */
:root[data-theme="light"] {
  --bg: #f6f7f8; --surface: #ffffff; --text: #16181d; --muted: #5f6673; --border: #e2e5ea;
  --accent: #0f766e; --accent-hover: #0d645d; --accent-soft: #ccfbf1; --accent-text: #ffffff;
  --danger: #b42318; --danger-soft: #fee4e2;
  --ribbon: #facc15; --ribbon-text: #3b2f00; --ribbon-soft: #fef3c7; --ribbon-strong: #92400e;
  --info: #1d4ed8; --info-soft: #dbeafe;
  --tier-beginner: #16a34a; --tier-intermediate: #eab308; --tier-advanced: #dc2626;
  --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 8px 24px rgb(16 24 40 / 8%);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0f1115; --surface: #171a21; --text: #e8eaed; --muted: #9aa3b2; --border: #2a2f3a;
  --accent: #2dd4bf; --accent-hover: #5eead4; --accent-soft: #134e4a; --accent-text: #04201d;
  --danger: #f97066; --danger-soft: #3b1512;
  --ribbon: #facc15; --ribbon-text: #2a2100; --ribbon-soft: #3a2f0a; --ribbon-strong: #fcd34d;
  --info: #93c5fd; --info-soft: #172554;
  --tier-beginner: #4ade80; --tier-intermediate: #fbbf24; --tier-advanced: #f87171;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 40%);
  color-scheme: dark;
}
:root[data-theme="tequila_sunrise"] {
  --bg: #FFF3B0; --surface: color-mix(in srgb, #FFF3B0 25%, white); --text: #1B3B6F;
  --muted: color-mix(in srgb, #1B3B6F 55%, white); --border: color-mix(in srgb, #FF9F1C 35%, white);
  --accent: #FF6B35; --accent-hover: color-mix(in srgb, #FF6B35 85%, black);
  --accent-soft: color-mix(in srgb, #FFDD00 35%, white); --accent-text: #1B3B6F;
  --danger: #b42318; --danger-soft: #fee4e2;
  --ribbon: #FFDD00; --ribbon-text: #1B3B6F; --ribbon-soft: color-mix(in srgb, #FFF3B0 60%, white);
  --ribbon-strong: color-mix(in srgb, #FF9F1C 80%, black);
  --info: #1B3B6F; --info-soft: color-mix(in srgb, #1B3B6F 15%, white);
  --tier-beginner: #2E7D32; --tier-intermediate: #E8B400; --tier-advanced: #C1272D;
  --shadow: 0 1px 2px rgb(27 59 111 / 10%), 0 8px 24px rgb(27 59 111 / 12%);
  color-scheme: light;
}
:root[data-theme="fireworks"] {
  --bg: #272727; --surface: color-mix(in srgb, #272727 80%, white); --text: color-mix(in srgb, white 90%, #272727);
  --muted: #747474; --border: color-mix(in srgb, #747474 40%, #272727);
  --accent: #14A76C; --accent-hover: color-mix(in srgb, #14A76C 85%, black);
  --accent-soft: color-mix(in srgb, #14A76C 25%, #272727); --accent-text: #ffffff;
  --danger: #FF652F; --danger-soft: color-mix(in srgb, #FF652F 20%, #272727);
  --ribbon: #FFE400; --ribbon-text: #272727; --ribbon-soft: color-mix(in srgb, #FFE400 25%, #272727);
  --ribbon-strong: color-mix(in srgb, #FFE400 70%, black);
  --info: #93c5fd; --info-soft: #172554;
  --tier-beginner: #22C55E; --tier-intermediate: #FFD400; --tier-advanced: #FF3B3B;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 40%);
  color-scheme: dark;
}
:root[data-theme="solarin"] {
  --bg: #2C3531; --surface: color-mix(in srgb, #2C3531 75%, white); --text: #D1E8E2;
  --muted: color-mix(in srgb, #D1E8E2 55%, #2C3531); --border: color-mix(in srgb, #116466 45%, #2C3531);
  --accent: #116466; --accent-hover: color-mix(in srgb, #116466 80%, white);
  --accent-soft: color-mix(in srgb, #116466 30%, #2C3531); --accent-text: #ffffff;
  --danger: #f97066; --danger-soft: #3b1512;
  --ribbon: #FFCB9A; --ribbon-text: #2C3531; --ribbon-soft: color-mix(in srgb, #FFCB9A 25%, #2C3531);
  --ribbon-strong: color-mix(in srgb, #D9B08C 75%, black);
  --info: #93c5fd; --info-soft: #172554;
  --tier-beginner: #4ADE80; --tier-intermediate: #E9C46A; --tier-advanced: #E63946;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 40%);
  color-scheme: dark;
}
:root[data-theme="bricks"] {
  --bg: #1F1515; --surface: color-mix(in srgb, #1F1515 70%, #5B595B); --text: color-mix(in srgb, white 88%, #1F1515);
  --muted: #A9A6A6; --border: color-mix(in srgb, #5B595B 60%, #1F1515);
  --accent: #9A0101; --accent-hover: color-mix(in srgb, #9A0101 80%, black);
  --accent-soft: color-mix(in srgb, #9A0101 25%, #1F1515); --accent-text: #ffffff;
  --danger: #650A0B; --danger-soft: color-mix(in srgb, #650A0B 30%, #1F1515);
  --ribbon: #facc15; --ribbon-text: #2a2100; --ribbon-soft: color-mix(in srgb, #facc15 20%, #1F1515);
  --ribbon-strong: #fcd34d;
  --info: #93c5fd; --info-soft: #172554;
  --tier-beginner: #4CAF50; --tier-intermediate: #facc15; --tier-advanced: #D32F2F;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 40%);
  color-scheme: dark;
}
:root[data-theme="retro"] {
  --bg: color-mix(in srgb, #FACA78 20%, white); --surface: color-mix(in srgb, white 92%, #FACA78); --text: #794A3A;
  --muted: color-mix(in srgb, #794A3A 55%, white); --border: color-mix(in srgb, #68C7C1 40%, white);
  --accent: #68C7C1; --accent-hover: color-mix(in srgb, #68C7C1 80%, black);
  --accent-soft: color-mix(in srgb, #68C7C1 25%, white); --accent-text: #ffffff;
  --danger: #DD5341; --danger-soft: color-mix(in srgb, #DD5341 20%, white);
  --ribbon: #FACA78; --ribbon-text: #794A3A; --ribbon-soft: color-mix(in srgb, #FACA78 35%, white);
  --ribbon-strong: color-mix(in srgb, #F57F5B 70%, black);
  --info: #1d4ed8; --info-soft: #dbeafe;
  --tier-beginner: #6B8E23; --tier-intermediate: #FACA78; --tier-advanced: #C1440E;
  --shadow: 0 1px 2px rgb(121 74 58 / 10%), 0 8px 24px rgb(121 74 58 / 12%);
  color-scheme: light;
}
:root[data-theme="greensleeves"] {
  --bg: color-mix(in srgb, #ABD6AC 45%, white); --surface: color-mix(in srgb, white 85%, #88FBC3); --text: #083E67;
  --muted: color-mix(in srgb, #083E67 45%, white); --border: color-mix(in srgb, #9C7554 35%, white);
  --accent: #15D67B; --accent-hover: color-mix(in srgb, #15D67B 80%, black);
  --accent-soft: #88FBC3; --accent-text: #083E67;
  --danger: #b42318; --danger-soft: #fee4e2;
  --ribbon: #facc15; --ribbon-text: #3b2f00; --ribbon-soft: #fef3c7; --ribbon-strong: #92400e;
  --info: #083E67; --info-soft: color-mix(in srgb, #083E67 12%, white);
  --tier-beginner: #15D67B; --tier-intermediate: #facc15; --tier-advanced: #C0392B;
  --shadow: 0 1px 2px rgb(8 62 103 / 8%), 0 8px 24px rgb(8 62 103 / 10%);
  color-scheme: light;
}
:root[data-theme="high_contrast"] {
  --bg: #ffffff; --surface: #ffffff; --text: #000000; --muted: #000000; --border: #000000;
  --accent: #000000; --accent-hover: #000000; --accent-soft: #ffffff; --accent-text: #ffffff;
  --danger: #000000; --danger-soft: #ffffff;
  --ribbon: #000000; --ribbon-text: #ffffff; --ribbon-soft: #ffffff; --ribbon-strong: #000000;
  --info: #000000; --info-soft: #ffffff;
  /* Intentional exception to this theme's black/white rule -- see Phase 10's foundation-pass
     design note: color-coding is the entire point of the tier bar, so it keeps real color here
     while every other token in this theme stays strictly monochrome. */
  --tier-beginner: #008000; --tier-intermediate: #B8860B; --tier-advanced: #CC0000;
  --shadow: 0 0 0 2px #000000;
  color-scheme: light;
}

* { box-sizing: border-box; }
/* The browser's own [hidden] rule and an author rule like `.field { display: flex }` have equal
   specificity, and the author rule wins the tie -- silently un-hiding anything toggled via `hidden`
   that also happens to carry a `display` from another selector. Force it, once, globally. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0; }
h2 { font-size: 1.2rem; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none; }
.nav { display: flex; gap: 4px; overflow-x: auto; }
.nav a, .nav .soon { padding: 6px 12px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.nav a { color: var(--text); }
.nav a:hover { background: var(--bg); }
.nav a.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.nav .soon { color: var(--muted); opacity: 0.6; cursor: default; }

.page { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-head p { margin: 2px 0 0; }
.footer { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 24px; }
.footer a { color: inherit; }
.footer-notice { font-weight: 600; letter-spacing: 0.03em; margin-bottom: 4px; }

/* ---------- vendor card: price history chart ---------- */
.price-product-pick { max-width: 360px; }
.price-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; padding: 0; margin: 8px 0; font-size: 0.85rem; }
.price-legend .swatch { display: inline-block; width: 16px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; position: relative; overflow: hidden; }
.price-legend .swatch.dashed::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 5px, var(--surface) 5px 8px); }
.price-chart { display: block; width: 100%; max-width: 720px; height: auto; }
.price-chart text { fill: var(--muted); font-size: 11px; }
.price-chart .grid { stroke: var(--border); stroke-width: 1; }
.price-chart circle { stroke: var(--surface); stroke-width: 1.5; }

/* ---------- dashboard: new peptide alert ---------- */
.new-peptide-alert a { overflow-wrap: anywhere; }
.new-peptide-alert form.inline { display: inline; margin-left: 6px; }
.new-peptide-alert .btn { padding: 1px 8px; font-size: 0.78rem; font-weight: 500; border: 1px solid var(--border); }
.dash-area-alerts summary { cursor: pointer; }

/* ---------- legal pages (Terms, Disclaimer, Privacy) ---------- */
.legal { max-width: 760px; margin: 0 auto; line-height: 1.6; }
.legal h2 { margin: 28px 0 8px; font-size: 1.15rem; }
.legal ul { padding-left: 1.4rem; }
.legal .effective-date { color: var(--muted); font-style: italic; }
.legal-see-also { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; color: var(--muted); }
.auth-page.legal-page { max-width: 820px; align-items: stretch; }
.legal-page .banner { align-self: center; }

/* ---------- buttons ---------- */
.btn {
  font: inherit; font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.btn:hover { background: var(--bg); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { border-color: transparent; background: transparent; padding: 6px 10px; }
.btn-danger { color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-icon { font-size: 1.4rem; line-height: 1; padding: 4px 10px; }
.btn-add span { font-size: 1.2rem; line-height: 1; margin-right: 4px; font-weight: 700; }
form.inline { display: inline; }

/* ---------- table ---------- */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; overflow-y: hidden; }
.inv-table { width: 100%; border-collapse: collapse; }
.inv-table th, .inv-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.inv-table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; background: var(--bg); }
.inv-table tbody tr:last-child td { border-bottom: 0; }
.inv-table tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 25%, transparent); }
.inv-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-table .actions { text-align: right; white-space: nowrap; }
.item-name { font-weight: 600; }
.item-name .muted { font-weight: 400; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); font-size: 0.8rem; font-weight: 500; }

.empty { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: 48px 24px; text-align: center; }
.empty p { margin: 4px 0; }

/* ---------- dialog / form ---------- */
.dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.dialog-wide { width: min(760px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgb(0 0 0 / 45%); }
.dialog-head, .dialog-foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
.dialog-head { border-bottom: 1px solid var(--border); }
.dialog-foot { border-top: 1px solid var(--border); justify-content: flex-end; gap: 8px; }
.item-form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-section { border: 0; margin: 0; padding: 0 20px 16px; min-width: 0; }
.form-section:last-of-type { padding-bottom: 20px; }
/* A legend sits inside a fieldset's top border, so draw the divider with a shadow instead. */
.form-section + .form-section { box-shadow: inset 0 1px 0 var(--border); }
.form-section legend { padding: 16px 0 0; margin-bottom: 12px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.lab-bulk-table { width: 100%; border-collapse: collapse; }
.lab-bulk-table th { text-align: left; padding: 4px 4px 6px; font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.lab-bulk-table td { padding: 2px 4px; vertical-align: top; }
.lab-bulk-table td:nth-child(1) { min-width: 150px; }
.lab-bulk-table td:nth-child(2), .lab-bulk-table td:nth-child(3),
.lab-bulk-table td:nth-child(4), .lab-bulk-table td:nth-child(5) { width: 90px; }
.lab-bulk-table input, .lab-bulk-table select {
  width: 100%; font: inherit; color: inherit; padding: 5px 7px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg);
}
.lab-bulk-table input.has-error, .lab-bulk-table select.has-error { border-color: var(--danger); }
.lab-bulk-table input[data-lab-marker-other] { margin-top: 3px; }
.lab-bulk-table small.error { display: block; font-size: 0.7rem; }
.lab-bulk-table tr:hover { background: var(--bg); }
.dates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; }
.warn { color: var(--danger); font-weight: 600; }
.coa-cell a + .small { margin-top: 2px; }
.span-2 { grid-column: span 2; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span, .field > label > span { font-size: 0.85rem; font-weight: 600; }
.field em { color: var(--danger); font-style: normal; }
.field input:not([type="checkbox"]), .field select, .field textarea {
  font: inherit; color: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  width: 100%;
}
.field input[type="file"] { padding: 6px; }
.field textarea { resize: vertical; }
.field.has-error input:not([type="checkbox"]), .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.overview-controls-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.overview-controls-row .field { margin-bottom: 0; }
.range-field { align-items: flex-end; }
.range-controls { display: inline-flex; align-items: center; gap: 8px; }
.measurement-entry-top-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 10px 16px; margin: 12px 0; }
.measurement-entry-top-grid .field { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.measurement-entry-top-grid .field > span { flex: 0 0 auto; min-width: 110px; }
.measurement-entry-top-grid .field input { max-width: 90px; flex: 0 0 auto; }
.measurement-entry-top-grid .field small.error { flex-basis: 100%; }
.dialog .settings-form { padding-left: 20px; padding-right: 20px; }
.dialog-submit-row { display: flex; justify-content: center; padding: 16px 20px 20px; }
.mini-silhouette-wrap { position: relative; max-width: 320px; margin: 16px auto; }
.mini-silhouette-wrap svg { width: 100%; height: auto; display: block; color: var(--muted); }
.mini-field {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column;
  align-items: center; z-index: 1;
}
.mini-field input {
  width: 58px; padding: 4px 5px; font-size: 0.75rem; text-align: center; color: inherit;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
}
.mini-field.has-error input { border-color: var(--danger); }
.entry-cta-row { margin-top: 16px; }
.fitness-test-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.chart-point { cursor: pointer; }
.chart-point:hover { r: 4; }
.chart-tooltip {
  position: fixed; z-index: 20; pointer-events: none; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); padding: 5px 9px; font-size: 0.78rem;
}
.error { color: var(--danger); }
.alert { margin: 16px 20px 0; padding: 10px 12px; border-radius: 8px; background: var(--danger-soft); color: var(--danger); font-weight: 500; }
.check { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.checkbox-field { flex-direction: row; align-items: center; gap: 8px; }
.checkbox-field input[type="checkbox"] { width: auto; }
.coa-existing { display: flex; flex-direction: column; gap: 4px; }
.coa-existing[hidden] { display: none; }
.coa-preview { max-width: 100%; max-height: 200px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); align-self: flex-start; }

/* ---------- protocols ---------- */
section + section { margin-top: 36px; }
.section-title { font-size: 1.1rem; margin: 0 0 12px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.section-head .section-title { margin-bottom: 2px; }
.section-head p { margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 8px; font-size: 0.95rem; }
.dashboard-placeholders { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }

/* A plain CSS grid leaves a full row as tall as its tallest panel, so a short panel next to a
   tall one (e.g. Adherence beside Water goal) leaves dead space below it. Multi-column layout
   packs panels top-to-bottom per column instead (like masonry), so shorter panels backfill that
   space with whatever panel comes next -- no JS needed. Column count auto-reduces on narrower
   viewports since 300px is a minimum, not a fixed count, down to one column on mobile. */
.dashboard-grid { columns: 3 300px; column-gap: 16px; }
.dashboard-grid > section {
  break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 16px; display: inline-block;
  width: 100%; vertical-align: top;
}
.dash-panel { border-left: 4px solid var(--panel-accent, var(--border)); }
.panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.panel-head .section-title { margin: 0; }
.panel-icon { color: var(--panel-accent, var(--muted)); flex-shrink: 0; }
.panel-title-link { color: inherit; text-decoration: none; }
.panel-title-link:hover { text-decoration: underline; }
.panel-stat { font-size: 2rem; font-weight: 700; color: var(--panel-accent, var(--text)); line-height: 1.1; margin: 0; }
.panel-stat-sub { margin: 4px 0 0; }

/* An explicit named-area grid, per the owner's exact layout request, rather than the masonry
   packing used elsewhere: pairing Water with Cost snapshot and Journal with Weight in the same
   row means they share that row's height automatically (grid's own default stretch), and Body
   spans all 4 left/right rows so it stretches down to their combined height, no extra sizing
   rules needed for any of that.
     Schedule / Body / Alerts
     Workouts / Body / Adherence
     Water    / Body / Cost
     Journal  / Body / Weight
     .        / Integrations / .
   Falls back to a plain stacked column (DOM order) below 900px, since a 3-column arrangement
   this specific has no sensible narrow-screen equivalent. */
.dashboard-layout {
  display: grid; gap: 16px; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 1.35fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto auto;
  grid-template-areas:
    "schedule body alerts"
    "workouts body adherence"
    "water body cost"
    "journal body weight"
    "shipment shipment shipment"
    ".  integrations .";
}
/* Every direct child stretches to fill both its row's height and its column's width (the grid
   default), which is what keeps each left/right pair (Schedule+Alerts, Workouts+Adherence,
   Water+Cost, Journal+Weight) the same size and their bottom edges level with each other across
   the central Body card -- min-width: 0 stops a wide child (the Cost snapshot table, a long
   Schedule line) from inflating its own column past its sibling's, which is the one thing that
   would otherwise throw the two columns out of sync since they're independent 1fr tracks. */
/* The page-wide `section + section { margin-top: 36px; }` rule doesn't know about grid layout --
   it still matches these adjacent <section> siblings and was throwing every pair's top/bottom
   edges out of alignment with each other (whichever panel happened to have a preceding <section>
   sibling in DOM order got an extra 36px nobody else in its row got). Zero it out here. */
.dashboard-layout > * { min-width: 0; min-height: 0; margin-top: 0; box-sizing: border-box; }
.dash-area-schedule { grid-area: schedule; }
.dash-area-workouts { grid-area: workouts; }
.dash-area-water { grid-area: water; }
.dash-area-journal { grid-area: journal; }
.dash-area-body { grid-area: body; }
.dash-area-alerts { grid-area: alerts; }
.dash-area-adherence { grid-area: adherence; }
.dash-area-cost { grid-area: cost; }
.dash-area-weight { grid-area: weight; }
.dash-area-shipment { grid-area: shipment; }
.dash-area-integrations { grid-area: integrations; opacity: 0.85; }

.dash-panel-tall { display: flex; flex-direction: column; }
.dash-silhouette-center { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
/* Fluid, not fixed -- grows with the (now taller) Body card's own available width instead of
   sitting at a fixed size with dead space around it, capped so it never overruns the card. */
.dash-silhouette { width: 100%; max-width: 640px; margin: 0 auto; }
.dash-chart-slot .card { height: 100%; margin: 0; box-sizing: border-box; }

/* The Journal quick-capture form fills the rest of its (now row-matched, often taller) card
   instead of leaving dead space below one short input -- the textarea grows to take up whatever
   height Water/Cost's own row leaves it, the Add button stays anchored under it. */
.dash-journal-form { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.dash-journal-field { flex: 1; display: flex; flex-direction: column; }
.dash-journal-field textarea { flex: 1; width: 100%; resize: none; font: inherit; min-height: 80px; }

@media (max-width: 900px) {
  .dashboard-layout { display: flex; flex-direction: column; }
  .dashboard-layout > * { height: auto; }
  .dash-journal-field textarea { min-height: 120px; }
  .dash-silhouette { max-width: 280px; }
}

/* The Water goal panel "fills like a glass" toward its daily ounces goal -- an absolutely
   positioned fill sits behind the panel's own content (z-index 0 vs 1), growing from the bottom
   as --water-pct increases, so the number/button stay legible on top of it at any fill level. */
.water-panel { position: relative; overflow: hidden; }
.water-fill {
  position: absolute; inset: auto 0 0 0; height: var(--water-pct, 0%);
  background: color-mix(in srgb, var(--panel-accent, var(--info)) 22%, transparent);
  transition: height 0.4s ease; z-index: 0;
}
.water-panel-content { position: relative; z-index: 1; }
.water-quick-picks { display: flex; gap: 8px; margin-bottom: 12px; }

.workout-week-row { display: flex; justify-content: space-between; gap: 4px; }
.workout-week-summary { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.workout-week-summary p { margin: 0; }
.workout-week-meter { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.workout-week-meter i { display: block; height: 100%; background: var(--tier-beginner); border-radius: 4px; }
.workout-day { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.workout-day-label { font-size: 0.7rem; color: var(--muted); }
.workout-day-dot { width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; }
.workout-day-rest { border: 2px dashed var(--border); opacity: 0.5; }
.workout-day-upcoming { border: 2px solid var(--border); }
.workout-day-done { background: var(--tier-beginner); }
.workout-day-missed { background: var(--danger); }
.workout-day-today .workout-day-dot { outline: 2px solid var(--panel-accent); outline-offset: 2px; }
.workout-day-today .workout-day-label { color: var(--text); font-weight: 600; }
.measurement-chart { display: block; width: 100%; height: auto; color: var(--accent); }
.measurement-chart .grid { stroke: var(--border); stroke-width: 1; }
.measurement-chart .axis-label { fill: var(--muted); font-size: 15px; }
.vial-card-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.vial-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.vial-card-body { display: flex; align-items: center; gap: 14px; }
.vial-card-pic { width: 52px; height: auto; flex: none; }
.vial-card-text { display: flex; flex-direction: column; gap: 3px; font-size: 0.9rem; line-height: 1.35; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.vial-card-text strong { font-size: 1rem; }
.vial-note { font-weight: 600; color: var(--accent); }
.vial-card-expired { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.vial-card-yellow { border-color: #d4a017; background: color-mix(in srgb, #d4a017 12%, var(--surface)); }
.protocol-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 18px 10px 18px; box-shadow: var(--shadow);
}
/* Name and goal tags sit right-aligned so the corner ribbon never covers them. */
.protocol-card-head { padding-left: 64px; text-align: right; }
.protocol-card-head .tags { justify-content: flex-end; }
.protocol-card-head h3 { margin: 0 0 6px; font-size: 1.1rem; }
/* Corner band across the top-left of a protocol card, color keyed to its status: yellow "ACTIVE"
   (the existing per-colorway --ribbon variable), a fixed blue "SCHEDULED", a fixed black/white
   "PAUSED" -- the latter two are fixed colors rather than colorway variables since they're a small,
   fixed-meaning pair (unlike Active, which every colorway already themes on its own). */
.ribbon { position: absolute; top: 0; left: 0; width: 96px; height: 96px; overflow: hidden; pointer-events: none; }
.ribbon span {
  position: absolute; top: 18px; left: -30px; width: 130px; transform: rotate(-45deg);
  background: var(--ribbon); color: var(--ribbon-text); text-align: center;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 0;
  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
}
.ribbon-scheduled span { background: #2563eb; color: #ffffff; font-size: 0.58rem; letter-spacing: 0.04em; }
.ribbon-paused span { background: #000000; color: #ffffff; }
.dose-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dose-list .step { color: var(--accent); font-weight: 600; margin-top: 1px; }
.protocol-dates { margin: 0; }
.protocol-card-actions { display: flex; flex-wrap: wrap; gap: 2px; border-top: 1px solid var(--border); padding-top: 6px; margin-top: auto; }
.totals-btn { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.totals-btn:hover { color: var(--accent); background: var(--accent-soft); }
/* Bottom-right corner, a different corner from the top-left status ribbon so they never collide.
   Only the card version is positioned this way -- the Saved-table version sits inline in its
   actions cell alongside Edit/Repeat/Delete, same as every other action button there. */
.protocol-card .totals-btn { position: absolute; bottom: 10px; right: 10px; }
#course-totals-body table { margin-top: 12px; }

/* 8 goals: two rows of four on wide screens, two columns on tablets, one on phones. */
.goal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 960px) { .goal-grid { grid-template-columns: repeat(2, 1fr); } }
.goal-card {
  position: relative; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1.5px solid var(--border); border-left: 5px solid var(--goal-color, var(--border)); border-radius: var(--radius); padding: 14px 16px;
}
.goal-card:hover { border-color: var(--goal-color, var(--accent)); }
.goal-card[aria-pressed="true"] { border-color: var(--goal-color, var(--accent)); background: color-mix(in srgb, var(--goal-color, var(--accent-soft)) 25%, var(--surface)); }
.goal-card[aria-pressed="true"] .goal-check { background: var(--goal-color, var(--accent)); }
.goal-check {
  position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 700;
  background: var(--accent); color: var(--accent-text); opacity: 0; transition: opacity 0.1s;
}
.goal-card[aria-pressed="true"] .goal-check { opacity: 1; }
a.btn { display: inline-block; text-decoration: none; }
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: 0.85rem; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.status-scheduled { background: var(--info-soft); color: var(--info); }
.status-paused { background: var(--ribbon-soft); color: var(--ribbon-strong); }
.status-ended { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.status-active { background: var(--ribbon); color: var(--ribbon-text); }

/* ---------- protocol builder ---------- */
.builder-head { align-items: flex-start; flex-wrap: wrap; }
.builder-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.builder-head p { margin: 0 0 4px; }
.head-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.builder-alert { margin: 0 0 16px; }
.builder-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.builder-step + .builder-step { margin-top: 16px; }
.builder-step > p { margin: -6px 0 12px; }
.step-num {
  display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text); font-size: 0.8rem; vertical-align: 1px;
}
.goal-chips .chip { padding: 6px 14px; }
.suggest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 14px; }
.suggest-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
}
.suggest-item:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }
.suggest-item input { margin-top: 3px; accent-color: var(--accent); }
.suggest-item span { display: flex; flex-direction: column; }
.add-peptide { display: flex; gap: 8px; }
.add-peptide input { flex: 1; font: inherit; color: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }

.item-list { display: flex; flex-direction: column; gap: 12px; }
.item-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--bg); }
.item-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.item-card-head h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.new-tag { background: var(--info-soft); color: var(--info); }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 14px; }
.item-grid .span-2 { grid-column: 1 / -1; }
.item-card .field input:not([type="checkbox"]), .item-card .field select { background: var(--surface); }
.inline-inputs { display: flex; gap: 6px; align-items: center; }
.inline-inputs input { min-width: 0; }
.inline-inputs select { width: auto; flex: none; }
.weekday-picks { display: flex; flex-wrap: wrap; gap: 4px; }
.day-pick { display: flex; }
.day-pick input { position: absolute; opacity: 0; pointer-events: none; }
.day-pick span { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; cursor: pointer; background: var(--surface); }
.day-pick input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.day-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.freq-extra[hidden] { display: none; }

/* Titration steps stay in the form (and are submitted) but only show when Titration is ticked. */
.steps { display: none; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.titration-on .steps { display: block; }
.step-row { display: grid; grid-template-columns: 56px minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: start; margin: 8px 0; }
/* Line the label and remove button up with the inputs, which sit under a small heading. */
.step-row > .small { padding-top: 34px; }
.step-row > .btn-icon { margin-top: 26px; }
/* Cycle on/off is its own always-visible control (unlike .steps above) -- cycling is a scheduling
   concept independent of whether titration is on, so it gets no .titration-on gating. */
.cycle-offs { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.cycle-off-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: start; margin: 8px 0; }
.cycle-off-row > .small { padding-top: 34px; }
.cycle-off-row > .btn-icon { margin-top: 26px; }

.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.end-row { display: flex; align-items: center; gap: 8px; }
.end-row input[type="number"] { max-width: 96px; }
.titration-toggle { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.titration-toggle input { accent-color: var(--accent); width: 18px; height: 18px; }
.builder-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- typeahead (add a peptide) ---------- */
.typeahead { position: relative; flex: 1; }
.typeahead input { width: 100%; font: inherit; color: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.typeahead-list {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow);
  max-height: 320px; overflow-y: auto;
}
.typeahead-item { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.typeahead-item:hover, .typeahead-item[aria-selected="true"] { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.typeahead-item:last-child:not(:has(strong)) { color: var(--accent); font-weight: 600; }
.view-card { font-weight: 500; margin-left: 4px; }

/* ---------- library ---------- */
.lib-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.lib-toolbar input { font: inherit; color: inherit; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); max-width: 420px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.lib-tile {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.lib-tile:hover { border-color: var(--accent); }
.lib-tile[hidden] { display: none; }
.lib-num { font-size: 0.75rem; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; }
h1 .lib-num { font-size: 0.9rem; vertical-align: middle; margin-left: 6px; }
.ev-tag { align-self: flex-start; display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.ev-high { background: var(--accent-soft); color: var(--text); }
.ev-moderate { background: var(--info-soft); color: var(--info); }
.ev-low { background: var(--ribbon-soft); color: var(--ribbon-strong); }
.ev-none { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.lib-head p { margin: 2px 0 6px; }
.lib-tags { margin-bottom: 6px; }
.tag-plain { background: var(--bg); border: 1px solid var(--border); }
.tag-goal { color: var(--goal-text); border: none; }
.lib-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.lib-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; }
.lib-section .section-title { display: flex; align-items: center; gap: 8px; }
.lib-section.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lib-section-caution {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;                 /* clips the stripe to the card's rounded corners (border-image cannot be rounded) */
  padding-left: 28px;
}
.lib-section-caution::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
  background: repeating-linear-gradient(45deg, #ffff00 0, #ffff00 10px, #000000 10px, #000000 20px);
}
.workout-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.workout-import { display: flex; align-items: center; gap: 0.4rem; }
.workout-import label { margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.workout-import input[type="file"] { max-width: 12rem; }
.lib-section-caution .section-title { color: var(--ribbon-strong); }
.tier-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.tier-badge::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.tier-beginner { color: var(--tier-beginner); }
.tier-intermediate { color: var(--tier-intermediate); }
.tier-advanced { color: var(--tier-advanced); }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.app-tile { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); }
.flow { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0; margin: 0 0 12px; }
.flow li { padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface)); font-size: 0.9rem; font-weight: 500; }
.flow li + li::before { content: "→"; margin: 0 8px 0 -2px; color: var(--muted); }
.bullets { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.note { margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--bg); border-left: 3px solid var(--accent); font-size: 0.9rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.kv dt { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.kv dd { margin: 0; }
.kv-tight { gap: 4px 12px; }
.pre { white-space: pre-wrap; }
.lib-table { width: 100%; border-collapse: collapse; }
.lib-table th, .lib-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.lead { font-size: 1.05rem; }
.quick-facts { display: flex; gap: 24px; flex-wrap: wrap; }
.quick-facts dt { font-weight: 600; }
.quick-facts .price-aside { margin-left: auto; align-self: baseline; }
.price-range { color: var(--muted); font-size: 0.9em; white-space: nowrap; }
.kv dd.with-aside { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lib-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 72px; }
.card-thumb { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.card-thumb img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); }
.side-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.side-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.side-head .section-title { margin: 0; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.plain-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dose-range { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.goal-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; }
.lib-edit { max-width: 760px; }

/* ---------- sign-in screens ---------- */
.auth-page { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 32px 16px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.banner { width: 100%; max-width: 520px; height: auto; border-radius: 22px; box-shadow: var(--shadow); }
/* Legal notice and login: banner twice as wide as the (unchanged) box below it. */
.auth-page.big-banner { max-width: 1088px; }
.big-banner .banner { max-width: 1056px; }
.big-banner .auth-card { max-width: 528px; }
.auth-card {
  width: 100%; display: flex; flex-direction: column; gap: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px; box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 1.4rem; }
.auth-card .field input { font: inherit; color: inherit; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); width: 100%; }
.auth-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.auth-actions-end { justify-content: flex-end; }
.cancel-form { margin-top: -8px; }
.btn-wide { width: 100%; padding: 12px; font-size: 1.05rem; }
.btn-primary:disabled { background: var(--border); border-color: var(--border); color: var(--muted); opacity: 1; }
.btn-big { flex: 1; text-align: center; padding: 16px; font-size: 1.1rem; font-weight: 700; border-radius: 12px; }
.welcome-card { text-align: center; }
.welcome-actions { display: flex; gap: 12px; }

/* Legal notice: bold, centred, attention colour. */
.legal-notice {
  text-align: center; font-weight: 700; color: var(--danger);
  border: 2px solid var(--danger); background: var(--danger-soft); border-radius: 12px; padding: 18px 20px;
}
.legal-notice h1 { font-size: 1.35rem; letter-spacing: 0.12em; margin-bottom: 10px; color: var(--danger); }
.legal-notice p { margin: 8px 0; line-height: 1.55; }
.understand { justify-content: center; font-weight: 600; font-size: 1rem; }
.understand input { width: 20px; height: 20px; accent-color: var(--accent); }

.password-wrap { position: relative; display: block; }
.password-wrap input { padding-right: 44px !important; }
.eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--muted); padding: 6px; border-radius: 6px; cursor: pointer; line-height: 0;
}
.eye:hover { color: var(--text); background: var(--border); }
.eye .eye-slash { display: none; }
.eye[aria-pressed="true"] .eye-slash { display: inline; }
.rules { list-style: none; margin: -4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 0.88rem; color: var(--muted); }
.rules li { display: flex; align-items: center; gap: 6px; }
.rules .tick { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border); color: transparent; font-size: 0.7rem; font-weight: 800; }
.rules li.met { color: var(--text); }
.rules li.met .tick { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.code-input { font-size: 1.4rem !important; letter-spacing: 0.3em; text-align: center; max-width: 220px; }

/* 2FA setup */
.twofa-steps { display: flex; flex-direction: column; gap: 16px; padding-left: 20px; margin: 0 0 14px; }
.qr { margin: 10px 0; }
.qr svg { width: 200px; height: 200px; border-radius: 10px; border: 1px solid var(--border); background: #fff; }
.secret { display: inline-block; margin-top: 4px; padding: 6px 10px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); font-size: 1rem; letter-spacing: 0.08em; }
.twofa-confirm { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }

/* ---------- account menu (top right) ---------- */
.user-menu { margin-left: auto; position: relative; }
.user-menu summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 8px; border-radius: 999px; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover { background: var(--bg); }
.avatar {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text); font-weight: 800; font-size: 1rem;
}
.user-name { font-weight: 600; }
.user-menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 240px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.user-menu-panel a, .user-menu-panel button {
  font: inherit; text-align: left; padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none;
  background: none; border: 0; cursor: pointer; width: 100%;
}
.user-menu-panel a:hover, .user-menu-panel button:hover { background: var(--bg); }

/* ---------- calendar ---------- */
/* Protocol colours: --c is the fill, --ct the text on it. */
.c0 { --c: #0f766e; --ct: #fff; } .c1 { --c: #1d4ed8; --ct: #fff; } .c2 { --c: #7c3aed; --ct: #fff; }
.c3 { --c: #be123c; --ct: #fff; } .c4 { --c: #b45309; --ct: #fff; } .c5 { --c: #15803d; --ct: #fff; }
.c6 { --c: #c2410c; --ct: #fff; } .c7 { --c: #475569; --ct: #fff; }
@media (prefers-color-scheme: dark) {
  .c0 { --c: #2dd4bf; --ct: #04201d; } .c1 { --c: #60a5fa; --ct: #0b1530; } .c2 { --c: #a78bfa; --ct: #1b0f3a; }
  .c3 { --c: #fb7185; --ct: #3a0a14; } .c4 { --c: #fbbf24; --ct: #2f1d00; } .c5 { --c: #4ade80; --ct: #052e14; }
  .c6 { --c: #fb923c; --ct: #3a1402; } .c7 { --c: #cbd5e1; --ct: #111827; }
}
/* Adherence status colors -- reuse the same --c/--ct custom props the protocol palette above
   sets, so .cal-mark/.cal-card/.cal-dialog need no CSS changes at all: Month/Week/Day just apply
   one of these classes instead of a protocol-color class, since status is now the dominant color
   cue on every view (not just a small dot as before). */
.cal-status-on_time { --c: var(--tier-beginner); --ct: #fff; }
.cal-status-late { --c: var(--ribbon); --ct: var(--ribbon-text); }
.cal-status-missed { --c: var(--danger); --ct: #fff; }
.cal-status-upcoming { --c: var(--muted); --ct: #fff; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 16px; font-size: 0.8rem; color: var(--muted); }
.cal-legend-item { display: flex; align-items: center; gap: 6px; }
.cal-legend-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--c); }
.cal-head { align-items: center; flex-wrap: wrap; }
.cal-controls { display: flex; gap: 6px; align-items: center; }
.cal-controls select { font: inherit; color: inherit; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.cal-controls a.btn { min-width: 38px; text-align: center; }

/* Month */
.cal-month { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cal-month-head, .cal-month-row { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); }
.cal-month-head span { padding: 8px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--bg); }
.cal-month-row { grid-template-rows: 28px repeat(4, 22px) 22px; border-top: 1px solid var(--border); }
.cal-wk {
  grid-column: 1; grid-row: 1 / -1; display: flex; justify-content: center; padding-top: 6px;
  font-size: 0.78rem; font-weight: 700; color: var(--muted); text-decoration: none; background: var(--bg);
}
.cal-wk:hover { color: var(--accent); background: var(--accent-soft); }
.cal-day-bg { grid-row: 1 / -1; border-left: 1px solid var(--border); }
.cal-day-bg.cal-out { background: color-mix(in srgb, var(--bg) 70%, transparent); }
.cal-day-bg.cal-today { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.cal-daynum { grid-row: 1; justify-self: start; align-self: center; margin-left: 6px; z-index: 1; min-width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%; font-size: 0.85rem; font-weight: 600; color: var(--text); text-decoration: none; }
.cal-daynum:hover { background: var(--accent-soft); }
.cal-day-bg.cal-today + .cal-daynum { background: var(--accent); color: var(--accent-text); }
.cal-day-bg.cal-out + .cal-daynum { color: var(--muted); font-weight: 400; }
.cal-mark {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 3px; justify-self: stretch;
  margin: 1px 3px; padding: 1px 5px; border: 0; border-radius: 5px; background: var(--c); color: var(--ct);
  font: inherit; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; overflow: hidden;
}
.cal-mark:hover, .cal-mark:focus-visible { filter: brightness(1.08); outline: none; }
.cal-day-foot {
  grid-row: 6; z-index: 1; display: flex; align-items: center; justify-content: flex-start;
  padding: 0 3px; font-size: 0.72rem; line-height: 1;
}
.cal-icon { line-height: 1; }
.cal-icon-end { margin-left: auto; }
.cal-more { font-size: 0.72rem; font-weight: 600; margin-left: 4px; }

/* Week */
.cal-week { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; }
.cal-week-head, .cal-week-row { display: grid; grid-template-columns: 84px repeat(7, minmax(110px, 1fr)); min-width: 860px; }
.cal-week-head { background: var(--bg); }
.cal-week-day { padding: 8px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.cal-week-day:hover { background: var(--accent-soft); }
.cal-week-day.cal-today { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.cal-week-row { border-top: 1px solid var(--border); }
.cal-slot-label { padding: 10px 8px; font-size: 0.8rem; font-weight: 700; color: var(--muted); background: var(--bg); }
.cal-week-cell { min-height: 64px; padding: 6px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.cal-week-cell.cal-today { background: color-mix(in srgb, var(--accent-soft) 30%, transparent); }
.cal-week-cell .cal-mark { width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Day */
.cal-day-extras { display: flex; gap: 8px; margin-bottom: 16px; }
.cal-day-section { margin-bottom: 20px; }
.cal-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cal-card {
  font: inherit; color: var(--text); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-left: 6px solid var(--c); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow);
}
.cal-card:hover { border-color: var(--c); }
.cal-card-static { cursor: default; }
.cal-card-title { font-size: 1rem; }

/* Details dialog */
.cal-dialog { border-top: 6px solid var(--c); }
.cal-dialog .dialog-head h2 { margin: 0; }
.cal-due-list { list-style: none; margin: 0; padding: 12px 20px; display: flex; flex-direction: column; gap: 10px; }
.cal-due-list li { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); }
.cal-due-dose { font-weight: 600; }

/* ---------- dose status tags (Protocol page dose-history table) ---------- */
.status-on_time { background: var(--ribbon); color: var(--ribbon-text); }
.status-late { background: var(--ribbon-soft); color: var(--ribbon-strong); }
.status-skipped { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.status-missed { background: var(--danger-soft); color: var(--danger); }

/* ---------- injection-site picker (Today view) ---------- */
.body-silhouette { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.body-silhouette circle[data-site] { cursor: pointer; }

/* ---------- measurement silhouette (Weight & Measurements page) ---------- */
/* Deliberately full-width, not capped/centered: the "Body Silhouette" heading and the "Log a
   measurement" button sit outside this wrap but use the same percentage-based left offset as the
   left bicep dot's own x position within the SVG's viewBox, so they line up exactly -- that only
   holds if this wrap's own rendered width matches its column's width precisely, with no cap or
   auto-centering of its own to throw the two calculations out of sync. */
.silhouette-wrap { position: relative; }
.overview-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: start; margin-bottom: 20px; }
.overview-chart-section .field { max-width: 260px; margin-bottom: 10px; }
.overview-chart-panel .card { margin: 0; }
.silhouette-leader { stroke: var(--border); stroke-width: 1; }
.silhouette-point { fill: currentColor; cursor: pointer; }
.silhouette-point:hover, .silhouette-point:focus-visible { fill: var(--accent); outline: none; }
.silhouette-label-name { font-size: 11px; fill: var(--muted); }
.silhouette-label-value { font-size: 13px; font-weight: 600; fill: var(--text); }
.silhouette-label-value.trend-good { fill: var(--tier-beginner); }
.silhouette-label-value.trend-bad { fill: var(--danger); }
.silhouette-label-asof { font-size: 10px; fill: var(--muted); }
.silhouette-tooltip {
  position: absolute; z-index: 5; pointer-events: none; max-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); padding: 8px 10px; font-size: 0.82rem; line-height: 1.4;
}
.silhouette-tooltip strong { display: block; font-size: 0.88rem; margin-bottom: 2px; }
.silhouette-tooltip .muted { font-size: 0.78rem; }

/* Shared base for both the SVG's per-site <circle>s (painted by app/static/js/dosing.js) and the
   dialog's own <i class="site-dot ..."> legend swatches -- a <circle> already has its own size via
   its r attribute, so width/height here only matter for the legend's <i> elements. */
.site-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }

.site-dot-last { fill: #c62828; background: #c62828; }
.site-dot-available { fill: #2e7d32; background: #2e7d32; }
.site-dot-recommended { fill: #2e7d32; background: #2e7d32; animation: site-dot-pulse 1.4s ease-in-out infinite; }
@keyframes site-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.site-dot-ineligible { fill: #90a4ae; background: #90a4ae; opacity: 0.35; pointer-events: none; }

.site-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 12px 20px; font-size: 0.85rem; color: var(--muted); }
.site-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- reconstitution calculator ---------- */
.calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.calc-form .form-section { padding-bottom: 16px; }
.calc-result { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.calc-units { text-align: center; font-size: 3rem; font-weight: 800; color: var(--accent); line-height: 1; }
.calc-units-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
.calc-syringe-visual { --syringe-left: 52px; --syringe-right: 70px; display: flex; flex-direction: column; gap: 4px; }
.calc-syringe { display: flex; align-items: center; height: 46px; }
/* needle and hub on the left, then the barrel (the fill is the liquid drawn up), then the flange and plunger rod on the right */
.calc-needle { width: 34px; height: 2px; background: var(--muted); border-radius: 2px 0 0 2px; flex: none; }
.calc-hub { width: 18px; height: 14px; background: var(--border); border: 2px solid var(--muted); border-radius: 3px 0 0 3px; border-right: 0; box-sizing: border-box; flex: none; }
.calc-syringe-barrel { position: relative; flex: 1; height: 34px; border: 2px solid var(--muted); border-radius: 4px; overflow: hidden;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 70%, white) 0%, var(--bg) 45%, color-mix(in srgb, var(--bg) 85%, var(--muted)) 100%); }
.calc-flange { width: 6px; height: 46px; background: var(--muted); border-radius: 3px; flex: none; }
.calc-plunger { width: 64px; height: 8px; background: var(--muted); border-radius: 0 3px 3px 0; position: relative; flex: none; }
.calc-plunger::after { content: ""; position: absolute; right: -2px; top: -7px; width: 6px; height: 22px; background: var(--muted); border-radius: 3px; }
.calc-syringe-fill { position: absolute; inset: 0; width: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 45%, transparent)); border-right: 2px solid var(--accent); transition: width 0.15s ease; }
.calc-syringe-fill.over { background: linear-gradient(to bottom, color-mix(in srgb, var(--danger) 22%, transparent), color-mix(in srgb, var(--danger) 45%, transparent)); border-color: var(--danger); }
.calc-syringe-ticks { position: absolute; inset: 0; }
.calc-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.calc-syringe-scale { position: relative; height: 16px; font-size: 0.7rem; color: var(--muted); margin-left: var(--syringe-left); margin-right: var(--syringe-right); }
.calc-syringe-scale span { position: absolute; transform: translateX(-50%); }
.calc-kv { font-size: 0.95rem; }
.calc-kv dt { font-size: 0.8rem; }
.calc-target, .calc-reference { border-top: 1px solid var(--border); padding-top: 14px; }
.calc-target summary, .calc-reference summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.calc-target .grid, .calc-reference table { margin-top: 10px; }
.ref-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ref-table th, .ref-table td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--border); }

/* ---------- inventory sort headers ---------- */
.sort-btn {
  font: inherit; font-weight: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.sort-btn:hover { color: var(--accent); }
.sort-btn::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: 0.35; }
.sort-btn.sort-asc::after { border-bottom: 5px solid currentColor; opacity: 1; }
.sort-btn.sort-desc::after { border-top: 5px solid currentColor; opacity: 1; }

/* ---------- settings ---------- */
.settings-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-nav { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 2px; }
.settings-nav a { padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 0.9rem; }
.settings-nav a:hover { background: var(--bg); }
.settings-sections { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.settings-form { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.settings-form:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.settings-form .grid { width: 100%; }
.integration-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.integration-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); opacity: 0.75; }

.inline-form { display: flex; align-items: center; gap: 8px; }
/* .table-wrap normally clips to keep its rounded corners; let it open up while a row's menu is
   expanded, since the popover panel below intentionally extends past the table's own bounds. */
.table-wrap:has(.admin-row-menu[open]) { overflow: visible; }
.admin-row-menu { position: relative; }
.admin-row-menu summary { list-style: none; cursor: pointer; }
.admin-row-menu summary::-webkit-details-marker { display: none; }
.admin-row-panel {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 4; display: flex; flex-direction: column;
  gap: 10px; padding: 12px; min-width: 260px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.admin-row-panel .inline-form { flex-wrap: wrap; }
.admin-row-panel input { min-width: 0; flex: 1; }

/* ---------- phones: table becomes cards ---------- */
@media (max-width: 720px) {
  .topbar { padding: 10px 16px; gap: 12px; }
  .page { padding: 16px; }
  .btn-add { position: fixed; right: 16px; bottom: 16px; z-index: 5; border-radius: 999px; padding: 14px 18px; box-shadow: var(--shadow); }
  .btn-add.btn-add-secondary { bottom: 76px; }
  .table-wrap { background: none; border: 0; }
  .inv-table thead { display: none; }
  .inv-table, .inv-table tbody, .inv-table tr, .inv-table td { display: block; width: 100%; }
  .inv-table tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; padding: 8px 0; }
  .inv-table td { border: 0; padding: 4px 14px; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .inv-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.85rem; text-align: left; }
  .inv-table td.item-name { display: block; text-align: left; font-size: 1.05rem; padding-bottom: 8px; }
  .inv-table td.item-name::before, .inv-table td.actions::before { content: none; }
  .inv-table td.actions { justify-content: flex-end; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; }
  .item-form .grid, .dates { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .footer { padding-bottom: 80px; }
  .card-grid, .goal-grid { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .calc-layout { grid-template-columns: 1fr; }
  .calc-result { position: static; }
  .cal-month-head, .cal-month-row { grid-template-columns: 26px repeat(7, minmax(0, 1fr)); }
  .cal-month-row { grid-template-rows: 26px repeat(4, 16px) 18px; }
  .cal-month-head span { padding: 6px 2px; text-align: center; font-size: 0.65rem; }
  .cal-mark { font-size: 0.6rem; padding: 1px 3px; }
  .overview-row { grid-template-columns: 1fr; }
  .fitness-test-grid { grid-template-columns: 1fr; }
  .cal-daynum { margin-left: 2px; font-size: 0.78rem; }
  .cal-more { font-size: 0.6rem; margin-left: 2px; }
  .cal-controls { width: 100%; }
  .user-name { display: none; }
  .rules { grid-template-columns: 1fr; }
  .welcome-actions { flex-direction: column; }
  .settings-grid, .suggest-grid { grid-template-columns: 1fr; }
  .lib-layout, .lib-section.two-col { grid-template-columns: 1fr; }
  .lib-side { position: static; }
  .dose-range, .goal-checks { grid-template-columns: 1fr 1fr; }
  .builder-step { padding: 14px; }
  .step-row { grid-template-columns: 1fr 1fr auto; }
  .step-row > .small { grid-column: 1 / -1; padding: 0; }
  .step-row > .btn-icon { margin-top: 26px; }
}

/* Vendor crypto wallets */
.wallet-list { list-style: none; margin: 0 0 var(--space-3, 1rem); padding: 0; display: grid; gap: .75rem; }
.wallet { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.wallet-main { min-width: 0; flex: 1; }
.wallet-line { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .25rem; }
.wallet-address { overflow-wrap: anywhere; word-break: break-all; }
.wallet-qr img { display: block; border-radius: 6px; border: 1px solid var(--border, #ccc); background: #fff; }

/* Workout log form */
.body-weight { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; text-align: left; margin-bottom: var(--space-3, 1rem); }
.log-scroll { overflow-x: auto; max-width: 100%; }
.burn-total { padding: .6rem .9rem; border-left: 4px solid var(--accent, #0d9488); background: var(--surface-2, rgba(13, 148, 136, .08)); border-radius: 6px; }
.log-table td { vertical-align: top; }
.log-adjust { margin-top: .35rem; font-size: .85rem; }
.log-adjust label, .log-inline { display: inline-flex; gap: .35rem; align-items: center; margin-right: .75rem; }
.log-estimate { white-space: nowrap; }

.match-cell { min-width: 14rem; }
.btn-small { padding: .15rem .5rem; font-size: .8rem; }

/* Workouts: tabs, energy, progress */
.wk-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin: 0 0 1rem; overflow-x: auto; }
.wk-tab { padding: .5rem .9rem; border-bottom: 3px solid transparent; color: var(--muted); text-decoration: none; white-space: nowrap; }
.wk-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.energy-hero { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; }
.energy-hero .big { font-size: 2.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.energy-stats { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.stat-block .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.macro-result { margin-top: .75rem; }
.split-bar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; margin: .5rem 0; background: var(--border); }
.split-bar span { display: block; height: 100%; }
.level-bars { display: grid; gap: .45rem; }
.level-bar { display: grid; grid-template-columns: 5.5rem 1fr 4rem; gap: .5rem; align-items: center; }
.level-bar .track { display: block; height: 14px; border-radius: 7px; background: var(--border); overflow: hidden; }
.level-bar .fill { display: block; height: 100%; background: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.level-bar.current .fill { background: var(--accent); }
.level-bar strong { text-align: right; font-variant-numeric: tabular-nums; }
.macro-grid { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 6px; align-items: center; }
.macro-cell { display: block; padding: .5rem; border: 1px solid var(--border); border-radius: 8px; text-align: center; text-decoration: none; color: inherit; }
.macro-cell.selected { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.math-lines { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); padding: .6rem .8rem; border-radius: 6px; }
tr.current td { font-weight: 600; background: color-mix(in srgb, var(--accent-soft) 40%, transparent); }
.wk-chart .wk-target { fill: none; stroke: #dc2626; stroke-width: 2; stroke-dasharray: 6 4; }
.wk-chart .wk-bar:hover rect { opacity: .85; }
.chips .tag.active { background: var(--accent); color: #fff; }

.progress-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 1rem; }
.burn-split { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.burn-ring { width: 200px; height: 200px; flex: none; }
.burn-ring .ring-total { fill: var(--text); font-size: 13px; font-weight: 600; }
.ring-legend { flex-direction: column; }
.hbars { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .4rem; }
.hbars li { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr 6rem; gap: .5rem; align-items: center; }
.hbar-track { display: block; height: 12px; border-radius: 6px; background: var(--border); overflow: hidden; }
.hbar-fill { display: block; height: 100%; background: var(--accent); }
.hbars strong { text-align: right; font-variant-numeric: tabular-nums; }
fieldset[data-day] { min-width: 0; }

/* ---------- library: best price per vial popup ---------- */
.price-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.price-link:hover { text-decoration-style: solid; }
.price-compare { width: min(520px, calc(100vw - 32px)); }
.price-compare-note { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--bg); border-left: 3px solid var(--accent); font-size: 0.9rem; }
.price-compare-list { list-style: none; margin: 12px 0; padding: 0; }
.price-compare-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.price-compare-row:first-child { border-top: 0; }
.price-compare-rank { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; font-size: 0.8rem; font-weight: 600; }
.price-compare-who { flex: 1; min-width: 0; }
.price-compare-who .tag { margin-left: 6px; }
.price-compare-price { flex: none; text-align: right; white-space: nowrap; }
.price-compare-price strong { font-size: 1.2rem; }
.price-compare-unit { color: var(--muted); font-size: 0.85rem; }

/* ---------- body photos ---------- */
.photos-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.photo-grid { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.photo-tile { display: flex; flex-direction: column; gap: 6px; }
.photo-open { position: relative; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg); cursor: pointer; aspect-ratio: 3 / 4; }
.photo-open img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-hint { position: absolute; inset: auto 0 0 0; padding: 6px 8px; font-size: 0.8rem; text-align: center; background: rgb(0 0 0 / 55%); color: #fff; }
.photo-unlocked { display: flex; align-items: center; gap: 10px; }

/* ---------- food ---------- */
.food-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.food-date { display: flex; align-items: center; gap: 8px; }
.food-settings { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.food-custom { display: flex; gap: 8px; }
.food-calories .kv-list { list-style: none; padding: 0; margin: 8px 0 0; }
.food-split { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 16px 0; }
.food-ring { width: 180px; height: 180px; }
.food-legend { list-style: none; padding: 0; margin: 0; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }
.fulfil-row { display: grid; grid-template-columns: 200px 1fr 190px 110px; align-items: center; gap: 12px; margin: 8px 0; }
.fulfil-bar { height: 12px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.fulfil-fill { height: 100%; background: var(--muted); }
.fulfil-row[data-state="good"] .fulfil-fill { background: #059669; }
.fulfil-row[data-state="over"] .fulfil-fill { background: #dc2626; }
.fulfil-num { font-size: 0.85rem; text-align: right; }
.food-meal { border-top: 1px solid var(--border); padding: 10px 0; }
.food-meal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.food-entries { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.food-entries li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.food-inline { display: inline-flex; gap: 4px; align-items: center; }
.food-inline input[type=number] { width: 70px; }
.food-results { list-style: none; padding: 0; margin: 8px 0; max-height: 220px; overflow: auto; display: grid; gap: 4px; }
.food-result { text-align: left; width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); cursor: pointer; }
.food-foodform { display: flex; gap: 6px; flex-wrap: wrap; }
.food-modes { display: flex; gap: 16px; margin-bottom: 12px; }
.food-myfoods { margin-top: 16px; }

/* filter tabs (Vendors sort, Price list inbox status) */
.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 1rem; }
.tab { padding: 0.25rem 0.8rem; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; text-transform: capitalize; }
.tab.active { font-weight: 600; border-color: currentColor; }

/* Price list inbox: jump links and collapsible sections */
.inbox-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; position: sticky; top: 0; z-index: 5; padding: 0.5rem 0; background: var(--bg, inherit); }
.inbox-fold > summary { cursor: pointer; list-style: none; }
.inbox-fold > summary::-webkit-details-marker { display: none; }
.inbox-fold > summary h2::before { content: "\25B8  "; }
.inbox-fold[open] > summary h2::before { content: "\25BE  "; }

/* Orders tab: shipping-tracker-style timeline */
.order-card { margin: 0 0 1rem; padding: 1rem 1.25rem; }
.order-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.order-status { white-space: nowrap; }
.order-timeline { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0.5rem 0 0.75rem; padding: 0; }
.order-timeline .step { position: relative; text-align: center; padding-top: 1.75rem; }
.order-timeline .step::before { content: ""; position: absolute; top: 0.6rem; left: -50%; width: 100%; height: 3px; background: var(--border); }
.order-timeline .step:first-child::before { display: none; }
.order-timeline .step-done::before, .order-timeline .step-current::before { background: var(--accent); }
.order-timeline .dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1.3rem; height: 1.3rem; border-radius: 50%;
  border: 3px solid var(--border); background: var(--surface); color: #fff; font-size: 0.8rem; line-height: 1rem; }
.order-timeline .step-done .dot { background: var(--accent); border-color: var(--accent); }
.order-timeline .step-current .dot { border-color: var(--accent); }
.order-timeline .label { display: block; font-weight: 600; }
.order-timeline .step-todo .label { font-weight: 400; opacity: 0.6; }
.order-late { color: var(--danger, #b91c1c); font-weight: 600; }
.order-warn { color: #b45309; font-weight: 600; }
.order-lines { margin: 0.5rem 0; padding-left: 1.1rem; }
.order-tracking, .order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.5rem 0; }
.order-actions details[open] { flex-basis: 100%; }
@media (max-width: 560px) { .order-timeline .label { font-size: 0.8rem; } .order-head { flex-direction: column; align-items: flex-start; } }
.order-timeline .when { display: block; font-size: 0.75rem; }
@media (max-width: 560px) { .order-timeline .when { font-size: 0.62rem; overflow-wrap: anywhere; } }

/* Calculator: the Why? panel and practice banner */
.calc-why { border-top: 1px solid var(--border); padding-top: 14px; }
.calc-why .section-title { font-size: 1rem; margin: 0 0 8px; }
.calc-steps { margin: 0 0 8px; padding-left: 1.2rem; font-size: 0.9rem; line-height: 1.5; }
.calc-step { margin-bottom: 4px; }
.calc-issue { margin: 6px 0; padding: 8px 10px; border-left: 4px solid var(--danger); background: var(--danger-soft); border-radius: 4px; font-size: 0.9rem; }
.calc-note { margin: 6px 0; padding: 8px 10px; border-left: 4px solid #d4a017; background: color-mix(in srgb, #d4a017 12%, var(--surface)); border-radius: 4px; font-size: 0.9rem; }
.calc-ok { margin: 6px 0; color: var(--accent); font-weight: 600; font-size: 0.9rem; }
.calc-practice { margin-bottom: 12px; }
#calc-levels .chip[aria-pressed="true"] { border-color: var(--accent); font-weight: 600; }

/* Dashboard: compliance bars */
.compliance-windows { margin: 0 0 10px; }
.compliance-windows select, .inv-sort select, .journal-day-picker input[type="date"] { font: inherit; color: inherit; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.compliance-windows select { width: 100%; }
.inv-sort { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.journal-day-picker { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: 8px; }
.compliance-chart { display: grid; grid-template-columns: 2.6rem 1fr; gap: 6px; align-items: stretch; }
.compliance-axis { display: flex; flex-direction: column; justify-content: space-between; height: 160px; font-size: 0.7rem; color: var(--muted); text-align: right; line-height: 1; }
.compliance-plot { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: start; }
.compliance-grid { position: absolute; inset: 0 0 auto 0; height: 160px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.compliance-grid i { display: block; border-top: 1px solid var(--border); }
.compliance-col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.compliance-track { position: relative; width: 100%; height: 160px; display: flex; align-items: flex-end; justify-content: center; }
.compliance-bar { width: 70%; max-width: 64px; min-height: 0; border-radius: 6px 6px 0 0; background: var(--accent); transition: height 0.2s ease; }
.compliance-protocol { background: var(--accent); }
.compliance-h2o { background: var(--info, #2563eb); }
.compliance-diet { background: #ca8a04; }
.compliance-workout { background: #db2777; }
.compliance-value { font-weight: 700; font-size: 1.05rem; margin-top: 4px; }
.compliance-label { font-weight: 600; font-size: 0.85rem; }
.compliance-count { font-size: 0.72rem; }
.compliance-value { min-height: 2.5em; text-align: center; line-height: 1.2; }
.compliance-value .muted { font-size: 0.75rem; font-weight: 400; white-space: nowrap; }

/* Protocols: the Shop this protocol dialog */
.shop-dialog { width: min(760px, 96vw); }
.shop-fees { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 0 20px 12px; }
.shop-fees .field { min-width: 130px; }
.shop-share { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 20px 16px; border-top: 1px solid var(--border); }
#shop-body { padding: 0 20px 20px; max-height: 65vh; overflow-y: auto; }
.shop-reason { font-weight: 600; margin: 4px 0 10px; }
.shop-plan-title { font-size: 1.05rem; margin: 6px 0; }
.shop-alt-title { font-size: 0.95rem; margin: 10px 0 4px; }
.shop-source { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin: 8px 0; }
.shop-source-head { margin-bottom: 6px; }
.shop-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.shop-table th, .shop-table td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.shop-ship { margin: 6px 0 0; }
.shop-total { font-size: 1.15rem; font-weight: 800; margin: 8px 0; }
.shop-unavailable { margin: 12px 0; padding: 8px 10px; border-left: 4px solid #d4a017; background: color-mix(in srgb, #d4a017 12%, var(--surface)); border-radius: 4px; }
.shop-alts summary { cursor: pointer; font-weight: 600; margin: 10px 0 4px; }
.current-list { margin: 8px 0; } .current-list summary { cursor: pointer; font-weight: 600; } .current-list .shop-table { margin-top: 8px; }

/* Accessibility: a way past the navigation, a visible focus ring on everything clickable, and no motion for people who ask for none. */
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 1000; padding: 8px 14px; border-radius: var(--radius); background: var(--accent); color: var(--accent-text, #fff); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 8px; }
main:focus { outline: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
.check-field { display: flex; flex-direction: row; align-items: center; gap: 8px; } .check-field input[type="checkbox"] { width: auto; }

/* Vial labels (Inventory): the sheet or roll the user chose, one .vial-label each. */
.label-sheet { margin: 12px 0; }
.vial-label { box-sizing: border-box; border: 1px dashed var(--border); padding: 4px 6px; font-size: 8.5pt; line-height: 1.2; overflow: hidden; background: #fff; color: #000; margin-bottom: 6px; }
.vial-label .vl-name { font-weight: 700; font-size: 10pt; }
.vial-label .vl-dates { display: flex; justify-content: space-between; gap: 6px; }
.vial-label .vl-ruo { font-size: 7pt; letter-spacing: 0.04em; text-transform: uppercase; }
.label-5160 { display: grid; grid-template-columns: repeat(3, 2.625in); column-gap: 0.125in; }
.label-5160 .vial-label { height: 1in; margin: 0; }
.label-2x1 .vial-label, .label-4x2 .vial-label { page-break-after: always; margin: 0; }
.label-2x1 .vial-label { width: 2in; height: 1in; }
.label-4x2 .vial-label { width: 4in; height: 2in; font-size: 12pt; }
.label-4x2 .vial-label .vl-name { font-size: 16pt; }
@media print {
  .topbar, footer, .no-print, .skip-link { display: none !important; }
  body, .page { background: #fff !important; margin: 0; padding: 0; max-width: none; }
  .vial-label { border: none; }
}

/* Printable protocol view */
.protocol-print { max-width: 820px; }
.print-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.print-table th, .print-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.print-list { margin: 2px 0 6px 18px; padding: 0; }
.print-notes { padding: 8px 10px; border-left: 3px solid var(--accent); }
.print-tools { display: flex; gap: 8px; margin: 0 0 12px; }
@media print { .protocol-print { max-width: none; } .print-table th, .print-table td { border-bottom: 1px solid #999; color: #000; } .print-foot { margin-top: 24px; } }

/* Builder: the titration ramp helper */
.ramp-helper { margin: 6px 0; }
.ramp-helper .inline-inputs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.ramp-field { display: flex; flex-direction: column; gap: 2px; }
.ramp-field input { width: 6.5rem; }
.cal-log-link { display: inline-block; margin-top: 6px; }


/* Contrast fixes: text, secondary text, button text and error text meet WCAG AA (4.5:1) in every colour theme. */
:root[data-theme="bricks"] {
  --danger: #b78c8c;
}
:root[data-theme="fireworks"] {
  --surface: #525252;
  --muted: #c9c9c9;
  --danger: #ffbaa1;
  --accent-text: #000000;
}
:root[data-theme="greensleeves"] {
  --surface: #edfef6;
  --muted: #586672;
}
:root[data-theme="retro"] {
  --surface: #fffbf4;
  --muted: #7b6964;
  --danger: #bc4737;
  --accent-text: #000000;
}
:root[data-theme="solarin"] {
  --surface: #59605c;
  --muted: #d9dedc;
  --danger: #fdd3d0;
}
:root[data-theme="tequila_sunrise"] {
  --muted: #5f6b80;
  --accent-text: #000000;
}
.day-pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }

/* Premade protocols list */
/* Red and black caution tape around a peptide that is commonly flagged with one of the person's medicines */
.nav-soon { color: var(--muted); opacity: 0.6; cursor: default; padding: 0 2px; white-space: nowrap; }
.nav-soon small { font-size: 0.7em; }
.caution-tape {
  border: 6px solid transparent !important; border-radius: var(--radius);
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              repeating-linear-gradient(45deg, #c1121f 0, #c1121f 10px, #000000 10px, #000000 20px) border-box;
}
.medicine-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.medicine-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; }
.premade-list { list-style: none; margin: 0 0 var(--space-3, 12px); padding: 0; display: grid; gap: 8px; }
.premade-list li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }

/* Links page */
.link-group { margin-bottom: 20px; }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.link-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.link-main { min-width: 0; }
.link-name { font-weight: 600; }
.link-host { margin-left: 8px; }
.link-desc { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.link-actions { display: flex; gap: 4px; flex: none; }
.fulfil-action .btn { white-space: nowrap; }
.food-recommend { margin: 8px 0 16px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 0.9rem; }
.food-recommend ul { margin: 6px 0 0; padding-left: 20px; }
@media (max-width: 700px) {
  .fulfil-row { grid-template-columns: 1fr auto; }
  .fulfil-bar { grid-column: 1 / -1; }
  .fulfil-num { text-align: left; }
}

.alerts-btn { position: relative; }
.alert-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; padding: 0 4px; border-radius: 8px; background: #dc2626; color: #fff; font-size: 0.7rem; line-height: 16px; text-align: center; }
.alert-list { list-style: none; margin: 8px 0; padding: 0; }
.alert-item { margin: 6px 0; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); }
.alert-caution { border-left: 4px solid #dc2626; }
.alert-note { border-left: 4px solid var(--muted); }