/* Medic trainer UI. Visual spec: docs/superpowers/specs/2026-10-29-medic-trainer-ui-design.md */

@font-face { font-family: 'UAF'; src: url('../../assets/fonts/UAFSans-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'UAF'; src: url('../../assets/fonts/UAFSans-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../../assets/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../../assets/fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('../../assets/fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }

:root {
  /* Palette: these four and their alpha tints only. */
  --page: #f8f8f8;
  --gray: #c7c7c7;
  --ink: #161618;
  --acc: #e7600c;
  --dim: rgba(22, 22, 24, .55);
  --faint: rgba(22, 22, 24, .3);
  --line: rgba(22, 22, 24, .12);
  --soft: rgba(199, 199, 199, .38);
  --acc-soft: rgba(231, 96, 12, .12);
  --acc-halo: rgba(231, 96, 12, .22);
  --card-grad: linear-gradient(180deg, #d4d4d4 0%, var(--gray) 100%);
  --shadow-float: 0 3px 10px rgba(22, 22, 24, .12);
  --shadow-toast: 0 6px 18px rgba(22, 22, 24, .25);

  --f-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-head: 'UAF', 'Inter', system-ui, sans-serif;
  --f-mono: 'Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --gutter: 16px;
  --r-card: 26px;
  --r-soft: 20px;
  --r-cta: 16px;
  --cta-h: 56px;
  --tap: 48px;

  /* Motion: a mirror of T in src/ui/motion.js (ui.test.js keeps them equal), docs/MOTION.md M01–M18 within the
     handoff's E01–E05 bounds (DESIGN §9). Reduced motion makes every one 0 ms (P03). */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --m-press: 60ms; --m-release: 140ms; --m-screen: 220ms; --m-screen-fade: 160ms; --m-enter: 220ms; --m-line: 180ms;
  --m-stagger: 40ms; --m-vital-stagger: 30ms; --m-phrase: 400ms; --m-open: 200ms; --m-close: 160ms; --m-dim: 150ms;
  --m-clock: 180ms; --m-clock-tint: 200ms; --m-toast: 240ms; --m-pulse: 400ms; --m-change: 600ms; --m-ring: 400ms; --m-breathe: 1600ms;
  --m-row-stagger: 30ms; --m-flip: 160ms; --m-product: 260ms; --m-field: 30ms; --m-tint: 120ms; --m-hint: 160ms;
  --m-add: 160ms; --m-fly: 240ms; --m-bump: 240ms; --m-collapse: 180ms; --m-result: 200ms; --m-glyph: 200ms;
  --m-aspect: 25ms; --m-verdict: 300ms; --m-focus: 400ms; --m-compare: 180ms; --m-strike: 300ms; --m-accent: 1200ms;
  --m-sheet: 260ms; --m-sheet-out: 200ms; --m-marker: 400ms; --m-fill: 160ms; --m-roll: 400ms; --m-signature: 1200ms;
  --m-note-in: 200ms; --m-note-out: 160ms; --m-dialog-in: 180ms; --m-dialog-out: 140ms;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --m-press: 0ms; --m-release: 0ms; --m-screen: 0ms; --m-screen-fade: 0ms; --m-enter: 0ms; --m-line: 0ms;
    --m-stagger: 0ms; --m-vital-stagger: 0ms; --m-phrase: 0ms; --m-open: 0ms; --m-close: 0ms; --m-dim: 0ms;
    --m-clock: 0ms; --m-clock-tint: 0ms; --m-toast: 0ms; --m-pulse: 0ms; --m-change: 0ms; --m-ring: 0ms; --m-breathe: 0ms;
    --m-row-stagger: 0ms; --m-flip: 0ms; --m-product: 0ms; --m-field: 0ms; --m-tint: 0ms; --m-hint: 0ms;
    --m-add: 0ms; --m-fly: 0ms; --m-bump: 0ms; --m-collapse: 0ms; --m-result: 0ms; --m-glyph: 0ms;
    --m-aspect: 0ms; --m-verdict: 0ms; --m-focus: 0ms; --m-compare: 0ms; --m-strike: 0ms; --m-accent: 0ms;
    --m-sheet: 0ms; --m-sheet-out: 0ms; --m-marker: 0ms; --m-fill: 0ms; --m-roll: 0ms; --m-signature: 0ms;
    --m-note-in: 0ms; --m-note-out: 0ms; --m-dialog-in: 0ms; --m-dialog-out: 0ms;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 15px/1.4 var(--f-ui); overflow-wrap: break-word; } /* a long word breaks rather than leave the screen at 200 % zoom */
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- screen frame ---------- */
#app { max-width: 520px; margin: 0 auto; }
.screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 10px var(--gutter) 0; padding-top: max(10px, env(safe-area-inset-top)); }
.screen > .body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; }
.mono { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .07em; font-size: 9px; line-height: 1.25; font-weight: 400; }
.dim { color: var(--dim); }
.h2 { font: 600 20px/1.2 var(--f-ui); letter-spacing: -.01em; margin: 0; }
.p { margin: 0; }
.small { font-size: 13px; line-height: 1.4; }

/* ---------- app bar ---------- */
.bar { display: flex; align-items: center; gap: 6px; min-height: var(--tap); }
.ib { width: var(--tap); height: var(--tap); margin-left: -7px; flex: none; display: grid; place-items: center; border: 0; padding: 0; background: none; border-radius: 50%; }
.ib > span { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; transition: background-color var(--m-release) var(--ease-out); }
.ib:active > span { background: var(--gray); transition-duration: var(--m-press); }
.bar .ttl { flex: 1; min-width: 0; }
.bar .ttl .mono { color: var(--dim); }
/* 200 % zoom (a 195 px layout): the title takes its own row under the back button and the clock. */
@media (max-width: 300px) { .bar { flex-wrap: wrap; } .bar .ttl { order: 3; flex-basis: 100%; } }
.bar .ttl b:focus { outline: none; }
.bar .ttl b { display: block; font-size: 15px; font-weight: 600; margin-top: 2px; }

/* ---------- heading row ---------- */
.who { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 8px 2px 0; }
.who b { font: 700 30px/1 var(--f-head); letter-spacing: -.02em; }
.who span { font-size: 13px; color: var(--dim); white-space: nowrap; }

/* ---------- patient card (U01) ---------- */
/* The card takes the height left on the screen once the record, the task and the CTA are in view (spec items 6–7),
   between 300 and 560 px; on a short screen it keeps 300 px and the page scrolls. */
.card { position: relative; flex: 1 0 300px; max-height: 560px; border-radius: var(--r-card); background: var(--card-grad); overflow: hidden; --fig-top: 16px; container-type: size; }
.card.has-toast { --fig-top: 64px; }
/* Figure height is capped by card width (mockup proportion) and centred in the space above the vitals. */
.fig { --fh: min(calc(100cqh - var(--fig-top) - 20px), 108cqw); position: absolute; height: var(--fh); top: calc(var(--fig-top) + max(0px, (100cqh - var(--fig-top) - 56px - var(--fh)) / 2)); left: 50%; transform: translateX(-50%); }
/* aspect-ratio comes inline from DashboardVM.figure; anchors are fractions of this same box */
.fig img.body { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(22, 22, 24, .12)); user-select: none; -webkit-user-drag: none; }
.anc { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--page); z-index: 2; }
.anc.a { background: var(--acc); box-shadow: 0 0 0 6px var(--acc-halo); }
.anc.k { background: var(--ink); }
.ring { position: absolute; width: 40px; height: 40px; border: 1.5px dashed var(--acc); border-radius: 50%; transform: translate(-50%, -50%); z-index: 1; }
svg.leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
svg.leaders line { stroke: var(--ink); stroke-opacity: .45; stroke-width: 1; }
svg.leaders line.guide { stroke: var(--acc); stroke-opacity: 1; stroke-width: 1.2; }

