/* Care Log — calm, bright, legible, mobile-first.
   Palette: warm tan ground, soft blue for actions, sage green for "done",
   tan-amber for "in progress", soft coral for problems. Every text pairing
   meets WCAG AA (4.5:1) in both themes.
   Palette is defined completely on :root (light), then re-tokened for dark.
   Light is the default. Dark applies only when the person chose Dark, or chose
   "Match my phone" (data-theme="auto") on a phone set to dark.
   No colour literal ever appears on a flipping surface. */
:root{
  --bg:#faf6ef; --surface:#ffffff; --surface-2:#f3ede3; --surface-3:#e9e1d4;
  --ink:#2b2a33; --ink-2:#595663; --ink-3:#66626f;
  --line:#ebe3d6; --line-2:#d9cfbe;
  --accent:#3768a0; --accent-ink:#ffffff; --accent-soft:#e4eef8;
  --warn:#8d5f22; --warn-soft:#f8ecd9;
  --alert:#aa3f37; --alert-soft:#fbe8e5; --alert-ink:#ffffff;
  --ok:#44704c; --ok-soft:#e5efe2;
  --shadow:0 1px 2px rgba(60,50,40,.04), 0 10px 30px rgba(60,55,80,.08);
  --float-shadow:0 12px 32px rgba(40,40,70,.14);
  --r:22px; --r-sm:14px;
  /* Soft glass: translucent white over a gentle pastel glow. Text on these was
     checked for 4.5:1 against the most tinted spot of the glow. */
  --glass:rgba(255,255,255,.72); --glass-strong:rgba(255,255,255,.86); --glass-border:rgba(255,255,255,.9);
  --bar:#ffffff;
  --glow-1:rgba(160,196,232,.55); --glow-2:rgba(178,212,172,.5); --glow-3:rgba(240,204,176,.45);
  --tab-h:58px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  color-scheme:light;
}
/* The two dark blocks below must stay identical. */
:root[data-theme="dark"]{
  --bg:#151922; --surface:#1d2330; --surface-2:#242b38; --surface-3:#2d3545;
  --ink:#eef1f6; --ink-2:#b9c2d0; --ink-3:#8e99ab;
  --line:#2b3341; --line-2:#3a4454;
  --accent:#8fb8e3; --accent-ink:#0f1c2b; --accent-soft:#1e2d40;
  --warn:#e3b67a; --warn-soft:#33291b;
  --alert:#f09a92; --alert-soft:#3a2322; --alert-ink:#1d0f0f;
  --ok:#9cc3a0; --ok-soft:#1d2d22;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.3);
  --float-shadow:0 12px 32px rgba(0,0,0,.45);
  --glass:rgba(29,35,48,.78); --glass-strong:rgba(29,35,48,.9); --glass-border:rgba(255,255,255,.06);
  --bar:#1d2330;
  --glow-1:rgba(60,100,150,.35); --glow-2:rgba(70,110,80,.28); --glow-3:rgba(110,80,120,.25);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{
    --bg:#151922; --surface:#1d2330; --surface-2:#242b38; --surface-3:#2d3545;
    --ink:#eef1f6; --ink-2:#b9c2d0; --ink-3:#8e99ab;
    --line:#2b3341; --line-2:#3a4454;
    --accent:#8fb8e3; --accent-ink:#0f1c2b; --accent-soft:#1e2d40;
    --warn:#e3b67a; --warn-soft:#33291b;
    --alert:#f09a92; --alert-soft:#3a2322; --alert-ink:#1d0f0f;
    --ok:#9cc3a0; --ok-soft:#1d2d22;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.3);
    --float-shadow:0 12px 32px rgba(0,0,0,.45);
    --glass:rgba(29,35,48,.78); --glass-strong:rgba(29,35,48,.9); --glass-border:rgba(255,255,255,.06);
    --bar:#1d2330;
    --glow-1:rgba(60,100,150,.35); --glow-2:rgba(70,110,80,.28); --glow-3:rgba(110,80,120,.25);
    color-scheme:dark;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{background:var(--bg)}
body{
  margin:0; font-family:var(--font); background:transparent; color:var(--ink);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--tab-h) + 22px + env(safe-area-inset-bottom));
}
/* Fixed so it does not slide while scrolling (iOS ignores background-attachment:fixed). */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 45% at 8% 0%, var(--glow-1), transparent 70%),
    radial-gradient(55% 42% at 100% 62%, var(--glow-2), transparent 70%),
    radial-gradient(50% 38% at 0% 100%, var(--glow-3), transparent 72%)}
