/* Luke's Dose Compass — milestone 0.
   Colour tokens are copied verbatim from docs/reference/prototype-v2.html.
   Type is the system stack, not the prototype's three webfont families:
   this screen has to render in airplane mode, and iOS draws SF beautifully. */

:root {
  --bg: #EEF0F0;
  --surface: #FFFFFF;
  --sunk: #E3E7E8;
  --ink: #1C2326;
  --ink2: #4C585D;
  --ink3: #77848A;
  --line: #CDD4D6;
  --accent: #2F5D73;
  --onaccent: #FFFFFF;
  --ok: #2E8A57;
  --warn: #B87A0A;
  --bad: #C2413A;

  /* one colour per drug, from the prototype */
  --opi: #7A55B8;
  --nsaid: #C4841A;
  --lasix: #1F86A8;
  --gas: #3E9A66;
  --supp: #8A8F93;

  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14191B;
    --surface: #1C2326;
    --sunk: #262F33;
    --ink: #E6ECEE;
    --ink2: #A9B5BA;
    --ink3: #809096;
    --line: #35423F;
    --accent: #8CC0D6;
    --onaccent: #10171A;
    --ok: #55C07F;
    --warn: #E3AC3C;
    --bad: #E56B63;
    --opi: #A98BE0;
    --nsaid: #E3A84A;
    --lasix: #4CB5D6;
    --gas: #62C28C;
    --supp: #9AA0A4;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #14191B;
  --surface: #1C2326;
  --sunk: #262F33;
  --ink: #E6ECEE;
  --ink2: #A9B5BA;
  --ink3: #809096;
  --line: #35423F;
  --accent: #8CC0D6;
  --onaccent: #10171A;
  --ok: #55C07F;
  --warn: #E3AC3C;
  --bad: #E56B63;
  --opi: #A98BE0;
  --nsaid: #E3A84A;
  --lasix: #4CB5D6;
  --gas: #62C28C;
  --supp: #9AA0A4;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--body);
  -webkit-text-size-adjust: 100%;
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
}

main { max-width: 620px; margin: 0 auto; padding: 0 16px; }

h1, h2 { letter-spacing: -0.01em; text-wrap: balance; }

/* ---- view switching, pure CSS, no script ---------------------------------
   #crisis is hidden until the URL targets it. Where :has() is unavailable the
   page simply becomes one long scroll — both sections visible, nothing lost. */

.view { display: none; }
.view:target { display: block; }

@supports selector(:has(*)) {
  body:has(.view:target) #home { display: none; }
}

/* ---- home ---------------------------------------------------------------- */

#home .home-inner {
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 32px 0;
}

.portrait {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

#home h1 { font-size: 34px; margin: 14px 0 0; }
.subtitle { margin: 0; color: var(--ink3); font-size: 15px; }

.bigbtn {
  margin-top: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--bad);
  border-radius: 16px;
  padding: 16px 18px;
  color: var(--ink);
}

.bigbtn-icon {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bad);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 20px;
}

.bigbtn-label { display: block; font-weight: 600; font-size: 18px; }
.bigbtn-sub { display: block; color: var(--ink3); font-size: 13px; margin-top: 2px; }

.offline-note {
  margin-top: 26px;
  color: var(--ink3);
  font-size: 13px;
  display: flex; align-items: center; gap: 7px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; }

/* ---- crisis card --------------------------------------------------------- */

.back {
  display: inline-block;
  margin: 18px 0 4px;
  color: var(--accent);
  text-decoration: none;
  font-size: 15px;
  padding: 6px 0;
}

#crisis h2 { font-size: 21px; margin: 26px 0 10px; }

.calls, .signs { list-style: none; padding: 0; margin: 0; }

