/* Care Log styles. Calm, clinical-but-warm. Body text 17px minimum, tap targets 48px minimum.

   Three visual levels, so a glance says what is tappable:
   SUNKEN   read-only information (.status, segmented track): inset shadow, a touch darker than the page, no border
   RAISED   cards you can interact with (.card, .entry, .qa, .report, .checkin-row, .docitem, .goal):
            white, soft two-layer shadow, a 1px lighter top edge
   FLOATING primary actions and open sheets (.btn-primary, .checkin-row.is-due, .sheet-panel): stronger shadow, gradient fill */

/* ---------- Design tokens ---------- */
:root {
  /* The Mark 1 Apps mark's navy (the Settings card) and the opener's watercolour colours, the same in both schemes */
  --opener-bg: #030214; /* the Mark 1 Apps film's own near-black navy: the Settings card's mark sits on it */
  /* The opener's watercolour (v222): always light, the same in both schemes; the words sit on the pale sky over a paper glow */
  --opener-ink: #17263A; --opener-teal: #18727A; --opener-paper: #F6F4EF; --opener-slate: #3D4D5C;
  /* Colour: surfaces */
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #EEF3F6;
  --surface-2: #F4F7F9;
  --bg: #F6F4EF;
  --border-subtle: #D5DEE5;
  /* Colour: text (every one at least 4.5:1 on the page, a card and the sunken surface) */
  --text-primary: #17263A;
  --text-secondary: #4B5B6B;
  --text-muted: #56667A;
  /* Colour: teal, actions and structure */
  --teal: #18727A;
  --teal-dark: #135A60;
  --teal-light: #DDEEEF;
  --teal-ink: #FFFFFF;
  --danger-ink: #FFFFFF;
  /* Colour: warm, attention and human warmth. Used sparingly. */
  --warm: #C2703D;
  --warm-dark: #9A4E22;
  --warm-light: #F6E7DD;
  /* Colour: status. Thresholds and their colours are unchanged. */
  --success: #2D7354;
  --success-light: #E1F1E9;
  --warning: #8A5E10;
  --warning-light: #FBF0D9;
  --warning-ink: #8A5E10;  /* amber words on an amber tile: 5.0:1 */
  --danger: #B0372E;
  --danger-light: #F8E1DE;
  /* Status fills from the report look (v122): stripes, bars and dots only, never text */
  --teal-fill: #1E7F86;
  --success-fill: #3F8F6B;
  --warning-fill: #E0A030;
  --danger-fill: #C8453B;
  /* Colour: nutrition tag groups (Food diary). "-text" is the darker, WCAG-checked
     shade for text on the "-light" chip fill; the bare token is the lighter,
     CVD-checked identity shade used for the donut chart and legend dots.
     Dairy stays neutral (reuses --text-secondary/--surface-2) and the "worth a
     look" group reuses --warm, by design: only three groups get their own hue. */
  --nutri-veg: #2E7D4F;
  --nutri-veg-text: #256840;
  --nutri-veg-light: #E3F1E7;
  --nutri-protein: #9C4F9C;
  --nutri-protein-text: #7A3E7A;
  --nutri-protein-light: #F3E7F3;
  --nutri-carb: #C08A15;
  --nutri-carb-text: #8A6510;
  --nutri-carb-light: #FBF0D6;
  /* Colour: timeline categories (muted, one per entry type) */
  --cat-drink: #3E7FA6;
  --cat-food: #5F7F3E;
  --cat-weight: #6A5A8E;
  --cat-vitals: #A33B5A;
  --cat-sleep: #4B4FA6;
  --cat-note: #546569;
  --cat-exercise: #3F7A5A;
  --cat-bowel: #8A6D3B;
  --cat-symptom: #7A4E7E;
  --cat-result: #2A6F97;
  /* Colour: body-area tags on the gentle exercises (v83), a fill and an ink each, 4.5:1 or better */
  --tag-arms: #DCEBF8; --tag-arms-ink: #1B4A73;
  --tag-legs: #E0F1E3; --tag-legs-ink: #1F5A33;
  --tag-spine: #F1E6F5; --tag-spine-ink: #5B2A6B;
  --tag-stand: #FBEBD9; --tag-stand-ink: #7A4210;
  --warn-bg: #FBE9EA; --warn-ink: #7A1C21; --warn-border: #A4262C;
  /* Colour: sleep-stage ramp for the Trends sleep chart, one hue (deepest to lightest) */
  --sleep-deep: #373B8A;
  --sleep-core: #4348A7;
  --sleep-rem: #585CBC;
  /* Colour: mood scale for the chemo calendar, teal (good) through neutral to warm (rough) */
  --mood-5: #18727A;
  --mood-4: #4F9AA0;
  --mood-3: #8A9AA0;
  --mood-2: #D29A72;
  --mood-1: #C2703D;
  /* Shadow ink */
  --shadow-ink: 23, 38, 58;
  /* Elevation */
  --elev-sunken: inset 0 2px 6px rgba(var(--shadow-ink), 0.08), inset 0 1px 0 rgba(var(--shadow-ink), 0.04);
  --elev-flat: none;
  --elev-raised: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(var(--shadow-ink), 0.07), 0 6px 18px rgba(var(--shadow-ink), 0.07);
  --elev-raised-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 3px rgba(var(--shadow-ink), 0.1);
  --elev-floating: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 4px rgba(var(--shadow-ink), 0.12), 0 12px 28px rgba(var(--shadow-ink), 0.16);
  --elev-floating-teal: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 4px color-mix(in srgb, var(--teal) 26%, transparent), 0 10px 24px color-mix(in srgb, var(--teal) 30%, transparent);
  --elev-floating-teal-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px color-mix(in srgb, var(--teal) 24%, transparent), 0 4px 10px color-mix(in srgb, var(--teal) 24%, transparent);
  --elev-sheet: 0 -8px 40px rgba(var(--shadow-ink), 0.22), 0 -1px 0 rgba(var(--shadow-ink), 0.05);
  /* Gradients */
  --grad-raised: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 92%, white) 0%, var(--surface-raised) 60%, color-mix(in srgb, var(--surface-raised) 97%, var(--text-primary)) 100%);
  --grad-teal: linear-gradient(180deg, var(--teal-fill) 0%, var(--teal) 55%, var(--teal-dark) 100%);
  /* Radius */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;
  /* Spacing, 4px scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  /* Type scale */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 34px;
  --fs-3xl: 44px;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  /* Numbers, times and small labels: Inter with even-width digits, as in the reports (v122; DM Mono until then) */
  --font-mono: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.12s;
  --t-base: 0.22s;
  --t-slow: 0.36s;
  --tap: 48px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light dark;

  /* Aliases kept for the JavaScript (cssVar) and older selectors */
  --ink: var(--text-primary);
  --ink-soft: var(--text-secondary);
  --line: var(--border-subtle);
  --teal-soft: var(--teal-light);
  --red: var(--danger);
  --red-soft: var(--danger-light);
  --amber: var(--warning);
  --amber-soft: var(--warning-light);
  --green: var(--success);
  --green-soft: var(--success-light);
  --shadow: var(--elev-raised);
  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #172633;
    --surface-raised: #1A2B39;
    --surface-sunken: #13212C;
    --surface-2: #1C2D3B;
    --bg: #0F1B24;
    --border-subtle: #2A3B49;
    --text-primary: #E8EEF3;
    --text-secondary: #B4C1CC;
    --text-muted: #A3B2BF;
    --teal: #5CC3C9;
    --teal-dark: #43AAB0;
    --teal-light: #16343A; /* 6.4:1 under --teal text */
    --teal-ink: #04201F;
    --danger-ink: #0F1B24;
    --warm: #D98A5A;
    --warm-dark: #E7A57C;
    --warm-light: #3A281D;
    --success: #7BD0A3;
    --success-light: #173226;
    --warning: #E8B455;
    --warning-ink: #E8B455;
    --warning-light: #3A2E14;
    --danger: #EE8A80;
    --danger-light: #3D2020;
    --teal-fill: #5CC3C9;
    --success-fill: #7BD0A3;
    --warning-fill: #E8B455;
    --danger-fill: #E8857B;
    --nutri-veg: #3E9459;
    --nutri-veg-text: #5CBE7E;
    --nutri-veg-light: #1C2E22;
    --nutri-protein: #BA6ABA;
    --nutri-protein-text: #D896D8;
    --nutri-protein-light: #2E1F30;
    --nutri-carb: #B57A20;
    --nutri-carb-text: #D9A73E;
    --nutri-carb-light: #332A15;
    --cat-drink: #6FA9CB;
    --cat-food: #93B36A;
    --cat-weight: #A395C7;
    --cat-vitals: #D2778F;
    --cat-sleep: #8A8DD6;
    --cat-note: #8FA0A6;
    --cat-exercise: #7FBF9C;
    --cat-bowel: #C9A86A;
    --cat-symptom: #C48BC8;
    --cat-result: #79B4D6;
    --tag-arms: #1B3A52; --tag-arms-ink: #BFDBF5;
    --tag-legs: #1C3B27; --tag-legs-ink: #BFE7CB;
    --tag-spine: #3A2444; --tag-spine-ink: #E5CDEF;
    --tag-stand: #4A2E12; --tag-stand-ink: #F6D4AE;
    --warn-bg: #3D1F21; --warn-ink: #F5C6C9; --warn-border: #E27B80;
    --sleep-deep: #BFC0E9;
    --sleep-core: #9D9FDD;
    --sleep-rem: #7B7ED1;
    --mood-5: #5CC3C9;
    --mood-4: #6FA9B8;
    --mood-3: #7E8E94;
    --mood-2: #D29A72;
    --mood-1: #D98A5A;
    --shadow-ink: 0, 0, 0;
    --elev-sunken: inset 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(0, 0, 0, 0.2);
    --elev-raised: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.28);
    --elev-raised-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.3);
    --elev-floating: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.4);
    --elev-sheet: 0 -8px 40px rgba(0, 0, 0, 0.5);
    --grad-raised: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 94%, white) 0%, var(--surface-raised) 60%, color-mix(in srgb, var(--surface-raised) 92%, black) 100%);
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: calc(110px + var(--safe-b, 0px)); }
/* Keyboard focus (WCAG 2.4.7): one ring everywhere, only for keyboard and switch users, never on tap */
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--r-sm); background: var(--teal); color: #fff; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 8px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--text-primary);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 0.6em; }
p:last-child { margin-bottom: 0; }
button { font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.95em; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-secondary); }
.big { font-size: var(--fs-xl); font-weight: 600; }
.brand {
  font-family: var(--font-head); font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--teal);
  line-height: 1;
}
/* Section headings (v122, the report look): Fraunces, sentence case, in ink */
.section-title {
  font-family: var(--font-head); font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: var(--s-6) 0 var(--s-2);
  line-height: 1;
}
.section-title:first-child { margin-top: 0; }
#meds-docs-section .section-title, #meds-done-section .section-title, #meds-hospital-section .section-title { margin-top: var(--s-6); } /* first children of their own wrappers, so the usual first-child rule would remove the gap above them (v218: Finished courses and Given in hospital sat hard on the card above) */
.error { color: var(--danger); font-weight: 500; }
.hint { color: var(--text-secondary); font-size: var(--fs-md); margin: var(--s-2) 0 0; }

/* Empty states: a quiet line drawing, one line of text, and the action button that already sits beside it */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  color: var(--text-secondary); text-align: center;
  padding: var(--s-6) var(--s-4) var(--s-5);
  max-width: 320px; margin-left: auto; margin-right: auto;
}
.empty::before {
  content: ""; display: block; width: 72px; height: 72px;
  background: var(--teal); opacity: 0.55;
  -webkit-mask: var(--art, var(--art-note)) center / contain no-repeat; mask: var(--art, var(--art-note)) center / contain no-repeat;
  -webkit-mask-mode: alpha; mask-mode: alpha;
}
:root {
  --art-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 58h44'/%3E%3Cpath d='M20 50V24a6 6 0 0 1 6-6h14l10 10v22'/%3E%3Cpath d='M40 18v10h10'/%3E%3Cpath d='M28 34h10M28 41h16'/%3E%3Ccircle cx='54' cy='14' r='1.5'/%3E%3Cpath d='M61 22l1 0M58 8l0 1'/%3E%3C/svg%3E");
  --art-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h20l10 10v36a3 3 0 0 1-3 3H22a3 3 0 0 1-3-3V15a3 3 0 0 1 3-3z'/%3E%3Cpath d='M42 12v10h10'/%3E%3Cpath d='M27 32h18M27 40h18M27 48h10'/%3E%3Cpath d='M10 26v-8M6 22h8'/%3E%3C/svg%3E");
  --art-call: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 14h-6a3 3 0 0 0-3 3c0 22 18 40 40 40a3 3 0 0 0 3-3v-7l-10-4-5 5c-8-4-13-9-17-17l5-5z'/%3E%3Cpath d='M42 20a10 10 0 0 1 10 10M42 12a18 18 0 0 1 18 18'/%3E%3C/svg%3E");
  --art-food: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 34h48c0 14-10 24-24 24S12 48 12 34z'/%3E%3Cpath d='M22 58h28'/%3E%3Cpath d='M28 26c0-4 3-4 3-8M36 26c0-4 3-4 3-8M44 26c0-4 3-4 3-8'/%3E%3C/svg%3E");
  --art-pill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='27' width='44' height='18' rx='9' transform='rotate(-40 36 36)'/%3E%3Cpath d='M29 29l14 14'/%3E%3Cpath d='M12 56l4 4M10 60l6-6'/%3E%3C/svg%3E");
  --art-day: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 50h48'/%3E%3Cpath d='M22 50a14 14 0 0 1 28 0'/%3E%3Cpath d='M36 22v6M18 30l4 4M54 30l-4 4M10 42h5M57 42h5'/%3E%3Cpath d='M20 58h32'/%3E%3C/svg%3E");
  --art-meal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='36' cy='38' r='18'/%3E%3Ccircle cx='36' cy='38' r='9'/%3E%3Cpath d='M10 20v12a4 4 0 0 0 8 0V20M14 20v40'/%3E%3Cpath d='M60 20c-4 4-4 12 0 16v24'/%3E%3C/svg%3E");
}
.empty[data-art="doc"]::before { --art: var(--art-doc); }
.empty[data-art="call"]::before { --art: var(--art-call); }
.empty[data-art="food"]::before { --art: var(--art-food); }
.empty[data-art="pill"]::before { --art: var(--art-pill); }
.empty[data-art="day"]::before { --art: var(--art-day); }
.empty[data-art="meal"]::before { --art: var(--art-meal); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  border: 2px solid transparent;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t-fast) ease, box-shadow var(--t-base) ease, background var(--t-base) ease, color var(--t-base) ease, border-color var(--t-base) ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: default; transform: none; }
/* Floating: the primary action on a screen */
.btn-primary {
  color: var(--teal-ink);
  background: var(--grad-teal);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-floating-teal);
}
.btn-primary:active { box-shadow: var(--elev-floating-teal-pressed); }
/* Raised: a secondary choice */
.btn-secondary { background: var(--grad-raised); color: var(--teal); border-color: transparent; box-shadow: var(--elev-raised); }
.btn-secondary:active { box-shadow: var(--elev-raised-pressed); }
/* Outlined: the lighter partner next to a primary (Other time, Copy) */
.btn-outline, .med-actions .btn-secondary, .btnrow .btn-secondary {
  background: transparent; color: var(--teal); border-color: color-mix(in srgb, var(--teal) 45%, transparent); box-shadow: none; font-weight: 500;
}
.btn-outline:active, .med-actions .btn-secondary:active, .btnrow .btn-secondary:active { background: var(--teal-light); }
.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.btn-danger:active { background: var(--danger-light); }
.btn .icon { width: 22px; height: 22px; }
.btn-block { width: 100%; margin-top: var(--s-4); }
.btn-link {
  background: none; border: 0; padding: var(--s-3) 0; min-height: var(--tap);
  color: var(--teal); font-weight: 600; font-size: 18px; cursor: pointer;
}
.btn-small { min-height: var(--tap); padding: var(--s-2) 14px; font-size: var(--fs-md); }
.btnrow { display: flex; gap: 10px; margin-top: var(--s-3); }
.calls-actions { margin-bottom: var(--s-3); }
.calls-actions .btn { min-width: 0; padding-left: var(--s-3); padding-right: var(--s-3); }
.btnrow .btn { flex: 1; margin-top: 0; }
.iconbtn {
  width: var(--tap); height: var(--tap);
  border-radius: 50%;
  border: 0;
  background: var(--grad-raised);
  box-shadow: var(--elev-raised);
  font-size: 30px;
  line-height: 1;
  color: var(--teal);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--t-fast) ease, box-shadow var(--t-base) ease, background var(--t-base) ease;
}
.iconbtn:active { transform: translateY(1px); box-shadow: var(--elev-raised-pressed); }
.iconbtn:disabled { opacity: 0.4; transform: none; }

