/* Shared stylesheet for the patient instruction sheets under /instructions.
   Same tokens as /tools/tools.css and the standalone service pages, so the
   sheets read as part of the same site. Two things are particular to this
   section: the fill-in strip at the top of every sheet, and the print rules
   at the bottom, which turn a sheet into an A4 hand-out with the logo, the
   address and a QR code. The link in the HTML carries ?v=, so bump
   CSS_VERSION in scripts/instructions/build.mjs when this file changes. */
:root{--primary:#0b6fc2;--navy:#041e42;--ink:#1b2b3a;--muted:#5b6b7c;--line:#dbe3ec;--tint:#f4f9ff;--ok:#1d7a46;--okbg:#eaf7ef;--warn:#9a5b00;--warnbg:#fff6e5;--bad:#b3261e;--badbg:#fdecea}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);line-height:1.65;background:#fff;font-size:16px}
a{color:var(--primary)}
.wrap{max-width:880px;margin:0 auto;padding:0 16px}
header.top{background:var(--navy);color:#fff;padding:18px 0}
header.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
header.top a{color:#9fd0ff;text-decoration:none;font-size:.9rem}
.brand{font-weight:700;letter-spacing:.5px}
.hero{background:linear-gradient(135deg,var(--primary),var(--navy));color:#fff;padding:34px 0 30px}
.eyebrow{font-size:.72rem;letter-spacing:2px;color:#bfe0ff;margin:0 0 10px;text-transform:uppercase}
h1{font-size:1.9rem;line-height:1.2;margin:0 0 8px}
.hero .sub{margin:0 0 6px;color:rgba(255,255,255,.93);font-size:1.05rem;max-width:62ch}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border-radius:8px;font:inherit;font-weight:600;text-decoration:none;background:#fff;color:var(--primary);border:0;cursor:pointer}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7)}
.btn:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffd24a;outline-offset:2px}
.crumb{font-size:.85rem;color:var(--muted);padding:14px 0 0;margin:0}
h2{font-size:1.3rem;color:var(--navy);margin:0 0 10px;line-height:1.25}
h3{font-size:1.02rem;color:var(--navy);margin:0 0 6px}
p{margin:0 0 10px}
section.block{padding:26px 0 2px}
.for{margin:18px 0 0;color:var(--muted);font-size:.97rem}
.after{margin-top:10px}
figure{margin:0}
figure.illus{margin:16px 0 0}
figure.illus img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid #d9e6f2;background:#e6f2fc}
figure.illus figcaption{font-size:.86rem;color:var(--muted);margin-top:6px}
figure.thumb img{display:block;width:100%;height:auto;border-radius:8px;background:#e6f2fc;margin-bottom:10px}
.withphoto{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;align-items:start;margin-top:6px}
figure.photo img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid #d9e6f2;background:#fff}
figure.photo figcaption{font-size:.84rem;color:var(--muted);margin-top:6px;line-height:1.4}
.withphoto ul{margin-top:0}
ul{padding-left:20px;margin:6px 0 10px}
li{margin-bottom:6px}

/* The fill-in strip. On screen: labelled inputs in a tinted panel. On paper:
   a label and a ruled line, with whatever was typed printed on the line. */
.fill{background:var(--tint);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:18px 0 4px}
.fill h2{font-size:1.05rem;margin-bottom:2px}
.fillhint{font-size:.85rem;color:var(--muted);margin-bottom:12px}
.fillgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;align-items:start}
.fld{display:block;min-width:0;margin:0;padding:0;border:0}
.fld.wide{grid-column:1/-1}
.fld .lbl{display:block;font-weight:600;font-size:.88rem;color:var(--navy);margin-bottom:4px;padding:0}
.fld>input{width:100%;min-height:44px;padding:9px 11px;border:1px solid #b9c6d4;border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
.fld.filled>input{border-color:var(--ok)}
.fld.filled .lbl::after{content:" \2713";color:var(--ok)}
.fld .pv{display:none}
/* Choices. The real radio or checkbox is kept for the keyboard and for
   screen readers but drawn as a pill, so the target is a full 44 px. */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid #b9c6d4;border-radius:999px;background:#fff;font-size:.95rem}
.chip input:checked+span{background:#e3f0fc;border-color:var(--primary);color:var(--navy);font-weight:600}
.chip input:checked+span::before{content:"\2713";margin-right:6px;color:var(--primary)}
.chip input:focus-visible+span{outline:3px solid #ffd24a;outline-offset:2px}
.fillbar{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.fillstate{margin:0 0 10px;font-size:.92rem;font-weight:600;color:var(--navy)}
.fillstate.some{color:var(--ok)}
.fillbtns{display:flex;flex-wrap:wrap;gap:10px}
.btn.solid{background:var(--primary);color:#fff}
.btn.line{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.fillnote{margin:10px 0 0;font-size:.82rem;color:var(--muted)}

/* STAFF FORMS (/forms). The same fields, used in every block of the page
   and not only in the strip at the top, plus boxes to tick, lines to sign
   and the consultant's name at the foot. */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fillgrid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fld.span2{grid-column:span 2}
.fld>textarea{display:block;width:100%;min-height:88px;padding:9px 11px;border:1px solid #b9c6d4;border-radius:8px;font:inherit;background:#fff;color:var(--ink);resize:vertical}
.fld.filled>textarea{border-color:var(--ok)}
textarea:focus-visible{outline:3px solid #ffd24a;outline-offset:2px}
section.block>.fillgrid{margin-top:12px}
.checks{margin:6px 0 10px}
.check{display:flex;align-items:flex-start;gap:12px;padding:10px 4px;border-bottom:1px solid #eef3f8;cursor:pointer;min-height:44px}
.check input{flex:0 0 auto;width:22px;height:22px;margin:2px 0 0;accent-color:var(--primary)}
.check input:checked+span{color:var(--navy);font-weight:600}
.signs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;margin:30px 0 6px}
.sign{display:flex;flex-direction:column}
.sline{border-bottom:1px solid #333;height:40px}
.slbl{font-size:.86rem;color:var(--muted);margin-top:5px}
.byline{margin:26px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:.9rem}
.byline strong{display:block;color:var(--navy);letter-spacing:.3px}
.byline span{display:block;color:var(--muted)}
.formbar{background:var(--tint);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-top:22px}
.chart3,.chartnote{display:none}
table.risk td:last-child{white-space:nowrap;font-weight:600}

/* Numbered steps: the number is the thing the eye should find first. */
ol.steps{list-style:none;counter-reset:s;padding:0;margin:8px 0 10px}
ol.steps>li{counter-increment:s;position:relative;padding:0 0 0 46px;margin:0 0 12px;min-height:32px}
ol.steps>li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.95rem}
ol.steps>li>div{padding-top:3px}
ol.steps>li ul{margin:6px 0 2px}

/* Do and do not. A tick or a cross as well as the colour, so the meaning
   survives a black and white printer. */
ul.do,ul.dont{list-style:none;padding:0}
ul.do li,ul.dont li{position:relative;padding-left:28px}
ul.do li::before,ul.dont li::before{position:absolute;left:0;top:0;font-weight:800;width:20px;text-align:center}
ul.do li::before{content:"\2713";color:var(--ok)}
ul.dont li::before{content:"\2715";color:var(--bad)}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin:8px 0 6px}
.col{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff}
.col-do{border-top:4px solid var(--ok)}
.col-dont{border-top:4px solid var(--bad)}
.col ol.steps>li{padding-left:40px}
.col ol.steps>li::before{width:28px;height:28px;font-size:.85rem}

/* The timetable: when on the left, what on the right, one rule joining them. */
ol.timeline{list-style:none;padding:0;margin:8px 0 10px;border-left:3px solid var(--primary)}
ol.timeline li{display:grid;grid-template-columns:190px minmax(0,1fr);gap:4px 16px;padding:10px 0 10px 16px;margin:0;border-bottom:1px solid #eef3f8;position:relative}
ol.timeline li:last-child{border-bottom:0}
ol.timeline li::before{content:"";position:absolute;left:-8px;top:17px;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--primary)}
.when{font-weight:700;color:var(--navy)}

.note{background:var(--tint);border-left:4px solid var(--primary);border-radius:10px;padding:13px 16px;margin:18px 0}
.note p{margin:0}
.red{background:var(--badbg);border:2px solid var(--bad);border-radius:14px;padding:16px 18px;margin:22px 0;color:#5f1611}
.red h2{color:var(--bad);font-size:1.15rem}
.amber{background:var(--warnbg);border-left:5px solid #e0a100;border-radius:10px;padding:14px 16px;margin:20px 0;color:#4f3100}
.amber h2{color:#6b3f00;font-size:1.1rem}
.red p:last-child,.amber p:last-child,.red ul:last-child,.amber ul:last-child{margin-bottom:0}

.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;margin-top:6px;font-size:.95rem}
th{text-align:left;background:var(--tint);color:var(--navy);font-size:.78rem;letter-spacing:.3px;padding:9px 10px;border-bottom:2px solid var(--line);vertical-align:bottom}
td{padding:9px 10px;border-bottom:1px solid #eef3f8;vertical-align:top}
table.dose td,table.dose th{text-align:center}
table.dose td:first-child,table.dose th:first-child{text-align:left}
table.dose tbody tr:nth-child(even) td{background:#f8fbff}

/* Record tables are for the pen, so they show only on paper. On screen the
   sheet says to print it. */
table.log{display:none}
.logscreen{font-size:.92rem;color:var(--muted)}

.contact{margin:26px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:14px}
.contact p{margin:0}
.sources{padding:24px 0 0;font-size:.9rem}
.sources h2{font-size:1.02rem}
.sources ul{padding-left:18px}
.note-small{color:var(--muted);font-size:.85rem}
nav.related{background:var(--tint);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:22px 0 0}
nav.related strong{font-size:.9rem;color:var(--navy)}
nav.related ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px}
nav.related li{margin:0}
nav.more ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
footer.bot{margin-top:34px;padding:22px 0 40px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.printhead,.printfoot{display:none}

/* The hub */
.find{display:block;margin-top:18px;max-width:460px}
.find span{display:block;font-size:.85rem;font-weight:600;margin-bottom:4px;color:#dcebfb}
.find input{width:100%;min-height:48px;padding:10px 14px;border-radius:10px;border:0;font:inherit;color:var(--ink);background:#fff}
nav.jump ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
nav.jump li{margin:0}
nav.jump a{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:600;font-size:.92rem;background:#fff}
nav.jump a:hover{border-color:var(--primary);background:var(--tint)}
.cat{padding:30px 0 4px}
.cat h2{font-size:1.4rem;margin-bottom:4px}
.catline{color:var(--muted);margin-bottom:14px}
.sheetgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
a.card{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:12px;padding:14px 16px;background:#fff}
a.card:hover{box-shadow:0 2px 10px rgba(11,111,194,.14);border-color:var(--primary)}
a.card h3{color:var(--primary);margin:0 0 4px;font-size:1.05rem}
a.card p{margin:0;font-size:.93rem}
.also{font-size:.92rem;margin:14px 0 0;color:var(--muted)}
.nofind{background:var(--warnbg);border-radius:10px;padding:12px 16px;margin:18px 0 0}
.how{border-top:1px solid var(--line);margin-top:30px}
[hidden]{display:none!important}

@media(max-width:640px){
  h1{font-size:1.5rem}
  .btn{width:100%}
  .fillgrid,.cols,.sheetgrid{grid-template-columns:1fr}
  .withphoto{grid-template-columns:1fr}
  figure.photo{max-width:200px;margin:0 auto 4px}
  .fillgrid.g3,.signs{grid-template-columns:1fr}
  .fld.span2{grid-column:auto}
  table.risk td:last-child{white-space:normal}
  ol.timeline li{grid-template-columns:1fr}
  table:not(.dose) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table:not(.dose),table:not(.dose) tbody,table:not(.dose) tr,table:not(.dose) td{display:block;width:100%}
  table:not(.dose) tr{border:1px solid var(--line);border-radius:12px;padding:6px 2px;margin-bottom:12px}
  table:not(.dose) td{border-bottom:0;padding:6px 12px}
  table:not(.dose) td:empty{display:none}
  table:not(.dose) td[data-label]::before{content:attr(data-label);display:block;font-size:.72rem;color:var(--muted);font-weight:600}
  table:not(.dose) td:first-child::before{display:none}
  table.dose{font-size:.86rem}
  table.dose td,table.dose th{padding:7px 5px}
  table.log{display:none!important}
}

/* PAPER. A4, the logo and the QR code at the top, the blanks as ruled lines,
   and everything that only makes sense on a screen removed. Colours are kept
   but nothing depends on them. */
@media print{
  @page{size:A4;margin:10mm 11mm 10mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{font-size:9.7pt;line-height:1.34;color:#000}
  .wrap{max-width:none;padding:0}
  header.top,.hero,.noprint,footer.bot,.sources ul,.sources h2,nav.related{display:none!important}
  a{color:inherit;text-decoration:none}
  .printhead{display:grid;grid-template-columns:34mm minmax(0,1fr) 24mm;gap:5mm;align-items:center;border-bottom:1.5pt solid var(--navy);padding-bottom:3mm;margin-bottom:3mm}
  .printhead img{width:34mm;height:auto}
  .ph-text strong{display:block;font-size:15pt;line-height:1.15;color:var(--navy)}
  .ph-text span{display:block;font-size:10pt}
  .ph-text .ph-addr{font-size:7.6pt;color:#333;margin-top:1mm}
  .ph-qr{text-align:center}
  .ph-qr svg{width:21mm;height:21mm;display:block;margin:0 auto}
  .ph-qr span{font-size:6pt;line-height:1.1;display:block;margin-top:.8mm}
  .for{margin:0 0 2.5mm;font-size:9pt;color:#222}
  .fill{background:none;border:1pt solid #777;border-radius:2mm;padding:2.5mm 3.5mm 3mm;margin:0 0 3mm}
  .fillgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2mm 8mm}
  .fld{display:flex;align-items:flex-end;gap:2mm;min-height:7mm}
  .fld .lbl{font-size:8.6pt;margin:0;color:#000;font-weight:600;flex:0 1 auto;max-width:58%;float:none}
  .fld.filled .lbl::after{content:none}
  .fld>input{border:0;border-bottom:.8pt solid #333;border-radius:0;min-height:0;height:6.5mm;padding:0 1mm;font-size:10pt;background:none;flex:1 1 auto;min-width:0;width:auto}
  /* With the script running, the typed value prints from the .pv span, which
     wraps, in place of the input, which would cut a long value off. */
  .js .fld>input{display:none}
  .js .fld .pv{display:block;flex:1 1 30%;min-width:0;border-bottom:.8pt solid #333;min-height:6mm;padding:0 1mm .3mm;font-size:10pt;line-height:1.25;overflow-wrap:anywhere}
  fieldset.choice{display:flex;align-items:center;flex-wrap:wrap;gap:1mm 3mm}
  fieldset.choice .lbl{display:inline;max-width:none}
  .chips{gap:1mm 4mm}
  .chip input{display:none}
  .chip span{border:0;padding:0;min-height:0;background:none!important;font-size:9.4pt;font-weight:400!important;color:#000!important}
  .chip span::before{content:""!important;display:inline-block;width:3.3mm;height:3.3mm;border:.8pt solid #222;margin-right:1.3mm;text-align:center;font-size:8.5pt;line-height:3.2mm;font-weight:700;color:#000!important;flex:0 0 auto}
  .chip input:checked+span{font-weight:700!important}
  .chip input:checked+span::before{content:"\2713"!important}
  section.block{padding:2mm 0 0}
  h2{font-size:11.2pt;margin:0 0 1mm;break-after:avoid}
  h3{font-size:9.9pt;margin:0 0 1mm;break-after:avoid}
  p{margin:0 0 1.4mm}
  ul{margin:.8mm 0 1.6mm;padding-left:4.5mm}
  li{margin-bottom:.7mm}
  ol.steps{margin:1mm 0 1.4mm}
  ol.steps>li{padding-left:8.5mm;margin-bottom:1mm;min-height:6mm;break-inside:avoid}
  ol.steps>li::before{width:6mm;height:6mm;font-size:8.6pt}
  ol.steps>li>div{padding-top:.6mm}
  .col ol.steps>li{padding-left:8mm}
  .col ol.steps>li::before{width:5.6mm;height:5.6mm;font-size:8pt}
  ul.do li,ul.dont li{padding-left:5.5mm}
  .cols{gap:3mm;margin:1mm 0}
  .col{padding:2.2mm 3mm;border-radius:2mm;border-color:#999;break-inside:avoid}
  .col-do{border-top:2.4pt solid var(--ok)}
  .col-dont{border-top:2.4pt solid var(--bad)}
  ol.timeline{border-left-width:1.6pt}
  ol.timeline li{grid-template-columns:38mm minmax(0,1fr);padding:1.5mm 0 1.5mm 4mm;break-inside:avoid}
  ol.timeline li::before{left:-5.2pt;top:2.6mm;width:6pt;height:6pt;border-width:1.6pt}
  .note{padding:2mm 3mm;margin:2.4mm 0;border-radius:1.5mm;break-inside:avoid}
  .red{padding:2.4mm 3.2mm;margin:2.6mm 0;border-width:1.5pt;border-radius:2mm;break-inside:avoid}
  .amber{padding:2.2mm 3mm;margin:2.4mm 0;border-radius:1.5mm;break-inside:avoid}
  .red h2,.amber h2{font-size:10.8pt}
  .tscroll{overflow:visible}
  table{font-size:8.9pt;margin-top:1mm}
  table.dose td{padding:.55mm 1.6mm}
  table.dose{break-inside:avoid}
  th{font-size:8pt;padding:1.2mm 1.6mm}
  td{padding:1.2mm 1.6mm;border-bottom:.5pt solid #bbb}
  tr{break-inside:avoid}
  table.log{display:table;margin:2mm 0}
  .logscreen{display:none}
  table.log th,table.log td{border:.7pt solid #555;text-align:center;padding:1mm}
  table.log td{height:8.5mm}
  table.log td:first-child{text-align:left;width:22mm}
  table.log.grid7 td{height:13mm;vertical-align:top;text-align:left;width:14.28%}
  table.log.grid7 td span{font-size:7pt;color:#444}
  .contact{margin:2.6mm 0 0;padding:2mm 3mm;border-radius:1.5mm;border-color:#999;font-size:9pt;break-inside:avoid}
  .sources{padding:1.6mm 0 0}
  .note-small{font-size:7.4pt;color:#333;margin:0}
  .printfoot{display:block;font-size:7pt;color:#333;border-top:.6pt solid #999;margin-top:2mm;padding-top:1mm}
  .cat,.card{break-inside:avoid}
  figure.illus{margin:0 0 2.5mm;display:grid;grid-template-columns:50mm minmax(0,1fr);gap:4mm;align-items:center}
  figure.illus img{border-radius:1.5mm;border-color:#bbb}
  figure.illus figcaption{font-size:8.4pt;color:#222;margin:0}
  figure.thumb{display:none}
  .tight figure.illus{display:none}
  .fillgrid.g3{grid-template-columns:repeat(3,minmax(0,1fr));gap:2mm 6mm}
  section.block>.fillgrid{margin-top:1mm}
  .js .fld>textarea{display:none}
  .fld.long{align-items:flex-start}
  .js .fld.long .pv{flex:1 1 100%;min-height:13mm;background:linear-gradient(#333,#333) 0 6.3mm/100% .8pt no-repeat}
  .js .fld.long.filled .pv{background:none}
  .checks{margin:.5mm 0 1.5mm}
  .check{padding:.5mm 0;gap:0;min-height:0;border-bottom:.4pt dotted #aaa;break-inside:avoid}
  .check input{display:none}
  .check span{display:block;position:relative;padding-left:6mm}
  .check span::before{content:"";position:absolute;left:0;top:.2mm;width:3.5mm;height:3.5mm;border:.8pt solid #222;text-align:center;font-size:9pt;line-height:3.3mm;font-weight:700}
  .check input:checked+span{font-weight:400;color:#000}
  .check input:checked+span::before{content:"\2713"}
  .signs{gap:7mm 10mm;margin:6mm 0 1mm;break-inside:avoid}
  .form .for{display:none}
  .form .printfoot{margin-top:1.2mm}
  .form .fld{min-height:6.2mm}
  .form section.block{padding-top:1.3mm}
  .form .fill{padding:2mm 3.5mm 2.4mm;margin-bottom:2mm}
  .newpage{break-before:page}
  .sline{height:9mm;border-bottom:.8pt solid #222}
  .slbl{font-size:8.2pt;color:#000;margin-top:.8mm}
  .byline{margin:3mm 0 0;padding-top:1.2mm;border-top:.6pt solid #999;font-size:7.8pt;line-height:1.3;break-inside:avoid}
  .byline strong{font-size:8.6pt}
  .byline span{color:#222}
  .chart3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3mm;align-items:start}
  .chart3 table.log{margin:0}
  .chartnote{display:block;font-size:8.4pt;margin:2mm 0 0}
  table.log.vit{table-layout:fixed}
  table.log.vit td{height:9mm}
  table.log.vit td:first-child{width:auto;text-align:center;font-weight:600}
  table.log.urine td{height:8mm}
  table.log.urine td:first-child{width:14mm;text-align:center}
  table.risk td{padding:1mm 1.6mm}
  .withphoto{grid-template-columns:27mm minmax(0,1fr);gap:4mm;margin-top:1mm;break-inside:avoid}
  figure.photo img{border-radius:1mm;border-color:#bbb}
  figure.photo figcaption{font-size:7.4pt;color:#222;margin-top:1mm;line-height:1.25}
}