.pill { position: absolute; z-index: 3; display: flex; align-items: center; gap: 7px; min-height: var(--tap); max-width: calc(50% - 14px); background: var(--page); border: 0; border-radius: 999px; padding: 7px 12px 7px 8px; box-shadow: var(--shadow-float); text-align: left; font-size: 13px; line-height: 1.15; transition: background-color var(--m-release) var(--ease-out), color var(--m-release) var(--ease-out), opacity var(--m-dim) var(--ease-out), top var(--m-flip) var(--ease-out); }
.pill.l { left: 10px; } .pill.r { right: 10px; }
.pill b { font-weight: 600; display: block; } /* the title wraps, never cut */
.pill small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--dim); transition: color var(--m-release) var(--ease-out); font-size: 11px; overflow: hidden; overflow-wrap: anywhere; margin-top: 1px; } /* time and dose read in full on two lines (INTERFACE.md:39) */
.pill .txt { min-width: 0; }
.pill .ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--acc-soft); }
.pill .ic.k { background: var(--soft); }
.pill:active { background: #ececec; transition-duration: var(--m-press); }
.pill.guide { background: var(--acc); color: var(--ink); }
.pill.guide small { color: rgba(22, 22, 24, .72); }
.pill.guide .ic { background: rgba(22, 22, 24, .14); }
.pill.unread { outline: 1.5px solid var(--acc); }
.pill.open { background: var(--ink); color: var(--page); min-width: var(--tap); justify-content: center; } /* UX03: the label hides, the 48 px target stays */
.pill.open .txt { display: none; }
/* A narrow card (200 % zoom): markers drop their icon and wrap their words instead of cutting them. */
@container (max-width: 260px) {
  .pill { max-width: calc(50% - 6px); padding: 6px 8px; gap: 4px; }
  .pill.l { left: 4px; } .pill.r { right: 4px; }
  .pill .ic { display: none; }
  .pill b { white-space: normal; overflow-wrap: anywhere; }
  .pill small { -webkit-line-clamp: 4; }
} /* UX03: the open marker's label hides; the panel says it once */
.pill.open small { color: rgba(248, 248, 248, .7); }
.pill.open .ic, .pill.open .ic.k { background: rgba(248, 248, 248, .18); }
.card.has-open .pill:not(.open), .card.has-open svg.leaders, .card.has-open .toast { opacity: .45; } /* M04 */
.pill[inert] { opacity: .12 !important; }
.det { margin: 8px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 12px; }
.det dt { color: var(--dim); }
.det dd { margin: 0; font-weight: 500; }
.det dd.unk { display: inline-block; justify-self: start; border: 1.5px dashed var(--faint); border-radius: 8px; padding: 0 6px; }

.toast { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 6; display: flex; align-items: center; gap: 10px; min-height: var(--tap); background: var(--ink); color: var(--page); border: 0; border-radius: 999px; padding: 6px 8px 6px 16px; box-shadow: var(--shadow-toast); text-align: left; }
.toast img { width: 6px; height: 22px; flex: none; }
.toast b { font-weight: 600; font-size: 13.5px; display: block; }
.toast small { font-size: 11.5px; opacity: .72; display: block; }
.toast .new { margin-left: auto; font: 400 9px var(--f-mono); letter-spacing: .06em; background: var(--acc); color: var(--ink); border-radius: 6px; padding: 4px 7px; flex: none; }

/* Small pills along the card's bottom edge, sized by their content (spec item 4); they scroll inside the card if many. */
.vit { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
/* Five measured vitals share one low row along the card's edge (frame 04); the icon stands for the name (Р12), and a tap
   shows the name in full. Every pill is laid out alike (owner, 31.10: «іконки там поїхали»): the mark centred on its own
   line, the value with its unit in small type on the value's baseline, a unit of several words under the value. Never
   narrower than its text; past the card's width the strip scrolls, it never wraps. */
.vit .vp:not(.nm) { flex: 1 0 auto; min-width: var(--tap); height: auto; min-height: var(--tap); padding: 5px 6px; display: grid; grid-template-columns: auto auto; justify-content: center; align-content: start; justify-items: center; align-items: baseline; row-gap: 2px; }
.vit .vp:focus-visible { outline-offset: -3px; } /* the strip clips what sticks out of it */
/* The mark and the number share the first column, so the mark stands over the number whatever the unit's length. */
.vp .vh { grid-row: 1; grid-column: 1; display: flex; justify-content: center; align-items: center; height: 12px; color: var(--dim); }
.vp .vmk { font: 600 10px/1 var(--f-ui); letter-spacing: .01em; white-space: nowrap; } /* SpO₂: the monitor's label in the icon's place */
.vp .vv { display: contents; white-space: nowrap; }
.vp .vv b { grid-row: 2; grid-column: 1; }
.vp .vv small { grid-row: 2; grid-column: 2; justify-self: start; margin-left: 2px; font-size: 10px; line-height: 1; color: var(--dim); white-space: nowrap; }
.vp .vv.under small { grid-row: 3; grid-column: 1; justify-self: center; margin-left: 0; }
.vp .age, .vp .was { grid-column: 1 / -1; }
/* The live number rolls inside its own line when it changes (src/ui/live-vitals.js); the old text leaves over it. */
.vp .vv b { position: relative; overflow: clip; line-height: 1.15; }
.vp .vv b > .roll-old { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* The widest number the pill can show (data-w, digits as 0 in tabular figures) holds the width, so the pills never shift. */
.vp .vv b::after { content: attr(data-w); display: block; height: 0; visibility: hidden; }
.vp { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 64px; height: var(--tap); padding: 0 12px; background: rgba(248, 248, 248, .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 0; border-radius: 999px; }
.vp .vr { display: flex; align-items: baseline; gap: 5px; }
.vp .age { font-size: 9.5px; line-height: 1; color: var(--dim); white-space: nowrap; } /* UX13: a stale measurement says how old it is */
.vp .mono { color: var(--dim); font-size: 8px; }
.vp b { font: 500 17px/1 var(--f-head); font-variant-numeric: tabular-nums; }
.vp.unk { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1.5px dashed var(--faint); }
.vp.unk b { color: var(--dim); }
.vp.open { background: var(--ink); color: var(--page); }
.vp.open .mono, .vp.open b, .vp.open .age, .vp.open .vh, .vp.open small, .vp.open .was { color: var(--page); }
/* A value an update changed shows what it was (approved conditions design, index: «Змінене значення показує, яким було»). */
.vp.chg:not(.open) { background: var(--page); box-shadow: inset 0 0 0 1.5px var(--acc); }
.vp .was { font-size: 9.5px; line-height: 1; color: var(--dim); white-space: nowrap; }
/* The tapped vital's full name with its live value: a dark label above the strip, inside the card, its arrow on the pill. */
.vtip { position: absolute; z-index: 5; max-width: calc(100% - 16px); display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 12px; background: var(--ink); color: var(--page); box-shadow: var(--shadow-toast); font-size: 13px; line-height: 1.25; pointer-events: none; }
.vtip b { font-weight: 600; }
.vtip > span { color: rgba(248, 248, 248, .78); font-variant-numeric: tabular-nums; }
.vtip::after { content: ''; position: absolute; left: var(--ax, 50%); bottom: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 2px; background: var(--ink); transform: rotate(45deg); }

/* ---------- chips, task, CTA ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip { background: var(--soft); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; }
/* The record is one row that scrolls sideways inside itself (spec item 6), not a block of wrapped chips. */
.record .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px; scroll-padding: 0 var(--gutter); }
.record .chips::-webkit-scrollbar, .vit::-webkit-scrollbar { display: none; }
.record .chip { flex: none; white-space: nowrap; }
.chip.unk { background: transparent; border: 1.5px dashed var(--faint); }
.task { margin-top: auto; }
.task .mono { color: var(--dim); }
.task b { display: block; font-weight: 600; font-size: 16px; margin-top: 4px; letter-spacing: -.01em; }
.cta-bar { position: sticky; bottom: 0; z-index: 10; background: var(--page); margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) max(14px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 4px; }
.cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: var(--cta-h); border: 0; border-radius: var(--r-cta); background: var(--ink); color: var(--page); font: 600 16px var(--f-ui); text-decoration: none; transition: background-color var(--m-release) var(--ease-out), color 0s linear calc(var(--m-release) / 4); }
/* The label switches colour a quarter into the fill (about half way on the ease-out curve), so it never sits white on
   light grey or dark on ink while the background changes. */
.cta:active { background: #000; transition-duration: var(--m-press); }
.cta[aria-disabled='true'] { background: var(--soft); color: var(--dim); }
.btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 0 16px; border: 0; border-radius: 999px; background: var(--soft); font-weight: 600; font-size: 14px; text-decoration: none; transition: background-color var(--m-release) var(--ease-out); }
.btn2:active { background: var(--gray); transition-duration: var(--m-press); }
.btn2[disabled] { opacity: .45; cursor: not-allowed; }
.btn2.full { width: 100%; }
.link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 2px; border: 0; background: none; font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cta-bar .link { align-self: center; }

/* ---------- compact patient strip (U02–U07) ---------- */
.strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: 100%; min-height: 56px; padding: 8px 8px 8px 14px; border: 0; border-radius: var(--r-soft); background: var(--card-grad); text-align: left; transition: filter var(--m-release) var(--ease-out); }
.strip:active { filter: brightness(.96); transition-duration: var(--m-press); }
.strip .who2 { flex: 1 1 110px; min-width: 0; }
.strip .who2 b { display: block; font: 700 17px/1.05 var(--f-head); }
.strip .who2 small { display: block; font-size: 12px; color: var(--dim); margin-top: 2px; }
.strip .sv { display: flex; gap: 4px; flex: none; }
.strip .sv > span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 38px; height: 40px; padding: 0 4px; border-radius: 14px; background: rgba(248, 248, 248, .85); }
.strip .sv > span.unk { background: transparent; border: 1.5px dashed var(--faint); }
.strip .sv .mono { font-size: 7.5px; color: var(--dim); }
.strip .sv b { font: 500 14px/1.1 var(--f-head); font-variant-numeric: tabular-nums; }
.strip .sv .unk b { color: var(--dim); }
.strip .sv small { font-size: 7.5px; line-height: 1.1; color: var(--dim); white-space: nowrap; }
.strip .mark { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); flex: none; }