a{color:var(--accent); text-underline-offset:2px}
h1,h2,h3,h4{line-height:1.25; margin:0 0 .4em}
h1{font-size:1.6rem; letter-spacing:-.02em; font-weight:750}
h2{font-size:1.15rem; letter-spacing:-.01em}
h3{font-size:1rem}
p{margin:0 0 .8em}
small{font-size:.8125rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--surface);padding:8px 12px;border-radius:8px;z-index:99}

/* ── top bar ─────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top)}
.topbar-in{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:10px;
  padding:9px 14px;min-height:52px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand-mark{width:24px;height:24px;flex:none;display:block;line-height:0}
.brand-mark svg{display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:1.2rem;letter-spacing:-.015em;font-weight:800}
/* The rotating "We care:" line. It fades between phrases; Reduce Motion keeps one. */
.care-line{display:block;max-width:52vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  color:var(--accent);font-size:.84rem;font-weight:650;transition:opacity .35s ease,transform .35s ease}
.care-line.is-changing{opacity:0;transform:translateY(3px)}
/* Signed in, "We care:" opens How can I help?; the small pill says so, and fills in there. */
.brand-row{display:flex;align-items:center;gap:8px}
.brand-pill{font-size:.68rem;font-weight:750;letter-spacing:.02em;padding:1px 8px;border-radius:999px;white-space:nowrap;
  background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.brand[aria-current="page"] .brand-pill{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.topbar-actions{display:flex;gap:6px;align-items:center}
.btn-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass-strong);color:var(--ink);text-decoration:none;font-size:1.15rem;
  border:1px solid var(--line);flex:none}
.btn-icon:active{background:var(--surface-3)}
.avatar{background:var(--accent);color:var(--accent-ink);font-size:.9rem;font-weight:600;border-color:transparent}
.btn-icon svg{width:19px;height:19px}
/* The Search button when you are on Search: filled and outlined, not colour alone. */
.btn-icon.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}

/* ── layout ──────────────────────────────────────────────── */
main{max-width:760px;margin:0 auto;padding:16px 14px 28px}
body.wide main{max-width:1080px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;align-items:center}
.row-between{display:flex;gap:10px;align-items:center;justify-content:space-between}
.grow{flex:1;min-width:0}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.tiny{font-size:.78rem}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── section headers ─────────────────────────────────────── */
.sec{margin:22px 0 9px;display:flex;align-items:baseline;gap:8px;justify-content:space-between}
.sec:first-child{margin-top:4px}
.sec h2{margin:0;font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:650}
.sec a{font-size:.82rem;text-decoration:none}

/* ── cards ───────────────────────────────────────────────── */
.card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r);
  padding:16px;box-shadow:var(--shadow)}
.card + .card{margin-top:10px}
.card-tight{padding:11px 13px}
a.card{display:block;text-decoration:none;color:inherit}
a.card:active{background:var(--surface-2)}
.card-title{font-weight:620;letter-spacing:-.01em;margin:0 0 3px}
.card-sub{color:var(--ink-2);font-size:.875rem;margin:0}
/* "Added to the record": the short list under a memo's summary. */
.recap{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.recap-title{margin:0 0 4px;font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3)}
.recap ul{margin:0;padding-left:1.15em}
.recap li{margin:5px 0}
.recap li a{text-decoration:none;font-weight:600}
.recap-none{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);color:var(--ink-2);font-size:.875rem}
.sec[id]{scroll-margin-top:76px}
/* A card led by a picture that runs edge to edge. */
.card-art{padding:0;overflow:hidden}
.card-art-img{display:block;width:100%;height:auto;aspect-ratio:648 / 364;object-fit:cover}
.card-art-body{padding:14px 16px 16px}
/* A picture across the top of a page, shaped like the cards. */
.page-banner{display:block;width:100%;height:auto;object-fit:cover;
  border-radius:var(--r);box-shadow:var(--shadow)}

