* { box-sizing: border-box; margin: 0; }
:root {
  --brand: #1f5c3d; --brand-2: #2e8b57; --brand-dark: #143d28;
  --accent: #2ee07a;
  --bg: #edf3ee; --card: #ffffff; --line: #d8e5da;
  --text: #1d2620; --muted: #68786d;
  --shadow: 0 1px 2px rgba(36, 31, 32, .05), 0 6px 20px rgba(36, 31, 32, .07);
  --ecg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='120' viewBox='0 0 620 120'%3E%3Cpath d='M0 60h96l8-14 10 28 8-52 10 76 8-38h8l6-10h64l8-14 10 28 8-52 10 76 8-38h8l6-10h64l8-14 10 28 8-52 10 76 8-38h8l6-10h130' fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ecg-faint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='120' viewBox='0 0 620 120'%3E%3Cpath d='M0 60h96l8-14 10 28 8-52 10 76 8-38h8l6-10h64l8-14 10 28 8-52 10 76 8-38h8l6-10h64l8-14 10 28 8-52 10 76 8-38h8l6-10h130' fill='none' stroke='%231f5c3d' stroke-opacity='.055' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text); font-size: 16px;
  background-image: var(--ecg-faint); background-repeat: repeat-x;
  background-position: center bottom 28px; background-attachment: fixed;
  min-height: 100vh;
}
.loading { padding: 3rem; text-align: center; color: var(--muted); }

/* ===== header ===== */
header.bar {
  background: linear-gradient(120deg, var(--brand-dark) 0%, var(--brand) 55%, var(--brand-2) 100%);
  background-blend-mode: normal;
  color: #fff; padding: .75rem 1rem; display: flex; align-items: center; gap: .7rem;
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 2px 14px rgba(20, 61, 40, .35);
  background-image: var(--ecg), linear-gradient(120deg, var(--brand-dark) 0%, var(--brand) 55%, var(--brand-2) 100%);
  background-repeat: repeat-x; background-position: right center;
}
.bar-logo { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
header.bar h1 { font-size: 1.05rem; font-weight: 650; letter-spacing: .01em; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
header.bar button, header.bar a {
  background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255,255,255,.22);
  border-radius: 9px; padding: .45rem .8rem; font-size: .85rem; cursor: pointer;
  text-decoration: none; backdrop-filter: blur(4px); transition: background .15s;
}
header.bar button:hover, header.bar a:hover { background: rgba(255,255,255,.26); }

main { max-width: 880px; margin: 0 auto; padding: 1.1rem 1rem 4.5rem; }

/* ===== cards ===== */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.05rem 1.15rem; margin-bottom: 1rem; box-shadow: var(--shadow);
}
.card h2 { font-size: 1rem; margin-bottom: .6rem; }
.card h3 { font-size: .95rem; }