/* ---------- soft cards, rows, fields ---------- */
.sc { background: var(--soft); border-radius: var(--r-soft); padding: 14px; }
.sc > .mono:first-child { color: var(--dim); display: block; margin-bottom: 6px; }
.sc h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 10px 0 0; font-size: 14px; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field > .lbl { font-size: 14px; font-weight: 600; }
.inrow { display: flex; gap: 8px; align-items: stretch; }
.in { flex: 1; min-width: 0; height: 52px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font-size: 18px; font-variant-numeric: tabular-nums; }
.in:focus { outline: none; border-color: var(--ink); }
.in[aria-invalid='true'] { border-color: var(--acc); }
.unit { display: grid; place-items: center; min-width: 52px; padding: 0 10px; border-radius: 14px; background: var(--soft); font-weight: 600; font-size: 14px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { min-height: var(--tap); min-width: 64px; padding: 4px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-weight: 600; font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; transition: background-color var(--m-release) var(--ease-out), border-color var(--m-release) var(--ease-out), color var(--m-release) var(--ease-out); }
.seg button small { font-weight: 400; font-size: 10.5px; color: var(--dim); transition: color var(--m-release) var(--ease-out); }
.seg button[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--page); }
.seg button[aria-pressed='true'] small { color: rgba(248, 248, 248, .7); }
.seg button:active { transition-duration: var(--m-press); background: var(--soft); }
.hint { font-size: 13px; color: var(--dim); }
.derived { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; border: 1.5px dashed var(--faint); font-size: 14px; }
.derived.ok { border-style: solid; border-color: transparent; background: var(--soft); }
.derived b { font: 500 17px/1 var(--f-head); font-variant-numeric: tabular-nums; }
.err { display: flex; gap: 6px; align-items: flex-start; color: var(--ink); font-size: 13px; font-weight: 500; }
.err::before { content: '!'; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--acc); color: var(--ink); font: 700 12px/18px var(--f-ui); text-align: center; }
.ro { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.ro > span:first-of-type { color: var(--dim); }
.ro > span:last-of-type { font-weight: 500; text-align: right; }

/* ---------- medicine thumbnails (assets/medicines/thumbs): one treatment everywhere ----------
   A soft tile of --s px (56 rows, 80 editor header, 44 cards, history, options) at the leading edge of its row, with
   the trimmed render contained in it at 10 % even padding; no border, no shadow beyond the render's own. The tile is
   the light fill on a grey card and the grey fill on a white option. */
.med { --tile: rgba(248, 248, 248, .9); flex: none; display: block; width: var(--s); height: var(--s); padding: calc(var(--s) * .1); border-radius: calc(var(--s) * .28); background: var(--tile); user-select: none; }
.med img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.mrow { display: flex; align-items: center; gap: 12px; }
.mrow > :not(.med) { flex: 1; min-width: 0; }
p.mrow { padding: 4px 0 10px; }
.kv dd.mrow { grid-column: 1 / -1; margin-bottom: 4px; } /* a product line takes the card's width under its label */ /* a summary line keeps its tile clear of the divider under it */
/* The first line of a text column beside a tile: the name left, its short value (strength, status, time) right; on a
   narrow row the value drops under the name rather than squeezing it. */
.mh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 10px; }
.mh > :first-child { min-width: 0; }
.mt > :not(.mh) { text-wrap: pretty; }
.nb { display: inline-block; } /* a phrase that wraps as a whole («ампула 2 мл») */
.ro.hist { justify-content: flex-start; align-items: center; }
.ro.hist .mt { flex: 1; min-width: 0; text-align: left; }
.ro.hist .mh b { font-weight: 600; }
.ro.hist .mh span { color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ro.hist small { display: block; font-size: 13px; color: var(--dim); margin-top: 2px; }
.prod[aria-disabled='true'] .med { opacity: .6; background: var(--soft); }

/* ---------- catalog (U02) ---------- */
.search { position: relative; display: block; }
.search .in { width: 100%; padding-left: 40px; font-size: 16px; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
.prod { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px 14px; border: 0; border-radius: var(--r-soft); background: var(--soft); text-align: left; transition: background-color var(--m-release) var(--ease-out); }
.prod:active { background: var(--gray); transition-duration: var(--m-press); }
.prod .pt { flex: 1; min-width: 0; }
.prod .pt b { font-size: 16px; font-weight: 600; }
.prod .pt > span:not(.mh) { display: block; font-size: 13px; color: var(--dim); margin-top: 2px; }
.prod .pt .mono { margin-top: 6px; }
.prod .conc { font: 500 17px/1.2 var(--f-head); white-space: nowrap; }
.prod[aria-disabled='true'] { background: transparent; border: 1.5px dashed var(--faint); color: var(--dim); }
.prod[aria-disabled='true'] .conc { color: var(--dim); }
.list { display: flex; flex-direction: column; gap: 8px; }
.more > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; color: var(--dim); }
.more[open] > summary { margin-bottom: 4px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: '+'; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--soft); color: var(--ink); font-size: 13px; }
.more[open] > summary::before { content: '–'; }
.more .list .prod { min-height: 60px; }