/* ---------- Fields ---------- */
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea, .field select, textarea, .input {
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) 14px;
  border-radius: var(--r-sm);
  border: 2px solid var(--border-subtle);
  background: var(--surface);
  font-size: 18px;
  outline: none;
  transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
.field input:focus, .field textarea:focus, .field select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-light); }
.field input[type="number"], .field input[type="time"], .field input[type="date"], .field input[inputmode="decimal"], .field input[inputmode="numeric"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
textarea { line-height: 1.5; resize: vertical; }
.field-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
/* v214: iPhone Safari gives a date box an intrinsic width that two in a row cannot shrink below, so they overlapped and ran off the screen */
.field input[type="date"], .field input[type="time"], .field input[type="month"] { max-width: 100%; min-width: 0; -webkit-appearance: none; appearance: none; display: block; }
.field input::-webkit-date-and-time-value { text-align: left; min-height: 1.4em; }
.field-row > .field { flex: 1 1 130px; min-width: 0; }
.field input, .field select { min-width: 0; }
.field-row .field { flex: 1; }
.presets { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 2px 0 14px; }
.preset {
  min-height: var(--tap);
  padding: var(--s-2) 14px;
  border-radius: var(--r-pill);
  border: 2px solid var(--border-subtle);
  background: var(--surface);
  font-size: var(--fs-md);
  cursor: pointer;
  transition: border-color var(--t-base) ease, background var(--t-base) ease, color var(--t-base) ease, transform var(--t-fast) ease;
}
.preset:active { transform: translateY(1px); }
.preset.is-active { border-color: var(--teal); background: var(--teal-light); color: var(--teal); font-weight: 600; }

/* ---------- Sign in ---------- */
.signin {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-6) var(--s-4) calc(var(--s-6) + var(--safe-b));
  /* The watercolour (icons/signin-bg.jpg) sits behind the card only; every word on this screen is
     inside the opaque card, so the picture never carries text. A wash of the page colour keeps it soft. */
  position: relative; isolation: isolate;
  background: var(--bg) url("icons/signin-bg.jpg") center / cover no-repeat;
}
.signin::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent), color-mix(in srgb, var(--bg) 62%, transparent)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .signin::before { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent), color-mix(in srgb, var(--bg) 80%, transparent)); } }
:root[data-theme="dark"] .signin::before { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent), color-mix(in srgb, var(--bg) 80%, transparent)); }
.signin-card { backdrop-filter: blur(2px); }
.signin-card {
  width: 100%; max-width: 420px;
  background: var(--grad-raised);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-raised);
  padding: var(--s-8) var(--s-6);
  text-align: center;
}
.signin-logo { border-radius: 18px; margin-bottom: var(--s-3); }
.signin-card .brand { font-size: var(--fs-3xl); line-height: 1.2; margin-bottom: 10px; } /* v225: the heading's own 1.0 line height let the tail of the y run into the Beta pill */
.signin-card .brand-pre { display: block; margin-bottom: 4px; font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-secondary); }
.signin-card form { text-align: left; margin-top: 22px; }

/* ---------- App frame ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + var(--safe-t)) var(--s-4) 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.topbar-right { display: flex; align-items: center; gap: var(--s-2); }
/* Leave demo (v226): the pill that said Preview or Demo is the way out, a real button at the 44px floor without making the bar taller */
.pill.pill-leave { min-height: 44px; margin-block: -4px; padding: 0 16px; border: 1.5px solid var(--teal); background: var(--surface); color: var(--teal); font-size: 15px; font-family: inherit; cursor: pointer; white-space: nowrap; }
.pill.pill-leave:active { background: var(--teal-light); }
.chip {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: var(--s-1) 14px;
  border-radius: var(--r-pill);
  background: var(--teal-light); color: var(--teal);
  font-weight: 600;
}
/* Chips: one pill style everywhere, smaller text, muted background, category colour where it means something */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 2px 12px; border-radius: var(--r-pill);
  font-weight: 600; font-size: 15px; letter-spacing: 0.01em; line-height: 1.2;
  background: var(--surface-sunken); color: var(--text-secondary);
  transition: background var(--t-base) ease, color var(--t-base) ease;
}
.pill-amber { background: var(--warning-light); color: var(--warning); }
.pill-red { background: var(--danger-light); color: var(--danger); }
.pill-green { background: var(--success-light); color: var(--success); }
.pill-teal { background: var(--teal-light); color: var(--teal); }
/* The stage pill (v132): "Beta" on the opener and the four cover screens, muted; never in the topbar, where it squeezed the page title */
.pill-stage { min-height: 26px; padding: 1px 9px; font-size: 14px; background: var(--surface-sunken); color: var(--text-secondary); }
.signin-card .pill-stage { margin-bottom: var(--s-2); }
.opener-stage { margin-top: 14px; background: color-mix(in srgb, var(--opener-ink) 10%, transparent); color: var(--opener-slate); }
.main {
  flex: 1;
  width: 100%; max-width: 640px; margin: 0 auto;
  padding: var(--s-4) var(--s-4) calc(100px + var(--safe-b));
}

/* Screen entrance: each major block fades in and rises 8px, 50ms apart */
.view.is-entering > * { animation: block-in var(--t-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes block-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* View-only relatives: Meds, Chemo and Trends only, nothing to add, edit or delete */
.tabs.tabs-3 { grid-template-columns: repeat(3, 1fr); }
body.is-viewer #trends-reports,
body.is-viewer #vitals-log,
body.is-viewer #meds-manage,
body.is-viewer #meds-hospital-add,
body.is-viewer .med-actions, body.is-viewer .med-log,
body.is-viewer #chemo-cycle-section,
body.is-viewer #chemo-add-run,
body.is-viewer #chemo-docs-section,
body.is-viewer #meds-docs-section { display: none; }
body.is-viewer .cal-cell { pointer-events: none; }

/* Full read-only relatives: every tab and report stays visible and reachable,
   only the controls that create, edit or delete anything are hidden. Rows that
   carry live status (check-ins, chemo calendar days) stay tappable or visible
   as plain information rather than being removed. */
body.is-readonly .qa,
body.is-readonly #food-nutrition-row,
body.is-readonly #food-totals,
body.is-readonly #meds-manage,
body.is-readonly #meds-hospital-add,
body.is-readonly .med-actions, body.is-readonly .med-log,
body.is-readonly #meds-doc-add,
body.is-readonly #vitals-log,
body.is-readonly #chemo-doc-add,
body.is-readonly #chemo-add-run,
body.is-readonly #ex-steps-edit,
body.is-readonly #ex-goals-edit,
body.is-readonly #doc-add,
body.is-readonly #doc-edit,
body.is-readonly #doc-explain,
body.is-readonly #notes-explain,
body.is-readonly #notes-send,
body.is-readonly #notes-record,
body.is-readonly #notes-record-hint,
body.is-readonly #notes-weekly,
body.is-readonly #doc-paste-summary,
body.is-readonly #doc-save-explanation,
body.is-readonly #doc-delete,
body.is-readonly #more-meals,
body.is-readonly #settings-food,
body.is-readonly #calls-edit, body.is-readonly .calls-actions { display: none; }

/* ---------- Tab bar ---------- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -6px 24px rgba(var(--shadow-ink), 0.07), 0 -1px 0 rgba(255, 255, 255, 0.6) inset;
  padding-bottom: var(--safe-b);
}
.tab {
  position: relative;
  min-height: 64px;
  border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0 2px;
  transition: color var(--t-base) ease, transform var(--t-fast) ease;
}
.tab:active { transform: translateY(1px); }
.icon { width: 26px; height: 26px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tab-icon { width: 24px; height: 24px; transition: transform var(--t-base) var(--ease-out), color var(--t-base) ease; }
.tab.is-active { color: var(--teal); }
.tab.is-active .tab-icon { transform: translateY(-1px); }
/* The indicator slides between tabs; the JavaScript sets its width and position */
.tab-indicator {
  position: absolute; top: -1px; left: 0; height: 3px; width: 40px;
  border-radius: 0 0 3px 3px; background: var(--teal);
  transform: translateX(-100px);
  transition: transform var(--t-slow) var(--ease-out), width var(--t-slow) var(--ease-out);
  pointer-events: none;
}

/* ---------- Today ---------- */
.daynav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: 14px; }
.daylabel {
  flex: 1; min-height: var(--tap);
  border: 0; background: none;
  font-family: var(--font-head); font-weight: 600; font-size: 25px; letter-spacing: -0.01em; line-height: 1.1;
  color: var(--text-primary); cursor: pointer;
}
.daylabel small { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; margin-top: 5px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: start; }
.tile {
  background: var(--grad-raised); border-radius: var(--r-md); box-shadow: var(--elev-raised);
  padding: var(--s-3) var(--s-3); display: flex; flex-direction: column; gap: 2px; min-height: 96px;
  align-self: start;
  transition: background var(--t-base) ease, box-shadow var(--t-base) ease;
}
.tile-label { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.tile-value { font-family: var(--font-head); font-size: 30px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; white-space: nowrap; margin-top: 6px; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; transition: color var(--t-base) ease; }
.tile-value small { font-family: var(--font-body); font-weight: 500; font-size: 14px; margin-left: 4px; color: var(--text-muted); }
.tile-sub { font-size: 15px; color: var(--text-secondary); margin-top: 3px; }
.tile-value.mono { font-family: var(--font-head); font-weight: 600; }

/* Sunken: read-only information, never looks tappable */
.status {
  border: 0; border-radius: var(--r-md);
  background: var(--surface-sunken);
  box-shadow: var(--elev-sunken);
  padding: 10px;
}
.status .tile { background: transparent; box-shadow: none; border-radius: var(--r-sm); padding: var(--s-2) 6px 6px; min-height: 90px; min-width: 0; }
.status .tiles:not(.tiles-2) .tile-value { font-size: 25px; }
.status .tile-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status .tile.is-red, .status .tile.is-amber { background: transparent; }
.status .tile.is-red .tile-label, .status .tile.is-red .tile-sub { color: var(--danger); }
.status .tile.is-amber .tile-label, .status .tile.is-amber .tile-sub { color: var(--warning-ink); }
.status .tile + .tile { border-left: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent); }

/* Raised: everything here is tappable, with a light gradient and a lit top edge */
.actions { margin-top: var(--s-4); display: flex; flex-direction: column; gap: 10px; }
.raise, .qa, .report, .checkin-row {
  background: var(--grad-raised);
  box-shadow: var(--elev-raised);
  transition: transform var(--t-fast) ease, box-shadow var(--t-base) ease, background var(--t-base) ease, color var(--t-base) ease;
}
.qa:active, .report:active, .checkin-row:active {
  transform: translateY(1px);
  box-shadow: var(--elev-raised-pressed);
}

/* Daily check-ins */
.checkins { display: flex; flex-direction: column; gap: var(--s-2); }
.checkin-row {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: left;
  border: 0; border-radius: var(--r-md); padding: var(--s-3) 14px; min-height: 68px; cursor: pointer; color: var(--text-primary);
}
.checkin-icon { width: 28px; height: 28px; color: var(--teal); transition: color var(--t-base) ease; }
.checkin-chev { width: 22px; height: 22px; color: var(--text-muted); }
.checkin-main { flex: 1; min-width: 0; }
.checkin-title { display: block; font-family: var(--font-head); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; line-height: 1.15; }
.checkin-sub { display: block; color: var(--text-secondary); font-size: 15px; margin-top: 4px; }
/* Floating: the check-in that is due now */
.checkin-row.is-due {
  background: var(--grad-teal);
  color: var(--teal-ink);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-floating-teal);
}
.checkin-row.is-due:active { box-shadow: var(--elev-floating-teal-pressed); }
.checkin-row.is-due .checkin-icon, .checkin-row.is-due .checkin-chev, .checkin-row.is-due .checkin-sub { color: var(--teal-ink); opacity: 0.95; }
.checkin-row.is-done .checkin-icon { color: var(--success); }
/* the summary card for a submitted check-in (v82) */
.checkin-card { background: var(--grad-raised); border-radius: var(--r-md); box-shadow: var(--elev-raised); overflow: hidden; }
.checkin-card.in-entry { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.cc-head { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 56px; padding: var(--s-3) 14px; border: 0; background: none; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.checkin-card.in-entry .cc-head { padding: 0; min-height: 44px; }
.cc-check { display: inline-flex; flex: none; color: var(--success); }
.cc-check .icon { width: 22px; height: 22px; stroke-width: 2.4; }
.cc-line { flex: 1; min-width: 0; font-weight: 600; font-size: 17px; line-height: 1.3; }
.cc-chev { display: inline-flex; flex: none; color: var(--text-muted); transition: transform var(--t-base) ease; }
.cc-chev .icon { width: 22px; height: 22px; }
.checkin-card.is-open .cc-chev { transform: rotate(90deg); }
.cc-body { display: grid; gap: var(--s-3); padding: 0 14px 14px; }
.checkin-card.in-entry .cc-body { padding: 0 0 var(--s-2); }
.cc-list { margin: 0; display: grid; gap: var(--s-3); }
.cc-row { display: grid; gap: 2px; }
.cc-k { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.cc-v { margin: 0; font-size: 17px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cc-v.is-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.cc-v.is-empty { color: var(--text-muted); }
.cc-meta { margin: 0; display: grid; gap: 2px; font-size: 14px; color: var(--text-secondary); }
.cc-edit { justify-self: start; min-width: 120px; }
.wiz-cancel { display: block; margin: var(--s-3) auto 0; }
.checkin-done { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--success); font-weight: 600; }
.checkin-done .icon { width: 18px; height: 18px; stroke-width: 2.4; }

/* Check-in flow: one question per screen */
.wiz-day { display: flex; gap: var(--s-2); margin-bottom: var(--s-3); }
.treat-chips { flex-wrap: wrap; margin: var(--s-2) 0 var(--s-3); } /* four kinds of treatment do not fit one row on a phone */
.wiz-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.wiz-progress .progress-bar { flex: 1; margin-top: 0; }
.wiz-step { animation: stepin var(--t-base) var(--ease-out); }
@keyframes stepin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.wiz-step.is-back { animation-name: stepback; }
@keyframes stepback { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.wiz-q { font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0 0 6px; }
.wiz-hint { color: var(--text-secondary); margin: 0 0 var(--s-3); }
.wiz-note { margin-top: var(--s-5); } /* the optional words under a pain slider (v129) */
.wiz-note .wiz-hint { margin-bottom: var(--s-2); }
.wiz-note textarea { width: 100%; }
.wiz-num { font-family: var(--font-head); font-weight: 600; font-size: 72px; line-height: 1; text-align: center; color: var(--teal); letter-spacing: 0.02em; margin: 6px 0 2px; min-height: 84px; transition: color var(--t-base) ease; }
.wiz-num.is-unset { color: var(--text-secondary); font-size: 30px; font-family: var(--font-body); font-weight: 500; padding-top: 28px; }
.wiz-anchors { display: flex; justify-content: space-between; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: var(--s-1) 2px 14px; }
.wiz-buttons { display: flex; gap: 10px; margin-top: var(--s-4); align-items: center; }
.wiz-buttons .btn { margin-top: 0; }
.wiz-buttons .btn-back { flex: 0 0 auto; padding: var(--s-3) var(--s-4); }
.wiz-buttons .btn-next { flex: 1; }
.wiz-skip { flex: 0 0 auto; }
.wiz-summary { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wiz-summary button { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); width: 100%; text-align: left; border: 0; border-radius: var(--r-sm); background: var(--surface-sunken); box-shadow: var(--elev-sunken); padding: var(--s-3) 14px; min-height: var(--tap); cursor: pointer; color: var(--text-primary); transition: background var(--t-base) ease; }
.wiz-summary .k { color: var(--text-secondary); }
.wiz-summary .v { font-weight: 600; text-align: right; max-width: 55%; overflow-wrap: anywhere; }
.wiz-summary .v.is-skipped { color: var(--text-secondary); font-weight: 400; font-style: italic; }
.wiz-summary .v.is-num { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-xl); letter-spacing: -0.01em; }
/* the words under a pain score (v130): body type on their own line, never the number's typeface */
.vnote { display: block; font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 1.35; letter-spacing: 0; color: var(--text-primary); margin-top: 2px; }
.wiz-summary .v .vnote { text-align: right; }
.cc-v.is-empty .vnote { color: var(--text-primary); }

/* Slider: a fat thumb for one-handed use */
input[type="range"].slider { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; }
input[type="range"].slider::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--teal-light), var(--teal)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12); }
input[type="range"].slider::-moz-range-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--teal-light), var(--teal)); }
input[type="range"].slider::-webkit-slider-thumb { -webkit-appearance: none; width: 36px; height: 36px; margin-top: -12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--teal); box-shadow: 0 2px 8px rgba(var(--shadow-ink), 0.3); cursor: pointer; }
input[type="range"].slider::-moz-range-thumb { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: 3px solid var(--teal); box-shadow: 0 2px 8px rgba(var(--shadow-ink), 0.3); cursor: pointer; }
/* Pain runs from calm teal to muted warm, never an alarming red */
input[type="range"].slider.is-pain::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--teal-light), var(--warm-light) 50%, var(--warm)); }
input[type="range"].slider.is-pain::-moz-range-track { background: linear-gradient(90deg, var(--teal-light), var(--warm-light) 50%, var(--warm)); }