/* ===== login ===== */
.login-hero {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background:
    var(--ecg) repeat-x center 18%,
    var(--ecg) repeat-x center 82%,
    radial-gradient(1100px 500px at 85% -10%, rgba(46, 224, 122, .10), transparent 60%),
    linear-gradient(150deg, #0e1512 0%, #14251b 30%, var(--brand) 75%, var(--brand-2) 100%);
}
.login {
  max-width: 380px; width: 100%; margin: 0; text-align: left;
  border: 0; border-radius: 20px; padding: 2rem 1.8rem 1.8rem;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .38);
}
.login-logo { width: 84px; height: 84px; display: block; margin: 0 auto .8rem; border-radius: 50%; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.login h1 { text-align: center; color: var(--brand); margin-bottom: .15rem; font-size: 1.35rem; letter-spacing: .01em; }
.login-sub { text-align: center; color: var(--muted); font-size: .82rem; margin-bottom: 1rem; }
/* why they are looking at this screen when they did not ask to be */
.loginnote { font-size: .84rem; line-height: 1.45; background: #fff9e8; border: 1px solid #e0a800;
  border-radius: 10px; padding: .5rem .65rem; margin-bottom: .9rem; color: #4a3b12; }

/* ===== inputs ===== */
label { display: block; font-size: .78rem; font-weight: 550; color: var(--muted); margin: .75rem 0 .25rem; letter-spacing: .01em; }
input, select, textarea {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px;
  font-size: 1rem; background: #fff; color: var(--text); transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(46, 139, 87, .2); }
input[readonly] { background: #eef3ef; color: #46504a; }
.computed input { border-style: dashed; }
.fnote { font-size: .74rem; color: var(--muted); line-height: 1.4; margin: .22rem 0 0 .1rem; }
/* The lab's normal range, beside the label rather than under the box: it is
   read while typing the number, not afterwards, and a note below the input is
   read afterwards. Quiet on purpose — it is a reference, not a verdict. */
.fnorm { font-size: .7rem; font-weight: 500; color: var(--muted); background: #eef3ef;
  border-radius: 999px; padding: .05rem .4rem; margin-left: .35rem; white-space: nowrap; }
.computed label::after { content: " · auto"; color: var(--brand-2); font-weight: 650; }

/* ===== buttons ===== */
button.primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff; border: 0; border-radius: 12px; padding: .75rem 1.2rem; font-size: 1rem;
  font-weight: 600; cursor: pointer; width: 100%; margin-top: 1.1rem;
  box-shadow: 0 6px 16px rgba(31, 92, 61, .3); transition: transform .1s, box-shadow .15s;
}
button.primary:hover { box-shadow: 0 8px 22px rgba(31, 92, 61, .4); }
button.primary:active { transform: translateY(1px); background: var(--brand-dark); }
button.small {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border: 0;
  border-radius: 9px; padding: .45rem .85rem; font-size: .85rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 3px 10px rgba(31, 92, 61, .25);
}
button.ghost {
  background: #fff; color: var(--brand); border: 1px solid #a9cbb5; border-radius: 9px;
  padding: .42rem .8rem; font-size: .85rem; font-weight: 550; cursor: pointer; transition: background .12s;
}
button.ghost:hover { background: #eef6f0; }
button.danger { background: #fff; color: #b3261e; border: 1px solid #e2b6b3; border-radius: 9px; padding: .3rem .6rem; font-size: .8rem; cursor: pointer; }

/* ===== patient list ===== */
.search-row { display: flex; gap: .6rem; margin-bottom: 1rem; }
.search-row input { flex: 1; border-radius: 12px; box-shadow: var(--shadow); border-color: transparent; }
.pnote { color: var(--muted); font-size: .82rem; margin: -.5rem 0 .7rem; line-height: 1.5; }
.linky { background: none; border: none; padding: 0; color: var(--brand-2); font: inherit; font-weight: 700;
  text-decoration: underline; cursor: pointer; }
.plist { list-style: none; }
.plist li {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--brand-2);
  border-radius: 12px; margin-bottom: .55rem; box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .15s;
}
.plist li:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(36,31,32,.07), 0 10px 26px rgba(36,31,32,.09); }
.plist a { display: block; padding: .75rem .95rem; text-decoration: none; color: var(--text); }
.plist .nm { font-weight: 650; }
.plist .sub { font-size: .82rem; color: var(--muted); margin-top: .18rem; }
.badge { display: inline-block; font-size: .7rem; font-weight: 600; background: #e6ede8; border-radius: 999px; padding: .13rem .55rem; margin-left: .4rem; color: #52605a; vertical-align: 1px; }
.badge.op { background: #dff2e6; color: #1f5c3d; }

/* ===== patient header ===== */
.phead { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem;
  flex-wrap: wrap; }
.phead > div { flex: 1 1 11rem; min-width: 0; }
.phead .nm { font-size: 1.2rem; font-weight: 750; letter-spacing: -.01em; }
/* Five buttons that would not wrap.
 *
 * A row wider than the phone makes the whole page wider than the phone, and a
 * page wider than the phone is one the browser zooms out to fit. Everything on
 * it then sits about a tenth of a screen from where it looks like it sits,
 * which is felt as taps that miss rather than as a page that is too wide — and
 * this page is the one the coronary map is opened from. */
.phead .pacts { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end;
  flex: 1 1 auto; min-width: 0; }
.scores { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.scores span {
  font-size: .78rem; font-weight: 600; color: #fff; border-radius: 999px; padding: .22rem .7rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 2px 8px rgba(31, 92, 61, .3);
}

/* ===== stage sections & logs ===== */
.section { display: flex; justify-content: space-between; align-items: center; padding: .72rem .25rem; border-bottom: 1px solid var(--line); }
.section:last-child { border-bottom: 0; }
.section .st { font-weight: 650; font-size: .95rem; }
.section .info { font-size: .8rem; color: var(--muted); margin-top: .12rem; }
.logrow { display: flex; justify-content: space-between; align-items: center; padding: .5rem .2rem .5rem 1rem; font-size: .88rem; border-bottom: 1px dashed var(--line); }

/* ===== forms ===== */
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
@media (max-width: 640px) { .formgrid { grid-template-columns: 1fr; } }
.fullrow { grid-column: 1 / -1; }

/* ---- colour-graded sections ----------------------------------------------
   One colour per kind of data, the same colour in every form, so "the green
   block" means investigations on the pre-op sheet and on the discharge sheet
   alike. The colour is a landmark you catch while scrolling; the heading text
   is what actually names the section, and it is always present — nothing here
   is legible only if you can tell the hues apart. */
/* A 3px rule down the side was the whole of it, and on a 120-field sheet that
   reads as a white page with a hairline on it — his words were that it should
   be legible from a distance, the way the theatre board is. The board works
   because a status is a filled block of colour, not an edge.
 *
 * So each section is now a block: its own hue washed across the background at
 * a few percent, a rule heavy enough to see across a room, and a heading set
 * large enough to be the thing you aim at when scrolling. The wash is kept
 * very pale on purpose — a form is read for minutes at a time, and a saturated
 * ground is exhausting in a way a status chip glanced at for a second is not.
 *
 * The rule is still that colour never carries meaning alone: every section is
 * named in words, in the same colour, right at its top. */
.fsec { --k: #7a8a80; border-left: 5px solid var(--k); border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--k) 5%, #fff);
  padding: .1rem .9rem .7rem 1rem; margin: 0 0 .7rem; }
.fsech { font-size: .95rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--k); margin: .85rem 0 .35rem;
  display: flex; align-items: center; gap: .5rem; }
/* A tick of the section's own colour before the words, so the heading reads as
   a label rather than as another field. */
.fsech::before { content: ''; width: .5rem; height: .5rem; border-radius: 2px;
  background: var(--k); flex: none; }
.fsec:first-child .fsech { margin-top: .35rem; }
@media (prefers-reduced-motion: no-preference) { .fsec { transition: background-color .2s ease; } }
/* Only a field that does not belong to the block it sits in carries its own
   colour. Marking every field would draw 85 coloured rules down one page and
   tell you nothing; marking the odd one out is the whole signal. */
.fld.odd > label { padding-left: .45rem; border-left: 3px solid var(--k); margin-left: -.6rem; }

.k-id    { --k: #64748b; } .k-hist  { --k: #b45309; } .k-med   { --k: #7c3aed; }
.k-exam  { --k: #0e7490; } .k-lab   { --k: #047857; } .k-op    { --k: #b91c1c; }
.k-score { --k: #4338ca; } .k-out   { --k: #be185d; } .k-note  { --k: #7a8a80; }

/* The graft record is twelve blocks of the same eight fields, and every one of
   them was the same operative red — so on a sheet where the only thing that
   distinguishes one block from the next is a number in the heading, the colour
   said nothing at all. Alternating the wash gives the eye a boundary to catch
   when scrolling past graft 7 looking for graft 8.
 *
 * Two shades of the same red rather than twelve hues: they are the same kind
 * of thing, and a rainbow would say they were not. */
.fsec.g-alt { background: color-mix(in srgb, var(--k) 11%, #fff); }

/* the jump bar — sticky under the header, so it is reachable from field 70 */
.fjump { display: flex; flex-wrap: wrap; gap: .35rem; position: sticky; top: 3.4rem; z-index: 8;
  background: var(--bg); padding: .5rem 0 .6rem; margin-bottom: .2rem; }
/* The chips carry the same wash as the section they land on, so the bar reads
   as a map of the page rather than as a row of identical buttons. */
button.jchip { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .78rem;
  font-weight: 650; cursor: pointer; border: 1px solid color-mix(in srgb, var(--k) 30%, #fff);
  border-left: 4px solid var(--k); min-height: 34px;
  background: color-mix(in srgb, var(--k) 7%, #fff); color: #33413a;
  border-radius: 8px; padding: .26rem .65rem; box-shadow: var(--shadow);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
@media (hover: hover) { button.jchip:hover { color: #fff; background: var(--k); border-color: var(--k); } }
button.jchip:hover .jn { color: inherit; }
@media (pointer: coarse) { button.jchip { min-height: 40px; } }
@media (prefers-reduced-motion: reduce) { button.jchip { transition: none; } }
button.jchip .jn { font-size: .7rem; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }

/* How far through each block you are.
 *
 * The chip fills left to right in its own colour as its boxes get answered, and
 * carries the fraction — 7/12 — in the corner. Untouched blocks fade back, so
 * the ones you have not reached are the ones that stand out.
 *
 * The fraction is what carries the meaning. The wash is only the cue the eye
 * catches while scrolling past, and it is the section's existing colour at a
 * low strength rather than a new one — a green-for-done, red-for-empty scheme
 * would be a grade, and this is not a grade. A block can be entirely full and
 * wrong, or half empty and exactly right: a patient with no diabetes leaves the
 * diabetes boxes blank, and that is the correct answer, not an omission.
 * So: no ticks, no warnings, no colour that means good or bad. */
button.jchip { --fill: 0%;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--k) 26%, #fff) var(--fill),
      color-mix(in srgb, var(--k) 7%, #fff) var(--fill)); }
button.jchip.jempty { opacity: .62; }
button.jchip.jfull { border-color: color-mix(in srgb, var(--k) 55%, #fff); }
button.jchip.jfull .jn { color: var(--k); }
@media (prefers-reduced-motion: no-preference) {
  button.jchip { transition: background .25s ease, opacity .2s ease, color .18s ease, border-color .18s ease; }
}
/* The hover rule above sets a flat colour; it has to win over the gradient. */
@media (hover: hover) { button.jchip:hover { background: var(--k); } }

/* And beside the heading, so it is answerable without scrolling back up to the
   bar — you are usually looking at the fields, not at the chips. Beside, not
   inside: the heading's text is the block's name and nothing else. */
.fsectop { display: flex; align-items: baseline; gap: .5rem; }
.fsectop .fsech { flex: 1; min-width: 0; }
.fsecn { font-size: .72rem; font-weight: 650; color: var(--muted);
  font-variant-numeric: tabular-nums; flex: none; }
/* Room below the last section so it can be brought up to the top like any
   other. Without it the page simply hits the bottom of its scroll and the last
   two or three chips leave their heading stuck behind the bar — which reads,
   correctly, as "it jumped to the end and did nothing". */
.jumproom { height: 70vh; }
@media (max-width: 640px) { .fjump { top: 3.1rem; } }

/* ---- the unit's crest, on the screen behind everything -------------------
   A watermark on the page, not a picture on the card: it sits on the desk the
   cards are lying on, stays put while the form scrolls over it, and never
   crosses a field label. --wm-opacity is the single number that sets it;
   append ?wm=0.2 (or any value) to any URL to try another without editing
   anything. */
:root { --wm-opacity: .09; --wm: url("/heart-logo.png"); }
/* Fixed to the screen rather than drawn inside a card. Behind the page it was
   invisible on a phone, where the card is the full width and opaque — so it
   floats over everything instead, in the corner, faint, and takes no clicks.
   It does not scroll, it never lands on a field label, and it is out of the
   form entirely. */
body::after {
  content: ""; position: fixed; right: 2vw; bottom: 3vh; pointer-events: none; z-index: 20;
  width: min(30vh, 210px); height: min(30vh, 210px);
  background-image: var(--wm); background-repeat: no-repeat;
  background-position: right bottom; background-size: contain;
  opacity: var(--wm-opacity);
}
/* Not on the login screen — that has its own full-bleed artwork and its own
   logo — and never on anything printed, which carries the real letterhead. */
body:has(.login-hero)::after { display: none; }
@media print { body::after { display: none; } }

/* ===== multiselect & photo ===== */
.multi { border: 1px solid var(--line); border-radius: 10px; padding: .45rem; display: flex; flex-wrap: wrap; gap: .3rem; background: #fff; }
.chk { display: inline-flex; align-items: center; gap: .32rem; border: 1px solid var(--line); border-radius: 999px; padding: .27rem .65rem; font-size: .85rem; cursor: pointer; user-select: none; transition: all .12s; }
.chk:has(input:checked) { background: linear-gradient(135deg, #e6f3ea, #eef8f1); border-color: var(--brand-2); color: var(--brand-dark); font-weight: 600; }
.chk input { width: auto; accent-color: var(--brand); }
.multi .addother { border: 1px dashed var(--line); border-radius: 999px; width: auto; flex: 1; min-width: 9rem; padding: .27rem .65rem; font-size: .85rem; }
.photo { border: 1px dashed #a9cbb5; border-radius: 12px; padding: .55rem; background: #fcfefc; }
.photo img { max-width: 100%; max-height: 180px; border-radius: 10px; display: block; margin-bottom: .4rem; box-shadow: var(--shadow); }
.photo input[type=file] { border: 0; padding: .2rem 0; }
.photo .preview { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.photo .pfile { display: inline-flex; align-items: center; gap: 4px; background: #f2f7f3; border: 1px solid #d8e8dd; border-radius: 9px; padding: 4px 6px; }
.photo .pfile img { max-height: 90px; max-width: 130px; margin: 0; }
.photo .pfx { border: 0; background: #e6b0ab; color: #5c1f1a; border-radius: 6px; padding: 2px 7px; font-weight: 700; cursor: pointer; }

/* ===== audit =====
   Two series carry meaning here — off pump and on pump — and the pair was
   checked for colour-blind separation against this white card (worst ΔE 8.4
   under tritanopia, 20.9 in normal vision). A third, absent class ("not
   recorded") is deliberately not a series colour: it is a hatched neutral, so
   a missing answer never looks like a finding. */
.audit-vars, main {
  --s-off: #1f7a4d;      /* off pump */
  --s-on:  #2a78d6;      /* on pump */
  --s-un:  #b9c3bc;      /* not recorded — absence, not a series */
  --s-vol: #46584e;      /* plain volume: deliberately not the pump greens or blues */
  --gridline: #e4ece6;
}
/* one filter row above everything it scopes, never inside a chart card */
.filters { display: flex; flex-wrap: wrap; gap: .5rem .7rem; align-items: center; margin-bottom: 1rem; }
.filters.dates { margin-top: -.5rem; }
.filters.dates label { margin: 0; }
.filters.dates input { width: auto; }
.fgrp { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
button.seg { background: #fff; border: 0; border-right: 1px solid var(--line); padding: .42rem .7rem; font-size: .82rem; color: var(--muted); cursor: pointer; font-weight: 550; }
button.seg:last-child { border-right: 0; }
button.seg.on { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-weight: 650; }
/* Names are as long as the surgeon's name, and there may be several, so these
   are separate pills that wrap — a segmented .fgrp clips whatever overflows. */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .8rem; }
button.chip { display: inline-flex; align-items: center; gap: .38rem; background: #fff; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .38rem .78rem; font-size: .82rem;
  font-weight: 550; cursor: pointer; box-shadow: var(--shadow); }
button.chip .cn { font-size: .74rem; font-weight: 650; opacity: .62; font-variant-numeric: tabular-nums; }
button.chip.on { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-weight: 650; border-color: transparent; }
button.chip.on .cn { opacity: .85; }
.card.warn { border-color: #e0a800; background: #fff9e8; }
.bkok { color: #1f7a4d; font-weight: 650; }
.bkbad { color: #b3261e; font-weight: 650; }
h2.sh { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 1.5rem 0 .6rem .15rem; }

/* the one hero figure on the page — same sans as everything, proportional digits */
.hero { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1rem; }
.hero .hn { font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--brand); font-variant-numeric: proportional-nums; }
.hero .hl { font-size: .95rem; font-weight: 600; line-height: 1.35; }
.quiet { color: var(--muted); font-size: .85rem; font-weight: 400; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .7rem .85rem; box-shadow: var(--shadow); }
.tile .tl { font-size: .74rem; color: var(--muted); font-weight: 550; line-height: 1.3; }
.tile .tv { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; margin: .15rem 0 .1rem; font-variant-numeric: proportional-nums; }
.tile .tn { font-size: .72rem; color: var(--muted); line-height: 1.35; }

/* ===== chart ===== */
.chart { position: relative; }
.legend { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .76rem; color: var(--muted); margin-bottom: .35rem; }
.legend span { display: inline-flex; align-items: center; gap: .32rem; }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sw-off { background: var(--s-off); } .sw-on { background: var(--s-on); }
.sw-un { background: var(--s-un); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.85) 0 1px, transparent 1px 3px); }
/* the SVG is drawn at its own pixel size, so these are real px */
.mchart { display: block; max-width: 100%; overflow: visible; }
.mchart .b-off { fill: var(--s-off); } .mchart .b-on { fill: var(--s-on); }
.mchart .b-un { fill: var(--s-un); }
.mchart .b-vol { fill: var(--s-vol); }
.mchart .grid { stroke: var(--gridline); stroke-width: 1; }   /* hairline, solid, recessive */
.mchart .ylab { font-size: 10px; fill: var(--muted); text-anchor: end; font-variant-numeric: tabular-nums; }
.mchart .xlab { font-size: 10px; fill: var(--muted); text-anchor: middle; }
.mchart .vlab { font-size: 13px; font-weight: 700; fill: var(--text); text-anchor: middle; }
.mchart .hit { fill: transparent; cursor: default; }
.mchart .hit:hover, .mchart .hit:focus { fill: rgba(31, 92, 61, .06); outline: none; }
.ctip { position: absolute; background: #241f20; color: #fff; font-size: .76rem; line-height: 1.4;
  padding: .35rem .55rem; border-radius: 8px; pointer-events: none; white-space: nowrap; z-index: 5;
  box-shadow: 0 6px 18px rgba(0,0,0,.28); }

/* ===== plain tables (the table view every chart needs) ===== */
table.gt { width: 100%; border-collapse: collapse; font-size: .87rem; }
table.gt th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 650; padding: .3rem .45rem; border-bottom: 1px solid var(--line); }
table.gt td { padding: .38rem .45rem; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
table.gt td:first-child { font-variant-numeric: normal; }
table.gt tr:last-child td { border-bottom: 0; }
table.gt td + td, table.gt th + th { text-align: right; }
table.gt .of, .of { color: var(--muted); font-weight: 400; font-size: .82em; }
/* the safety net: a table that still cannot fit scrolls inside its own box,
   so the page itself never does */
.scrollx { overflow-x: auto; }
/* on a phone, tighten the tables before resorting to that scroll */
@media (max-width: 560px) {
  table.gt { font-size: .8rem; }
  table.gt td, table.gt th { padding: .34rem .28rem; }
  table.gt th { font-size: .66rem; letter-spacing: .03em; }
}
table.gt.cases { min-width: 50rem; }
table.gt .flag { color: #8a5a00; font-weight: 650; }
table.gt.cases td, table.gt.cases th { white-space: nowrap; }

/* ===== toast ===== */
#toast {
  position: fixed; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
  background: #241f20; color: #fff; padding: .65rem 1.2rem; border-radius: 12px; font-size: .9rem;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 100; max-width: 90vw;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }


/* ---- discharge prescription ---------------------------------------------
   Laid out as the printed sheet reads it: number, medicine with its salt
   underneath, then dose, when, how often, how long. */
.rxbox{border:1px solid var(--line);border-radius:10px;padding:.5rem;background:#fff}
.rxrow{display:grid;grid-template-columns:2.9rem minmax(8rem,1fr) 5.4rem 5.4rem 7rem 6.2rem 6.4rem 1.6rem;
  gap:.4rem;align-items:center;padding:.35rem .1rem;border-bottom:1px solid var(--line)}
.rxrow:last-child{border-bottom:0}
.rxn{color:var(--muted);font-size:.8rem;display:flex;align-items:center;gap:.25rem;justify-content:flex-end}
.rxmv{display:flex;flex-direction:column;gap:1px}
.rxmv .mv{border:0;background:#eef2ee;color:var(--muted);width:17px;height:13px;border-radius:4px;
  font-size:8px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0}
.rxmv .mv:hover:not(:disabled){background:var(--brand);color:#fff}
.rxmv .mv:disabled{opacity:.25;cursor:default}
.rxname b{font-size:.92rem}
.rxcomp{font-size:.74rem;color:var(--muted);line-height:1.25}
.rxrow select,.rxrow input.rxf{font-size:.82rem;padding:.25rem .3rem}
.rxrow input.rxf{min-width:0}
.rxdel{border:0;background:none;color:var(--muted);font-size:1.1rem;cursor:pointer;line-height:1}
.rxdel:hover{color:#b3261e}
.rxnone{color:var(--muted);font-size:.85rem;padding:.4rem .2rem}
.fnote.bad{color:#b3261e;background:#fdeceb;border-radius:6px;padding:.3rem .45rem;margin-top:.25rem}
.rxall{padding:.15rem .2rem .35rem}
.rxall label{font-size:.78rem;color:var(--muted);display:inline-flex;align-items:center;gap:.35rem}
.rxall select{font-size:.8rem;padding:.2rem .3rem}
.rxadd{position:relative;margin-top:.45rem}
.rxq{width:100%}
.rxsug{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem}
.rxsug button{text-align:left;border:1px solid var(--line);background:#fff;border-radius:8px;
  padding:.3rem .5rem;cursor:pointer;font:inherit;font-size:.82rem}
.rxsug button b{display:block}
.rxsug button span{color:var(--muted);font-size:.75rem}

/* The interaction check, under the prescription. Colour carries the severity
   the same way the OPD page does it, so the two do not have to be learnt
   separately. Nothing here stops the form saving — a discharge summary that
   refuses to save is worse than one carrying a warning somebody has overruled. */
.rxix{margin-top:.5rem}
.rxixh{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.03em;display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.3rem}
.rxixh span{font-weight:600;text-transform:none;letter-spacing:0}
.rxsafe{font-size:.83rem;color:#1b5e37;background:#E7F7EF;border-radius:8px;padding:.35rem .55rem}
.rxalert{font-size:.83rem;border-radius:8px;padding:.4rem .55rem;margin-bottom:.3rem;
  border-left:3px solid transparent;background:#f6f8f7}
.rxalert b{font-size:.86rem}
.rxalert .rxwho{color:var(--muted);font-size:.78rem}
.rxalert.s-allergy{background:#FDECEA;border-left-color:#b3261e}
.rxalert.s-major{background:#FEEEEC;border-left-color:#d84315}
.rxalert.s-moderate{background:#FFF6E5;border-left-color:#b26a00}
.rxalert.s-info{background:#EEF3FA;border-left-color:#3a6ea5}
.rxalert i{color:#1b5e37;font-style:normal;font-weight:600}
.rxwarn{color:#d84315;font-weight:800;cursor:help}
.rxrow.sev-major{background:#FEEEEC}
.rxrow.sev-moderate{background:#FFF9EE}
.rxfixrow{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem}
.rxfix{font:inherit;font-size:.78rem;font-weight:600;border:0;border-radius:999px;cursor:pointer;
  padding:.22rem .6rem;background:#1b5e37;color:#fff}
.rxfix.ghost{background:#fff;color:#43524a;border:1px solid var(--line);font-weight:500}
.rxfix:hover{filter:brightness(1.08)}

/* The ward list carries a start date, so a course can say what day it is on.
   Nowhere else needs it: a discharge prescription starts the day it is given. */
.rxrow.dated{grid-template-columns:2.9rem minmax(8rem,1fr) 8.2rem 5.4rem 5.4rem 7rem 6.2rem 6.2rem 1.6rem}
.rxdate{font-size:.8rem;padding:.2rem .3rem}
.rxday{display:inline-block;font-size:.72rem;font-weight:700;color:#1b5e37;background:#E7F7EF;
  border-radius:999px;padding:.05rem .45rem;margin-top:.15rem}
.rxday.over{color:#8a3d00;background:#FFF1DF}
.rxfrom{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.35rem}
.rxcarry{font:inherit;font-size:.8rem;font-weight:600;border:1px dashed var(--line);background:#fff;
  color:#1b5e37;border-radius:999px;padding:.25rem .7rem;cursor:pointer}
.rxcarry:hover{background:#E7F7EF}
.rxcarry.std{border-style:solid;background:#1b5e37;color:#fff;border-color:#1b5e37}
.rxcarry.std:hover{filter:brightness(1.1);background:#1b5e37}
.rxfood{margin-top:.5rem}
.rxfoodnote{font-size:.83rem;background:#F4F7FB;border-left:3px solid #6b8fb5;border-radius:8px;
  padding:.35rem .55rem;margin-bottom:.3rem}
.rxfoodnote b{font-size:.8rem;color:#3a5570}
@media (max-width:720px){ .rxrow.dated{grid-template-columns:2.9rem 1fr 1.6rem} }
@media (max-width:720px){
  .rxrow{grid-template-columns:2.9rem 1fr 1.6rem;grid-auto-rows:min-content}
  .rxrow select,.rxrow input.rxf{grid-column:2}
}

.ds-rx{width:100%;border-collapse:collapse;font-size:.86rem;margin-top:.2rem}
.ds-rx th{background:#12202e;color:#fff;font-weight:600;padding:.28rem .4rem;text-align:center}
.ds-rx td{border-bottom:1px solid #e3eaf0;padding:.3rem .4rem;text-align:center;vertical-align:top}


/* Which build is on screen, and a way out of a stale one. Small, at the bottom,
   and only ever looked at when something is not appearing that should be. */
.buildbar{display:flex;justify-content:center;align-items:center;gap:.6rem;
  padding:.6rem .8rem 1.2rem;font-size:.72rem;color:var(--muted)}
.buildbar button{font:inherit;font-size:.72rem;border:1px solid var(--line);background:#fff;
  color:var(--muted);border-radius:999px;padding:.15rem .6rem;cursor:pointer}
.buildbar button:hover{color:#1b5e37;border-color:#1b5e37}

/* The way to a value that is worked out elsewhere. Small, beside the label
   rather than under the box, so it does not read as part of the answer. */
.fldlink { font-weight: 500; font-size: .82em; color: var(--accent, #1B6EA8);
  text-decoration: none; white-space: nowrap; }
.fldlink:hover { text-decoration: underline; }
@media print { .fldlink { display: none; } }

/* ---- coronary map ----
   A tree you tap instead of a list you scroll. Drawn on a dark ground because
   that is how an angiogram is read and because a vessel needs to be lighter
   than what it sits on to look like a vessel. */
/* Opaque, not nearly so. At 95% the patient page behind it showed through the
   tree — headings and buttons crossing the vessels, which is the one thing a
   diagram cannot have over it. */
#cmx .cmwrap { position: fixed; inset: 0; z-index: 1200; background: #0b120d;
  display: flex; flex-direction: column; }
#cmx .cmbar { display: flex; justify-content: space-between; align-items: center;
  padding: .55rem .8rem; color: #cfe8d6; }
#cmx .cmclose { background: #fff; border: 0; border-radius: 10px; padding: .55rem 1.2rem;
  font-weight: 700; font-size: 1rem; }
#cmx .cmbody { flex: 1; overflow-y: auto; padding: 0 .7rem 1.2rem;
  max-width: 560px; width: 100%; margin: 0 auto; }
#cmx .cmnote { color: #9fc4ab; font-size: .8rem; text-align: center; margin: 0 0 .3rem; }
#cmx .cmtot { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
  color: #e8f3ea; font-size: .9rem; padding: .5rem 0; border-top: 1px solid #24402f; }
#cmx .cmtot b { color: #7ee6a8; font-size: 1.15rem; }
#cmx .cmleg { display: flex; justify-content: center; align-items: center; gap: .5rem;
  flex-wrap: wrap; color: #8fae99; font-size: .72rem; padding-bottom: .4rem; }
#cmx .lg { display: inline-block; width: 15px; height: 5px; border-radius: 3px;
  vertical-align: middle; margin-left: .5rem; }
#cmx .lg-hit { background: #ff6b6b; } #cmx .lg-plain { background: #7fa98c; }
#cmx .lg-abs { background: #3c5346; }
#cmx .cmlist { margin-top: .5rem; }
#cmx .cmlist .logrow { color: #dcece0; border-bottom: 1px solid #24402f; }
#cmx .cmhelp { color: #8fae99; font-size: .78rem; text-align: center; margin: .7rem 0 0; }
/* The two halves of a lesion's score, side by side with the total.
   "Lesion variations": six lesions came to 45.5 here and 26.5 on
   syntaxscore.org, and neither screen showed why. The segments are the same on
   both — what differs is how many lesions the characteristics were charged
   against. Printing both halves is what lets that be compared line by line
   rather than argued about. */
#cmx .cmsum { font-style: normal; color: #8fae99; font-size: .74rem; }
/* Not a warning. A judgement that has been made without being noticed. */
#cmx .cmcontig { margin-top: .6rem; padding: .6rem .75rem; border-radius: 10px;
  background: #16281d; border: 1px solid #2c4a37; color: #cfe3d5;
  font-size: .78rem; line-height: 1.55; }
#cmx .cmcontig b { color: #e8f3ea; }
#cmx .cmcontig span { display: block; margin-top: .25rem; color: #9fc4ab; }

/* Dominance, asked first and answered here.
   Three buttons rather than a dropdown on another sheet: it is the question the
   whole map depends on, and a question the map depends on cannot be somewhere
   else. */
#cmx .cmdomrow { display: flex; gap: .4rem; padding: .2rem 0 .5rem; }
#cmx .cmdom { flex: 1; background: #16281d; border: 1px solid #2c4a37; border-radius: 11px;
  color: #cfe8d6; padding: .45rem .3rem; font-family: inherit; cursor: pointer; line-height: 1.2; }
#cmx .cmdom b { display: block; font-size: .84rem; }
#cmx .cmdom small { display: block; color: #7f9f8b; font-size: .66rem; }
#cmx .cmdom.on { background: #7ee6a8; border-color: #7ee6a8; color: #0b1a11; }
#cmx .cmdom.on small { color: #16482c; }
#cmx .cmdom[disabled] { opacity: .55; cursor: default; }
#cmx .cmask { background: #24402f; border: 1px solid #3a6249; border-radius: 11px;
  color: #d8ecdf; font-size: .78rem; line-height: 1.45; padding: .5rem .65rem; margin-bottom: .5rem; }

/* The segment sheet: over the map, not away from it, so the vessel being
   worked through is one tap behind every answer. */
#cmx .cmsheet { position: absolute; inset: 0; z-index: 2; background: #0f1a13;
  display: flex; flex-direction: column; }
#cmx .cmsheet[hidden] { display: none; }
#cmx .cmshead { display: flex; align-items: flex-start; justify-content: space-between;
  gap: .5rem; padding: .7rem .8rem .5rem; color: #e8f3ea; border-bottom: 1px solid #24402f; }
#cmx .cmshtxt { flex: 1 1 auto; min-width: 0; }
#cmx .cmshead b { font-size: 1.02rem; }
#cmx .cmshead small { display: block; color: #8fae99; font-size: .76rem; margin-top: .1rem; }
#cmx .cmsx { flex: none; background: none; border: 0; color: #cfe8d6; font-size: 1.2rem;
  padding: .1rem .4rem; cursor: pointer; }
#cmx .cmshere { display: flex; flex-wrap: wrap; gap: .35rem; padding: .5rem .8rem 0; }
#cmx .cmchip { background: #16281d; border: 1px solid #2c4a37; border-radius: 999px;
  color: #cfe8d6; font-family: inherit; font-size: .78rem; padding: .34rem .7rem; cursor: pointer; }
#cmx .cmchip.on { background: #7ee6a8; border-color: #7ee6a8; color: #0b1a11; font-weight: 700; }
/* Four short screens rather than one long one — the calculator's shape, and
   the reason it is that shape: what it asks next depends on the last answer. */
#cmx .cmsteps { display: flex; gap: .3rem; padding: .5rem .8rem 0; }
#cmx .cmstep { flex: 1; background: none; border: 0; border-bottom: 2px solid #2c4a37;
  color: #7f9f8b; font-family: inherit; font-size: .72rem; padding: .3rem .1rem .35rem;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cmx .cmstep.done { color: #cfe8d6; border-bottom-color: #4d7d5f; }
#cmx .cmstep.on { color: #7ee6a8; border-bottom-color: #7ee6a8; font-weight: 700; }
#cmx .cmempty { color: #8fae99; font-size: .82rem; line-height: 1.55; padding: 1rem .2rem; }
#cmx .cmsbody { flex: 1; overflow-y: auto; padding: .6rem .8rem 1rem;
  max-width: 560px; width: 100%; margin: 0 auto; }
#cmx .cmfld { margin-bottom: .7rem; }
#cmx .cmfld label { display: block; color: #9fc4ab; font-size: .76rem; font-weight: 600;
  margin-bottom: .25rem; }
#cmx .cmfld select, #cmx .cmfld input { width: 100%; background: #16281d; color: #e8f3ea;
  border: 1px solid #2c4a37; border-radius: 10px; padding: .55rem .6rem; font-size: .95rem;
  font-family: inherit; }
#cmx .cmfnote { color: #7f9f8b; font-size: .7rem; line-height: 1.4; margin-top: .22rem; }
/* Two possibilities, one tap. Six of these on the sheet, and a dropdown for
   each is three taps apiece for an answer that is yes or no. */
#cmx .cmyn { display: flex; gap: .4rem; }
#cmx .cmyn button { flex: 1; background: #16281d; border: 1px solid #2c4a37; border-radius: 10px;
  color: #cfe8d6; padding: .5rem; font-family: inherit; font-size: .9rem; cursor: pointer; }
#cmx .cmyn button.on { background: #7ee6a8; border-color: #7ee6a8; color: #0b1a11; font-weight: 700; }
#cmx .cmsegs { display: flex; flex-wrap: wrap; gap: .35rem; }
#cmx .cmmore { width: 100%; margin-top: .3rem; }
#cmx .cmmore summary { color: #8fae99; font-size: .76rem; cursor: pointer; padding: .2rem 0; }
#cmx .cmmore .cmsegs { padding-top: .35rem; }
#cmx .cmsfoot { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  flex-wrap: wrap; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid #24402f; background: #0b120d; }
#cmx .cmnav { background: #16281d; border: 1px solid #2c4a37; border-radius: 11px;
  color: #cfe8d6; padding: .6rem 1rem; font-family: inherit; font-size: .95rem; cursor: pointer; }

/* The pictures the calculator puts beside its questions. "Blunt" is a shape,
   and Medina is a diagram — neither is answerable from the words alone. */
/* A grid, not a wrapping flex row: seven cards over two lines left the last two
   stretched to half the screen each. */
#cmx .lfigs { display: grid; gap: .3rem; margin: .45rem 0 .1rem;
  grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); }
#cmx .lfig { background: #16281d;
  border: 1px solid #2c4a37; border-radius: 10px; padding: .3rem .2rem .25rem; margin: 0;
  font-family: inherit; cursor: default; }
#cmx .lfigs.wide .lfig { cursor: pointer; }
#cmx .lfig svg { display: block; width: 100%; height: auto; }
#cmx .lfig figcaption, #cmx .lfig span { display: block; text-align: center; color: #7f9f8b;
  font-size: .64rem; margin-top: .1rem; }
#cmx .lfig.on { border-color: #7ee6a8; background: #17331f; }
#cmx .lfig.on figcaption, #cmx .lfig.on span { color: #7ee6a8; font-weight: 700; }
#cmx .cmspts span { display: block; color: #7ee6a8; font-weight: 700; font-size: 1.1rem; }
#cmx .cmspts small { display: block; color: #8fae99; font-size: .72rem; }
#cmx .cmsbtns { display: flex; gap: .5rem; }
#cmx .cmsave { background: #7ee6a8; border: 0; border-radius: 11px; color: #0b1a11;
  font-weight: 700; font-size: 1rem; padding: .6rem 1.4rem; font-family: inherit; cursor: pointer; }
#cmx .cmsave[disabled] { background: #33513f; color: #7f9f8b; cursor: default; }
#cmx .cmdel { background: none; border: 1px solid #6b3a3a; border-radius: 11px; color: #e0a3a3;
  padding: .6rem .9rem; font-family: inherit; font-size: .9rem; cursor: pointer; }

.cormap { display: block; width: 100%; max-width: 420px; margin: 0 auto;
  touch-action: manipulation; }
.cormap .cao { fill: #7fa98c; opacity: .5; }
.cormap .caot { fill: #0d1a12; font: 700 12px system-ui, sans-serif; text-anchor: middle; }
.cormap .cv { fill: none; stroke: #7fa98c; stroke-width: 7; stroke-linecap: round; }
.cormap .cv-hit { stroke: #ff6b6b; stroke-width: 9; }
.cormap .cv-absent { stroke: #3c5346; stroke-width: 5; stroke-dasharray: 3 6; }
/* Invisible, fat, and the only thing that takes a tap: a 7px vessel is not a
   touch target on a phone, and missing it reads as the map being broken.
 *
 * `pointer-events: stroke` is the whole fix for it not being tappable on a
 * phone. The default is `visiblePainted`, which hit-tests where the shape is
 * *painted* — and this stroke is painted `transparent` on purpose. Chromium on
 * a desktop counts transparent as painted and lets the tap through; Safari on
 * an iPhone does not, so eighteen vessels were drawn, labelled, and inert.
 * `stroke` hit-tests the stroke's geometry and does not care what colour it is.
 *
 * touch-action keeps the browser from holding the tap back for a possible
 * double-tap-to-zoom, which on the same phone reads as a map that ignores you. */
.cormap { touch-action: manipulation; }
.cormap .cvhit { fill: none; stroke: transparent; stroke-width: 26; stroke-linecap: round;
  cursor: pointer; pointer-events: stroke; }
.cormap .cvhit:focus-visible { stroke: #7ee6a8; stroke-opacity: .55; outline: none; }
/* The number is a label, not a button. Left alone it sits over the middle of
   the vessel and swallows the tap — and the middle of the vessel, on the
   number, is exactly where a thumb aims. */
.cormap .cd { pointer-events: none; }
.cormap .cd circle { fill: #0d1a12; stroke: #7fa98c; stroke-width: 1.5; }
.cormap .cd text { fill: #cfe8d6; font: 700 10px system-ui, sans-serif; text-anchor: middle; }
.cormap .cd-hit circle { fill: #ff6b6b; stroke: #ff6b6b; }
.cormap .cd-hit text { fill: #17110f; }
.cormap .cd-absent circle { stroke: #3c5346; } .cormap .cd-absent text { fill: #55705f; }

/* A grade the form worked out from the number above it, shown only when what is
   on screen disagrees — never a replacement, always an offer. It sits under the
   field it is about, in the section's own colour, so it reads as part of the
   form rather than as an error. */
.sug { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: .35rem 0 0; font-size: .78rem; color: var(--muted); line-height: 1.45; }
.sug[hidden] { display: none; }
.sug b { color: var(--text); font-weight: 650; }
button.sugtake { font: inherit; font-size: .76rem; font-weight: 650; cursor: pointer;
  border: 1px solid var(--brand-2); background: #fff; color: var(--brand);
  border-radius: 8px; padding: .3rem .7rem; min-height: 34px;
  transition: background-color .18s ease, color .18s ease; }
@media (hover: hover) { button.sugtake:hover { background: var(--brand-2); color: #fff; } }
@media (pointer: coarse) { button.sugtake { min-height: 40px; } }
@media (prefers-reduced-motion: reduce) { button.sugtake { transition: none; } }

/* The numbers disagreeing is a finding, not an error — an aortic valve area
   reading severe against a gradient that does not is low-flow low-gradient
   severe stenosis, which is decided by the flow state and not by any rule. So
   it is stated plainly and the grade is still the worst of them. */
.dis { margin: .35rem 0 0; padding: .5rem .65rem; border-radius: 8px;
  background: #FFF6E6; border: 1px solid #E0A800; color: #4A3B12;
  font-size: .78rem; line-height: 1.45; }
.dis[hidden] { display: none; }
.dis b { font-weight: 700; }

/* Where a band came from, and what it cannot see. Folded away — it is the
   answer to "says who", not something to read on every patient. */
details.prov { margin: .3rem 0 0; font-size: .76rem; color: var(--muted); }
details.prov > summary { cursor: pointer; padding: .28rem 0; min-height: 32px;
  display: flex; align-items: center; color: var(--brand); font-weight: 600; }
details.prov p { margin: .25rem 0 .35rem; line-height: 1.5; max-width: 68ch; }
details.prov .provsrc { color: var(--muted); font-style: italic; }
@media (pointer: coarse) { details.prov > summary { min-height: 40px; } }

/* SYNTAX II — the two mortalities, side by side.
 *
 * They were two boxes among ten identical grey ones, which is a comparison
 * printed as a form. The numbers are what the heart team is actually looking
 * at, so they are large, together, and above the fields they came from.
 *
 * The lower one is marked and nothing else is. No colour says "do this": green
 * for the lower arm would be a recommendation, and the model does not make one
 * — the caution underneath is part of the card for that reason, not a footnote
 * somewhere else on the page. */
.ss2card { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
  margin: 0 0 .9rem; padding: .85rem .9rem; border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 5%, var(--card));
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.ss2c { position: relative; padding: .6rem .7rem; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line); text-align: center; }
.ss2c.low { border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); }
.ss2c .ss2l { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.ss2c b { display: block; font-size: 1.9rem; line-height: 1.15; font-weight: 700; color: var(--ink); }
.ss2c b i { font-size: .95rem; font-style: normal; font-weight: 700; color: var(--muted); margin-left: 1px; }
.ss2c .ss2tag { display: inline-block; margin-top: .15rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--brand); }
.ss2gap { grid-column: 1 / -1; text-align: center; font-size: .82rem; font-weight: 600; color: var(--ink); }
.ss2note { grid-column: 1 / -1; font-size: .74rem; line-height: 1.5; color: var(--muted); }
.ss2note b { color: var(--ink); }
@media (max-width: 420px) { .ss2card { grid-template-columns: 1fr; } .ss2c b { font-size: 1.7rem; } }

/* What is still needed, and which sheet it is on.
 *
 * "We should hold on to the old settings, otherwise staff won't fill it." The
 * blank on the report is the incentive; this is what turns it from a blank
 * somebody shrugs at into a short list somebody can clear. It is a note, not
 * an error — no red, nothing that reads as a fault, because a record part-way
 * through being filled in is the normal state of a record and not a mistake. */
.ss2need { margin: 0 0 .9rem; padding: .75rem .85rem; border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 3%, var(--card));
  border: 1px dashed var(--line); }
.ss2nt { font-size: .82rem; line-height: 1.5; color: var(--muted); }
.ss2nt b { color: var(--ink); }
.ss2ul { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .3rem; }
.ss2ul li { font-size: .8rem; line-height: 1.4; display: flex; gap: .45rem;
  flex-wrap: wrap; align-items: baseline; }
.ss2ul li b { color: var(--ink); font-weight: 700; }
.ss2ul li span { color: var(--muted); font-size: .75rem; }
.ss2map { margin-top: .6rem; }

/* Say the study — the dictation box at the top of the echo block.
 *
 * It sits inside the section it fills rather than at the top of the form,
 * because it belongs to those boxes and to no others, and because somebody
 * scrolling to the echo should find it there without having been told it
 * exists.
 *
 * The green wash on a box it filled is the whole review mechanism: forty-nine
 * boxes, and you need to see at a glance which of them nobody typed. It is
 * paired with a summary in words directly above — the colour is the cue you
 * catch while scrolling, never the thing that carries the meaning. */
.dictate { margin: 0 0 .9rem; padding: .8rem .85rem; border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 4%, var(--card));
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.dictate .dhead { font-weight: 750; font-size: 1rem; color: var(--ink); }
.dictate .dmic { margin-right: .2rem; }
.dictate .dnote { margin: .25rem 0 .5rem; font-size: .78rem; line-height: 1.5; color: var(--muted); }
.dictate .dnote b { color: var(--ink); }
.dictate .dtext { width: 100%; min-height: 4.6rem; padding: .55rem .6rem; border-radius: 9px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-size: 1rem; line-height: 1.5; resize: vertical; }
.dictate .drow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
/* 44px, so it can be hit with a thumb in theatre clothes. */
.dictate .drow button { min-height: 44px; }
.dictate .dstate { font-size: .8rem; color: var(--muted); }
.dictate .dstate.warn { color: #a33; font-weight: 600; }
.dictate .dstate.busy { color: var(--brand); font-weight: 600; }
.dictate .dout { margin-top: .6rem; font-size: .8rem; line-height: 1.55; }
.dictate .dsum { margin: 0 0 .35rem; color: var(--ink); }
.dictate .dsmall { display: block; margin-top: .15rem; font-size: .74rem; color: var(--muted); }
.dictate .dgap { margin-top: .5rem; padding-top: .45rem; border-top: 1px solid var(--line); }
.dictate .dgap ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.dictate .dgap li { margin: .1rem 0; }

/* Filled by the dictation and not yet read back. Removed the moment Undo puts
   the box back; kept while the form is on screen otherwise, because "which of
   these did I not type" is the question right up until Save. */
.fld.dfilled input, .fld.dfilled select, .fld.dfilled textarea {
  background: color-mix(in srgb, #2e7d32 8%, var(--card));
  border-color: color-mix(in srgb, #2e7d32 45%, transparent); }
.fld.dfilled > label::after { content: ' · from what you said'; font-size: .68rem;
  font-weight: 600; color: #2e7d32; text-transform: none; letter-spacing: 0; }

/* The filled count on the list of sheets. Bold enough to find while scanning
   the list, in the ink colour rather than a status colour — see the note on the
   chips: this reports, it does not grade. */
.info .fillc { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* The PIN pad.
 *
 * Big, centred, widely spaced digits: this is typed on a phone, often one-handed,
 * often in a corridor. The characters are shown rather than dotted — a PIN pad
 * that hides what you typed on a device only you are holding trades a real
 * mistyping problem for an imaginary shoulder-surfing one, and the field is
 * cleared the moment a try fails. */
.pinbox { font-size: 1.6rem; font-weight: 700; letter-spacing: .55em; text-align: center;
  padding: .7rem .4rem .7rem 1rem; font-variant-numeric: tabular-nums; }
.pinbox::placeholder { letter-spacing: normal; }
.pinmsg { min-height: 1.2rem; font-size: .82rem; line-height: 1.4; color: var(--muted); margin-top: .35rem; }
.pinmsg.warn { color: #b3261e; font-weight: 600; }

/* The jump bar folds away.
 *
 * "Because of the tabs sitting on top, the form filling becomes very difficult
 * — they occupy most of the space of the field."
 *
 * On the anaesthesia sheet it had grown to eight rows and taken half an iPhone,
 * and being sticky it took that half the whole way down the form. Folded, it is
 * one row that says which block you are standing in — which the expanded bar
 * could never tell you. */
.fjump .fjtog { display: none; width: 100%; align-items: center; gap: .5rem;
  font: inherit; font-size: .82rem; font-weight: 700; color: var(--brand-dark);
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--brand-2);
  border-radius: 9px; padding: .5rem .7rem; min-height: 40px; cursor: pointer;
  box-shadow: var(--shadow); text-align: left; }
.fjump .fjnow { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fjump .fjnn { font-size: .72rem; font-weight: 650; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.fjump .fjcar { font-size: .7rem; color: var(--muted); transition: transform .15s ease; }
.fjump.closed .fjcar { transform: rotate(-90deg); }
.fjump .fjchips { display: contents; }
.fjump.closed .fjchips { display: none; }

/* The toggle is only offered where the bar is long enough to be in the way.
   On a wide screen the chips are two rows and folding them helps nobody. */
@media (max-width: 900px) {
  .fjump { flex-direction: column; align-items: stretch; }
  .fjump .fjtog { display: flex; }
  .fjump .fjchips { display: flex; flex-wrap: wrap; gap: .35rem; }
  .fjump.closed .fjchips { display: none; }
}

/* Photograph the report instead of saying it. Under the button rather than
   beside it, because the sentence about what gets sent is the point of the
   control and must not be a caption somebody scrolls past. */
.dictate .dpho { margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.dictate .dphob { display: inline-flex; align-items: center; min-height: 44px;
  background: #fff; color: var(--brand); border: 1px solid #a9cbb5; border-radius: 9px;
  padding: .42rem .8rem; font-size: .85rem; font-weight: 600; cursor: pointer; margin: 0 0 .3rem; }
.dictate .dphob:hover { background: #eef6f0; }
.dictate .dpho .dsmall { display: block; }
.dictate .dpho .dsmall b { color: var(--ink); }

/* A demonstration copy says so, everywhere.
 *
 * Amber rather than red: it is not an error, it is a fact about the data. And
 * it PRINTS -- print-color-adjust and no display:none in the print block --
 * because a printed demonstration sheet with a plausible name and an MRD on it
 * is otherwise indistinguishable from a patient's record, which is how one ends
 * up forwarded and quoted as if it were real. */
#demobar { position: sticky; top: 0; z-index: 60; background: #7a4a00; color: #fff;
  font-size: .78rem; line-height: 1.45; text-align: center; padding: .4rem .8rem;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#demobar b { color: #ffd98a; }
@media print { #demobar { position: static; font-size: 9pt; padding: 4pt 0; } }