.call {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.call.rank1 { border-left: 4px solid var(--ok); }

.call-name { margin: 0; font-weight: 600; font-size: 16px; }

.call-hours { margin: 5px 0 0; font-size: 13px; color: var(--ink2); }
.tick { color: var(--ok); font-weight: 700; }
.mark { color: var(--ink3); font-weight: 700; }

/* The number is the whole point of this screen: big, tappable, and selectable
   as text so it still works if the dialer handoff ever fails. */
.tel {
  display: inline-block;
  margin: 10px 0 0;
  font: 600 26px/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: -0.01em;
  padding: 6px 0;
  -webkit-user-select: text;
  user-select: text;
}

.call-note { margin: 8px 0 0; font-size: 13px; color: var(--ink3); }

.unconfirmed {
  margin: 4px 0 8px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--sunk);
}
.unconfirmed summary { cursor: pointer; font-size: 14px; color: var(--ink2); font-weight: 500; }
.unconfirmed-lead { font-size: 13px; color: var(--ink3); margin: 10px 0 12px; }
.call.muted { background: var(--bg); }
.call.muted .tel { color: var(--ink2); font-size: 22px; }

.draft {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--warn);
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex; align-items: center; gap: 8px;
}

.lead { font-size: 15px; color: var(--ink2); margin: 0 0 12px; }

.signs > li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 15px;
  margin-bottom: 10px;
}
.signs.plain > li { background: none; border: none; padding: 4px 0; margin: 0; color: var(--ink2); font-size: 15px; }
.sign-title { margin: 0; font-weight: 600; }
.signs ul { margin: 7px 0 0; padding-left: 20px; color: var(--ink2); font-size: 15px; }
.signs ul li { margin-bottom: 2px; }
.sign-note { margin: 9px 0 0; font-size: 13px; color: var(--ink3); }

/* ---- footer and update bar ------------------------------------------------ */

footer { max-width: 620px; margin: 0 auto; padding: 26px 16px calc(26px + env(safe-area-inset-bottom, 0px)); }
footer p { margin: 0; font: 11px/1.5 var(--mono); color: var(--ink3); text-align: center; }

#updatebar {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--accent);
  color: var(--onaccent);
  border-radius: 12px;
  padding: 11px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 14px;
}
#updatebar[hidden] { display: none; }
#updatebar button {
  font: inherit; font-weight: 600;
  background: var(--onaccent); color: var(--accent);
  border: 0; border-radius: 8px; padding: 7px 13px;
}

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- Now and Log ---------------------------------------------------------
   Class names and metrics follow docs/reference/prototype-v2.html so the new
   screens read as the same app. The prototype's data and drug schedules are
   fake and are not copied; only the look is. */

.home-nav { display: flex; flex-wrap: wrap; justify-content: center;
            gap: 6px 18px; margin-top: 22px; }
.home-nav a { color: var(--accent); text-decoration: none; font-size: 16px; padding: 8px 4px; }

#now h2, #log h2 { font-size: 21px; margin: 22px 0 4px; }
.vsub { font-size: 13px; color: var(--ink3); margin: 0 0 14px; }
.k { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin: 20px 0 8px; }
.k.dim { opacity: .7; margin-top: 14px; }

/* Now: one card per drug */
.drugs { list-style: none; padding: 0; margin: 0; }
.drug-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; margin-bottom: 11px; }
.drug-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* The dot is a flex item, so a long name used to wrap to the next line and
   leave the colour behind on its own — Hemp chew's name did exactly that at
   phone width. The name keeps the dot's line and wraps its own text instead. */
/* align-self, because align-items: center puts the dot between the two lines
   of a name that wraps. It belongs on the first line, as on every other card.
   The offset is in em so it follows the font rather than a fixed size. */
.drug-head .dot { flex: none; align-self: flex-start; margin-top: .42em; }
/* flex-basis must be 0, not auto: with auto the basis is the name's own width,
   which does not fit beside the dot, so the whole name wrapped to the next line
   and left the colour behind. At 0 it grows into whatever is left and wraps its
   own text. */