.tile.is-red { background: var(--danger-light); }
.tile.is-red .tile-value { color: var(--danger); }
.tile.is-amber { background: var(--warning-light); }
.tile.is-amber .tile-value { color: var(--warning); }
.tile.is-green .tile-value { color: var(--success); }

.quickadd { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin: var(--s-4) 0 6px; }
.reports { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); align-items: stretch; }
.report {
  min-height: 84px;
  border: 0; border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--teal); line-height: 1.15; text-align: center;
  cursor: pointer; padding: var(--s-2) var(--s-1);
}
.report-icon { width: 28px; height: 28px; }
.qa {
  min-height: 72px;
  border: 0; border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1);
  font-size: var(--fs-sm); font-weight: 600; color: var(--teal);
  cursor: pointer; padding: 6px 2px;
}
.qa-icon { width: 28px; height: 28px; }

/* Timeline: raised rows with a rounded 3px bar in the category colour */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.entry {
  position: relative;
  display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 10px;
  background: var(--grad-raised); border-radius: var(--r-md); box-shadow: var(--elev-raised);
  padding: var(--s-3) var(--s-2) var(--s-3) var(--s-5); min-height: 64px;
  --cat: var(--teal);
}
.entry::before { content: ""; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--cat); }
/* Each row is tinted a couple of shades of its own category colour (the bar stays), light enough that every text token keeps its contrast */
.entry { background: color-mix(in srgb, var(--cat) 9%, var(--surface)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .entry { background: color-mix(in srgb, var(--cat) 16%, var(--surface)); } }
.entry.type-temp { --cat: var(--success); }
.entry.type-temp.is-amber { --cat: var(--warning); }
.entry.type-temp.is-red { --cat: var(--danger); }
.entry.type-drink { --cat: var(--cat-drink); }
.entry.type-food { --cat: var(--cat-food); }
.entry.type-weight { --cat: var(--cat-weight); }
.entry.type-vitals { --cat: var(--cat-vitals); }
.entry.type-note { --cat: var(--cat-note); }
.entry.type-sleep { --cat: var(--cat-sleep); }
.entry.type-checkin { --cat: var(--teal); }
.entry.type-pain { --cat: var(--warm); }
.entry.type-question { --cat: var(--teal); }
.entry.type-sent { --cat: var(--teal); }
/* an email address in a hint or on the legal pages breaks rather than pushing a 320px screen sideways (v159) */
.hint, .legal li, .legal p, .sendto-email { overflow-wrap: anywhere; }
.entry.type-exercise { --cat: var(--cat-exercise); }
.entry.type-bowel { --cat: var(--cat-bowel); }
.entry.type-symptom { --cat: var(--cat-symptom); }
.entry.type-result { --cat: var(--cat-result); }
/* Only new rows animate in; rows already on screen stay put when data updates */
.entry.is-new, .docitem.is-new { animation: block-in var(--t-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.stages { margin-top: var(--s-1); }
.entry-time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.02em; }
.entry-main { min-width: 0; }
.entry-title { font-weight: 600; }
.entry-title .val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.entry-title .val.is-red { color: var(--danger); }
.entry-title .val.is-amber { color: var(--warning); }
.entry-sub { color: var(--text-secondary); font-size: 16px; overflow-wrap: anywhere; }
.entry-menu {
  width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: none;
  font-size: 26px; color: var(--text-muted); cursor: pointer;
  transition: background var(--t-base) ease;
}
.entry-menu:active { background: var(--surface-sunken); }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start; }
.card {
  background: var(--grad-raised); border-radius: var(--r-md); box-shadow: var(--elev-raised);
  padding: var(--s-4); align-self: start;
}
.card + .card { margin-top: 0; }
.chart-card { margin-top: 14px; padding: var(--s-5) var(--s-4) var(--s-4); }
/* .card + .card zeroes the gap between stacked cards generally; charts want a visible one, so
   this needs to match its specificity and come after it to win */
.chart-card + .chart-card { margin-top: 20px; }
.chart-card .section-title { margin: 0 0 var(--s-3); }
.chart-wrap { position: relative; height: 240px; }
/* Chart or table (v79): the heading and a small two-way switch on one line; the table underneath
   shares the chart's amber and red. */
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin: 0 0 var(--s-3); }
.chart-head .section-title { margin: 0; min-width: 0; }
.viewtoggle { display: flex; flex: none; background: var(--surface-sunken); border-radius: var(--r-pill); padding: 3px; box-shadow: var(--elev-sunken); }
.vt { min-height: 44px; min-width: 64px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: none; font: 600 15px var(--font-body); color: var(--text-secondary); cursor: pointer; transition: background var(--t-base) ease, color var(--t-base) ease, box-shadow var(--t-base) ease; }
.vt.is-active { background: var(--grad-raised); color: var(--teal); box-shadow: var(--elev-raised); }
.chart-table table { width: 100%; border-collapse: collapse; font-size: 17px; }
.chart-table th { text-align: left; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding: 0 6px 8px; border-bottom: 1px solid var(--border-subtle); }
.chart-table td { padding: 10px 6px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; line-height: 1.35; }
.chart-table tr:last-child td { border-bottom: 0; }
.chart-table .td-date.is-repeat { color: var(--text-muted); }
.chart-table .td-time, .chart-table .td-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.chart-table .td-val { white-space: nowrap; }
.chart-table .td-val { font-weight: 500; }
.chart-table .td-val.lvl-amber { color: var(--warning); font-weight: 700; }
.chart-table .td-val.lvl-red { color: var(--danger); font-weight: 700; }
.chart-table small { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--text-secondary); white-space: normal; }
.chart-table-empty { margin: var(--s-2) 0; color: var(--text-secondary); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.legend-note { color: var(--text-secondary); font-size: 15px; margin: var(--s-3) 0 0; }

.med { display: flex; flex-direction: column; gap: 10px; transition: box-shadow var(--t-base) ease; }
.med-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 10px; }
.med-head > :first-child { min-width: 0; overflow-wrap: anywhere; }
.med-name { font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; }
.med-dose { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 16px; margin-top: 2px; }
.med-how { color: var(--text-secondary); font-size: 16px; }
.med-was { color: var(--teal); font-size: 15px; margin-top: 2px; overflow-wrap: anywhere; }
.med-purpose { display: inline-flex; align-items: center; min-height: 30px; background: var(--surface-sunken); border-radius: var(--r-pill); padding: 2px 12px; font-size: 15px; font-weight: 600; color: var(--text-secondary); text-align: center; min-width: 0; flex-shrink: 1; }
.med-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dots { display: flex; gap: 6px; }
.dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-subtle); background: var(--surface-sunken); transition: background var(--t-slow) ease, border-color var(--t-slow) ease, transform var(--t-base) var(--ease-out); }
.dot.is-done { background: var(--success); border-color: var(--success); transform: scale(1.08); }
.med-last { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 15px; letter-spacing: 0.01em; }
.med-times { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.med-times-label { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; color: var(--text-muted); }
.med-time {
  min-height: var(--tap); padding: 6px 14px; border-radius: var(--r-pill); border: 2px solid var(--success-light);
  background: var(--success-light); color: var(--success); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center;
  transition: transform var(--t-fast) ease, background var(--t-base) ease;
}
.med-time:active { transform: translateY(1px); }
.med-time-view { cursor: default; }
.med-actions { display: flex; gap: 10px; }
/* The compact Meds card (v215): the name, a word for what it is for, one status line and Log now; the rest on a tap */
.med-top { display: flex; align-items: center; gap: 10px; }
.med-toggle { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; min-height: 48px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.med-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.med-tag { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.med-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 16px; color: var(--text-secondary); }
.med-line .pill { font-size: 13px; min-height: 24px; padding: 0 9px; }
.med-muted { color: var(--text-muted); }
.med-chev { flex: 0 0 auto; width: 22px; height: 22px; color: var(--text-muted); transition: transform var(--t-base) ease; transform: rotate(90deg); }
.med.is-open .med-chev { transform: rotate(-90deg); }
.med-log { flex: 0 0 auto; margin: 0; min-height: 48px; padding: 0 18px; }
.med-more { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--s-2); }
.med-more[hidden] { display: none; }
.med-why { margin: 0; font-size: 15px; color: var(--teal); font-weight: 600; overflow-wrap: anywhere; }
.med-more .med-actions .btn { flex: 0 1 auto; min-width: 140px; }
@media (prefers-reduced-motion: reduce) { .med-chev { transition: none; } }
.med-actions .btn { flex: 1; margin-top: var(--s-1); }
.med.is-complete { box-shadow: var(--elev-raised), inset 0 0 0 2px var(--success-light); }
.med.is-ended { opacity: 0.6; }

/* ---------- Segmented: sunken track, raised active pill ---------- */
.segmented { display: flex; background: var(--surface-sunken); border-radius: var(--r-pill); padding: 4px; box-shadow: var(--elev-sunken); }
.seg { flex: 1; min-height: 44px; border: 0; border-radius: var(--r-pill); background: none; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: background var(--t-base) ease, color var(--t-base) ease, box-shadow var(--t-base) ease; }
.seg.is-active { background: var(--grad-raised); color: var(--teal); box-shadow: var(--elev-raised); }

/* ---------- Documents ---------- */
.doclist { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.docitem {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: left;
  background: var(--grad-raised); border: 0; border-radius: var(--r-md); box-shadow: var(--elev-raised);
  padding: 14px var(--s-4); min-height: 72px; cursor: pointer; color: var(--text-primary);
  transition: transform var(--t-fast) ease, box-shadow var(--t-base) ease;
}
.docitem:active { transform: translateY(1px); box-shadow: var(--elev-raised-pressed); }
.docitem-icon { width: 30px; height: 30px; color: var(--teal); }
.docitem-main { flex: 1; min-width: 0; }
.docitem-title { font-weight: 700; font-size: 18px; }
.docitem-sub { color: var(--text-secondary); font-size: 16px; }
.doc-title { font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; margin-top: var(--s-1); }
.pages { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-2); }
.pages img { width: 100%; height: auto; border-radius: var(--r-sm); box-shadow: var(--elev-raised); background: #fff; }
.thumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: 10px; }
.thumb { width: 76px; height: 100px; object-fit: cover; border-radius: var(--r-sm); box-shadow: var(--elev-raised); background: #fff; }
.doctext {
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--surface-sunken); border-radius: var(--r-sm); padding: 14px; box-shadow: var(--elev-sunken);
  font-family: var(--font-body); font-size: var(--fs-md); margin: var(--s-2) 0 0; max-height: 60vh; overflow: auto;
}
.progress { margin-top: var(--s-3); color: var(--text-secondary); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.progress-bar { height: 8px; border-radius: 4px; background: var(--surface-sunken); box-shadow: var(--elev-sunken); overflow: hidden; margin-top: 6px; }
.progress-bar > div { height: 100%; width: 0; background: var(--teal); border-radius: 4px; transition: width var(--t-slow) var(--ease-out); }

/* ---------- More ---------- */
.callcard { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.callcard { flex-wrap: wrap; }
.call-info { min-width: 0; flex: 1 1 160px; }
.call-btns { display: flex; flex-direction: column; gap: var(--s-2); flex: 0 0 auto; }
.callcard a.btn { margin-top: 0; min-width: 120px; }
.call-label { font-weight: 700; font-size: 18px; }
.call-role { color: var(--text-secondary); }
.call-number { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 16px; }
/* The option or extension after the number (v135): in ink and bold, as it is what to do once the call connects */
.call-ext { color: var(--text-primary); font-weight: 600; font-size: 17px; }
.call-email { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 15px; overflow-wrap: anywhere; }
.contactrow { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-sunken); box-shadow: var(--elev-sunken); }
.contactrow .field { margin-bottom: var(--s-2); }
.contactrow.is-new { box-shadow: var(--elev-sunken), 0 0 0 2px var(--teal); }
.contactrow.is-new .contactrow-n { color: var(--teal); }
.contactrow-head { display: flex; justify-content: space-between; align-items: center; }
.contactrow-head .btn-remove { min-height: 44px; padding: 0 var(--s-2); }
.contactrow-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }

/* ---------- Bottom sheet (floating) ---------- */
.sheet { position: fixed; inset: 0; z-index: 20; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(24, 38, 43, 0.45); animation: fade-in var(--t-base) ease-out; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: var(--kb, 0px);
  max-height: min(92vh, calc(100vh - 84px - var(--safe-t)), calc(var(--vvh, 100vh) - 16px)); overflow: auto; /* room above for the toast */
  transition: bottom var(--t-base) ease;
  background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--s-2) var(--s-5) calc(var(--s-5) + var(--safe-b));
  box-shadow: var(--elev-sheet);
  animation: rise var(--t-slow) var(--ease-out);
}
@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-handle { width: 44px; height: 5px; border-radius: 3px; background: var(--border-subtle); margin: 6px auto 14px; }
.sheet-close {
  position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--surface-sunken); color: var(--text-secondary); font-size: 26px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-base) ease, transform var(--t-fast) ease;
}
.sheet-close:active { background: var(--teal-light); transform: scale(0.96); }
.sheet-title { font-family: var(--font-head); font-weight: 600; font-size: 25px; letter-spacing: -0.01em; margin-bottom: 14px; color: var(--text-primary); line-height: 1.1; }
.sheet-body .btn-block { margin-top: 10px; }
.sheet-body .btn-block:first-of-type { margin-top: var(--s-4); }
.bigvalue { display: flex; align-items: center; gap: var(--s-3); margin-bottom: 14px; }
.bigvalue input { font-size: var(--fs-2xl); text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; min-height: 64px; flex: 1 1 0; min-width: 0; width: 100%; }
.bigvalue .unit { font-size: 22px; color: var(--text-secondary); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.stepper { display: flex; gap: var(--s-2); }
.stepper .iconbtn { box-shadow: none; background: var(--surface-sunken); font-size: 26px; }
.editlist { display: flex; flex-direction: column; gap: 10px; }
.editrow { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s-2); align-items: end; }
.editrow .field { margin-bottom: 0; }
.editrow .iconbtn { box-shadow: none; background: var(--danger-light); color: var(--danger); font-size: 24px; }
.medlist { display: flex; flex-direction: column; gap: var(--s-2); }
.medrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--surface-sunken); border-radius: var(--r-sm); padding: 10px var(--s-3); min-height: 56px; }
.medrow .medrow-name { flex: 1 1 120px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.medrow .pill { white-space: nowrap; }
.medrow .btn-small { margin-top: 0; }
.medrow.is-inactive .medrow-name { color: var(--text-secondary); }
.medrow.is-inactive .medrow-title { text-decoration: line-through; }
.medrow-sub { display: block; font-size: 16px; font-weight: 400; color: var(--text-secondary); }
.medrow-class { color: var(--teal); font-weight: 500; margin-top: 2px; }
/* up and down for the order of the medicines (v216) */
.medrow-moves { display: flex; flex-direction: column; gap: 2px; flex: none; }
.medrow-move { width: 44px; height: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--surface); color: var(--teal); padding: 0; }
.medrow-move .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.medrow-move:disabled { opacity: 0.35; }
.med-order { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.med-order .medrow-moves { flex-direction: row; gap: var(--s-2); }
.med-more .med-order { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border-subtle); }
.med-order-label { font-size: 16px; color: var(--text-secondary); }
/* press and hold to drag a card (v217) */
.med-toggle { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.card.med.is-dragging { position: relative; z-index: 5; box-shadow: var(--elev-floating); outline: 2px solid var(--teal); transition: none; }
body.is-med-dragging { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { .card.med:not(.is-dragging) { transition: transform 120ms; } }

/* Food diary */
.diary-head { display: flex; justify-content: space-between; align-items: center; }
.diary-head .btn-small { margin-top: 0; }
.diary-day { margin-top: var(--s-5); }
.diary-title { font-family: var(--font-head); font-weight: 600; font-size: 22px; letter-spacing: 0.03em; margin: 0 0 2px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; line-height: 1; }
.diary-title small { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.diary-sum { color: var(--text-secondary); margin: 0 0 var(--s-2); }

/* Food diary: nutrition tags, filled by colour group (see NUTRI_GROUP in the
   JS); Dairy stays the plain neutral chip, "High ..." ones use the app's warm
   accent since that is a status signal, not an identity colour. */
.tags { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.tag {
  display: inline-flex; align-items: center; min-height: 26px; padding: 2px 11px;
  border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--text-secondary);
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; white-space: nowrap;
}
.tag.is-veg { background: var(--nutri-veg-light); color: var(--nutri-veg-text); }
.tag.is-protein { background: var(--nutri-protein-light); color: var(--nutri-protein-text); }
.tag.is-carb { background: var(--nutri-carb-light); color: var(--nutri-carb-text); }
.tag.is-watch { background: var(--warm-light); color: var(--warm-dark); font-weight: 700; }
.diary-tags { color: var(--text-secondary); font-size: 15px; margin: 0 0 var(--s-2); font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.unmatched { color: var(--text-muted); font-size: 14px; font-style: italic; margin-top: 4px; }

/* Food diary: the day's colour mix as a donut, with a legend beside it */
.diary-donut-row { display: flex; gap: var(--s-4); align-items: center; margin: 2px 0 var(--s-3); flex-wrap: wrap; }
.diary-donut { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; position: relative; }
.diary-donut::after { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: var(--surface); }
.diary-legend { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-secondary); }
.diary-legend .row { display: flex; align-items: center; gap: 7px; }
.diary-legend .sw { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.diary-legend .sw.is-veg { background: var(--nutri-veg); }
.diary-legend .sw.is-protein { background: var(--nutri-protein); }
.diary-legend .sw.is-carb { background: var(--nutri-carb); }
.diary-legend .sw.is-dairy { background: var(--text-muted); }
.diary-legend .sw.is-watch { background: var(--warm); }
.diary-legend .n { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); padding-left: 10px; }
.nudge { margin-top: var(--s-3); padding: var(--s-3) 14px; border-radius: var(--r-md); background: var(--warm-light); }
.nudge p { margin: 0 0 var(--s-2); }
.nudge p:first-child { color: var(--warm-dark); font-weight: 600; }
.nudge .btn { margin-top: var(--s-1); }
.food-overview { margin: var(--s-3) 0 var(--s-2); }
.nutri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.nutri-cell { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) 6px; min-width: 0; }
.nutri-cell .tile-label { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nutri-value { font-family: var(--font-head); font-weight: 600; font-size: 24px; line-height: 1; letter-spacing: -0.01em; }
.nutri-value small { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; }
.nutri-cell.is-zero .nutri-value { color: var(--text-muted); }

/* Calorie and macro estimates (More > Settings > Food). All of it is gated
   in the JS on profile/main.detailedNutrition, so none of these elements
   exist on the page while the setting is off. */
.diary-macros { display: inline-block; color: var(--teal-dark); background: var(--teal-light); border-radius: var(--r-sm); padding: 5px 10px; font-size: 15px; margin: 0 0 var(--s-2); font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.macros { color: var(--text-secondary); font-size: 14px; margin-top: 4px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.macrosbox { margin: var(--s-3) 0 var(--s-2); }
/* Food sheet: pick a meal first, then the details */
.pick-head { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: var(--s-3) 0 var(--s-1); }
.picklist { display: flex; flex-direction: column; gap: var(--s-2); }
.pickrow { display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: left; min-height: 56px; padding: var(--s-2) 14px; border: 2px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface); color: var(--text-primary); cursor: pointer; font-size: 17px; }
.pickrow:active { background: var(--surface-sunken); }
.pickrow-main { flex: 1; min-width: 0; }
.pickrow-title { display: block; font-weight: 600; }
.pickrow-sub { display: block; color: var(--text-secondary); font-size: 15px; margin-top: 2px; }
.pickrow .icon { width: 20px; height: 20px; color: var(--text-muted); flex: none; }
.chosen { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 14px; border-radius: var(--r-md); background: var(--surface-sunken); margin-bottom: var(--s-3); }
.chosen-name { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; line-height: 1.05; min-width: 0; overflow-wrap: anywhere; }
.timeline-note { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); margin: var(--s-2) 0 0; }
/* Quantity rows: minus, number, plus */
.stepper { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); }
.stepper input { width: 96px; min-height: var(--tap); text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 22px; padding: 4px 8px; border-radius: var(--r-sm); border: 2px solid var(--border-subtle); background: var(--surface); -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .unit { color: var(--text-secondary); font-size: 16px; min-width: 0; }
.qtyrows .macro-row:first-child { border-top: 0; padding-top: 0; }
.qtyrows .presets { margin-bottom: var(--s-2); }
.timechips { min-height: var(--tap); align-items: center; }
.timeadd { align-items: center; margin-bottom: var(--s-2); }
.timeadd input { flex: 1 1 140px; }
.timeadd .btn { flex: 0 0 auto; }
.mealmed { padding: var(--s-2) 0 var(--s-3); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--s-3); }
.mealmed:last-child { border-bottom: 0; }
.macrosbox > .hint { margin-top: 0; margin-bottom: var(--s-2); }
.macro-row { padding: var(--s-3) 0; border-top: 1px solid var(--border-subtle); }
.macro-row .presets { margin-bottom: 6px; }
.macro-row .hint { margin-top: 0; font-size: 15px; }
.macro-row .btn-link { padding-left: 0; }
.macro-row-label { margin: 0 0 var(--s-2); font-weight: 600; }
.macro-row-label small { display: block; font-weight: 400; color: var(--text-muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; }
.override { margin-top: var(--s-2); padding: var(--s-3) 14px; border-radius: var(--r-md); background: var(--surface-sunken); box-shadow: var(--elev-sunken); }
.override .field-row { margin-bottom: 0; }
.override .btnrow { margin-top: var(--s-2); }
.macro-total { margin: var(--s-3) 0 0; padding: var(--s-3) 14px; border-radius: var(--r-md); background: var(--teal-light); color: var(--teal-dark); font-weight: 600; }

/* More: a short menu of rows (the check-in row look), Settings is its own screen */
.menu { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.menu-row .checkin-title { font-size: 21px; }
.settings-group { margin-top: var(--s-2); }
.settings-toggle { margin-bottom: 0; }
.settings-target { margin-top: var(--s-3); }
.settings-group .hint { margin-top: var(--s-2); }
.invite-banner { background: var(--teal-light); color: var(--teal); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin-top: var(--s-4); font-weight: 600; text-align: left; }
.signin-card .btn-link { margin-top: var(--s-2); }
.signin-card .chips { justify-content: center; }
.members { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.member { display: flex; align-items: center; gap: var(--s-3); background: var(--surface-sunken); border-radius: var(--r-md); padding: var(--s-3) 14px; flex-wrap: wrap; }
.member-main { flex: 1 1 160px; min-width: 0; }
.member-name { font-weight: 600; }
.member-sub { font-size: 15px; color: var(--text-secondary); }
.member .btn { margin-top: 0; flex: none; margin-left: auto; }
.invitebox { margin-top: var(--s-3); }
.keybox { background: var(--surface-sunken); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); font-size: 15px; word-break: break-all; user-select: all; -webkit-user-select: all; margin: var(--s-2) 0 0; }

/* The topbar names the page: "Care Log" then a lighter ": Food diary" */
.brand { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(21px, 6vw, 26px); }
.brand-page { color: var(--text-secondary); font-family: var(--font-body); font-weight: 600; font-size: 0.72em; letter-spacing: 0; }
.topbar-right { flex: none; }

/* Reports: five range buttons (7/14/30/90 and Custom) have to sit on one line on a phone */
#view-food .seg, #view-notes .seg { white-space: nowrap; font-size: 15px; padding-left: 4px; padding-right: 4px; }
@media (max-width: 359px) {
  #view-food .segmented, #view-notes .segmented, #view-mood .segmented, #view-pain .segmented, #view-ibd .segmented { flex-wrap: wrap; }
  #view-food .seg, #view-notes .seg { flex: 1 1 30%; }
}
/* Reports: custom From and To range */
.custom-range { margin-top: var(--s-3); }
.custom-range .field { margin-bottom: 0; }
.hint-warn { color: var(--warning); font-weight: 600; }

/* Notes for the team: flagged readings */
.flags { display: flex; flex-direction: column; gap: var(--s-2); margin-top: 10px; }
.flag { position: relative; display: flex; align-items: flex-start; gap: 10px; background: var(--grad-raised); border-radius: var(--r-md); padding: var(--s-3) 14px var(--s-3) var(--s-5); box-shadow: var(--elev-raised); --cat: var(--teal); }
.flag::before { content: ""; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--cat); }
.flag.is-amber { --cat: var(--warning); }
.flag.is-red { --cat: var(--danger); }
.flag.is-green { --cat: var(--success); }
.note-who { font-weight: 700; color: var(--teal-dark); }

/* Speech to text: the big button under a text box (see speakButton in the JS) */
.speakbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin: 6px 0 14px; border: 2px solid var(--teal); border-radius: var(--r-lg); background: var(--teal-light); color: var(--teal-dark); font-weight: 700; font-size: 18px; cursor: pointer; transition: background var(--t-base) ease, border-color var(--t-base) ease, color var(--t-base) ease; }
.speakbtn .icon { width: 24px; height: 24px; }
.speakbtn:active { transform: translateY(1px); }
.speakbtn.is-listening { background: var(--warm-light); border-color: var(--warm); color: var(--warm-dark); animation: speak-pulse 1.2s ease-in-out infinite; }
@keyframes speak-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--warm-light); } 50% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { .speakbtn.is-listening { animation: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .speakbtn, :root:not([data-theme="light"]) .note-who, :root:not([data-theme="light"]) .diary-macros, :root:not([data-theme="light"]) .macro-total, :root:not([data-theme="light"]) .pill-hosp, :root:not([data-theme="light"]) .q-team { color: var(--teal); } }
.strapline { margin: 2px 0 var(--s-3); color: var(--teal); font-weight: 600; font-size: var(--fs-md); }
.food-toggle { margin: var(--s-2) 0 0; }
.question .question-text { font-weight: 600; margin-bottom: 4px; }
.question .btn-link { padding-left: 0; margin-top: 4px; }
.flag .pill { flex: none; }
.flag-text { min-width: 0; overflow-wrap: anywhere; }

@media print {
  .question { padding-bottom: 26mm; border-bottom: 1px solid var(--border-subtle); margin-bottom: 6mm; } /* room to write the answer in clinic */
  body { background: #fff; }
  .topbar, .tabs, .btn, .segmented, .toast, .sheet, .quickadd, .confetti, #toast, .entry-menu { display: none !important; }
  .main { padding: 0; }
  .entry, .card { box-shadow: none; border: 1px solid #C8D0D3; break-inside: avoid; background: #fff; }
  .tag, .diary-donut, .diary-legend .sw { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tag:not(.is-veg):not(.is-protein):not(.is-carb):not(.is-watch) { border: 1px solid #C8D0D3; background: #fff; }
  .diary-donut::after { background: #fff; }
  .unmatched, .custom-range, .hint-warn { display: none; }
  .diary-day { break-inside: avoid; }
}
.check { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); font-weight: 600; margin-bottom: var(--s-2); }
.check input { width: 26px; height: 26px; accent-color: var(--teal); }

/* ---------- Toast ---------- */
.toast {
  /* at the top, over the title bar, like the phone's own notifications (v138): at the bottom it sat over
     the quick-add tiles and the Save buttons of a sheet, just after a save, when the next tap is due */
  position: fixed; left: var(--s-4); right: var(--s-4); top: calc(8px + var(--safe-t)); z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  background: var(--text-primary); color: var(--bg);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4); min-height: 56px;
  box-shadow: var(--elev-floating);
  font-weight: 600;
  animation: toast-in var(--t-base) var(--ease-out);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.toast-btn { min-height: 44px; padding: var(--s-1) 14px; border: 0; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.16); color: inherit; font-weight: 700; cursor: pointer; }
@media (prefers-color-scheme: dark) { .toast { background: var(--surface-2); color: var(--text-primary); } }

@media (min-width: 560px) {
  .tab { font-size: 15px; }
  .qa { font-size: 15px; }
}
@media (max-width: 380px) {
  .qa { font-size: var(--fs-xs); }
  .tile-value { font-size: 22px; }
}

/* ---------- Trends ---------- */
.tiles-2 { grid-template-columns: repeat(2, 1fr); }
.fieldlabel { display: block; font-weight: 600; margin-bottom: 6px; }
.page-title { font-family: var(--font-head); font-weight: 600; font-size: 28px; letter-spacing: 0.04em; color: var(--teal); margin: 0 0 var(--s-3); line-height: 1; }

/* ---------- Chemo: calendar ---------- */
.progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
#chemo-progress .progress-bar { margin: 0 0 10px; }
#chemo-progress .progress-bar > div { background: var(--success); }
.cal { padding: var(--s-2) 6px 10px; margin-top: var(--s-3); }
.card + .card.cal { margin-top: var(--s-3); } /* .card + .card zeroes the gap; the calendar wants one under the Sessions card */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.cal-title { flex: 1; min-height: var(--tap); border: 0; background: none; font-family: var(--font-head); font-weight: 600; font-size: 22px; letter-spacing: 0.04em; color: var(--text-primary); cursor: pointer; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-1); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-cell {
  position: relative; min-height: 48px; aspect-ratio: 1; padding: 0;
  border: 0; border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--text-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer;
  transition: background var(--t-base) ease, color var(--t-base) ease, box-shadow var(--t-base) ease, transform var(--t-fast) ease;
}
.cal-cell:active { transform: translateY(1px); }
.cal-cell.is-empty { background: transparent; cursor: default; }
.cal-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 16px; }
.cal-type { position: absolute; top: 3px; right: 5px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0.04em; }
.key-letters { display: block; margin-top: 4px; }
.cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--teal); }
.cal-cell.is-chemo { background: var(--teal-light); color: var(--teal); font-weight: 700; box-shadow: inset 0 0 0 2px var(--teal-fill); }
.cal-cell.is-chemo .cal-num { font-size: 17px; }
.cal-cell.is-chemo .cal-type { font-size: 11px; }
.cal-cell.is-done, .cal-cell.is-logged { background: var(--success-light); color: var(--success); }
.cal-cell.is-chemo.is-done { background: linear-gradient(160deg, #FFE08A, #F2B83A); color: #3B2A00; box-shadow: inset 0 0 0 2px #E0A030; }
.cal-cell.is-selected { background: var(--teal); color: var(--teal-ink); font-weight: 600; }
.cal-cell.is-today.is-selected { box-shadow: inset 0 0 0 2px var(--teal-ink); }
.cal-cell:disabled { opacity: 0.35; cursor: default; }
/* Seven squares must fit a 320px screen (WCAG 1.4.10): the 48px minimum gives way to the width available, still well over the 24px target minimum */
@media (max-width: 359px) { .cal-grid { gap: 2px; } .cal-cell { min-height: 0; } }
/* Mood on a day: a small dot (good) or ring (rough) on a calm teal-to-warm scale */
.cal-face { width: 10px; height: 10px; display: block; }
.cal-face .mood-fill { fill: var(--mood-c); stroke: none; }
.cal-face .mood-ring { fill: none; stroke: var(--mood-c); stroke-width: 2; }
.cal-face.mood-1 { --mood-c: var(--mood-1); }
.cal-face.mood-2 { --mood-c: var(--mood-2); }
.cal-face.mood-3 { --mood-c: var(--mood-3); }
.cal-face.mood-4 { --mood-c: var(--mood-4); }
.cal-face.mood-5 { --mood-c: var(--mood-5); }
.cal-cell.is-selected .cal-face { --mood-c: var(--teal-ink); }
.cal-key { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: var(--fs-sm); color: var(--text-secondary); margin: 10px var(--s-1) 0; }
.key-dot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.key-chemo { background: var(--teal-light); border: 1px solid var(--teal); }
.key-done { background: var(--success-light); border: 1px solid var(--success); }
.key-mood { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.key-mood .cal-face + .cal-face { margin-left: -1px; }
.key-mood .cal-face:last-of-type { margin-right: 3px; }
.key-mood .cal-face { width: 10px; height: 10px; }

/* ---------- Opener (loading page, v222) ---------- */
.opener { position: fixed; inset: 0; z-index: 50; background: var(--opener-paper); color: var(--opener-ink); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: max(32px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); overflow: hidden; transition: opacity 420ms ease; }
.opener.is-leaving { opacity: 0; pointer-events: none; }
.opener[hidden] { display: none; }
/* The watercolour fills the screen; the picture's tree and horizon are kept in view on a tall phone */
.opener-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 34% 50%; background: var(--opener-paper); display: block; }
/* A dark wash at the foot only, so the pale foot text reads on the foliage */
.opener::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(to top, rgba(10, 24, 30, 0.82), rgba(10, 24, 30, 0.5) 55%, rgba(10, 24, 30, 0)); pointer-events: none; }
.opener-top, .opener-foot { position: relative; z-index: 1; }
/* The name: real text over the pale sky, on a soft paper glow so it can never blend into the picture */
.opener-top { text-align: center; margin-top: 9vh; padding: 28px 36px 24px; max-width: 100%; background: radial-gradient(closest-side, color-mix(in srgb, var(--opener-paper) 88%, transparent) 55%, color-mix(in srgb, var(--opener-paper) 0%, transparent)); animation: openerIn 1500ms cubic-bezier(.2, .7, .2, 1) 350ms both; }
@keyframes openerIn { from { opacity: 0; filter: blur(7px); transform: translateY(8px); } to { opacity: 1; filter: blur(0); transform: none; } }
.opener-brand { display: block; font-family: var(--font-head); font-weight: 600; font-size: clamp(60px, 19vw, 110px); letter-spacing: -0.01em; line-height: 1; color: var(--opener-ink); }
.opener-pre { display: block; margin-bottom: 8px; font-family: var(--font-body); font-weight: 600; font-size: clamp(15px, 4.4vw, 21px); letter-spacing: 0.22em; line-height: 1; color: var(--opener-teal); text-transform: uppercase; }
.opener-strap { display: block; margin-top: 14px; color: var(--opener-slate); font-size: 18px; letter-spacing: 0.01em; }
.opener-foot { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); text-align: center; }
.opener-skip { color: #FFFFFF; min-height: var(--tap); padding: 0 var(--s-4); font-size: 17px; margin-bottom: var(--s-2); }
/* The company credit: the line-art mark on a small paper chip, with the company's name beside it */
.opener-co { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 10px; border-radius: 999px; background: var(--opener-paper); color: var(--opener-ink); }
.opener-co img { height: 30px; width: auto; display: block; }
.opener-made { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.opener-legal { color: rgba(255, 255, 255, 0.86); font-size: 12px; letter-spacing: 0.02em; margin-top: var(--s-1); }
.opener-version { color: rgba(255, 255, 255, 0.86); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: var(--s-1); }
@media (prefers-reduced-motion: reduce) { .opener-top { animation: none; } }
/* Bowels sheet (since v91): the Bristol chart as a list of seven rows, one tap each */
.bristol { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-2) 0 var(--s-4); }
.bristol-row {
  display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: var(--s-3);
  min-height: 56px; padding: var(--s-2) var(--s-3); text-align: left;
  border: 2px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface); color: var(--text-primary);
  font: inherit; cursor: pointer;
}
.bristol-row:active { transform: translateY(1px); }
.bristol-row.is-on { border-color: var(--teal); background: var(--teal-light); }
.bristol-row.is-on .bristol-name { color: var(--teal); }
.bristol-art { width: 64px; height: 32px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--text-secondary); }
.bristol-row.is-on .bristol-art { color: var(--teal); }
.bristol-name { display: block; font-weight: 600; }
.bristol-hint { display: block; color: var(--text-secondary); font-size: var(--fs-sm); }
.btn-plain { margin-top: var(--s-3); }