/* ---------- plan (U04) ---------- */
.order { background: var(--soft); border-radius: var(--r-soft); padding: 14px; }
.order.added { animation: fade-in var(--m-add) var(--ease-out) both; } /* E03: lands with a fade */
.order .top b { font-size: 16px; font-weight: 600; }
.order .top .mh .mono { flex: none; }
.order .nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; margin-top: 10px; }
.order .nums div { background: rgba(248, 248, 248, .85); border-radius: 14px; padding: 8px 10px; }
.order .nums .mono { color: var(--dim); display: block; }
.order .nums b { font: 500 17px/1.2 var(--f-head); font-variant-numeric: tabular-nums; }
.order .meta { font-size: 13px; color: var(--dim); margin-top: 8px; }
.order .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; border: 1.5px dashed var(--faint); font-size: 14px; }
.note.solid { border-style: solid; border-color: transparent; background: var(--soft); }
.snack { display: flex; align-items: center; gap: 10px; justify-content: space-between; min-height: var(--tap); padding: 4px 6px 4px 16px; border-radius: 999px; background: var(--ink); color: var(--page); font-size: 14px; }
.snack .link { color: var(--page); }

/* ---------- review (U05) ---------- */
.res { border-radius: var(--r-card); padding: 18px 16px; background: var(--soft); display: flex; flex-direction: column; gap: 10px; }
.res .verdict { display: flex; gap: 12px; align-items: flex-start; }
.res .verdict b { min-width: 0; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; } /* a flex item: without min-width 0 a long word keeps it wider than the screen at 200 % */
.res .verdict b:focus { outline: none; }
.res .sub { font-size: 14px; color: var(--dim); }
.gl { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 16px/1 var(--f-ui); }
.gl.pass { background: var(--ink); color: var(--page); }
.gl.fail { background: var(--acc); color: var(--ink); }
.gl.unknown { border: 1.5px dashed var(--ink); color: var(--ink); }
.gl.notApplicable { border: 1.5px solid var(--faint); color: var(--dim); }
.gl.sm { width: 24px; height: 24px; font-size: 13px; }
.cause { border-radius: var(--r-soft); padding: 14px; border: 1.5px solid var(--acc); background: var(--page); }
.cause.unknown { border: 1.5px dashed var(--ink); }
.cause .mono { color: var(--dim); }
.cause h3 { margin: 6px 0 4px; font-size: 17px; font-weight: 600; }
.cause p { margin: 0 0 4px; font-size: 14px; }
.cause .links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.asp { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.asp:first-child { border-top: 0; }
.asp .at { flex: 1; min-width: 0; }
.asp .at b { font-size: 14.5px; font-weight: 600; }
.asp .st { font-size: 12.5px; font-weight: 600; margin-left: 6px; }
.asp.fail .st { color: var(--acc); }
.asp .at p { margin: 3px 0 0; font-size: 13px; color: var(--dim); }
.asp .links { display: flex; flex-wrap: wrap; gap: 0 14px; }
.cmp { border-radius: var(--r-soft); background: var(--page); border: 1px solid var(--line); padding: 14px; }
.cmp-h { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cmp .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); gap: 8px; margin-top: 8px; } /* Було над Стало when two columns no longer fit (200 %) */
.cmp .row > div { border-radius: 14px; padding: 8px 10px; background: var(--soft); }
.cmp .row > div.was { background: transparent; border: 1.5px dashed var(--faint); }
.cmp .row .mono { color: var(--dim); display: block; }
.cmp .row b { font: 500 17px/1.2 var(--f-head); font-variant-numeric: tabular-nums; display: block; }
.cmp .row small { font-size: 12px; font-weight: 600; }
.cmp .row .was small { color: var(--acc); }

