/* =========================================================================
   public/css/chart.css — the patient chart (P16), in the design system app.css already sets.

   No new colours and no new fonts: every value below is a token from theme.css, and the shapes
   are the ones the encounter room and the Formulary already use — the card, the pill, the
   segmented nav, the coral/teal accents, Nunito for prose and JetBrains Mono for identifiers.
   The chart is a NEW organisation of existing furniture, not a second visual language.

   Three things are genuinely new and are the only reasons this file exists:
     · the patient banner, with its pill row and the key/value strip under it (v1's `pbanner`);
     · the projected item — a provenance line above a definition list, repeated down a tab;
     · the group drawer, a right-hand sheet that hosts the GENERIC renderer at chart width.
   ========================================================================= */

.chart{display:flex;flex-direction:column;gap:18px}

/* ---------------------------------------------------------------- the banner */

/* P22 — OLD's `pbanner`, rebuilt: the rounded avatar tile, the name, the chip row, the stat
   columns under a rule, and the quick-edit strip at the foot of the card. The curves are the
   theme's own (`--r` on the card, `--pill` on every chip, `--r-lg`-scale on the tile); nothing
   here introduces a radius that is not already in the token set. */
.pbanner{display:flex;flex-direction:column;gap:16px}
.pb-top{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.pb-id{min-width:0;flex:1}
.pb-name{font:900 var(--fs-2xl)/1.15 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.ch-pills{margin-top:9px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
/* OLD put the two verbs on the right of the name, where the eye lands after reading it. */
.ch-head-actions{flex:none;margin-left:auto;align-items:center}

/* The key/value strip: a chart's identity facts, readable at a glance and never a form. */
.pb-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px 22px;
  padding-top:15px;border-top:1px dashed var(--line)}
.pb-cell{min-width:0}
.pb-kv .k{font:900 var(--fs-2xs)/1 var(--font-sans);letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px}
.pb-kv .v{font:700 var(--fs-sm)/1.35 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
/* A stat whose SOURCE is not configured yet — today only the CareGroup, on a deployment where
   PhilHealth has not registered the clinic. It is drawn in the same muted italic the home
   dashboard uses for the same blank (P19), because it is the same blank. */
.pb-cell.unset .v{font-weight:650;font-style:italic;color:var(--ink-3);cursor:help}

.ch-actions{gap:9px;flex-wrap:wrap;align-items:center}
/* "A consultation opens once a first encounter exists" is guidance, not a tag: a `.pill` is
   nowrap and a sentence in one runs off the side of a phone. P17. */
.ch-locked{font:650 var(--fs-xs)/1.4 var(--font-sans);color:var(--ink-3);max-width:44ch}

/* ---- quick edit: two facts that live on an encounter, shown and saved through the engine ----
   P22 restores OLD's shape — a labelled row of selects with a mint Save at the end — over P16's
   correctness: the selects are DISABLED when there is no draft to write onto, and the hint under
   them says why (D-106 stands; only the presentation changed). */
.ch-quick{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;padding-top:2px}
.qe-t{font:900 var(--fs-2xs)/1 var(--font-sans);letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--teal-700);padding-bottom:13px}
.qe-field{margin-bottom:0;min-width:170px}
.qe-field select{width:100%}
.qe-act{min-width:0;flex:none}
.qe-act label{visibility:hidden}
.qe-when,.qe-note{font:600 var(--fs-2xs)/1.35 var(--font-sans);color:var(--ink-3);margin-top:5px}
.qe-note{color:var(--warn)}

/* ---------------------------------------------------------------- lenses and tabs */

/* `.pillnav` — the segmented pill nav v1 used for both lens and tab switching, rebuilt on v3's
   tokens. It is a row of buttons with one `.on`, not a set of links: switching a lens changes
   nothing in the URL, because a chart is one destination and the tabs are how you read it.

   It is NOT the theme's `.seg`, and until P17 it was written as one — a second, differently
   shaped definition of a shared class name, sitting in a later stylesheet, silently winning
   everywhere. Two controls that look different need two names. `.seg` (teal-on-white, the
   calendar's and the room's) is the theme's; `.pillnav` (coral-on-white) is the chart's, and
   the class list in `chart.js` no longer claims both.

   P24-follow-up — v1 drew this family as TWO shapes, and v3 had flattened both into one
   full-width strip of thin text. They are back:

     · `.pillnav` — a segmented GROUP: a sunken track that HUGS its options (`width:fit-content`,
       so a two-option lens is two options wide and not a white band across the page), with the
       marked option a filled pill inside it. v1's `.seg`, in v3's coral.
     · `.pillnav.tabnav` — a row of INDIVIDUAL pills: no track at all, each option its own
       bordered white button with its own shadow, wrapping onto a second line rather than
       squeezing eight labels into one. v1's `.seg.pillnav`, and the reason its eight chart tabs
       read as eight things you can press. */
.pillnav{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--line);
  border-radius:var(--pill);background:var(--neutral-100);
  box-shadow:inset 0 1px 2px rgba(23,28,38,.06);width:fit-content;max-width:100%}
/* `isolation:isolate` is load-bearing, not decoration: it gives each tab its own stacking
   context so the `::before` fill below can sit at `z-index:-1` — above the button's own
   background, under its label — without falling behind `.pillnav`'s surface. */
.pillnav button{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:7px;
  border:1px solid transparent;background:none;cursor:pointer;white-space:nowrap;
  border-radius:var(--pill);padding:10px 22px;font:800 var(--fs-md)/1 var(--font-sans);color:var(--ink-2);
  transition:background-color var(--t-state),color var(--t-state),border-color var(--t-state),
    transform var(--t-press) var(--ease-press)}
.pillnav button .i{width:15px;height:15px}
.pillnav button:hover{background:var(--teal-50);color:var(--teal-ink)}
.pillnav button:focus-visible{outline:2px solid var(--teal-500);outline-offset:1px}
.pillnav button:active{transform:scale(.96)}
/* P21 — the coral fill CROSS-FADES between tabs instead of blinking.
   OLD's answer to this was `.seg-thumb`, one glass pill that slides between options. That control
   is `.seg`, and YAKAP3 draws exactly zero of them (chart.js builds `.pillnav` three times and
   nothing builds a `.seg`), so porting the thumb would have been dead CSS plus dead JS. It is
   also the wrong mechanic here: `.tabnav` WRAPS — eight chart tabs on a phone sit on three
   lines — and a thumb sliding diagonally across a wrapped row is worse than no thumb at all.
   So the fill is a `::before` at opacity 0 under every tab, raised to 1 on the marked one: a
   gradient background-image cannot be transitioned from `none`, but an element's opacity can. */
.pillnav button::before{content:"";position:absolute;inset:0;border-radius:var(--pill);z-index:-1;
  background:linear-gradient(180deg,var(--brand-hi),var(--brand));opacity:0;
  transition:opacity var(--t-state) ease}
.pillnav button.on{color:#fff}
.pillnav button.on::before{opacity:1}
.pillnav button.on:hover{background:none;color:#fff}
.pillnav button.on .pill{background:rgba(255,255,255,.26);color:#fff}
/* The mode toggle inside the tab bar: the same group, sized to sit under the tabs rather than
   compete with them. */
.pillnav.sm{padding:3px}
.pillnav.sm button{padding:7px 15px;font-size:var(--fs-xs)}

/* ---- the eight tabs: v1's individual pills ---- */
/* No track, no inner padding — the container is only a wrapping flex row, and everything that
   makes a tab look pressable is on the button itself. */
.pillnav.tabnav{gap:8px;padding:0;border-color:transparent;background:none;box-shadow:none;
  border-radius:0;width:100%}
.pillnav.tabnav button{border-color:var(--line);background:var(--surface);box-shadow:var(--shadow);
  padding:11px 16px;font-size:var(--fs-sm);
  transition:background-color var(--t-state),color var(--t-state),border-color var(--t-state),
    box-shadow var(--t-state),transform var(--t-press) var(--ease-press)}
.pillnav.tabnav button:hover{background:var(--teal-50);border-color:var(--teal-line);
  color:var(--teal-ink)}
/* `inset:0` is the PADDING box, so the coral fill stops short of the border it has to replace —
   the marked pill therefore recolours its own border rather than hiding it. */
.pillnav.tabnav button.on{border-color:var(--brand);box-shadow:var(--shadow-coral)}
.pillnav.tabnav button.on:hover{background:none;border-color:var(--brand);color:#fff}

/* The lens row sticks to the top of the reading column. Deliberately BELOW `--z-menu`: a
   combobox opened in a panel underneath has to be able to cover it. */
.chart-lens{position:sticky;top:0;z-index:3;padding:2px 0 4px;background:var(--bg)}
/* Two structural hosts the page has always created and nothing ever styled. They are flow
   containers, and saying so is what stops the next reader from hunting for a rule. */
.chart-head,.chart-body{display:block;min-width:0}
.chart-tabs{margin-bottom:14px}
/* The count rides INSIDE its pill, so the button's own `gap` spaces it — a margin here used to
   add a second, different gap on top of that one. */
.chart-tabs .pill{padding:1px 7px;font-size:var(--fs-2xs)}
.chart-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.chart-blurb{flex:1;min-width:180px;font:600 var(--fs-xs)/1.45 var(--font-sans);color:var(--ink-3)}
.chart-modes{flex:none}
.chart-panels{display:flex;flex-direction:column;gap:16px}
/* P21 — switching lens or tab replaces this whole wrapper, so the swap gets OLD's own entrance
   curve at a third of its length. 180ms and opacity-only: eight tabs is a thing people flick
   through while a patient is talking, and a tab switch that takes half a second to settle is a
   tab switch people stop using. It is not `both`-filled — the panel is on screen from frame one
   and only fades UP, so nothing is ever hidden waiting for a keyframe. */
.chart-profile,.chart-record{display:flex;flex-direction:column;gap:16px;
  animation:tabIn .18s var(--ease-out)}
@keyframes tabIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.chart-profile{gap:16px}

/* ---------------------------------------------------------------- a projected group */

.chart-group .card-h h3{font:900 var(--fs-md)/1 var(--font-mono);letter-spacing:.02em;color:var(--ink)}
.chart-group .card-h .btn{margin-left:auto}
.chart-group-b{padding:16px;display:flex;flex-direction:column;gap:12px}
.chart-group-b>.empty{padding:18px}

/* ---- one item: where it came from, then what it says ---- */
.chart-item{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
  padding:13px 15px}
.ci-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ci-h .btn{margin-left:auto}
.ci-when{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.ci-date{font:800 var(--fs-xs)/1 var(--font-sans);color:var(--ink-2)}
.ci-label{font-size:var(--fs-2xs);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:32ch}
.ci-values{display:grid;grid-template-columns:minmax(140px,auto) minmax(0,1fr);gap:6px 18px;margin:0}
.ci-values dt{font:800 var(--fs-2xs)/1.4 var(--font-sans);color:var(--ink-3)}
.ci-values dd{margin:0;font:600 var(--fs-sm)/1.45 var(--font-sans);color:var(--ink);min-width:0;
  overflow-wrap:anywhere}
.ci-code{margin-left:8px;font-size:var(--fs-2xs);color:var(--ink-3)}

/* ---- the Encounters tab's own row ---- */
.enc-row .enc-marks{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.enc-sig{margin-top:9px;font:600 var(--fs-xs)/1.45 var(--font-sans);color:var(--ink-3)}

/* ---- allergies: the one clinical fact the dictionary has no group for ---- */
.allergy{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 13px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.allergy .al-sub{font:900 var(--fs-sm)/1 var(--font-sans);color:var(--error-dark)}
.allergy .al-rx{font:600 var(--fs-xs)/1.4 var(--font-sans);color:var(--ink-2)}
.allergy .al-when{margin-left:auto;font:600 var(--fs-2xs)/1 var(--font-sans);color:var(--ink-3)}
.allergy.edit{background:var(--surface)}
.allergy.edit .ctl{flex:1 1 180px;min-width:0}
/* The allergies card is a `.chart-group-b`, i.e. a flex COLUMN — see chart.js for why the
   "Add another" button is wrapped rather than left to stretch across it. */
.chart-allergies .chart-group-b{gap:10px}

/* ---- maintenance medications: chart-owned, and the one list that comes back off (P22) ----

   OLD's card, rebuilt on this app's furniture: a table of what the member takes, then a DASHED
   add-zone under it. The dashes are the whole signal — everything above the line is the record,
   everything inside it is a thing being composed and does not exist yet. */
.chart-meds .chart-group-b{gap:16px}
.med-table th{padding-top:0}
.med-table td{vertical-align:top}
.med-table .ci-code{margin-left:7px}
.med-when{margin-top:3px;font:600 var(--fs-2xs)/1.3 var(--font-sans);color:var(--ink-3)}

.addform{background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--r);
  padding:16px}
/* OLD's little section rule: a caption with a hairline running off to the right of it. */
.fsec{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.fsec-t{font:900 var(--fs-2xs)/1 var(--font-sans);letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.fsec::after{content:"";flex:1;height:1px;background:var(--line-2)}
.med-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.med-grid .combo{width:100%}
/* OLD's full-width coral CTA. A primary action that spans its zone is how the eye finds the end
   of a form without reading it. */
.med-act{margin-top:14px}
.med-act .btn.block{width:100%}

/* ---- scored questionnaires: chart-owned, append-only, never in a claim (P20) ---- */

/* Same furniture as everything above it — the card, the item, the pill — because a questionnaire
   result IS a chart item: a provenance line, then what it said. What is new is the radio grid the
   form draws and the score strip under it, and both are v1's shapes rebuilt on v3's tokens. */
.chart-evaluations .card-h{flex-wrap:wrap;gap:8px}
.chart-evaluations .card-h .btn{margin-left:0}
.chart-evaluations .card-h .btn[data-administer]:first-of-type{margin-left:auto}
.eval-row .ev-name{font:800 var(--fs-xs)/1 var(--font-sans);color:var(--teal-ink)}
.eval-row .ci-h .pill{margin-left:auto}
.eval-row .ci-h .btn{margin-left:0}
.ev-answers{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.ev-answers dt{font-weight:650;color:var(--ink-2)}
.ev-answers dd{font-weight:800}

.ev-form{display:flex;flex-direction:column;gap:10px}
.ev-form>.note{margin-bottom:4px}
.ev-q{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2)}
.ev-qt{display:flex;gap:9px;align-items:baseline;font:650 var(--fs-sm)/1.45 var(--font-sans);color:var(--ink)}
.ev-qt .n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--teal-50);
  color:var(--teal-ink);font:900 var(--fs-2xs)/22px var(--font-mono);text-align:center}
.ev-opts{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;padding-left:31px}
.ev-o{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--pill);background:var(--surface);
  font:700 var(--fs-xs)/1 var(--font-sans);color:var(--ink-2);transition:background-color .16s,color .16s,border-color .16s}
.ev-o:hover{border-color:var(--teal-500);color:var(--teal-ink)}
.ev-o.on{background:linear-gradient(180deg,var(--brand-hi),var(--brand));border-color:transparent;color:#fff}
.ev-o input{position:absolute;opacity:0;width:0;height:0}
.ev-o:focus-within{outline:2px solid var(--teal-500);outline-offset:1px}

/* The live strip: v1's footer, which is what makes a 20-item form bearable. It is a PREVIEW —
   the stored score is the Worker's, computed from the answers (D-111). */
/* The strip changes colour the moment the last item is answered and again if the score crosses a
   band. Both are state changes on an element already on screen, so they are transitions, not
   animations — the number itself never waits. */
.ev-score{display:flex;flex-wrap:wrap;gap:10px 24px;padding:13px 15px;margin-top:4px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
  transition:border-color var(--t-scrim) ease,background-color var(--t-scrim) ease}
.ev-score>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.ev-score .band{flex:1;min-width:140px}
.ev-score .k{font:900 var(--fs-2xs)/1 var(--font-sans);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink-3)}
.ev-score .v{font:800 var(--fs-sm)/1.3 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
.ev-score.full{border-color:var(--teal-500);background:var(--teal-50)}
.ev-score.full.alert{border-color:var(--warn);background:var(--warn-50,var(--surface-2))}
.ev-score.full.alert .v{color:var(--warn-ink,var(--ink))}

/* ---- data mode: the generic renderer, read-only, at chart width ---- */
.chart-raw .card-h{gap:10px}
.chart-raw-b{padding:4px 16px 16px}
.chart-raw-b .grp{box-shadow:none;border-color:var(--line-2)}

/* ---------------------------------------------------------------- the group drawer */

/* The drawer IS the generic renderer, scoped to one group. It is a sheet rather than a modal so
   the chart behind it stays legible — the clinician is checking one group against the rest. */
/* `--z-sheet`, not a bare 60. Below 120 the floating mobile tab bar rendered ON TOP of the
   drawer's own footer — which is where Save, Cancel and "Open the encounter" live — so on a phone
   the sheet could be opened and not acted on. The bar is also hidden outright while a sheet is
   up (`body.drawer-open`), because a navigation control behind a modal is a trap either way. */
.drawer-scrim{position:fixed;inset:0;z-index:var(--z-sheet);background:var(--scrim);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  display:none;justify-content:flex-end}
.drawer-scrim.show{display:flex;animation:scrimFade .24s ease}
.drawer-scrim.show .drawer{animation:drawerIn .28s cubic-bezier(.32,1.1,.42,1)}
@keyframes drawerIn{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.drawer{width:min(620px,100%);height:100%;display:flex;flex-direction:column;
  background:var(--bg);border-left:1px solid var(--line);box-shadow:-18px 0 44px rgba(23,28,38,.18)}
.drawer-h{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;
  border-bottom:1px solid var(--line);background:var(--surface)}
.drawer-h h3{font:900 var(--fs)/1.2 var(--font-mono);letter-spacing:.02em;color:var(--ink)}
.drawer-h p{margin-top:4px;font-size:var(--fs-xs);font-family:var(--font-mono)}
.drawer-h .btn{margin-left:auto}
.drawer-b{flex:1;min-height:0;overflow:auto;padding:18px 20px;-webkit-overflow-scrolling:touch}
.drawer-b .grp{margin-bottom:0}
.drawer-f{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:14px 20px;
  border-top:1px solid var(--line);background:var(--surface)}
.drawer-f .btn:last-child{margin-left:auto}
.drawer>.note{margin:14px 20px 0}

/* ---------------------------------------------------------------- narrow screens */

/* 880px, which is where the shell drops its sidebar (theme.css) — not 900, which was 20px of
   no-man's-land where the chart was in mobile layout and the app around it was not. P17. */
/* ---------------------------------------------------------------- the page's own arrival (P22)

   The chart's stagger — the banner, then the lens row, then the body — is defined ONCE, in
   theme.css, which NAMES the three panels (`.chart-head`, `.chart-lens`, `.chart-body`). It
   used to be defined twice: this file also carried a counting version (`> *:nth-child(n)`), and
   the two rules then fought over the same elements at the same specificity, with the later
   stylesheet quietly winning. Worse, the counting one reached the fourth child — the drawer's
   fixed-position scrim — and had to be un-reached again by a fourth rule, which is the shape of
   a workaround for a duplicate rather than a design (D-116). Deleted here; theme.css's named
   rules are the definition, and `tests/ui-motion.test.mjs` now asserts that no two stylesheets
   declare an entrance for the same `#view.view-enter>` prefix. */

/* A row added to (or taken off) the maintenance list re-paints the card, so the card's rows get
   the same short arrival the chart's tab panels use — 180ms, opacity-led, so the list settles
   before the eye has finished travelling back to it. */
.chart-meds .med-table tr{animation:tabIn .18s var(--ease-out) both}

@media (max-width:880px){
  .pb-name{font-size:var(--fs-xl)}
  /* P26 — the quick-edit row aligns on the BASELINE of its controls, which on a phone means the
     two labels sit at different heights as soon as one field carries a provenance line under it.
     Two selects side by side are two selects: they start at the same top edge. */
  .ch-quick{align-items:flex-start}
  .ch-head-actions{margin-left:0;width:100%}
  .ch-head-actions .btn{flex:1 1 auto}
  .qe-t{flex:1 1 100%;padding-bottom:0}
  .qe-field{min-width:0;flex:1 1 46%}
  .qe-act{flex:1 1 100%}
  .qe-act .btn{width:100%}
  .ev-opts{padding-left:0}
  .ev-o{flex:1 1 auto;justify-content:center}
  .ci-values{grid-template-columns:minmax(0,1fr)}
  .ci-values dd{margin-bottom:4px}
  .chart-lens{position:static}
  .ch-actions{width:100%}
  .ch-actions .btn{flex:1 1 auto}
  .drawer{width:100%}
  .drawer-f{gap:8px}
  .drawer-f .btn{flex:1 1 auto}
  .drawer-f .btn:last-child{margin-left:0;flex-basis:100%}
  /* The lens toggle keeps HUGGING on a phone — two options are two options wide there too, and
     stretching them edge to edge is what made the control read as a strip of page furniture
     rather than a thing to press. Only the padding comes in. */
  .pillnav button{padding:9px 16px;font-size:var(--fs-sm)}
  .pillnav.sm button{padding:6px 12px;font-size:var(--fs-xs)}
  /* The tab strip is eight options wide. It wraps rather than squeezing them to illegibility,
     and each pill keeps its full height so a thumb has something to land on. */
  .pillnav.tabnav button{padding:10px 13px;font-size:var(--fs-xs)}
}

/* ---------------------------------------------------------------- touch targets (P26) */

/* The chart's own controls, held to the 44px floor theme.css sets for every button on a coarse
   pointer. These three are the ones this file draws itself: the lens toggle and the eight tab
   pills (measured at 33px and 37px on a 375px phone — the primary navigation of the whole
   screen), and a questionnaire's answer options, which are twenty rows of four. Nothing here
   reaches a mouse: `pointer:coarse` is the fence. */
@media (pointer:coarse){
  .pillnav button{min-height:44px}
  .pillnav.sm button{min-height:44px}
  .ev-o{min-height:44px}
}

/* ---------------------------------------------------------------- print */

/* The chart is a reading surface and people print it. Without this, a Cmd+P from the chart put
   the drawer's full-viewport scrim on the page as a grey wash (theme.css hides it now) and left
   the sticky lens row floating over the first tab. Nothing here touches a slip: `slips.js`
   replaces the whole view before it prints, and the Annex-H geometry lives in slips.css. */
@media print{
  .chart-lens,.chart-tabs,.chart-modes,.pillnav{display:none !important}
  /* The add-zone is a thing being composed, not part of the record — it does not go on paper. */
  .addform,.ch-quick{display:none !important}
  /* The tab entrance, the stagger and the row arrival are all cancelled for paper by theme.css's
     one universal print rule (D-116) — a chart caught mid-switch prints the panel at its own
     opacity, not at whatever the keyframe had reached, and no list here has to be maintained
     for that to stay true. */
  .chart{gap:12px}
  .chart-item,.allergy,.ev-q,.ev-score{break-inside:avoid}
  .chart-group{break-inside:auto}
}