/* Log a dose from Today (since v92): one row per medicine, tap to log now */
.doserows { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); }
.doserow { justify-content: space-between; }
.doserow .pill { flex: none; }

/* Given in hospital (since v97): a calm teal pill, and a teal bar on the timeline */
/* The entry view: one reading per line, label then value */
.readings { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-3); align-items: baseline; }
.readings dt { color: var(--text-secondary); }
.readings dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 500; }
.readings dd.lvl-amber { color: var(--warning); }
.readings dd.lvl-red { color: var(--danger); }
.pill-hosp.med-hosp { display: inline-block; margin: var(--s-1) 0; }
.pill-hosp { background: var(--teal-light); color: var(--teal-dark); margin-left: var(--s-2); vertical-align: middle; }
.entry.type-med.is-hospital { --cat: var(--teal); }
.hosprow { padding: var(--s-4); }
.hosprow-name { margin: 0 0 var(--s-2); font-weight: 600; font-size: 19px; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.hosprow .muted { margin: 0; }
#meds-hospital-add { margin-top: var(--s-3); }
.hosprow-name .pill-hosp { margin-left: 0; }

/* The kg | st and lb switch (since v96): on the Weight chart and beside the weight box in Vitals */
.unitswitch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-2) 0 var(--s-3); }
.unitswitch-row .fieldlabel { margin: 0; }
.unitswitch { flex: 0 0 auto; }
.unitswitch .seg { flex: 0 0 auto; padding: 0 var(--s-4); white-space: nowrap; }