.drug-head .drug-name { flex: 1 1 0; min-width: 0; }
.drug-name { font-weight: 600; font-size: 16px; }
.also { color: var(--ink3); font-weight: 400; font-size: 14px; }
.tag { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .08em;
       color: var(--warn); border: 1px solid var(--line); border-radius: 99px; padding: 3px 8px; }
.row-when { margin: 8px 0 0; font-size: 15px; }
.row-total { margin: 4px 0 0; font-size: 13px; color: var(--ink2); }

/* The one drug where every number is real. Status is icon plus word (S4). */
.window { margin: 10px 0 0; font-size: 14px; color: var(--ink); }
.window-state { font-weight: 600; color: var(--accent); }
.why { margin-top: 8px; }
.why summary { font-size: 12px; color: var(--ink3); cursor: pointer; }
.why p, .why li { font-size: 12px; color: var(--ink3); }
.why ul { margin: 6px 0 0; padding-left: 18px; }

.unknown { margin: 9px 0 0; font-size: 13px; color: var(--ink3); }
.foot-note { margin: 22px 0 0; font-size: 12px; color: var(--ink3); }

/* Log */
.marks { display: flex; gap: 8px; margin-bottom: 14px; }
.btn { font: 600 14px var(--body); border: 1px solid var(--line); background: var(--sunk);
       color: var(--ink); border-radius: 8px; padding: 9px 14px; cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--onaccent); border-color: var(--accent); }

.bigbtn.round { width: 100%; border: 1px solid var(--line); border-left: 4px solid var(--accent);
                background: var(--surface); color: var(--ink); margin: 0 0 10px; cursor: pointer;
                font: inherit; text-align: left; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { font: 500 13px var(--body); border: 1px solid var(--line); background: var(--surface);
        color: var(--ink); border-radius: 99px; padding: 8px 13px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--onaccent); border-color: var(--accent); }