/* ---------- source (U06) ---------- */
.frag { font-family: var(--f-ui); margin: 0; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 46dvh; overflow: auto; }
.frag mark { background: linear-gradient(var(--acc-soft), var(--acc-soft)) no-repeat 0 0 / 100% 100%; color: var(--ink); box-shadow: inset 2px 0 0 var(--acc); padding: 1px 2px; border-radius: 3px; }
.quote { margin: 0; padding: 10px 12px; border-left: 3px solid var(--acc); background: var(--acc-soft); border-radius: 0 12px 12px 0; font-size: 14px; }

/* ---------- observation panel, badges, record (U01) ---------- */
.badge { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px; font: 400 9px/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; background: var(--soft); color: var(--ink); vertical-align: middle; white-space: nowrap; }
.badge.new { background: var(--acc); }
.obs-panel { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 7; display: flex; flex-direction: column; background: var(--page); border-radius: 18px; box-shadow: var(--shadow-toast); }
.card.has-vit .obs-panel { bottom: 62px; }
.obs-panel .ph { display: flex; align-items: flex-start; gap: 8px; padding: 8px 4px 4px 14px; flex: none; }
.obs-panel .pt { flex: 1; min-width: 0; padding-top: 6px; }
.obs-panel .pt b { font-weight: 600; font-size: 14px; display: block; }
.obs-panel .pt b.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* UX07: the full text is in the body */
.obs-panel .pt small { display: block; font-size: 12px; color: var(--dim); margin-top: 2px; }
.obs-panel .close { width: var(--tap); height: var(--tap); flex: none; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; }
.obs-panel .close:active { background: var(--soft); }
.obs-panel .pb { max-height: 142px; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 12px; }
.obs-panel .det { margin-top: 2px; }
.obs-panel .gi { padding: 6px 0; border-top: 1px solid var(--line); }
.obs-panel .grp > .mono { display: block; margin: 8px 0 2px; }
.obs-panel details.gi > summary { min-height: var(--tap); display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; font-size: 13.5px; font-weight: 500; list-style: none; }
.obs-panel details.gi > summary::-webkit-details-marker { display: none; }
.empty-body { position: absolute; left: 16px; right: 16px; top: 16px; z-index: 3; margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(248, 248, 248, .85); font-size: 13px; text-align: center; }
.allbtn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: var(--tap); padding: 0 14px; border: 0; border-radius: 999px; background: var(--soft); font-weight: 600; font-size: 14px; text-align: left; }
.allbtn small { font-weight: 400; color: var(--dim); font-size: 12px; }
.allbtn > span { display: flex; flex-direction: column; gap: 2px; }
.allbtn .chev { flex: none; transition: transform var(--m-flip) var(--ease-out); }
.allbtn.open { border-radius: 22px 22px 0 0; }
.allbtn.open .chev { transform: rotate(180deg); }
/* «Усі спостереження» unrolls inline under its button, part of the page, not a popup over the card */
.all-list { margin-top: -12px; padding: 2px 14px 10px; background: var(--soft); border-radius: 0 0 22px 22px; }
.all-list .det { margin-top: 2px; }
.all-list .gi { padding: 6px 0; border-top: 1px solid var(--line); }
.all-list .grp > .mono { display: block; margin: 8px 0 2px; }
.all-list details.gi > summary { min-height: var(--tap); display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; font-size: 13.5px; font-weight: 500; list-style: none; }
.all-list details.gi > summary::-webkit-details-marker { display: none; }
.record > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; }
.record > summary::-webkit-details-marker { display: none; }
.record > summary::after { content: '+'; margin-left: auto; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--soft); font-size: 13px; }
.record[open] > summary::after { content: '–'; }
.acts2 { display: flex; flex-direction: column; gap: 8px; }
.act2 small { display: block; margin-top: 4px; font-size: 12px; text-align: center; }
.link.mode { align-self: center; font-weight: 500; font-size: 13px; color: var(--dim); }
.tag { display: block; margin: 4px 0 0; font-size: 12px; color: var(--ink); background: var(--acc-soft); border-radius: 8px; padding: 3px 8px; width: fit-content; max-width: 100%; }
.link { text-align: left; }
.att { padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.att b { display: block; font-weight: 600; }
.att span { color: var(--dim); }
.kv dd.unk, .det dd.unk { display: inline-block; justify-self: start; border: 1.5px dashed var(--faint); border-radius: 8px; padding: 0 6px; font-weight: 400; }

/* ---------- options: radios and checkboxes as large rows ---------- */
.opts { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.opt { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: var(--tap); padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; text-align: left; transition: background-color var(--m-release) var(--ease-out), border-color var(--m-release) var(--ease-out); }
.opt > * { min-width: 0; } /* a long word wraps inside the option instead of widening it (200 %) */
.opt b { display: block; font-weight: 600; font-size: 14px; }
.opt small { display: block; font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.opt .dot, .opt .box { flex: none; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; }
.opt .box { border-radius: 6px; }
.opt[aria-checked='true'] { border-color: var(--ink); }
.opt[aria-checked='true'] .dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.opt[aria-checked='true'] .box { background: var(--ink); }
.opt[aria-checked='true'] .box::after { content: ''; width: 10px; height: 6px; border: 2px solid var(--page); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.opt[disabled] { opacity: .6; }
.seg.col { flex-direction: column; }
.seg.col button { align-items: flex-start; text-align: left; border-radius: 14px; }
/* An option that offers a product: its thumbnail leads, text beside it; the tile is grey on the white option and the
   page tint once the option is chosen (ink). */
.seg button.has-med { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding-left: 8px; text-align: left; }
.seg button.has-med > span:not(.med) { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.2; }
.seg button.has-med .med { --tile: var(--soft); transition: background-color var(--m-release) var(--ease-out); }
.seg button.has-med[aria-pressed='true'] .med { --tile: rgba(248, 248, 248, .92); }
/* 200 % zoom (a 195 px layout): the icons step aside so the names keep the room. */
@media (max-width: 300px) { .med { display: none; } }
.derived.col { flex-direction: column; align-items: flex-start; gap: 2px; }
.sc .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sc .lbl { display: block; margin-top: 10px; font-size: 14px; font-weight: 600; }
.order .err { margin-top: 8px; }

/* ---------- home and intro ---------- */
.cases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.case { display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: var(--tap); padding: 12px 14px; border: 0; border-radius: var(--r-soft); background: var(--soft); text-align: left; transition: background-color var(--m-release) var(--ease-out); }
.case:active { background: var(--gray); transition-duration: var(--m-press); }
.case b { font-size: 16px; font-weight: 600; }
.case .task2 { font-size: 13px; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.case .prog { align-self: flex-start; margin-top: 2px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1.5px dashed var(--faint); }
.case .prog.in_progress { border: 0; background: var(--acc-soft); }
.case .prog.done { border: 0; background: var(--ink); color: var(--page); }

/* ---------- dialog ---------- */
.scrim { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(22, 22, 24, .4); padding: 16px; animation: fade-in var(--m-dialog-in) var(--ease-out) both; }
.dlg { width: 100%; max-width: 488px; background: var(--page); border-radius: var(--r-card); padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-toast); animation: dlg-in var(--m-dialog-in) var(--ease-out) both; }
.dlg-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

/* ---------- motion (docs/MOTION.md; every duration is a --m-* token above) ---------- */
@property --sweep { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlg-in { from { opacity: 0; transform: scale(.96); } }
@keyframes sweep { from { --sweep: 0deg; } to { --sweep: 360deg; } }
@keyframes breathe { from { opacity: 1; } to { opacity: .6; } }

/* M02: a new screen slides in and fades with WAAPI in src/app.js (slideIn), live from its first frame, over an inert ghost
   of the old one; there is no View Transition, during which the browser would hit-test only its snapshot. */

/* M05 / M16: the clock rolls its digits (it is not an edited field). */
/* M06: the guidance ring draws itself, then breathes until the learner acts. */
.ring { -webkit-mask: conic-gradient(#000 var(--sweep), #0000 0); mask: conic-gradient(#000 var(--sweep), #0000 0); animation: sweep var(--m-ring) var(--ease-out) both, breathe calc(var(--m-breathe) / 2) ease-in-out var(--m-ring) infinite alternate; }
/* M12: pass and fail glyphs are strokes that draw; an unknown's dashed ring sweeps round. A fail cause has a left bar. */
.gl svg { width: 100%; height: 100%; }
.gl path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.gl.unknown { -webkit-mask: conic-gradient(#000 var(--sweep), #0000 0); mask: conic-gradient(#000 var(--sweep), #0000 0); }
.cause:not(.unknown) { position: relative; overflow: hidden; }
.cause:not(.unknown)::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--acc); transform-origin: top; }
/* M14: the old value of a corrected error is struck through (drawn left to right on arrival). */
/* One 2 px line through the middle of every text line (line-height 1.2), so a wrapped value is struck on each line. */
.cmp .was b { width: fit-content; background: linear-gradient(transparent calc(55% - 1px), currentColor 0 calc(55% + 1px), transparent 0) 0 0 / 100% 1.2em repeat-y; }
/* M10: the plan's revision counter bumps from its left edge. */
.rev { width: fit-content; transform-origin: left center; }
/* M16: the finished task carries its check. */
.task.done { display: flex; gap: 10px; align-items: flex-start; }
/* M15: the source is a bottom sheet over the screen it was opened from; a tap on the backdrop closes it. */
#app { position: relative; z-index: 2; }
#under { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
#under > div { max-width: 520px; margin: 0 auto; }
#sheet-scrim { position: fixed; inset: 0; z-index: 1; background: rgba(22, 22, 24, .4); }
.screen.sheet { min-height: calc(100dvh - 40px); margin-top: 40px; border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: var(--shadow-toast); background: var(--page); }
.ghost, .ghost * { transition: none !important; animation: none !important; } /* a copy must not replay its CSS entrances (.order.added, the ring) */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* ---------- approved design 2026-10-30 (docs/design/proposals/2026-10-30-conditions) ----------
   Ported verbatim from ../2026-10-30/proposal.css and v3.css: exactly the rules whose selectors match an element of
   frames 01–10 (docs/screenshots/frames/selectors.json, scripts/shot.mjs --selectors), in their order. .behind of the
   sheet frame is the existing #sheet-scrim above, with the screen it covers waiting in #under. */
.ib.end { margin: 0 -7px 0 0; }
.prog2 { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.prog2 .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prog2 .row b { font: 700 26px/1 var(--f-head); letter-spacing: -.02em; }
.prog2 .row b small { font: 500 15px var(--f-ui); color: var(--dim); letter-spacing: 0; margin-left: 4px; }
.sq { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.sq i { height: 12px; border-radius: 4px; background: var(--soft); }
.sq i.done { background: var(--ink); }
.sq i.next { box-shadow: inset 0 0 0 1.5px var(--acc); }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 104px; width: 100%; min-height: 236px; padding: 0; border: 0; border-radius: var(--r-card); background: var(--card-grad); overflow: hidden; text-align: left; }
.hero .txt { display: flex; flex-direction: column; gap: 8px; padding: 16px 0 16px 16px; min-width: 0; z-index: 2; }
.hero .h2x { display: block; font: 700 23px/1.06 var(--f-head); letter-spacing: -.015em; }
.unit-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 12px 2px 0; }
.unit-h b { font: 700 19px/1.1 var(--f-head); letter-spacing: -.01em; }
.path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.path::before { content: ''; position: absolute; left: 11px; top: 30px; bottom: 30px; width: 2px; background: var(--line); }
.node { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: center; }
.node .dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: var(--page); border: 2px solid var(--faint); display: grid; place-items: center; }
.node.done .dot { background: var(--ink); border-color: var(--ink); color: var(--page); }
.node.next .dot { border-color: var(--acc); }
.node.next .dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.node .dot svg { width: 13px; height: 13px; }
.nc { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 76px; padding: 12px 12px; border: 0; border-radius: var(--r-soft); background: var(--soft); text-align: left; }
.node.next .nc { background: var(--page); box-shadow: inset 0 0 0 1.5px var(--acc); }
.nc .t { flex: 1; min-width: 0; }
.nc b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; }
.nc .f { display: block; font-size: 12.5px; color: var(--dim); margin-top: 3px; line-height: 1.3; }
.peek { height: 40px; }
.sheet2 { position: relative; z-index: 41; display: flex; flex-direction: column; gap: 14px; min-height: calc(100dvh - 40px); margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 24px; border-radius: var(--r-card) var(--r-card) 0 0; background: var(--page); box-shadow: var(--shadow-toast); }
.sheet2 .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--faint); margin: 0 auto 2px; }
.sheet2 .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sheet2 .hd h2 { margin: 0; font: 700 24px/1.1 var(--f-head); letter-spacing: -.015em; }
.vp.nm { flex-direction: row; gap: 8px; padding: 0 14px; background: rgba(248, 248, 248, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vp.nm b { font: 500 13px/1 var(--f-ui); }
.resp { display: flex; flex-direction: column; gap: 0; padding: 4px 14px; border-radius: var(--r-soft); background: var(--soft); }
.resp > .mono { color: var(--dim); padding: 8px 0 2px; }
.rr { display: grid; grid-template-columns: minmax(44px, max-content) 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.3; }
.rr.nt { grid-template-columns: 1fr; } /* a case whose time does not matter shows no clock */
.resp > .mono + .rr { border-top: 0; }
.rr .t { white-space: nowrap; font: 400 11px var(--f-mono); color: var(--dim); font-variant-numeric: tabular-nums; padding-top: 2px; }
.rr b { font-weight: 600; }
.rr .src { display: block; font-size: 12px; color: var(--dim); margin-top: 2px; }
.facts { padding: 4px 14px 6px; border-radius: var(--r-soft); background: var(--soft); }
.facts > .mono { display: block; padding: 10px 0 4px; color: var(--dim); }
/* fit-content: the frames' short keys keep max-content; a long one (a revealed request) wraps instead of pushing the card wide. */
.facts dl { display: grid; grid-template-columns: fit-content(60%) minmax(0, 1fr); margin: 0; }
/* anywhere: at 200 % zoom (195 px) a key and a value too long for the card break inside a word, never scroll it sideways */
.facts dt, .facts dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.facts dt { padding-right: 16px; color: var(--dim); }
.facts dd { font-weight: 500; }
.facts dl > :nth-child(-n+2) { border-top: 0; }
.home2 .bar .ttl b { font-size: 19px; }
.modes4 { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.moderow { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 88px; padding: 14px; border: 0; border-radius: var(--r-soft); background: var(--soft); text-align: left; }
.moderow .ic { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--page); }
.moderow .t { flex: 1; min-width: 0; }
.moderow b { display: block; font: 700 17px/1.15 var(--f-head); letter-spacing: -.01em; }
.moderow small { display: block; font-size: 13.5px; line-height: 1.3; color: var(--dim); margin-top: 3px; }
.moderow .meta { display: block; font-size: 12.5px; font-weight: 600; margin-top: 6px; }
.moderow > svg { flex: none; color: var(--dim); }
.screen.menu .bar .ttl b { font: 700 22px/1.1 var(--f-head); letter-spacing: -.015em; }
.pvw { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 18px; overflow: hidden; background: var(--card-grad); }
.nc.sc3 { align-items: center; min-height: 108px; gap: 14px; }
.nc.sc3 b { font-size: 16px; line-height: 1.2; }
.nc.sc3 .f { font-size: 13.5px; line-height: 1.3; margin-top: 4px; }
.hero.h3 { grid-template-columns: minmax(0, 1fr) 136px; min-height: 196px; }
.hero.h3 .txt { gap: 8px; padding: 18px 4px 18px 16px; }
.hero.h3 .lab { font-size: 13px; font-weight: 600; color: var(--acc); }
.hero.h3 .h2x { font-size: 23px; line-height: 1.1; }
.hero.h3 .cap { font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.hero.h3 .pv { display: flex; align-items: center; justify-content: center; }
.hero.h3 .pv img { width: 124px; height: 124px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(22, 22, 24, .14)); }
.mod { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; border-radius: var(--r-soft); background: var(--soft); }
.mod > .mono { color: var(--dim); }
.mod p { margin: 0; font-size: 15.5px; line-height: 1.4; }
.mod.task-m p { font-weight: 500; }
.facts.mod { gap: 0; padding: 4px 14px 6px; }
/* Stage 1 modules the frames do not draw: the task's notes as a list (r520) and the tray rows on the module's soft fill. */
.task-m ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.4; }
.tray .prod { background: var(--page); }
.prow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-soft); background: var(--soft); }
.prow .t { flex: 1; min-width: 0; }
.prow b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.2; }
.prow small { display: block; font-size: 13px; color: var(--dim); margin-top: 2px; }
.prow .link { flex: none; font-size: 13.5px; }
.xbtn { flex: none; width: var(--tap); height: var(--tap); margin-right: -8px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; }
.xbtn span { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; }
.sheet2 .cta-bar { margin-top: auto; }
.verd { display: flex; align-items: center; gap: 10px; }
.verd .k { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--page); }
.verd.bad .k { background: var(--acc); }
.verd b { min-width: 0; overflow-wrap: anywhere; font: 700 19px/1.15 var(--f-head); letter-spacing: -.01em; } /* «Невизначеність» alone is wider than 195 px less the tick */
.sum { display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr); margin: 2px 0 0; }
.sum dt, .sum dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.3; }
.sum dt { padding-right: 16px; color: var(--dim); }
.sum dd { font-weight: 500; }
.sum dd small { display: block; font-weight: 400; color: var(--dim); font-size: 13px; margin-top: 2px; }
.src2 { font-size: 12.5px; color: var(--dim); }
.src2 u { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.verd:focus { outline: none; } /* focused on arrival so it is read out (INTERFACE.md:101), not a control */
/* The frame's .src2 is a link: as a button it drops the button chrome and keeps a full tap height. Under text in a
   module (frames 06, 07, 10) it takes only its line's height in the layout, one line or two, so the text sits where
   the frames draw it, and its tap area reaches 15 px past each side; a second one in a row keeps the areas apart. */
button.src2 { display: block; min-height: var(--tap); padding: 0; border: 0; background: none; font-family: inherit; text-align: left; }
.mod > button.src2, .ia > button.src2 { padding: 15px 0; margin: -15px 0; }
.mod > button.src2 + button.src2 { margin-top: 15px; }
.clist { display: flex; flex-direction: column; border-radius: var(--r-soft); background: var(--soft); padding: 0 14px; }
.crow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; }
.crow:first-child { border-top: 0; }
.crow .t { flex: 1; min-width: 0; }
.crow b { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; }
.crow small { display: block; font-size: 13px; color: var(--dim); margin-top: 2px; }
.crow > svg { flex: none; color: var(--dim); }
.tabs2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.tabs2 button { min-height: var(--tap); padding: 0; border: 0; background: none; font-size: 14.5px; font-weight: 600; color: var(--dim); border-bottom: 2.5px solid transparent; }
.tabs2 button[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--ink); }
.ch { margin: 4px 2px 0; }
.ch h2 { margin: 0; font: 700 24px/1.1 var(--f-head); letter-spacing: -.015em; }
.ch p { margin: 6px 0 0; font-size: 14.5px; color: var(--dim); line-height: 1.35; }
.qn { font: 400 11px var(--f-mono); color: var(--dim); margin-right: 6px; }
.selrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 14px 6px 6px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; text-align: left; font-size: 15px; }
.selrow .med { --tile: var(--soft); }
.selrow span.t { flex: 1; min-width: 0; }
.selrow small { display: block; font-size: 12.5px; color: var(--dim); }
.selrow > svg { flex: none; color: var(--dim); }
.cres { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-soft); background: var(--ink); color: var(--page); }
.cres .mono { opacity: .7; }
.cres .nums { display: flex; gap: 22px; flex-wrap: wrap; }
.cres .nums b { display: block; font: 700 30px/1 var(--f-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cres .nums small { display: block; font-size: 12.5px; opacity: .75; margin-top: 4px; }
.cres .how { font: 400 12.5px/1.45 var(--f-mono); opacity: .8; font-variant-numeric: tabular-nums; }
.note2 { font-size: 12.5px; color: var(--dim); line-height: 1.4; margin: 0 2px; }
.chips2 { display: flex; flex-wrap: wrap; gap: 8px; }
.chip2 { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 6px 0 6px; border-radius: 999px; background: var(--soft); font-size: 14.5px; font-weight: 600; }
.chip2 .med { --tile: rgba(248, 248, 248, .9); }
.chip2 button { width: 48px; height: 48px; margin: 0 -6px 0 -8px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; color: var(--dim); }
.found { font: 700 19px/1.15 var(--f-head); letter-spacing: -.01em; margin: 6px 2px 0; }
.sev { display: flex; flex-direction: column; gap: 8px; }
.sev > h3 { display: flex; align-items: center; gap: 8px; margin: 4px 2px 0; font-size: 14px; font-weight: 700; }
.sev > h3 i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.sev.serious > h3 i, .sev.contraindicated > h3 i { background: var(--acc); }
.sev.monitor > h3 i, .sev.minor > h3 i { background: transparent; box-shadow: inset 0 0 0 2px var(--acc); }
.sev > h3 span { font-weight: 400; color: var(--dim); }
.ia { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r-soft); background: var(--soft); }
.ia b { font-size: 15.5px; font-weight: 600; }
.ia p { margin: 0; font-size: 14px; line-height: 1.4; }
.pvw img.a { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.hero.h3 .pv.art { align-items: flex-end; padding: 10px 6px 0 0; }
.hero.h3 .pv.art img { width: 130px; height: 100%; max-height: 186px; object-fit: contain; object-position: bottom; filter: none; }
/* 200 % zoom (195 px): drop the decorative art columns and tighten the path card so titles wrap by word
   («елементарний» needs 115 px, «Медикаментозні» fits 163 px at 19 px, the list screens' title size); keep the gear on the right */
@media (max-width: 300px) { .hero.h3 { grid-template-columns: minmax(0, 1fr); } .hero.h3 .pv, .pvw, .moderow .ic { display: none; } .bar .ib.end { margin-left: auto; }
  .node { gap: 6px; } .nc.sc3 { padding-inline: 8px; } .screen.menu .bar .ttl b { font-size: 19px; } }
.pill .ic { color: var(--acc); }
.pill .ic.k { background: var(--ink); color: var(--page); }
.vp.nm .ics { display: flex; gap: 7px; color: var(--dim); }