/* Privacy, terms and About (since v90), in the sheet */
.legal h3 { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-lg); letter-spacing: -0.01em; color: var(--text-primary); margin: var(--s-5) 0 var(--s-1); }
.legal p, .legal li { font-size: var(--fs-md); line-height: 1.5; }
.legal p { margin: 0 0 var(--s-3); }
.legal ul { margin: 0 0 var(--s-3); padding-left: 20px; }
.legal li { margin-bottom: var(--s-2); }
.legal-date { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0 0 var(--s-3); }
.legal .strapline { margin-top: 0; }
.legal-links { margin-top: var(--s-3); }
.legal-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 var(--s-5); margin: var(--s-2) 0 0; }
.legal-link { font-size: var(--fs-md); }
.btn-inline { background: none; border: 0; padding: 0; font: inherit; color: var(--teal); font-weight: 600; text-decoration: underline; cursor: pointer; }
.madeby { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border-subtle); color: var(--text-secondary); }
.madeby img { width: 88px; height: auto; border-radius: var(--r-sm); background: var(--opener-bg); flex: none; }

/* ---------- Recorded answers ---------- */
.answer-q { font-weight: 600; margin: 0 0 var(--s-2); line-height: 1.35; }
.recbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 64px; margin: var(--s-3) 0 var(--s-2); border: 2px solid var(--warm); border-radius: var(--r-lg); background: var(--warm-light); color: var(--warm-dark); font-weight: 700; font-size: 19px; cursor: pointer; transition: background var(--t-base) ease, color var(--t-base) ease; }
.recbtn .icon { width: 26px; height: 26px; }
.recbtn.is-recording { background: var(--warm); color: var(--surface); border-color: var(--warm); }
.recbtn.is-recording .icon { animation: rec-pulse 1.2s ease-in-out infinite; }
.rec-time { font-size: 16px; letter-spacing: 0.06em; }
.consent { background: var(--warm-light); border-radius: var(--r-md); padding: var(--s-4); margin: var(--s-3) 0 var(--s-2); }
.consent-q { font-weight: 700; font-size: 19px; margin: 0; }
.consent .btnrow { margin-top: var(--s-3); }
.rec-status { min-height: 1.4em; }
.reclist { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.recrow { background: var(--surface-sunken); border-radius: var(--r-md); padding: var(--s-3) 14px; }
.recrow-title { font-weight: 600; margin-bottom: var(--s-2); }
.recrow-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.recrow-btns .btn { margin-top: 0; }
.rec-player audio { width: 100%; margin-top: var(--s-2); }
.rec-none { margin: var(--s-2) 0; }
.question-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-2); }
.question-btns .btn { margin-top: 0; }
.question.is-answered { background: var(--surface-sunken); box-shadow: var(--elev-sunken); }
.answer-text { margin: var(--s-2) 0 0; white-space: pre-wrap; }
@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .recbtn.is-recording .icon { animation: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .recbtn { color: var(--warm); } }
:root[data-theme="dark"] .recbtn { color: var(--warm); }

