/* ============================================================
   MediMetRx Intake Kiosk — Modernist design system
   Per design handoff (820x1180 portrait iPad). Radius 0, 2px section
   rules, 1px inner rules, Archivo throughout.

   One deliberate deviation from the handoff: footer/meta text uses
   #605d5d, not #7d7979. #7d7979 on #f3f2f2 measures 3.63:1 and fails
   WCAG AA for 13px text; #605d5d is 6.02:1. Everything else is as specced.
   Contrast checked: text/bg 17.5:1, accent-700/bg 4.6:1, text/accent 7.5:1.
   NEVER white text on #f7941e (2.3:1) — #201e1d on orange is 7.5:1.
   ============================================================ */

:root{
  --bg:#f3f2f2; --surface:#eae9e9; --text:#4b4d52; --btn-ink:#2b2725;
  --accent:#f7941e;
  --a100:#fff4e6; --a200:#ffe3bf; --a300:#ffcb8a; --a400:#ffb04f;
  --a600:#d87a0c; --a700:#a85b00; --a800:#7a4200;
  --gray:#bdbec0;                 /* logo gray / rules */
  --n200:#eae7e7; --n300:#d7d3d3; --n600:#63666b; --n700:#63666b;
  --ok:#0e6b45; --alert:#a32020;
  --font:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --rule:2px solid var(--gray);
  --hair:1px solid var(--gray);
}

*{box-sizing:border-box; touch-action:manipulation}
/* Class rules like .km-big{display:flex} and .km-cam img{display:block} outrank
   the UA's [hidden]{display:none}, so el.hidden silently did nothing on the
   camera preview, the captured still and the staff/print buttons. */
[hidden]{display:none!important}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:17px; line-height:1.45; font-weight:400;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none; overscroll-behavior:none; user-select:none;
}
input,textarea{user-select:text}
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-.015em; line-height:1.04}
p{margin:0}
img{max-width:100%}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- frame: header 84 / body 1fr / footer 64 ---------- */
#frame{
  min-height:100dvh; display:grid; grid-template-rows:1fr;
  max-width:820px; margin:0 auto; background:var(--bg);
}
/* Brand sits directly above the heading — no separate top bar, no clock. */
.km-brand{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:20px; cursor:default}
/* The real artwork, not a typeset approximation — the wordmark is a specific
   face that Archivo does not match. Both are crops of the master vector. */
.km-mark{height:54px; width:auto; display:block}
.km-word{height:26px; width:auto; display:block}
/* The drawn wordmark reads "MedimetRx". Owner's spelling is MediMetRx, bold, so
   the name is set in type and only the head-and-chart mark stays as artwork. */
/* The wordmark is the original artwork, thickened by stroking each glyph in its
   own colour, with a real capital M dropped into the lowercase m's slot from the
   same typeface. The Rx was always one path and is never split.
   Cap height is set to 27px so it sits at the same weight as a tile heading. */
.km-wordimg{height:35px; width:auto; display:block}
.km-wordimg.big{height:50px; margin:10px auto 0; display:block}
/* Quiet echo of the welcome tile symbol, so a patient can see at a glance which
   path they are on. Height-matched like the tiles so the landscape and portrait
   marks read at the same weight. */
/* Welcome only: the vertical lockup, sized so column one matches the QR card. */
.km-brand.lockup{display:block; margin-bottom:20px}
.km-full{height:132px; width:auto; display:block; margin:0 auto}

.km-symbol{height:64px; width:auto; max-width:140px; object-fit:contain;
  display:block; margin:0 auto 18px}

.km-body{overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column}