.rows { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.medrow { display: grid; grid-template-columns: 10px 1fr auto; gap: 11px; align-items: center;
          background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.medname { font: 600 14px var(--body); }
.medsub { font: 400 12px var(--mono); color: var(--ink3); margin-top: 2px; }

/* min-width stops the row reflowing as the label changes. */
.give { font: 600 13px var(--body); border: 0; border-radius: 8px; padding: 10px 14px;
        background: var(--ok); color: #fff; cursor: pointer; min-width: 84px; }
.give.mirror { background: var(--sunk); color: var(--ink2); font-weight: 500; font-size: 11px; min-width: 150px; }

.sheet { margin: 4px 0 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; }
.sheet label { display: flex; gap: 10px; align-items: center; font-size: 15px; padding: 7px 0; }
.sheet-actions { display: flex; gap: 8px; margin-top: 12px; }

.toast { font: 500 13px var(--body); color: var(--ok); min-height: 1.4em; margin: 14px 0 0; }

.entries { display: flex; flex-direction: column; }
.entry { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center;
         font-size: 13.5px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.etime { font: 400 12px var(--mono); color: var(--ink3); font-variant-numeric: tabular-nums; }
.entry .x { background: none; border: 0; color: var(--ink3); cursor: pointer; font: 600 18px var(--body); padding: 2px 8px; }

/* Storage truth-telling. Fixed, because it matters more than what is under it. */
.storagebanner { max-width: 620px; margin: 12px auto 0; background: var(--warn); color: #fff;
                 border-radius: 10px; padding: 10px 13px; font-size: 13px; line-height: 1.4; }
@media (min-width: 652px) { .storagebanner { margin-inline: auto; } }
@media (max-width: 651px) { .storagebanner { margin-inline: 16px; } }
.storagebanner[hidden] { display: none; }

/* ---- shared log ---------------------------------------------------------- */
.card.sync { margin-top: 18px; }
.sync-lead { font-size: 13px; color: var(--ink3); margin: 8px 0 10px; }
.sync-status { margin: 6px 0 0; font-size: 15px; }
.sync-msg { margin: 10px 0 0; font-size: 13px; color: var(--ink2); min-height: 1.2em; }
#synckey { width: 100%; font: 400 14px var(--mono); padding: 10px 12px; border-radius: 8px;
           border: 1px solid var(--line); background: var(--bg); color: var(--ink); }

/* ---- the medicines editor ------------------------------------------------ */
.drug-edit { margin-bottom: 12px; }
.field { display: block; margin-top: 10px; }
.field span { display: block; font-size: 12px; color: var(--ink3); margin-bottom: 4px; }
.field input { width: 100%; font: 400 15px var(--body); padding: 9px 11px; border-radius: 8px;
               border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.rounds { display: flex; gap: 16px; margin-top: 12px; }
.inline { display: flex; align-items: center; gap: 7px; font-size: 14px; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.textout { white-space: pre-wrap; word-break: break-word; font: 400 11px/1.45 var(--mono);
           background: var(--sunk); border: 1px solid var(--line); border-radius: 10px;
           padding: 12px; margin-top: 14px; max-height: 60vh; overflow: auto; }

/* ---- his body, right now -------------------------------------------------
   Certainty lives in the piece's own language, not a footnote: what comes from
   published pharmacology is solid, what is extrapolated is dashed and dimmed.
   A picture is believed harder than a sentence, so the picture has to carry
   its own uncertainty. */

.interp { margin: 0 0 16px; font-size: 13px; color: var(--warn); }

.systems { list-style: none; padding: 0; margin: 0; }
.sys { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
       padding: 14px 16px; margin-bottom: 12px; }
.sys h3 { margin: 0 0 10px; font-size: 17px; letter-spacing: -0.01em; }
.sys-quiet { background: var(--bg); border-style: dashed; }
.sys-note { font-size: 12px; color: var(--ink3); margin: 6px 0 0; }

.sys-drug { border-left: 3px solid var(--line); padding: 2px 0 2px 12px; margin-bottom: 12px; }
.sys-drug.tier-known { border-left-color: var(--accent); }
.sys-drug.tier-extrapolated { border-left-style: dashed; opacity: .82; }

.sys-drug-head { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.sys-when { font: 400 12px var(--mono); color: var(--ink3); }
.sys-effect { margin: 5px 0 0; font-size: 14px; color: var(--ink2); }
.sys-line { margin: 4px 0 0; font-size: 13px; color: var(--ink3); }

.tierlabel { display: block; margin: 5px 0 0; font: 500 10px var(--mono);
             letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }

.sys-inter { margin: 12px 0 0; font-size: 13.5px; color: var(--ink);
             background: var(--sunk); border: 1px solid var(--line);
             border-radius: 10px; padding: 10px 12px; }

.caveat { font-size: 12.5px; color: var(--ink2); margin: 8px 0 0; }

/* ---- saying it instead of tapping it ------------------------------------- */
.mic { display: block; width: 100%; text-align: left; border: 1px solid var(--line);
       border-left: 4px solid var(--ok); background: var(--surface); color: var(--ink);
       border-radius: 16px; padding: 18px; font: 600 18px var(--body); cursor: pointer; margin-bottom: 14px; }
.mic.recording { border-left-color: var(--bad); background: var(--sunk); }
.mic-icon { color: var(--ok); margin-right: 8px; }
.mic-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%;
           background: var(--bad); margin-right: 8px; vertical-align: middle; }
.mic-sub { display: block; font: 400 13px var(--body); color: var(--ink3); margin-top: 4px; }

.card.pending { border-left: 4px solid var(--accent); margin-bottom: 14px; }
.heard { margin: 8px 0 10px; font-size: 16px; line-height: 1.45; }
.understood { margin: 0 0 4px; padding-left: 20px; font-size: 15px; }
.understood li { margin-bottom: 3px; }


@media (prefers-reduced-motion: no-preference) {
  .mic.recording .mic-dot { animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
}

/* One status line for the whole app, fixed so it is readable from any screen.
   It lives outside every render target: four bugs came from messages written
   into markup that was about to be rebuilt. */
.toast:empty { display: none; }
.toast {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: 596px; margin: 0 auto;
  background: var(--ink); color: var(--bg);
  border-radius: 10px; padding: 11px 14px;
  font: 500 14px/1.4 var(--body); z-index: 20;
}

/* ---- circles: time drawn the way they live it ---------------------------- */
.dial-card { padding: 8px 8px 14px; }
.dial-card svg { display: block; max-width: 300px; margin: 0 auto; }

.circle-arc { display: flex; flex-direction: column; gap: 7px; }
.circle-row { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
.circle-label { font: 400 11px var(--mono); color: var(--ink3); }
.circle-bar { position: relative; height: 22px; background: var(--sunk);
              border: 1px solid var(--line); border-radius: 6px; }
.circle-row.current .circle-bar { border-color: var(--accent); }
/* A circle with no wake mark has a guessed start, and says so by being dashed. */
.circle-row.unanchored .circle-bar { border-style: dashed; }
.circle-sum { grid-column: 2; font: 400 11px var(--mono); color: var(--ink3); margin-top: -3px; }

.tick { position: absolute; top: 4px; width: 5px; height: 14px; border-radius: 2px; transform: translateX(-2px); }
.tick.dose { top: 3px; height: 16px; }
.tick.meal { background: var(--ok); }
.tick.water { background: var(--lasix); height: 8px; top: 7px; }
.tick.wake { background: var(--warn); width: 2px; height: 20px; top: 1px; }
.tick.sleep { background: var(--ink3); width: 2px; height: 20px; top: 1px; }

/* ---- the vet document ---------------------------------------------------- */
.vetdoc { white-space: pre-wrap; word-break: break-word;
          font: 400 12px/1.55 var(--mono); background: var(--sunk);
          border: 1px solid var(--line); border-radius: 10px;
          padding: 14px; margin-top: 14px; }

@media print {
  .no-print, .storagebanner, .toast, #home, .back, footer, #updatebar { display: none !important; }
  body { background: #fff; color: #000; }
  .view { display: block !important; }
  .vetdoc { background: none; border: 0; padding: 0; font-size: 11px; color: #000; }
}

/* The vet document reads as a document, not as markup. */
.vetdoc { background: var(--surface); border: 1px solid var(--line);
          border-radius: 12px; padding: 18px 20px; margin-top: 14px; font-size: 14.5px; }
.vetdoc h2 { font-size: 19px; margin: 0 0 10px; }
.vetdoc h3 { font-size: 15px; margin: 22px 0 8px; color: var(--ink);
             border-top: 1px solid var(--line); padding-top: 14px; }
.vetdoc h3:first-of-type { border-top: 0; padding-top: 0; }
.vetdoc p { margin: 0 0 9px; line-height: 1.55; }
.vetdoc ul { margin: 0 0 10px; padding-left: 20px; }
.vetdoc li { margin-bottom: 5px; line-height: 1.5; }
.vetdoc li.cont { list-style: none; margin: -3px 0 7px -20px; padding-left: 20px;
                  font-size: 12.5px; color: var(--ink3); }
.vetdoc i { color: var(--ink3); font-style: normal; font-size: 12.5px; }
.vetdoc hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

/* ---- his own lab values, shown where they belong --------------------------- */
.labs { margin-top: 14px; }
.lablist { list-style: none; padding: 0; margin: 0; }
.lab { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
       padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.lab:last-child { border-bottom: 0; }
.lab-name { font-weight: 500; }
.lab-val { font: 600 14px var(--mono); font-variant-numeric: tabular-nums; }
.lab-flag { grid-column: 1; font-size: 12px; color: var(--ink2); }
.lab-when { grid-column: 2; font: 400 11px var(--mono); color: var(--ink3); }
/* A value old enough to be misleading says so by looking faded. */
.lab.stale .lab-val, .lab.stale .lab-name { opacity: .6; }
.lab.stale .lab-when { color: var(--warn); }

/* ---- the thirty-second check from her Watch List ------------------------- */
.chip.primary { background: var(--accent); color: var(--onaccent); border-color: var(--accent); }

.checkrow { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start;
            padding: 12px 0; border-bottom: 1px solid var(--line); }
.checkrow:last-of-type { border-bottom: 0; }
.check-label { margin: 0; font-weight: 600; font-size: 15px; }
.check-detail { margin: 4px 0 0; font-size: 12.5px; color: var(--ink3); line-height: 1.45; }
.check-actions { display: flex; flex-direction: column; gap: 6px; }
.check-actions .btn { padding: 7px 12px; font-size: 13px; white-space: nowrap; }

/* ---- the page for whoever is standing in ---------------------------------- */
.helper { background: var(--surface); border: 1px solid var(--line);
          border-radius: 12px; padding: 18px 20px; margin-top: 14px; font-size: 15px; line-height: 1.55; }
.helper h3 { font-size: 16px; margin: 22px 0 8px; border-top: 1px solid var(--line); padding-top: 16px; }
.helper h3:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.helper h4 { font-size: 14px; margin: 12px 0 4px; color: var(--ink2); }
.helper p { margin: 0 0 10px; }
.helper ul { margin: 0 0 10px; padding-left: 20px; }
.helper li { margin-bottom: 5px; }
.helper-urgent li { margin-bottom: 8px; }
.helper-call { background: var(--sunk); border-left: 4px solid var(--ok);
               border-radius: 8px; padding: 12px 14px; }
.helper-warn { background: var(--sunk); border-left: 4px solid var(--bad);
               border-radius: 8px; padding: 12px 14px; }
.helper-small { font-size: 12px; color: var(--ink3); }

/* ---- pain check, day mark, follow-up ------------------------------------- */
.card.pain { border-left: 4px solid var(--accent); }
.card.followup { border-left: 4px solid var(--warn); }
.painrow { padding: 10px 0; border-bottom: 1px solid var(--line); }
.painrow:last-of-type { border-bottom: 0; }
.painrow .chips { margin-top: 6px; }

/* ---- night mode ----------------------------------------------------------
   ROADMAP milestone 1: "dim and warm, for the sleep window." Her cycle is not
   a clock, so this follows the log rather than the hour: it turns on when a
   sleep has been marked and no wake since. Nothing is hidden and no contrast
   drops below readable — at 4am she still has to read a phone number. */
body.night {
  --bg: #17120E;
  --surface: #1F1813;
  --sunk: #2A211A;
  --ink: #EFE3D6;
  --ink2: #BFAE9C;
  --ink3: #9A8878;
  --line: #3A2E24;
  --accent: #E0B487;
  --onaccent: #17120E;
  --ok: #8FBF86;
  --warn: #E0B15A;
  --bad: #E58C72;
}
body.night img, body.night .portrait { filter: brightness(.88) sepia(.12); }

/* ---- photos and the quality-of-life scale --------------------------------- */
.photo-btn { display: block; width: 100%; border: 1px dashed var(--line); background: var(--sunk);
             border-radius: 12px; padding: 16px; text-align: center; cursor: pointer;
             font: 600 15px var(--body); color: var(--ink); margin-bottom: 8px; }
.photo-view { display: block; width: 100%; border-radius: 12px; margin-top: 14px;
              border: 1px solid var(--line); }
.chips.scale { gap: 5px; }
.chip.num { min-width: 34px; padding: 7px 0; text-align: center; font-variant-numeric: tabular-nums; }
.qol-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink2);
            background: var(--sunk); border-radius: 8px; padding: 11px 13px; }
.attach { display: flex; gap: 2px; }

/* `hidden` means hidden. An author rule outranking the attribute is how a
   file picker once appeared at the top of every screen. */
[hidden] { display: none !important; }