/* ---------- Exercise programme, physio plan, Apple Health workouts ---------- */
.goal-main { display: flex; flex-direction: column; min-width: 0; }
.goal-note { font-size: 14px; color: var(--text-secondary); font-weight: 400; }
.goal-health { font-size: 14px; color: var(--text-secondary); font-weight: 400; }
.goal.is-done .goal-health { color: var(--success); }
.workout-counts { font-size: 15px; color: var(--success); font-weight: 600; margin-left: auto; }
.hint-small { font-size: 15px; margin-top: calc(-1 * var(--s-1)); }
.ex-not-today { margin: var(--s-2) 0 0; font-size: 15px; }
#ex-physio-section { margin-top: var(--s-6); }
#ex-physio-section > .section-title:first-child { margin-top: 0; }
.workouts { display: flex; flex-direction: column; gap: var(--s-2); }
.workout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); background: var(--surface-sunken); border-radius: var(--r-md); padding: var(--s-3) 14px; }
.workout-main { flex: 1 1 180px; min-width: 0; }
.workout-name { font-weight: 600; }
.workout-sub { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-muted); letter-spacing: 0.02em; }
.workout .btn { margin-top: 0; flex: none; margin-left: auto; }
.proglist { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.progrow { display: flex; flex-direction: column; gap: var(--s-2); background: var(--surface-sunken); border-radius: var(--r-md); padding: var(--s-3) 14px var(--s-2); }
.progrow-main { min-width: 0; }
.progrow-name { font-weight: 600; }
.progrow-sub { font-size: 14px; color: var(--text-secondary); }
.progrow-btns { display: flex; align-items: center; gap: var(--s-2); }
.progrow-btns .iconbtn { flex: none; }
.progrow-btns .btn { margin-top: 0; flex: none; }
.progrow-btns .btn-link { margin-left: auto; }
.prog-section { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin: var(--s-4) 0 var(--s-1); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); }
.review-row { display: flex; align-items: flex-start; gap: var(--s-3); background: var(--surface-sunken); border-radius: var(--r-md); padding: var(--s-3) 14px; }
.review-row input[type="checkbox"] { width: 26px; height: 26px; flex: none; margin-top: 2px; accent-color: var(--teal); }
body.is-readonly .workout .btn { display: none; }

/* ---------- Suggested questions (Explain in Daybook) ---------- */
.suggested { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.suggest-row { display: flex; align-items: center; gap: var(--s-3); background: var(--surface-sunken); border-radius: var(--r-md); padding: var(--s-3) 14px; }
.suggest-text { flex: 1; min-width: 0; margin: 0; line-height: 1.35; }
.suggest-row .btn { margin-top: 0; flex: none; min-width: 84px; }
.suggest-row .btn.is-added { color: var(--success); border-color: transparent; display: inline-flex; align-items: center; gap: 4px; justify-content: center; }
.suggest-row .btn.is-added .icon { width: 18px; height: 18px; }
.suggest-raw { white-space: pre-wrap; margin: var(--s-3) 0 0; line-height: 1.4; }

/* ---------- Chemo: the cycle and the carer's view ---------- */
.tiles-1 { grid-template-columns: 1fr; }
#chemo-cycle-section .section-title, #chemo-docs-section .section-title { margin-top: var(--s-6); } /* first children of their own wrappers, like the Meds documents section */
#chemo-cycle-section .status { margin-top: var(--s-2); }
#cycle-tile .tile-sub { white-space: normal; overflow: visible; text-overflow: clip; } /* "after the session on 25 Sep, next in 12 days" may take two lines */
#vt-weight-sub, #mood-tiles .tile-sub, #pain-tiles .tile-sub { white-space: normal; overflow: visible; text-overflow: clip; } /* "today 07:30, BMI 24.8" (v126) may take two lines on a small phone */
#carer-card { margin-top: var(--s-3); }
/* Six measure chips in two rows of three: a grid, not a wrapped pill, so the track is a rounded
   box the chips actually fit in (v79) */
.segmented-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; border-radius: var(--r-md); padding: 4px; }
.segmented-wrap .seg { min-width: 0; padding: 0 4px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 359px) { .segmented-wrap .seg { font-size: 15px; padding: 0 2px; letter-spacing: -0.01em; } }
.cycle-note { margin: var(--s-3) 0 var(--s-2); color: var(--text-primary); font-size: 17px; line-height: 1.4; }

/* ---------- Exercise ---------- */
.goals { display: flex; flex-direction: column; gap: var(--s-2); }
/* every programme row: the tick button, then a side column of the same width (the reps or time pill, a Timer pill under it when timed) so the rows line up (v84) */
/* the exercise card and its side card share one raised look */
.goal, .goal-side { background: var(--grad-raised); border-radius: var(--r-md); box-shadow: var(--elev-raised); }
/* two columns, both the full row height; these cards never expand, so stretch is right (switch to align-items: start if a side card ever becomes expandable) */
.goal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: var(--s-2); align-items: stretch; }
.goal-wrap .goal { min-width: 0; }
.goal-side { display: grid; gap: 6px; align-content: center; justify-items: center; padding: var(--s-2); min-width: 0; }
.goal-side .pill-target { display: block; margin: 0; max-width: 100%; text-align: center; background: none; box-shadow: none; padding: 0 2px; color: var(--text-secondary); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.timerbtn { width: 100%; min-height: 44px; border-radius: 999px; padding: 0 8px; font-size: 15px; }
.exgroup-title { margin: var(--s-4) 0 0; font-family: var(--font-head); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; color: var(--text-secondary); }
.exrow { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-3); align-items: start; background: var(--grad-raised); border-radius: var(--r-md); box-shadow: var(--elev-raised); padding: var(--s-3) 14px; cursor: pointer; }
.exrow:has(input:checked) { box-shadow: var(--elev-raised), inset 0 0 0 2px var(--teal); }
.exrow-box { display: flex; align-items: center; min-height: 28px; padding-top: 2px; }
.exrow-box input { width: 26px; height: 26px; margin: 0; accent-color: var(--teal); }
.exrow-main .extags { margin-top: 4px; }
/* swipe a Gentle exercises row left to reveal Remove */
.swipe { position: relative; overflow: hidden; border-radius: var(--r-md); }
.swipe > .goal-wrap { position: relative; z-index: 1; background: var(--bg); transition: transform var(--t-base) ease; }
.swipe-remove { position: absolute; top: 0; right: 0; bottom: 0; width: 96px; border: 0; border-radius: var(--r-md); background: var(--danger); color: var(--danger-ink); font: 700 16px var(--font-body); cursor: pointer; opacity: 0; transition: opacity var(--t-base); }
.swipe.is-open .swipe-remove, .swipe.is-dragging .swipe-remove { opacity: 1; }
.swipe:not(.is-open) .swipe-remove { pointer-events: none; }
#ex-pick { margin-top: var(--s-5); }
#ex-stretch-section .section-title { margin-top: var(--s-6); } /* first child of its own wrapper, like the Meds documents section, so the first-child rule would otherwise remove the gap after Choose exercises */
.exown { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.exown-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); }
.exown-row input { min-height: 48px; }
/* the gentle exercises picker (v83) */
.exwarn { border: 2px solid var(--warn-border); background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--r-md); padding: var(--s-4); display: grid; gap: var(--s-2); font-size: 17px; }
.exwarn p, .exwarn ul { margin: 0; }
.exwarn ul { padding-left: 22px; }
.exwarn-head { display: flex; align-items: center; gap: var(--s-2); }
.exwarn-icon { width: 26px; height: 26px; flex: none; }
.exwarn-title { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; }
.exfilter { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.exfilter-title { margin: 0; font-size: 17px; font-weight: 700; }
.exfilter-ticks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.exfilter-check { min-height: 48px; display: flex; align-items: center; gap: var(--s-2); }
.exhidden { margin: 0; font-size: 15px; color: var(--text-secondary); }
.extags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.extag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.5; white-space: nowrap; }
.extag.is-arms { background: var(--tag-arms); color: var(--tag-arms-ink); }
.extag.is-legs { background: var(--tag-legs); color: var(--tag-legs-ink); }
.extag.is-spine { background: var(--tag-spine); color: var(--tag-spine-ink); }
.extag.is-stand { background: var(--tag-stand); color: var(--tag-stand-ink); }
.extag.is-none, .extag.is-starter { background: var(--surface-sunken); color: var(--text-secondary); }
.extag.is-starter { margin-left: 6px; }
.expicker { display: grid; gap: var(--s-3); }
.expicker .field { margin-top: var(--s-2); }
.exlist { display: grid; gap: var(--s-2); }
.exrow-main { display: grid; gap: 2px; min-width: 0; }
.exrow-name { font-weight: 700; font-size: 17px; }
.exrow-how { color: var(--text-secondary); font-size: 15px; }
.exrow-target { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--text-secondary); }
.exempty { margin: var(--s-2) 0; }
.exlog { display: grid; gap: 6px; margin-top: var(--s-2); }
.exlog-row { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-2); align-items: baseline; font-size: 16px; }
.exlog-time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.exlog-who { color: var(--text-muted); font-size: 14px; }
.eyebrow-hint { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.wiz-signpost { margin: var(--s-3) 0 0; padding: var(--s-3); background: var(--surface-sunken); border-radius: var(--r-sm); color: var(--text-secondary); font-size: 15px; }
.about-sub { margin: var(--s-4) 0 var(--s-1); font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.about-list { margin: 0 0 var(--s-2); padding-left: 20px; }
/* the countdown sheet (v81) */
.timer { display: grid; gap: var(--s-4); justify-items: center; text-align: center; }
.timer-note { margin: 0; color: var(--text-secondary); max-width: 34ch; }
.timer-face { position: relative; width: min(72vw, 260px); aspect-ratio: 1; }
.timer-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--teal) calc(var(--p, 0) * 1%), var(--surface-sunken) 0); }
.timer-clock { position: absolute; inset: 16px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-family: var(--font-mono); font-size: clamp(40px, 12vw, 56px); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-primary); box-shadow: var(--elev-sunken); }
.timer-face.is-lead .timer-ring { background: var(--warm); }
.timer-face.is-done .timer-ring { background: var(--success); }
.timer-face.is-done .timer-clock { color: var(--success); }
.timer-state { margin: 0; font-weight: 700; font-size: 19px; min-height: 28px; }
.timer-state.is-done { color: var(--success); }
.timer-controls { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; width: 100%; }
.timer-controls .btn { flex: 1 1 140px; }
.timer-hint { margin: 0; font-size: 14px; color: var(--text-muted); max-width: 40ch; }
.goal {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: left;
  border: 0; padding: var(--s-3) 14px; min-height: 64px; cursor: pointer; color: var(--text-primary);
  transition: transform var(--t-fast) ease, box-shadow var(--t-base) ease;
}
.goal:active { transform: translateY(1px); box-shadow: var(--elev-raised-pressed); }
.goal-box { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--border-subtle); display: inline-flex; align-items: center; justify-content: center; color: var(--surface); font-weight: 700; flex: none; transition: background var(--t-slow) ease, border-color var(--t-slow) ease; }
.goal.is-done .goal-box { background: var(--success); border-color: var(--success); }
.goal-box .icon { width: 18px; height: 18px; stroke-width: 2.6; }
.docitem .pill .icon { width: 16px; height: 16px; stroke-width: 2.6; }
.goal-label { font-weight: 600; font-size: 18px; transition: color var(--t-base) ease; }
.goal.is-done .goal-label { text-decoration: line-through; color: var(--text-secondary); }
.goal-target { margin-left: auto; color: var(--text-muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; letter-spacing: 0.02em; white-space: nowrap; }
#ex-streak-tile.is-green .tile-value { color: var(--success); }

/* ---------- Confetti ---------- */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }

/* ---------- Reduced motion: nothing moves, everything still changes state ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .view.is-entering > *, .entry.is-new, .docitem.is-new { animation: none !important; opacity: 1; transform: none; }
  .tab-indicator { transition: none; }
}

/* Charts in the Notes for the team PDF (v111) */

/* Send to the team (v112) */
.sendto { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-3); row-gap: 2px; align-items: baseline; padding: var(--s-3) 14px; margin-bottom: var(--s-3); border-radius: var(--r-md); background: var(--surface-sunken); box-shadow: var(--elev-sunken); }
.sendto-label { grid-row: span 3; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.sendto-name { font-weight: 600; min-width: 0; }
.sendto-email { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); overflow-wrap: anywhere; min-width: 0; }
.sendto-copy { justify-self: start; min-height: 44px; }
.sendpdf { margin: var(--s-2) 0; }

/* Recording the whole appointment (v113) */
.recbtn-appt { margin-top: var(--s-2); }
.apptq { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-3) 0; }
.apptq-row { display: flex; align-items: flex-start; gap: var(--s-3); width: 100%; min-height: 56px; padding: var(--s-2) 14px; text-align: left; border: 2px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface); color: var(--text-primary); font-size: 17px; cursor: pointer; }
.apptq-row:disabled { cursor: default; opacity: .75; }
.apptq-row.is-marked { border-color: var(--teal); background: var(--teal-light); }
/* The question's team as a small pill (v133; a number until then), on the report cards, the appointment rows and the answer sheet */
.q-team { min-height: 24px; padding: 0 9px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; background: var(--teal-light); color: var(--teal-dark); vertical-align: middle; margin-right: 4px; }
.apptq-row .q-team { display: inline-flex; margin: 0 0 4px; }
.apptq-text { display: block; }
.markchip-q { font-family: var(--font-body); font-weight: 600; }
.apptq-main { flex: 1; min-width: 0; }
.apptq-mark { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--text-secondary); margin-top: 2px; }
.apptq-row.is-marked .apptq-mark { color: var(--teal); }
.markchips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-1) 0 var(--s-2); }
.markchip { min-height: 44px; padding: 0 14px; border-radius: var(--r-sm); border: 1.5px solid var(--teal); background: transparent; color: var(--teal); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; cursor: pointer; }

/* Notes for the team: talking points with the detail one tap away (v114) */
.flag-short { display: block; }
.flag-more { margin-top: var(--s-1); color: var(--text-secondary); font-size: 15px; }
.flag-more summary { cursor: pointer; color: var(--teal); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.answered-line { margin-top: var(--s-2); }
.answered-line .muted { margin: 0; }

/* Notes for the team in weekly blocks (v115) */
.weekpoints { margin: var(--s-2) 0 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--s-1); }
.weekmore { margin: var(--s-2) 0 0; }

/* The two-page Notes for the team (v117): fitted in a frame off screen, never seen there */
.report-frame { position: fixed; left: -12000px; top: 0; width: 820px; height: 1200px; border: 0; pointer-events: none; }
.weektheme { font-weight: 600; margin: 0 0 var(--s-2); }
.weekpoints li.is-alert b { color: var(--danger); }