/* Left rail marks severity by BAR + PILL + TEXT, never colour alone. */
.rail{border-left:4px solid var(--line-2);padding-left:11px}
.rail-emergency{border-left-color:var(--alert);border-left-style:double;border-left-width:7px}
.rail-urgent{border-left-color:var(--warn)}
.rail-watch{border-left-color:var(--accent)}
.rail-ok{border-left-color:var(--ok)}

/* ── pills ───────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:4px;font-size:.735rem;font-weight:600;
  padding:2px 8px 2px 6px;border-radius:999px;background:var(--surface-3);color:var(--ink-2);
  border:1px solid var(--line-2);white-space:nowrap;letter-spacing:.01em;vertical-align:middle}
.pill-mark{font-weight:800;font-size:.8em;opacity:.95}
.p-emergency{background:var(--alert-soft);color:var(--alert);border-color:currentColor}
.p-urgent{background:var(--warn-soft);color:var(--warn);border-color:currentColor}
.p-watch,.p-active{background:var(--accent-soft);color:var(--accent);border-color:currentColor}
.p-confirmed,.p-done,.p-ok{background:var(--ok-soft);color:var(--ok);border-color:currentColor}
.p-reported,.p-open{background:var(--surface-3);color:var(--ink-2)}
.p-disputed,.p-overdue{background:var(--alert-soft);color:var(--alert);border-color:currentColor}
.p-stopped,.p-hold{background:var(--surface-3);color:var(--ink-3)}

/* ── provenance line ─────────────────────────────────────── */
.prov{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px;
  padding-top:9px;border-top:1px dashed var(--line);font-size:.78rem;color:var(--ink-3)}
.prov-src a{color:var(--ink-2)}

/* ── buttons ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 18px;border-radius:999px;border:1px solid var(--line);background:var(--glass-strong);
  color:var(--ink);font:inherit;font-size:.9rem;font-weight:560;cursor:pointer;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;
  box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 28%,transparent)}
.btn-block{width:100%}
/* Deleting: a filled red button on the confirm page, a quiet red outline to get there. */
.btn-danger{background:var(--alert);color:var(--alert-ink);border-color:transparent}
.btn-danger-quiet{color:var(--alert);border-color:color-mix(in srgb,var(--alert) 45%,transparent)}
.btn-sm{padding:7px 14px;font-size:.82rem;border-radius:999px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
/* Appearance choice: the current option has a tick and a filled pill, not colour alone. */
.seg{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.seg .btn.is-on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);font-weight:700}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ── forms ───────────────────────────────────────────────── */
label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-2);margin:0 0 5px}
input,textarea,select{width:100%;font:inherit;padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);appearance:none}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
textarea{min-height:110px;resize:vertical;line-height:1.55}
.field{margin-bottom:13px}
.field-row{display:flex;gap:10px}
.field-row>*{flex:1}

/* ── tab bar ─────────────────────────────────────────────── */
.tabbar{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:30;
  display:flex;max-width:560px;margin:0 auto;padding:0 6px;border-radius:28px;
  background:var(--bar);
  border:1px solid var(--glass-border);box-shadow:var(--float-shadow)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  height:var(--tab-h);text-decoration:none;color:var(--ink-3);font-size:.67rem;font-weight:600;
  letter-spacing:.01em}
.tab svg{width:21px;height:21px}
/* Record is the main action: its microphone sits on a filled pill. */
.tab-add .tab-ico{display:grid;place-items:center;width:40px;height:26px;border-radius:13px;
  background:var(--accent);color:var(--accent-ink)}
.tab-add .tab-ico svg{width:17px;height:17px}
.tab.on{color:var(--accent);font-weight:750}
/* current tab also sits on a soft pill and has a bolder label, so it is not colour-only */
.tab.on::before{content:"";position:absolute;inset:7px 3px;border-radius:20px;background:var(--accent-soft);z-index:-1}
.tab{position:relative}