/* ---------- screens ---------- */
.km-screen{display:none; flex-direction:column; flex:1; min-height:0}
.km-screen.on{display:flex; animation:kmin .28s ease-out}
@keyframes kmin{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

.km-head{padding:34px 40px 28px}
.km-kicker{font-size:14px; text-transform:uppercase; letter-spacing:.1em; color:var(--a700);
  font-weight:600; margin-bottom:14px}
.km-head h1{font-size:46px; margin-bottom:12px}
#s-welcome .km-head h1{font-size:64px}
#s-done .km-head h1{font-size:56px}
#s-member .km-head h1{font-size:44px}
.km-lede{font-size:18px; color:var(--n700); max-width:60ch}

.km-main{flex:1; padding:0; min-height:0}
.km-pad{padding:30px 40px}

.km-foot{padding:20px 40px 24px; border-top:var(--rule);
  display:grid; grid-template-columns:1fr 1fr; gap:12px}
.km-foot.one{grid-template-columns:1fr}

/* ---------- buttons ---------- */
.km-big{
  min-height:68px; font-family:var(--font); font-size:21px; font-weight:800;
  letter-spacing:-.01em; text-align:left; padding:0 24px; border-radius:0;
  border:1px solid transparent; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:14px; width:100%;
  background:var(--accent); color:var(--btn-ink);
}
.km-big:hover{background:var(--a600)}
.km-big:active{background:var(--a700); color:#fff}
.km-big.sec{background:transparent; border-color:var(--gray); color:var(--btn-ink)}
.km-big.sec:hover{background:rgba(32,30,29,.07)}
.km-big:disabled{opacity:.45; cursor:not-allowed}
.km-big:focus-visible,.km-link:focus-visible,.km-input:focus-visible,
.km-tile:focus-visible,.km-key:focus-visible,.km-seg:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px}

/* ---------- welcome tiles ---------- */
.km-tile{
  display:grid; grid-template-columns:150px 1fr 40px; align-items:center; gap:24px;
  padding:26px 40px; width:100%; border:0;
  background:none;
  font-family:var(--font); text-align:left; color:var(--text); cursor:pointer;
}
.km-tile:hover{background:var(--a100)}
.km-tile:active{background:var(--a200)}
.km-tile.ft{background:var(--a100)}
.km-tile.ft:hover{background:var(--a200)}
/* Clinic's own check-in symbols, cropped to the graphic — the wordmark baked
   into the source art is unreadable at this size and the tile heading says it. */
.km-tile .tileicon{width:auto; height:96px; max-width:150px; object-fit:contain;
  display:block; margin:0 auto}
.km-tile .ftlogo{width:150px; height:auto; display:block}
.km-tile .t,.km-tile .d{display:block}
/* Matches the "Fast Track Priority Pass" wordmark in the logo artwork. */
.km-tile.ft .t{color:#FF8D00}
.km-tile .t{font-size:27px; font-weight:800; letter-spacing:-.015em; margin-bottom:6px; line-height:1.1}
.km-tile .d{font-size:16px; color:var(--n700); line-height:1.4}
.km-tile .arw{width:36px; height:36px; color:var(--accent); justify-self:end}

/* ---------- own-device QR (second column of the welcome header) ---------- */
.km-head.two-col{display:grid; grid-template-columns:1fr auto; gap:44px; align-items:start}
.km-qr{
  background:#fff;                    /* not --surface: the coloured QR needs the lighter ground */
  border:1px solid var(--gray); padding:6px; width:275px;
  height:275px;                       /* pinned so the column keeps its original height */
  text-align:center; display:flex; flex-direction:column;
}
/* Fills the card exactly — no centring slack. The SVG now carries its own
   4-module quiet zone, as the spec requires, so the card only needs enough
   padding to keep the code off its own border. */
.km-qr img{display:block; width:auto; height:100%; max-width:100%; margin:0 auto;
  flex:1; min-height:0; object-fit:contain; image-rendering:pixelated}

/* ---------- inputs / segmented ---------- */
.km-field{margin-bottom:22px}
/* ---------- staff: patient records ---------- */
/* Rows are the control here, so they have to read as one — the whole row
   highlights, not a link buried in the first cell. */
.km-prow{cursor:pointer}
.km-prow:hover td, .km-prow:focus-within td{background:var(--surface)}
.km-prow td{transition:background .12s ease}
/* Inside a table the hint is a second line, not a spaced-out paragraph. */
.km-tbl .km-hint{margin-top:2px; font-size:12.5px; display:inline-block}
.km-thumb{width:56px; height:56px; object-fit:cover; border:1px solid var(--gray); display:block}
/* One questionnaire, boxed, so a run of them does not read as continuous text. */
.km-rec{border:1px solid var(--gray); padding:18px 20px; margin-bottom:14px; background:var(--bg)}
.km-rechead{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline;
  justify-content:space-between; margin-bottom:12px}
.km-rechead strong{font-size:19px}
.km-rechead .km-hint{margin-top:0}
.km-tr{margin-top:14px}
.km-tr summary{cursor:pointer; font-weight:600; padding:6px 0; font-size:14px}
.km-tr summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.km-tr table{margin-top:8px}
@media (prefers-reduced-motion:reduce){ .km-prow td{transition:none} }

/* Staff device panel: two columns of settings on the iPad's landscape width. */
.km-dev{display:grid; grid-template-columns:1fr 1fr; gap:0 22px}
.km-dev .km-input{width:100%}
select.km-input{appearance:none; background-image:none; border-radius:0}
@media (max-width:700px){ .km-dev{grid-template-columns:1fr} }
.km-field label{display:block; font-size:15px; font-weight:600; margin-bottom:8px}
.km-input{
  width:100%; min-height:64px; font-family:var(--font); font-size:22px; color:var(--text);
  background:var(--surface); border:1px solid var(--gray); border-radius:0; padding:0 18px;
}
.km-input::placeholder{color:#8f8b8b}
.km-input:focus{border-color:var(--accent); outline:none}
.km-hint{font-size:14px; color:var(--n700); margin-top:7px}
.km-err{color:var(--alert); font-size:15px; font-weight:600; margin-top:12px; min-height:1px}

/* The field that did not match, called out where the patient is looking rather
   than in one message at the bottom that does not say which box is wrong. */
.km-field.bad label{color:var(--alert)}
.km-field.bad .km-input{border-color:var(--alert); border-width:2px}
.km-field.bad .km-mask{border-bottom-color:var(--alert); border-bottom-width:2px}
.km-fielderr{color:var(--alert); font-size:15px; font-weight:600; margin-top:8px}
.km-fieldok{font-size:15px; color:var(--n700); margin-top:8px}
.km-link{
  font-family:var(--font); font-size:17px; font-weight:700; color:var(--a700);
  background:none; border:0; border-bottom:2px solid var(--accent); border-radius:0;
  padding:2px 0; cursor:pointer;
}
.km-link:hover{color:var(--text)}
.km-two{display:grid; grid-template-columns:1fr 1fr; gap:20px}

.km-segs{display:flex; margin-bottom:24px}
.km-seg{
  font-family:var(--font); font-size:16px; font-weight:600; padding:13px 22px;
  border:1px solid var(--gray); background:transparent; color:var(--text); cursor:pointer;
  border-radius:0; margin-right:-1px;
}
.km-seg.on{background:var(--accent); border-color:var(--accent); color:var(--text)}

.km-mask{font-size:34px; font-weight:600; letter-spacing:.06em; color:var(--text);
  padding:14px 0 20px; border-bottom:var(--rule); min-height:70px}
.km-mask .ph{color:var(--n300)}

.km-keypad{display:grid; grid-template-columns:repeat(3,1fr); border-top:var(--hair)}
.km-key{
  height:78px; font-family:var(--font); font-size:32px; font-weight:600;
  background:transparent; border:0; border-bottom:var(--hair); border-right:var(--hair);
  color:var(--text); cursor:pointer; border-radius:0;
}
.km-key:nth-child(3n){border-right:0}
.km-key:hover{background:var(--n200)}
.km-key:active{background:var(--a200)}
.km-key.alt{color:var(--a700); font-weight:800}

.km-demo{text-align:right; padding:10px 0 0; font-size:13px}
.km-demo .lbl{text-transform:uppercase; letter-spacing:.08em; color:var(--n700); display:block; margin-bottom:6px}
.km-demo button{background:none;border:0;font:inherit;color:var(--a700);text-decoration:underline;
  cursor:pointer;margin-left:14px;padding:4px 0}

/* ---------- identity / photo ---------- */
.km-idrow{display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:start}
.km-photo{background:var(--n300); display:grid; place-items:center; overflow:hidden; flex:none}
.km-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(1)}
.km-photo .ini{font-size:64px; font-weight:800; color:#fff}
.km-photo.s300{width:300px; height:300px}
.km-photo.s120{width:120px; height:120px}
.km-photo.s120 .ini{font-size:38px}
.km-idrow h2{font-size:32px; margin-bottom:16px}

.km-row{display:grid; grid-template-columns:130px 1fr; gap:16px; padding:12px 0;
  border-bottom:var(--hair); font-size:17px}
.km-row .k{color:var(--n700)}
.km-row .v{font-weight:600}

/* ---------- stat strip ---------- */
.km-stats{display:grid; grid-template-columns:repeat(3,1fr); border:var(--rule); margin:24px 0}
.km-stat{padding:16px 18px; border-right:var(--hair)}
.km-stat:last-child{border-right:0}
.km-stat .l{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--n700); margin-bottom:6px}
.km-stat .v{font-size:21px; font-weight:800}
.km-stat .v.warn{color:var(--a700)}
.km-stat .v.bad{color:var(--alert)}

.km-uses{margin:4px 0 24px}
.km-uses .lab{display:flex; justify-content:space-between; font-size:13px; color:var(--n700); margin-bottom:7px}
.km-uses .bar{height:10px; background:var(--n300)}
.km-uses .fill{height:100%; background:var(--accent)}

/* ---------- offer boxes ---------- */
.km-box{border:var(--rule); padding:24px; margin-bottom:24px}
.km-box.tint{background:var(--a100); border-color:var(--accent)}
.km-box .bk{font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--a700);
  font-weight:700; margin-bottom:10px}
.km-box h3{font-size:27px; margin-bottom:10px}
.km-box p{font-size:16px; color:var(--n700); line-height:1.45}
.km-price{display:flex; align-items:baseline; gap:14px; justify-content:flex-end; margin-top:-38px}
.km-price .was{font-size:17px; color:var(--n700); text-decoration:line-through}
.km-price .now{font-size:40px; font-weight:800; letter-spacing:-.02em}

.km-cmp{display:grid; grid-template-columns:1fr 1fr; border:var(--rule); margin-bottom:20px}
.km-cmp>div{padding:20px}
.km-cmp>div:first-child{border-right:var(--hair)}
.km-cmp .h{font-size:19px; font-weight:800; margin-bottom:12px}
.km-cmp .big{font-size:27px; font-weight:800; margin-bottom:8px}
.km-cmp .sub{font-size:15px; color:var(--n700)}
.km-cmp .pass{background:var(--a100)}
.km-fine{font-size:14px; color:var(--n700); line-height:1.5}
.km-fine a{color:var(--a700); text-underline-offset:2px}
.km-fine a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

table.km-tbl{width:100%; border-collapse:collapse; font-size:16px; margin-bottom:20px}
table.km-tbl th,table.km-tbl td{padding:11px 12px; border-bottom:var(--hair); text-align:left}
table.km-tbl th{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--n700); font-weight:700}
table.km-tbl td.n{text-align:right; font-variant-numeric:tabular-nums; font-weight:600}