/* Colour-coded actions and report cards (v118): one tint per kind of action, the same on every
   report screen, so nothing that can be tapped is plain grey. Every pair is 4.5:1 or better:
   teal 6.0, green 5.3, warm 5.0, plum 8.7, blue 7.6 in light; 6.0, 6.4, 6.7, 9.4, 8.3 in dark. */
.tint-teal { background: var(--teal-light); color: var(--teal); }
.tint-green { background: var(--success-light); color: var(--success); }
.tint-warm { background: var(--warm-light); color: var(--warm-dark); }
.tint-plum { background: var(--tag-spine); color: var(--tag-spine-ink); }
.tint-blue { background: var(--tag-arms); color: var(--tag-arms-ink); }
.btn-tint { border-color: transparent; font-weight: 600; box-shadow: var(--elev-raised); }
.btn-tint:active { box-shadow: var(--elev-raised-pressed); transform: translateY(1px); }
.btn .icon { width: 22px; height: 22px; flex: none; }
.btn-small .icon { width: 18px; height: 18px; }
/* Reports: Notes for the team as the feature card, the Food diary and Documents under it */
.report.report-feature { flex-direction: row; justify-content: flex-start; text-align: left; gap: var(--s-3); padding: var(--s-4); min-height: 88px; width: 100%; margin-bottom: var(--s-2); box-shadow: var(--elev-raised); }
.report-feature .report-icon { width: 34px; height: 34px; flex: none; }
.report-feature .report-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.report-feature .report-name { font-size: 19px; font-weight: 700; }
.report-go { width: 22px; height: 22px; flex: none; }
.reports.reports-2 { grid-template-columns: 1fr 1fr; }
.report .report-name { font-weight: 700; }
.report .report-sub { font-size: 16px; font-weight: 500; line-height: 1.25; }
.report.tint-teal, .report.tint-green, .report.tint-plum { box-shadow: var(--elev-raised); }
.report:active { box-shadow: var(--elev-raised-pressed); transform: translateY(1px); }
.trends-hint { margin-top: calc(-1 * var(--s-2)); }
.btnrow .btn-tint { padding-left: var(--s-3); padding-right: var(--s-3); }

/* The report viewer (v120): the two pages inside Daybook, scaled to the sheet */
.viewer-frame { display: block; width: 100%; border: 0; border-radius: var(--r-sm); background: var(--surface-sunken); margin-top: var(--s-3); }
.viewer-btns { margin-top: 0; }

/* ---------- The report look (v122) ----------
   Mark chose Direction D on the brand board: the look of the two-page reports carried into the app.
   A warm white page, Fraunces headings and Inter text, and colour that carries meaning: each reading
   in its own soft panel with a stripe along the top (green steady, amber worth a mention, red to
   raise, a quiet line otherwise), and each quick-add button marked with its category's colour. */
.status { background: transparent; box-shadow: none; padding: 0; }
.status .tiles { gap: var(--s-2); }
.status .tile { background: var(--surface-2); border-top: 4px solid var(--border-subtle); border-radius: var(--r-sm); padding: var(--s-2) 10px 10px; }
.status .tile + .tile { border-left: 0; }
.status .tile.is-green { background: var(--success-light); border-top-color: var(--success-fill); }
.status .tile.is-amber { background: var(--warning-light); border-top-color: var(--warning-fill); }
.status .tile.is-red { background: var(--danger-light); border-top-color: var(--danger-fill); }
.status .tile.is-green .tile-value { color: var(--success); }
.nutri-grid { gap: var(--s-2); }
.nutri-cell { background: var(--surface-2); border-top: 4px solid var(--teal-fill); border-radius: var(--r-sm); padding: var(--s-2) 8px 8px; }
.nutri-cell.is-zero { border-top-color: var(--border-subtle); }
/* Quick add: a short stripe and the icon in the category's own colour */
.qa { position: relative; --qa-c: var(--teal); }
.qa::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: var(--qa-c); }
.qa .qa-icon { color: var(--qa-c); }
.qa[data-add="vitals"] { --qa-c: var(--cat-vitals); }
.qa[data-add="pain"] { --qa-c: var(--warm); }
.qa[data-add="drink"] { --qa-c: var(--cat-drink); }
.qa[data-add="food"] { --qa-c: var(--cat-food); }
.qa[data-add="note"] { --qa-c: var(--teal); }
.qa[data-add="sleep"] { --qa-c: var(--cat-sleep); }
.qa[data-add="bowel"] { --qa-c: var(--cat-bowel); }
.qa[data-add="symptom"] { --qa-c: var(--cat-symptom); }
.qa[data-add="medicine"] { --qa-c: var(--teal-fill); }
/* The plain reading tiles take the report's soft teal, so no tile is grey */
.status .tile { background: var(--teal-light); border-top-color: var(--teal-fill); }
/* Headings in the report's serif read best a touch tighter and in ink */
h1, h2, h3 { font-weight: 600; }
.section-title { margin: var(--s-6) 0 var(--s-3); }
.chart-card .section-title { margin: 0; }

/* Weight once a day in the Vitals sheet (v127): the day's weight as a sunken line with Change it */
.weightdone { background: var(--surface-sunken); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); margin: var(--s-3) 0; display: grid; gap: var(--s-2); justify-items: start; }
.weightdone .fieldlabel { margin: 0; }
.weightdone-text { margin: 0; color: var(--text-primary); }

/* Unsaved words put back (v136): one line above the box, with Clear them */
.draftnote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin: 0 0 var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--teal-light); color: var(--text-primary); font-size: 16px; }
.draftnote .btn-inline { min-height: 44px; }

/* ---------- Finished courses and the medicine history (v141) ---------- */
.pill-muted { background: var(--surface-sunken); color: var(--text-secondary); }
.meds-top { margin-top: 0; }
.meds-top .btn { min-width: 0; }
.medhist-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.medhist-head p { margin: 0; }
.medhist-dose { font-weight: 600; }
.medhist-sum { font-weight: 600; margin: var(--s-4) 0 var(--s-2); }
.medhist-list { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.medhist-day { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); padding: var(--s-3); background: var(--surface-sunken); border-radius: var(--r-sm); }
.medhist-date { font-weight: 600; min-width: 0; }
.medhist-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.medhist-times { grid-column: 1 / -1; color: var(--text-secondary); overflow-wrap: anywhere; }
.medhist-row .pill { flex-shrink: 0; }
.medhist-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: var(--s-2) 0 var(--s-3); }
.medhist-actions .btn { margin-top: 0; min-width: 0; }

/* ---------- Condition packs and the IBD questions (v145) ---------- */
.pack-row + .pack-row { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border-subtle); }
.pack-row .hint { margin-top: 0; }
.ibd-setup { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-sm); background: var(--surface-sunken); box-shadow: var(--elev-sunken); display: flex; flex-direction: column; gap: var(--s-2); }
.ibd-setup .fieldlabel { margin: var(--s-2) 0 0; }
.ticklist { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.ticklist .tickrow { font-weight: 500; margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--surface-sunken); line-height: 1.35; }
.ticklist .tickrow input { flex: none; }

/* ---------- Tell Mark what you think (v153, the Beta feedback) ---------- */
.feedback-row { background: var(--surface); box-shadow: var(--elev-raised); border-left: 6px solid var(--warm); margin-bottom: var(--s-4); }
.feedback-row .checkin-icon { color: var(--warm); }
.feedback-row:active { transform: translateY(1px); box-shadow: var(--elev-flat); }
.fb { display: grid; gap: var(--s-4); }
.fb-survey { background: var(--surface-sunken); border-radius: var(--r-md); padding: var(--s-4); display: grid; gap: var(--s-4); }
.fb-survey h3 { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 20px; }
.fb-q { display: grid; gap: var(--s-2); }
.fb-q > span { font-weight: 600; }
.fb-q .chips { margin: 0; }
.fb-shot { display: flex; align-items: center; gap: var(--s-3); }
.fb-shot img { width: 96px; height: auto; border-radius: var(--r-sm); border: 1px solid var(--border-subtle); }
.fb-sent { list-style: none; margin: 0; padding: 0; }
.fb-sent li { padding: var(--s-2) 0; border-top: 1px solid var(--border-subtle); font-size: 16px; color: var(--text-secondary); }
.fb-sent li b { color: var(--text-primary); font-weight: 600; }
.fb-contact a { color: var(--teal-dark); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
@media (prefers-color-scheme: dark) { .fb-contact a { color: var(--teal); } }

/* ---------- Mood and wellbeing (v155) ---------- */
.reports-group { font-family: var(--font-body); font-size: var(--fs-sm, 14px); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); margin: var(--s-5) 0 var(--s-2); }
.reports-group:first-of-type { margin-top: var(--s-2); }
.reports + .reports-group { margin-top: var(--s-5); }
.report.tint-warm { box-shadow: var(--elev-raised); }
.wordlist { display: grid; gap: var(--s-2); }
.wordrow { display: grid; grid-template-columns: 92px 1fr; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--border-subtle); font-size: 17px; }
.wordrow .wd { color: var(--text-secondary); font-size: 15px; padding-top: 2px; }
.wordrow .ws { font-weight: 600; margin-right: var(--s-2); }
.wordrow .ws.is-low { color: var(--warning-ink, var(--warning)); }
.wordrow .wt { white-space: pre-wrap; }
.wordrow .wt small { display: block; color: var(--text-secondary); font-size: 15px; }

/* ---------- Wellbeing taps and Your week (v156) ---------- */
.taps-row { margin: 0 0 var(--s-4); }
.taps-label { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.taps-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.taps-chips .preset { min-width: 0; text-align: center; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
.weekcheck .pack-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s-4); }
.weekfield { margin: 0 0 var(--s-4); }
.weekfield textarea { width: 100%; min-height: 64px; }
.wk-carer { font-style: italic; }
.brief-box { width: 100%; min-height: 220px; }
.mood-brief-note { font-size: 15px; color: var(--text-muted); margin: 6px 0 0; }
.wkcard { margin: 0 0 var(--s-3); }
.wkcard .wk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 600; }
.wkcard .wk-dots { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0; font-size: 15px; color: var(--text-secondary); }
.wkcard .wk-dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--border-subtle); margin-right: 2px; vertical-align: middle; }
.wkcard .wk-dots i.on { background: var(--teal); }
.wkcard .wk-dots i.warm { background: var(--warm); }
.wkcard .wk-sentence { margin: 4px 0 0; }
.wkcard .wk-sub { font-size: 15px; color: var(--text-secondary); margin: 4px 0 0; }
/* The Pain report screen (v161) */
.todcard { display: flex; flex-direction: column; gap: var(--s-3); }
.todrow { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; font-size: 17px; }
.tod-bar { height: 12px; background: var(--surface-sunken); border-radius: 6px; overflow: hidden; }
.tod-bar i { display: block; height: 100%; background: var(--teal); border-radius: 6px; }
.tod-v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--text-secondary); white-space: nowrap; }
.reliefcard, .wordcard { margin: 0 0 var(--s-3); }
.wordcard .word-when { display: block; font-size: 15px; font-weight: 600; color: var(--teal-dark); margin-bottom: 4px; }
.wordcard p { margin: 0; white-space: pre-wrap; }
@media (prefers-color-scheme: dark) { .wordcard .word-when { color: var(--teal); } }
@media (max-width: 359px) { .todrow { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- The set-up (v164) ---------- */
.setup-list { padding-left: 22px; margin: 0 0 var(--s-4); }
.setup-list li { margin-bottom: 8px; }
.setup-p { margin: 0 0 var(--s-3); }
.setup-done { display: flex; align-items: center; gap: 10px; color: var(--success); font-weight: 600; margin: 0 0 var(--s-3); }
.setup-done .icon { width: 22px; height: 22px; }
.setup-try { margin-top: var(--s-3); }
body.is-readonly #more-setup, body.is-readonly .settings-setup-hint { display: none; }

/* ---------- The Guide (v167): walk-throughs of the real screens, and the Tap to speak hint ---------- */
.guide-phone { position: relative; width: min(100%, 330px); margin: var(--s-3) auto 0; aspect-ratio: 390 / 844; border-radius: 22px; overflow: hidden; background: var(--surface-sunken); box-shadow: var(--elev-raised); border: 1px solid var(--border-subtle); }
.guide-phone img { display: block; width: 100%; height: 100%; object-fit: cover; }
.guide-tap { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 3px solid var(--warm); box-shadow: 0 0 0 4px rgba(194, 112, 61, 0.28); pointer-events: none; animation: guide-pulse 1.2s ease-out infinite; }
@keyframes guide-pulse { 0% { transform: scale(0.7); opacity: 1; } 100% { transform: scale(1.25); opacity: 0.35; } }
.guide-cap { margin: var(--s-4) 0 0; font-size: 17px; line-height: 1.45; min-height: 3.2em; }
.guide-step { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.guide-controls { display: flex; gap: 10px; margin-top: var(--s-3); }
.guide-controls .btn { margin-top: 0; min-height: 48px; }
.guide-controls #guide-prev, .guide-controls #guide-next { flex: 0 0 64px; font-size: 26px; line-height: 1; }
.guide-controls #guide-play { flex: 1; }
.guide-words-title { font-family: var(--font-head); font-weight: 600; font-size: 19px; margin: var(--s-6) 0 var(--s-2); }
.guide-words { margin: 0; padding-left: 1.4em; font-size: 17px; line-height: 1.5; }
.guide-words li { margin-bottom: 6px; }
.guide-words li.is-current { color: var(--teal); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .guide-tap { animation: none; } }

/* Usage, the operator's dashboard (v211) */
.usage-card { margin-top: var(--s-4); }
.usage-list { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: var(--s-3) 0 0; font-size: 17px; }
.usage-list dt { color: var(--text-secondary); }
.usage-list dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.usage-bars { display: flex; align-items: flex-end; gap: 2px; height: 72px; margin-top: var(--s-3); padding: 0 2px; border-bottom: 1px solid var(--border-subtle); }
.usage-bar { flex: 1 1 0; min-width: 2px; background: var(--teal-fill); border-radius: 2px 2px 0 0; }
.usage-trend-line { margin-top: var(--s-2); font-size: 15px; }
.usage-tablewrap { overflow-x: auto; margin-top: var(--s-3); -webkit-overflow-scrolling: touch; }
.usage-table { border-collapse: collapse; font-size: 15px; min-width: 560px; width: 100%; }
.usage-table th { text-align: left; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 4px 8px 6px 0; border-bottom: 1px solid var(--border-subtle); }
.usage-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--border-subtle); vertical-align: top; font-variant-numeric: tabular-nums; }
.usage-table td.mono { font-family: var(--font-mono); }
.usage-table tr.is-quiet td { color: var(--text-muted); }
#view-usage .status .tile-sub { white-space: normal; overflow: visible; }
.speakhint { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: var(--text-muted); }

/* An edit of a saved check-in: Cancel with an unsaved change asks first, and one answer changed from the review comes straight back to it (v169) */
.wiz-cancelbox { margin-top: var(--s-3); }
.wiz-cancelbox .btnrow { margin-top: var(--s-2); }
.wiz-buttons.is-fromreview { justify-content: space-between; }


/* ---------- Barcode scanner on the Food sheet (v172) ---------- */
.scanwrap { margin: 0 0 var(--s-3); }
.scan-btn { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.scan-btn .icon { width: 22px; height: 22px; }
.scanbox { margin-top: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-sunken); box-shadow: var(--elev-sunken); }
.scan-view { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 46vh; overflow: hidden; border-radius: var(--r-md); background: #000; }
.scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; left: 4%; right: 4%; top: 22%; bottom: 22%; border: 3px solid #fff; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35); pointer-events: none; }
.scan-status { margin: var(--s-3) 0; min-height: 1.5em; }
.scanbox .btnrow { margin-top: var(--s-2); }
@media (prefers-reduced-motion: no-preference) { .scan-frame { animation: scan-pulse 2.2s ease-in-out infinite; } }
@keyframes scan-pulse { 50% { border-color: var(--teal-fill); } }


/* ---------- Side effects (v173) ---------- */
.med-side { margin-top: var(--s-2); text-align: left; }
.med-sidefx { min-height: 44px; padding-left: 0; }
body.is-readonly .med-side, body.is-viewer .med-side, body.is-readonly #sidefx-add { display: none; }
.sidefx-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.sidefx-inner { display: grid; gap: 2px; width: 100%; text-align: left; padding: var(--s-2) var(--s-3); border: 1.5px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--surface); color: var(--text-primary); font: inherit; min-height: 44px; }
button.sidefx-inner { cursor: pointer; }
.sidefx-what { font-weight: 700; }
.sidefx-meta, .sidefx-note { color: var(--text-secondary); font-size: 15px; overflow-wrap: anywhere; }
.sidefx-title { margin: var(--s-4) 0 var(--s-2); font-size: 18px; }
.medhist-fx { margin-bottom: var(--s-3); }
#side-cause { width: 100%; }
.reports-2 > :only-child { grid-column: 1 / -1; }
.question-btns .btn-danger-link { color: var(--danger); }
.question-confirm { flex: 1 1 100%; font-weight: 600; color: var(--text-primary); }
.sym-remove { margin-top: var(--s-2); }
.sym-remove-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--border-subtle); }
.sym-remove-row .btn { min-height: 44px; margin: 0; }