/* ── timeline ────────────────────────────────────────────── */
.tl{position:relative;padding-left:20px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;margin-bottom:14px}
.tl-item::before{content:"";position:absolute;left:-19px;top:16px;width:10px;height:10px;
  border-radius:50%;background:var(--surface);border:2.5px solid var(--line-2)}
.tl-item.is-key::before{border-color:var(--accent);background:var(--accent)}
.tl-day{font-size:.78rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.06em;margin:20px 0 8px}

/* ── misc ────────────────────────────────────────────────── */
.empty{text-align:center;padding:38px 18px;color:var(--ink-3)}
.empty h3{color:var(--ink-2);margin-bottom:5px}
.banner{border-radius:var(--r);padding:12px 16px;font-size:.875rem;border:1px solid var(--glass-border);
  background:var(--glass);display:flex;gap:9px;align-items:flex-start}
.banner-warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.banner-alert{background:var(--alert-soft);border-color:var(--alert);color:var(--alert)}
.banner strong{font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── memo progress: Saved → Transcribed → Summarized ─────── */
/* Nothing here is tappable. Each step shows a mark and a word, not colour alone. */
.progress{border-radius:var(--r);padding:16px 12px 14px;border:1px solid var(--glass-border);background:var(--glass);box-shadow:var(--shadow)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.step{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:.78rem;color:var(--ink-3);text-align:center}
.step::before{content:"";position:absolute;top:12px;right:50%;width:100%;height:2px;background:var(--line-2)}
.step:first-child::before{display:none}
.step.is-done::before,.step.is-current::before,.step.is-failed::before{background:var(--ok)}
.step-dot{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:.8rem;font-weight:800;line-height:1;border:2px solid var(--line-2);background:var(--surface);color:var(--ink-3)}
.step.is-done .step-dot{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.step.is-current .step-dot{border-color:var(--warn);background:var(--warn-soft);color:var(--warn);
  animation:breathe 1.8s ease-in-out infinite}
.step.is-failed .step-dot{border-color:var(--alert);background:var(--alert-soft);color:var(--alert)}
.step-dot svg{display:block}
.step-core{width:10px;height:10px;border-radius:50%;background:currentColor}
.step.is-done,.step.is-current,.step.is-failed{color:var(--ink-2);font-weight:600}
@keyframes breathe{50%{opacity:.5}}
.progress-note{margin:12px 4px 0;font-size:.875rem;color:var(--ink-2);text-align:center}
.progress-admin{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);text-align:center}
.progress-admin p{margin:0 0 8px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
/* Tick boxes that read as chips: the box itself carries the state, so the colour
   change is decoration, never the only signal. */
.tickbox{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;
  padding:8px 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);
  color:var(--ink-2);cursor:pointer;line-height:1}
/* The global input rule strips appearance, which left these as blank boxes with
   nothing but colour to say they were ticked -- exactly what this app must not
   do. Put the real checkbox back, so a tick is a tick. */
.tickbox input{appearance:auto;-webkit-appearance:checkbox;width:16px;height:16px;
  flex:0 0 auto;margin:0;accent-color:var(--accent)}
.tickbox:has(input:checked){background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
/* ── things to crush: the list, its tick, and the fold-away options ──────── */
.task-add{padding:13px 14px}
.task-add .field-row>button{flex:0 0 auto}
/* The options stay folded until wanted: adding a thing must never feel like
   filling in a form. <details> does this with no JavaScript at all. */
.task-when{margin-top:11px}
.task-when>summary{cursor:pointer;font-size:.82rem;font-weight:600;color:var(--accent);
  list-style:none;padding:5px 0}
.task-when>summary::-webkit-details-marker{display:none}
.task-when>summary::before{content:"+ ";font-weight:800}
.task-when[open]>summary::before{content:"− "}
.task-when[open]{padding-bottom:4px}
.task-when>*:not(summary){margin-top:11px}
details.card>summary{cursor:pointer;font-weight:600;color:var(--accent);list-style:none}
details.card>summary::-webkit-details-marker{display:none}
details.card[open]>summary{margin-bottom:13px;padding-bottom:9px;border-bottom:1px solid var(--line)}

.task .row{align-items:flex-start;gap:11px}
.task-tick{flex:0 0 auto;margin:0}
/* 44px of tappable area around a 24px circle: this gets tapped one-handed,
   often while holding something else. */
.tick{width:44px;height:44px;margin:-10px 0 0 -10px;padding:0;border:0;background:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.tick-box{width:24px;height:24px;border-radius:50%;border:2px solid var(--line-2);
  background:var(--surface);display:block;transition:background .12s,border-color .12s}
.tick:hover .tick-box{border-color:var(--accent)}
.tick:focus-visible{outline:2px solid var(--accent);outline-offset:-6px;border-radius:50%}
/* Ticked: the circle fills AND grows a check. Never colour alone. */
.task.is-done .tick-box{background:var(--ok);border-color:var(--ok)}
.task.is-done .tick-box::after{content:"✓";color:var(--ok-ink,#fff);font-size:.85rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;height:100%}
.task.is-done .card-title{text-decoration:line-through;color:var(--ink-3)}
.task.is-going{opacity:.45;transition:opacity .25s}
.done-row{padding:7px 0;border-bottom:1px solid var(--line);gap:10px}
.done-row:last-child{border-bottom:0}
.done-row form{margin:0}
.tick-done{color:var(--ok);font-weight:800}

/* ── the patient's details: one fact per line, each with a Copy ──────────── */
.pt-row{padding:9px 0;border-bottom:1px solid var(--line);gap:12px}
.pt-row:last-child{border-bottom:0}
.pt-row .grow{line-height:1.5}

audio{width:100%;margin-top:10px;border-radius:9px}
.transcript{background:var(--surface-2);border-radius:var(--r-sm);padding:13px;
  font-size:.9rem;line-height:1.65;white-space:pre-wrap;border:1px solid var(--line);
  max-height:340px;overflow:auto}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:.875rem;margin:9px 0 0}
.kv dt{color:var(--ink-3);font-weight:600}
.kv dd{margin:0}
mark{background:var(--warn-soft);color:inherit;padding:0 2px;border-radius:3px}
.spinner{display:inline-block;width:13px;height:13px;border:2px solid var(--line-2);
  border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.rec-dot{width:11px;height:11px;border-radius:50%;background:var(--alert);
  animation:pulse 1.4s ease-in-out infinite}

/* ── recording pill ──────────────────────────────────────── */
/* Shown on every page but the recorder while a recording runs, so the family can
   check a dose or a date without stopping it. A dark capsule in the spirit of the
   iPhone's Dynamic Island, the same in both themes on purpose. The label says what
   is happening, so the red dot is never the only signal. White on #d70015 is 5.3:1. */
#rec-pill{position:fixed;z-index:45;left:50%;transform:translateX(-50%);
  top:calc(env(safe-area-inset-top) + 60px);display:flex;align-items:center;gap:8px;
  padding:4px 4px 4px 14px;border-radius:999px;background:#17181c;color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.28);max-width:calc(100% - 24px);white-space:nowrap}
#rec-pill[hidden]{display:none}
.rec-pill-main{display:flex;align-items:center;gap:8px;min-height:40px;color:#fff;
  text-decoration:none;font-size:.9rem;font-weight:600}
#rec-pill .rec-dot{background:#ff453a}
#rec-pill.is-paused .rec-dot{animation:none;opacity:.55}
.rec-pill-time{font-variant-numeric:tabular-nums;font-weight:750;min-width:2.6em}
.rec-pill-stop{font:inherit;font-size:.85rem;font-weight:750;min-height:40px;padding:0 16px;
  border:0;border-radius:999px;background:#d70015;color:#fff;cursor:pointer}
.rec-pill-stop[hidden]{display:none}
body.has-rec-pill main{padding-top:68px}
#cl-toast{position:fixed;z-index:46;left:12px;right:12px;max-width:520px;margin:0 auto;
  top:calc(env(safe-area-inset-top) + 112px);padding:10px 14px;border-radius:16px;
  background:var(--bar);color:var(--ink);border:1px solid var(--line);box-shadow:var(--float-shadow);
  font-size:.875rem;text-align:center}
#cl-toast[hidden]{display:none}
/* A page is being swapped in while recording. */
html.soft-loading main{opacity:.55;transition:opacity .15s}
@keyframes pulse{50%{opacity:.28}}
.print-only{display:none}
@media print{
  .topbar,.tabbar,.btn-row,.no-print{display:none!important}
  html{background:#fff}
  body{padding:0;background:#fff;color:#000}
  body::before{display:none}
  .print-only{display:block}
  .card{box-shadow:none;border-color:#999;break-inside:avoid}
}

/* ── recording level meter ───────────────────────────────── */
/* A silent recording must never be a silent failure: you should be able to
   glance at the phone and see that it is hearing you. */
.meter{height:9px;border-radius:999px;background:var(--surface-3);overflow:hidden;
  border:1px solid var(--line-2)}
.meter-fill{height:100%;width:0%;border-radius:999px;background:var(--accent);
  transition:width .08s linear}

/* ── month calendar ──────────────────────────────────────── */
.cal-wrap{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r);
  padding:14px 10px 10px;box-shadow:var(--shadow)}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cal-title{font-size:1.02rem;letter-spacing:-.01em}
.cal-today-link{text-align:center;font-size:.8rem;margin:-4px 0 8px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dow{text-align:center;font-size:.68rem;font-weight:700;color:var(--ink-3);
  padding:2px 0 5px;letter-spacing:.04em}
.cal-cell{position:relative;aspect-ratio:1/1;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding-top:5px;border-radius:9px;
  font-size:.82rem;color:var(--ink-2);text-decoration:none;min-height:38px}
.cal-blank{visibility:hidden}
.cal-cell.has-ev{background:var(--surface-2);color:var(--ink);font-weight:600}
.cal-cell.is-today{outline:2px solid var(--accent);outline-offset:-2px;font-weight:800;color:var(--accent)}
.cal-cell.needs-help{box-shadow:inset 0 0 0 2px var(--warn)}
.cal-num{line-height:1.1}
.cal-dots{display:flex;gap:2px;margin-top:3px;align-items:center;flex-wrap:wrap;
  justify-content:center;max-width:100%}
.cal-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);display:block}
.cal-dot-open{background:transparent;border:1.5px solid var(--accent)}
.cal-more{font-size:.58rem;color:var(--ink-3);font-weight:700}
.cal-help{position:absolute;top:1px;right:4px;font-size:.66rem;font-weight:900;color:var(--warn)}
.cal-legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--line);font-size:.7rem;color:var(--ink-3)}
.cal-legend span{display:inline-flex;align-items:center;gap:4px}
.cal-help-key{color:var(--warn)}
.cal-day-sec{scroll-margin-top:70px}
/* Selected day: soft fill plus a bar under the number, not colour alone. */
.cal-cell.is-selected{background:var(--accent-soft);color:var(--accent);font-weight:800}
.cal-cell.is-selected::after{content:"";position:absolute;left:32%;right:32%;bottom:5px;
  height:3px;border-radius:3px;background:var(--accent)}

/* ── the tapped day's list, right under the grid ─────────── */
.day-panels{margin-top:12px;scroll-margin-top:70px}
.day-panel{display:flex;flex-direction:column;gap:10px}
.day-panel[hidden]{display:none}
.day-panel .card + .card{margin-top:0}
.day-panel > .btn{align-self:flex-start}
.day-panel-title{font-size:1.05rem;margin:2px 2px 0}
.day-panel-sub{margin:6px 2px 0;font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3)}
.day-hint{text-align:center;color:var(--ink-3);font-size:.875rem;margin:4px 0 0}

/* ── help cards ──────────────────────────────────────────── */
.help-kind{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  color:var(--ink-3);margin-bottom:2px}
.help-taken{background:var(--ok-soft);border-color:var(--ok)}

/* People who turn on Reduce Transparency get solid surfaces and a plain ground. */
@media (prefers-reduced-transparency: reduce){
  :root{--glass:var(--surface);--glass-strong:var(--surface);--glass-border:var(--line);--bar:var(--surface)}
  body::before{display:none}
}