/* ---------- terms ---------- */
.km-terms{display:grid; grid-template-columns:32px 1fr; gap:14px; align-items:start;
  border:var(--rule); padding:20px; margin-bottom:18px; cursor:pointer}
.km-terms input{width:28px; height:28px; accent-color:var(--accent); margin:0}
.km-terms .t{font-size:15px; line-height:1.5; color:var(--text)}
.km-payhost{font-size:13px; color:var(--n700); text-align:center; margin-top:12px}
.km-spin{width:18px;height:18px;border:2px solid rgba(32,30,29,.3);border-top-color:var(--text);
  border-radius:50%;animation:kspin .7s linear infinite;display:inline-block}
@keyframes kspin{to{transform:rotate(360deg)}}

/* ---------- camera ---------- */
.km-cam{width:540px; max-width:100%; height:540px; margin:0 auto; background:#1a1817;
  position:relative; display:grid; place-items:center; overflow:hidden}
.km-cam video,.km-cam img{width:100%; height:100%; object-fit:cover; display:block}
.km-cam video{transform:scaleX(-1)}
.km-cam img{filter:grayscale(1)}
.km-oval{position:absolute; width:330px; height:420px; border:3px dashed var(--accent);
  border-radius:50%; pointer-events:none}
.km-cammsg{position:absolute; color:#fff; text-align:center; padding:32px; font-size:17px; max-width:34ch}
.km-camtip{text-align:center; color:var(--n700); font-size:15px; margin-top:16px}

/* ---------- notices ---------- */
.km-note{border:var(--rule); border-left-width:9px; padding:16px 20px; margin-bottom:20px; font-size:16px; line-height:1.45}
.km-note.warn{border-color:var(--accent); background:var(--a100)}
.km-note.bad{border-color:var(--alert); background:#fbecec}
.km-note.good{border-color:var(--ok); background:#e8f4ee}

/* ---------- testing ---------- */
.km-prog{padding:16px 40px; border-bottom:var(--rule)}
.km-prog .r{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px}
.km-prog .t{font-size:19px; font-weight:800}
.km-prog .c{font-size:14px; color:var(--n700); font-weight:600}
.km-prog .track{height:8px; background:var(--n300)}
.km-prog .fill{height:100%; background:var(--accent); width:0; transition:width .3s ease}
.km-instr{border:var(--rule); border-left-width:9px; border-left-color:var(--accent);
  background:var(--a100); padding:18px 22px; margin-bottom:24px; font-size:16px; line-height:1.5}
.km-qcat{font-size:21px; font-weight:800; margin:32px 0 4px; padding-bottom:10px; border-bottom:var(--rule)}
.km-q{border:var(--hair); padding:18px; margin-bottom:12px; background:var(--bg)}
.km-q.done{border-color:var(--accent); border-width:2px}
.km-qt{display:flex; gap:14px; font-size:18px; line-height:1.4; margin-bottom:16px}
.km-qn{flex:none; width:34px; height:34px; background:var(--n300); display:grid; place-items:center;
  font-size:15px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums}
.km-q.done .km-qn{background:var(--accent)}
.km-qb{flex:1}
.km-qb div{margin:.35em 0}
/* Answer choices sit on an EVEN grid, never a wrapped flex row. Wrapping fitted
   three per row and dropped the fourth onto a full-width line of its own, so on a
   four-option item the most severe answer was rendered as a wide, isolated button
   — a nudge, not a neutral choice. The column count is computed per item from how
   many options there are and how long they read, and always divides evenly. */
.km-opts{display:grid; grid-template-columns:repeat(var(--cols,1),1fr); gap:10px}
.km-opt{position:relative; min-width:0}
.km-opt input{position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.km-optf{display:flex; align-items:center; min-height:56px; padding:11px 16px; height:100%;
  border:1px solid var(--gray); background:var(--surface); font-size:17px; line-height:1.3; cursor:pointer}
/* Four or more to a row: centre the label and give the type a little less to do,
   so a longer option wraps to two tidy lines instead of overflowing its cell. */
.km-opts[style*="--cols:4"] .km-optf,
.km-opts[style*="--cols:5"] .km-optf,
.km-opts[style*="--cols:6"] .km-optf{justify-content:center; text-align:center;
  font-size:15px; padding:10px 8px}
.km-opt input:checked + .km-optf{background:var(--accent); border-color:var(--accent); font-weight:700}
/* A checklist has to look like one: a tick, so several selections read as
   several answers rather than one that keeps changing its mind. */
.km-opt input[type=checkbox] + .km-optf::before{content:""; flex:none; width:22px; height:22px;
  margin-right:12px; border:2px solid var(--gray); background:#fff}
.km-opt input[type=checkbox]:checked + .km-optf::before{
  border-color:var(--btn-ink); background:var(--btn-ink);
  background-image:linear-gradient(45deg,transparent 42%,#fff 42%,#fff 56%,transparent 56%),
                   linear-gradient(-45deg,transparent 52%,#fff 52%,#fff 66%,transparent 66%);
  background-size:14px 14px; background-position:2px 4px, 2px -2px; background-repeat:no-repeat}
/* A rating scale must read as ONE row. Wrapping put 10 alone on a full-width
   second row on every PEG item — the highest-pain answer rendered as a visually
   distinct button, which is a nudge, not a neutral scale. Auto-flow column keeps
   any number of points on a single line and lets them share the width evenly. */
.km-scale{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px}
.km-scale .km-opt{min-width:0}
.km-scale .km-optf{justify-content:center; font-weight:600; font-size:19px; padding:12px 4px}
/* Below the kiosk's own width there is not room for eleven points in a row;
   two even rows beat one row plus an orphan. */
@media (max-width:700px){
  .km-scale{grid-auto-flow:row; grid-template-columns:repeat(6,1fr)}
  .km-scale .km-optf{font-size:17px}
}

/* ---------- applicability gate ---------- */
/* Asked before the questionnaire itself. Until it is answered the items stay
   hidden, so a patient is never looking at six questions they may not have to
   answer at all. */
.km-gate{border:2px solid var(--accent); background:var(--bg); padding:20px; margin-bottom:18px}
.km-gate .g-q{font-size:19px; font-weight:700; margin-bottom:14px}
.km-body #tp-body.gated .km-q,
.km-body #tp-body.gated .km-instr{display:none}

/* ---------- corner controls (replace the old footer bar) ---------- */
.km-corner{
  position:fixed; z-index:40; font-family:var(--font); font-size:13px; font-weight:600;
  color:var(--n700); background:transparent; border:0; border-radius:0;
  padding:13px 18px; cursor:pointer; line-height:1.05;   /* >=44px tap target */
  display:flex; align-items:center; gap:7px;
}
.km-corner-mark{height:18px; width:auto; display:block; opacity:.85}
.km-corner:hover{color:var(--text); text-decoration:underline; text-underline-offset:3px}
.km-corner:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.km-corner.tr{top:max(8px,env(safe-area-inset-top)); right:8px}
.km-corner.br{bottom:max(8px,env(safe-area-inset-bottom)); right:8px}

/* ---------- idle veil ---------- */
.km-veil{position:fixed; inset:0; z-index:80; background:rgba(32,30,29,.78);
  display:none; align-items:center; justify-content:center; padding:24px}
.km-veil.on{display:flex}
.km-veil .bx{background:var(--bg); border:var(--rule); padding:44px; max-width:520px; text-align:center}
.km-veil h2{font-size:34px; margin-bottom:14px}

@media (max-width:760px){
  #frame{max-width:100%}
  .km-head{padding:32px 24px 22px}
  .km-head h1{font-size:38px}
  #s-welcome .km-head h1{font-size:46px}
  #s-done .km-head h1{font-size:40px}
  .km-pad,.km-header,.km-footer,.km-foot,.km-prog{padding-left:24px; padding-right:24px}
  .km-tile{grid-template-columns:70px 1fr 30px; gap:16px; padding:24px}
  .km-head.two-col{grid-template-columns:1fr; gap:24px}
  .km-qr{width:100%; max-width:275px}
  .km-tile .ftlogo{width:70px}
  .km-tile .tileicon{height:62px; max-width:70px}
  .km-cam{width:100%; height:auto; aspect-ratio:1}
  .km-two,.km-cmp,.km-foot{grid-template-columns:1fr}
  .km-idrow{grid-template-columns:1fr}
  .km-photo.s300{width:100%; max-width:300px; height:auto; aspect-ratio:1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}


/* ============================================================
   PRINT — the clinician's copy. Screen UI fully suppressed.
   ============================================================ */
.printsheet{display:none}
@page{ size:letter; margin:0.55in; }
@media print{
  html,body{background:#fff!important; color:#000!important; font-size:10.5pt}
  body>*{display:none!important}
  body>.printsheet{display:block!important}
  .printsheet{font-family:var(--font)}

  .p-head{display:flex; align-items:center; gap:14px; padding-bottom:10px;
    border-bottom:2.5px solid #f7941e; margin-bottom:14px}
  .p-logo{height:52px;width:auto}
  .p-clinic{flex:1}
  .p-cn{font-size:15pt; font-weight:800; line-height:1.1; letter-spacing:-.015em}
  .p-cs{font-size:9pt; color:#555; margin-top:2px}
  /* Which post produced this sheet — so a stray printout is traceable. */
  .p-cw{font-size:7.5pt; color:#666; margin-top:3px; letter-spacing:.02em}
  /* The day's photo, printed in the corner of the sheet. Sized to be usable for
     identification rather than decorative, and left in colour — a mono printer
     will greyscale it anyway, a colour one gives staff a better likeness. */
  .p-photo{width:104px; height:104px; object-fit:cover; border:1.5px solid #bdbec0;
           print-color-adjust:exact; -webkit-print-color-adjust:exact}

  .p-id{width:100%; border-collapse:collapse; margin-bottom:14px; font-size:9.8pt}
  .p-id th{text-align:left; font-weight:700; color:#444; width:1%; white-space:nowrap;
    padding:4px 12px 4px 0; border:0; font-size:8.6pt; letter-spacing:.02em}
  .p-id td{padding:4px 18px 4px 0; border:0}

  .p-block{margin-bottom:18px; page-break-inside:auto}
  /* The band sits with the numbers, not in a footnote — it is the line the
     provider actually reads. */
  .p-read{margin:6px 0 10px; padding:6px 10px; border-left:3px solid #f7941e; background:#f7f6f5;
    font-size:9.6pt; font-weight:600}
  .p-read-l{font-size:7.6pt; letter-spacing:.08em; text-transform:uppercase; color:#666;
    font-weight:700; margin-right:8px}
  .p-itl{font-size:11pt; border-bottom:1.5px solid #999; padding-bottom:5px; margin-bottom:10px}
  .p-cmp{display:block; font-size:8.6pt; color:#555; margin-top:3px}

  .p-alert{border:2.5px solid #000; border-left:9px solid #000; padding:10px 14px;
    margin:0 0 12px; font-size:9.5pt; page-break-inside:avoid}
  .p-alert-t{font-weight:800; font-size:11.5pt; letter-spacing:.04em; margin-bottom:4px}
  .p-alert-l{margin:7px 0 0; padding-left:18px}

  .p-scores{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 12px}
  .p-sc{border:1px solid #ccc; border-left:3.5px solid #f7941e; padding:9px 15px; min-width:118px}
  .p-n{font-size:21pt; font-weight:800; line-height:1; font-variant-numeric:tabular-nums}
  .p-l{font-size:8.4pt; color:#444; margin-top:3px}
  .p-note{border:1px solid #ccc; border-left:3.5px solid #999; padding:9px 13px; margin-bottom:12px; font-size:9.5pt}

  .p-items{width:100%; border-collapse:collapse; font-size:9pt}
  .p-items thead{display:table-header-group}
  .p-items th{background:#f2eee8; border-bottom:1.5px solid #999; padding:5px 7px; text-align:left; font-size:8.4pt}
  .p-items td{border-bottom:1px solid #ddd; padding:5px 7px; vertical-align:top}
  .p-items tr{page-break-inside:avoid}
  .p-num{text-align:right; font-variant-numeric:tabular-nums; width:1%; white-space:nowrap}
  .p-ans{width:28%}
  .p-blank td{color:#777; font-style:italic}

  .p-foot{margin-top:18px; padding-top:10px; border-top:1px solid #bbb; font-size:8.6pt; color:#444; page-break-inside:avoid}
  .p-sign{margin-top:20px; font-size:9.5pt; color:#000}
  .p-ref{margin-top:8px; font-size:7.6pt; color:#888}
}