/* Planned treatment days: a bright comet of light racing round the day's border with a pulsing glow (the forge-laser idea from the Forge app, in Daybook's colours). Done days go calm and green. */
@property --calAngle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes calTrace { to { --calAngle: 360deg; } }
@keyframes calGlow { 0%, 100% { box-shadow: inset 0 0 0 2px var(--warm), 0 0 6px 0 var(--warm); } 50% { box-shadow: inset 0 0 0 2px var(--warm), 0 0 16px 3px var(--warm); } }
.cal-cell.is-chemo:not(.is-done) { animation: calGlow 2s ease-in-out infinite; }
.cal-cell.is-chemo:not(.is-done)::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-sm); padding: 4px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--calAngle, 0deg), #fff 0deg, #FFD36B 10deg, var(--warm) 30deg, rgba(194, 112, 61, 0.55) 80deg, rgba(194, 112, 61, 0) 150deg, rgba(194, 112, 61, 0) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  animation: calTrace 1.8s linear infinite; animation-delay: var(--laser-delay, 0s);
}
/* Completed sessions: filled gold with a gold laser */
@keyframes calGlowGold { 0%, 100% { box-shadow: inset 0 0 0 2px #E0A030, 0 0 6px 0 rgba(224, 160, 48, 0.7); } 50% { box-shadow: inset 0 0 0 2px #E0A030, 0 0 16px 3px rgba(224, 160, 48, 0.9); } }
.cal-cell.is-chemo.is-done { animation: calGlowGold 2.4s ease-in-out infinite; }
.cal-cell.is-chemo.is-done::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-sm); padding: 4px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--calAngle, 0deg), #fff 0deg, #FFF3B0 10deg, #FFD23F 30deg, rgba(240, 180, 40, 0.6) 80deg, rgba(240, 180, 40, 0) 150deg, rgba(240, 180, 40, 0) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  animation: calTrace 1.8s linear infinite; animation-delay: var(--laser-delay, 0s);
}
.key-gold { background: linear-gradient(160deg, #FFE08A, #F2B83A); border: 1px solid #E0A030; }
@media (prefers-reduced-motion: reduce) {
  .cal-cell.is-chemo.is-done { animation: none; box-shadow: inset 0 0 0 3px #E0A030; }
  .cal-cell.is-chemo.is-done::before { animation: none; background: none; }
  .cal-cell.is-chemo:not(.is-done) { animation: none; box-shadow: inset 0 0 0 3px var(--warm); }
  .cal-cell.is-chemo:not(.is-done)::before { animation: none; background: none; }
}
.key-next { background: var(--teal-light); border: 2px solid var(--warm); box-shadow: 0 0 5px var(--warm); }

/* Bigger writing boxes (v184): taller to start with, growing as you type, and a full-screen writing space */
#sheet-body textarea { min-height: 9em; max-height: 50vh; overflow-y: auto; }
.bigedit-open { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: var(--s-1) 0 var(--s-2); }
.bigedit-open .icon { width: 18px; height: 18px; }
.bigedit { position: fixed; inset: 0; z-index: 400; background: var(--surface); color: var(--text-primary); overflow: hidden; }
.bigedit-panel { position: absolute; left: 0; right: 0; top: 0; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--s-3); padding: calc(var(--s-3) + var(--safe-t, 0px)) var(--s-4) var(--s-3); overflow: hidden; }
.bigedit-bar { display: flex; align-items: stretch; gap: var(--s-3); flex: none; }
.bigedit-bar .speakbtn { flex: 1 1 auto; width: auto; min-height: 56px; margin: 0; }
.bigedit-gap { flex: 1 1 auto; }
.bigedit-done { flex: none; min-height: 56px; min-width: 0; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.bigedit-done .icon { width: 18px; height: 18px; }
.bigedit-title { margin: 0; flex: none; font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--text-secondary); overflow-wrap: anywhere; }
.bigedit-text { flex: 1 1 auto; width: 100%; min-height: 0; max-height: none !important; font-size: 18px; line-height: 1.55; resize: none; }
.bigedit .speakbtn { flex: none; }

/* Cycles (v189): rest days, the cycle lines under the calendar, Add sessions, and the side effects step in the check-ins */
#chemo-add-run { margin-top: var(--s-3); }
.cal-cell.is-rest { background: repeating-linear-gradient(135deg, var(--surface-sunken) 0 6px, transparent 6px 12px); color: var(--text-secondary); }
.key-rest { background: repeating-linear-gradient(135deg, var(--border-subtle) 0 3px, transparent 3px 6px); border: 1px solid var(--border-subtle); }
.cal-cycles { list-style: none; margin: var(--s-3) var(--s-1) 0; padding: 0; display: grid; gap: var(--s-1); font-size: var(--fs-sm); color: var(--text-secondary); }
.cal-cycles strong { color: var(--text-primary); }
.cyc-where { font-weight: 600; color: var(--teal); margin: 0 0 var(--s-2); }
.cyc-move { margin: var(--s-2) 0; }
.cyc-preview { margin: var(--s-3) 0; padding: var(--s-3); border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--text-primary); }
.cycle-views { margin-bottom: var(--s-2); }
.fx-row .taps-label { margin-bottom: var(--s-1); }

/* How many each time (v191): the line saying what each dose is logged as */
.med-dose-preview { margin: -6px 0 var(--s-4); font-weight: 600; color: var(--teal); overflow-wrap: anywhere; }
.med-dose-preview:empty { display: none; }

/* Fix the words from a report (v194) */
.fixwords { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-left: 0; margin-top: var(--s-1); }
.fixwords .icon { width: 18px; height: 18px; }
.wordcard .fixwords { margin-top: 0; }
.fix-where { font-weight: 600; margin: 0 0 var(--s-1); }
button.weekmore { min-height: 44px; padding-left: 0; }

/* How many this time (v195) */
.askcount .presets { margin: var(--s-2) 0 var(--s-3); }
.askcount .presets .preset { min-width: 56px; min-height: 48px; }

/* ---------- Crohn's or colitis on the Treatment tab (v204) ---------- */
.cal-type.is-long { font-size: 8px; letter-spacing: 0; right: 3px; }
.cal-cell.is-chemo .cal-type.is-long { font-size: 8.5px; }
.cal-cell.is-steroid { box-shadow: inset 0 -4px 0 var(--warning-fill); }
.key-steroid { background: var(--surface); box-shadow: inset 0 -4px 0 var(--warning-fill); border: 1px solid var(--border-subtle); }
.ibd-courses { margin: var(--s-2) var(--s-1) 0; }

/* ---------- I think I'm flaring (v205) ---------- */
.checkin-row.is-flare { background: var(--warm-light); border: 1.5px solid var(--warm); }
.checkin-row.is-flare .checkin-icon { color: var(--warm-dark); }
.flare-sheet .fieldlabel { margin-top: var(--s-5); }
.flare-plan, .flare-line, .flare-summary, .flare-calls { margin-top: var(--s-3); }
.flare-steps { white-space: pre-wrap; background: var(--surface-sunken); border-radius: var(--r-md); padding: var(--s-3); box-shadow: var(--elev-sunken); }
.flare-when { margin: var(--s-2) 0 0; }
.flare-sumline { margin: 0 0 var(--s-2); }
.flare-summary { background: var(--surface-sunken); border-radius: var(--r-md); padding: var(--s-3); box-shadow: var(--elev-sunken); }
.flare-summary .fieldlabel { margin-top: 0; }
.flare-calllist { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.flare-calllist li { padding: var(--s-2) 0; border-top: 1px solid var(--border-subtle); }
.cal-cell.is-flare { background: var(--warm-light); }
.cal-cell.is-flare .cal-num { color: var(--warm-dark); font-weight: 700; }
.key-flare { background: var(--warm-light); border: 1px solid var(--warm); }
.entry.type-call { --cat: var(--teal); }
@media (prefers-color-scheme: dark) { .checkin-row.is-flare .checkin-icon, .cal-cell.is-flare .cal-num { color: var(--warm); } }

/* ---------- The condition previews (v206) ---------- */
.preview-packs { margin-top: var(--s-3); text-align: center; }
.preview-packs .hint { margin-bottom: var(--s-2); }
.preview-packs .btn-block { margin-bottom: var(--s-2); }
.preview-packs .btn-link { min-height: var(--tap); margin-top: var(--s-1); }
.preview-packs .hint-small { margin-top: var(--s-2); }

/* ---------- Results, recorded not interpreted (v219) ---------- */
.results-actions { margin: 0 0 var(--s-4); }
body.is-readonly .results-actions { display: none; }
.res-cards { display: grid; gap: var(--s-3); align-items: start; }
.rescard { align-self: start; }
.res-latest { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin: 0 0 var(--s-2); }
.res-when { color: var(--text-secondary); font-size: 15px; }
.res-chart { margin: var(--s-2) 0; }
.res-svg { width: 100%; height: auto; display: block; }
.res-svg text { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 10px; fill: var(--text-muted); }
.res-svg .res-band { fill: var(--teal); opacity: .13; }
.res-svg .res-bandlabel { font-size: 9px; fill: var(--teal); letter-spacing: .04em; }
.res-svg .res-grid { stroke: var(--border-subtle); stroke-width: 1; }
.res-svg .res-line { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.res-svg .res-dot { fill: var(--surface); stroke: var(--teal); stroke-width: 2; }
.res-svg .res-dot.is-last { fill: var(--teal); }
.res-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--teal); font-weight: 600; }
.res-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.res-row { display: flex; gap: var(--s-3); align-items: baseline; width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-sm); background: var(--surface-sunken); box-shadow: var(--elev-sunken); color: var(--text-primary); font: inherit; text-align: left; }
button.res-row:active { transform: translateY(1px); }
.res-rowday { flex: none; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); min-width: 5.5em; }
.res-rowtext { min-width: 0; overflow-wrap: anywhere; }
.res-rows { display: grid; gap: var(--s-3); margin: 0 0 var(--s-3); }
.resrow { padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-sunken); box-shadow: var(--elev-sunken); }
.resrow .field { margin-bottom: 0; }
.resrow-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); }
.resrow-name { font-weight: 600; }
.resrow-head .btn-small { min-height: 44px; }

/* ---------- The Crohn's and colitis report screen (v220) ---------- */
.briefcard p { margin: 0 0 var(--s-2); }
.briefcard p:last-child { margin-bottom: 0; }
.stripcard p { margin: 0; }
.stripcard .card-title { margin-bottom: var(--s-1); }
.scale-chips { margin-top: var(--s-3); }

/* ---------- The watercolour behind the app (v229) ----------
   Mark: the More page "looks like a black abyss", and the sign-in's watercolour is lovely. One fixed layer behind every screen:
   icons/wash-light.jpg (the garden lifted to a pale tint) and icons/wash-dark.jpg (the same shapes as a deep teal glow). Both are baked so
   that no pixel is darker (light) or lighter (dark) than the limit at which every text colour used on the page itself keeps 4.5:1 or better
   (checked on the saved files: muted 4.74, teal 4.55, success and warning 4.6, danger 4.94 on the light; every colour 4.75 or better on the
   dark). Cards, tiles and sheets are opaque and sit on top, so only the page between them shows it. --wash is the strength: full on the
   hub pages with the most empty page, softer on the busy ones; a lower strength only moves the colours towards the plain page, never away. */
.app::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("icons/wash-light.jpg") 34% 50% / cover no-repeat;
  opacity: var(--wash, 0.7);
  transform: translateZ(0);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app::before { background-image: url("icons/wash-dark.jpg"); } }
body[data-page="more"], body[data-page="settings"], body[data-page="guide"], body[data-page="usage"], body[data-page="docs"], body[data-page="vitals"] { --wash: 1; }
/* On the hub pages the cards let a little of the painting through (about a fifth), so the page is not a few thin strips of colour between slabs of dark.
   The surface under the text is still the card colour with a capped tint behind it, so every text pair keeps its contrast (dark: card 80% over a wash no lighter than L 0.039). */
body[data-page="more"] :is(.card, .checkin-row):not(.is-due):not(.is-flare),
body[data-page="settings"] :is(.card, .checkin-row):not(.is-due):not(.is-flare),
body[data-page="guide"] :is(.card, .checkin-row):not(.is-due):not(.is-flare),
body[data-page="usage"] .card,
body[data-page="docs"] :is(.card, .checkin-row):not(.is-due) { background: color-mix(in srgb, var(--surface) 78%, transparent); }
@media print, (forced-colors: active) { .app::before { display: none; } }