/* Trust Fund Baby. One maternity monitor: the glass is the page, the bezel is its rim.
   Every colour is measured off art/ref/monitor.jpg. Two scales run the whole page, the type scale
   and the space scale below: nothing on the page is sized or spaced off them. */

@font-face { font-family: Technor; src: url("/fonts/Technor-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Technor; src: url("/fonts/Technor-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Technor; src: url("/fonts/Technor-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: RX100; src: url("/fonts/RX100-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* ink. The core is the hot centre of the beam, the ink is the body of it, the mid is a label.
     The mid is lifted off the reference's own #C78129 so that 16 px of it still holds 4.5:1 on the
     brightest part of the glass. --deep is glow and borders, never a letter. */
  --core: #FDE843;
  --ink: #EBB13F;
  --mid: #D89A3D;
  --deep: #954C20;
  --glass: #271617;
  --glass-lit: #4E2B26;
  --room: #2B2B29;
  --plate-ink: #2A1508;     /* a letter printed on a lit plate */
  --plate-sub: #4A2A10;

  /* the beam draws every box with the same dotted rule: one density on the page */
  --dot: rgba(235, 177, 63, .85);
  --dot-soft: rgba(235, 177, 63, .5);

  /* type scale */
  --t-display: clamp(46px, 4.3vw, 76px);   /* the episode number, a cell's one number */
  --t-head: clamp(27px, 2.3vw, 36px);      /* a screen title, the phase of an episode */
  --t-sub: clamp(24px, 1.5vw, 27px);       /* who is on air, a child's name: never under 24, the
                                              size at which the bloom still reads as a heading */
  --t-figure: clamp(34px, 3vw, 54px);      /* a numeral that labels a block, an empty readout */
  --t-lead: 20px;                          /* a lead label, a flat line */
  --t-value: 19px;                         /* a mono readout */
  --t-body: 18px;
  --t-lab: 17px;                           /* an uppercase label */
  --t-small: 16px;                         /* the smallest size on this site */

  /* space scale */
  --s1: 6px; --s2: 10px; --s3: 16px; --s4: 24px; --s5: 36px; --s6: 56px; --s7: 76px;

  --rim: 40px;              /* the bezel, nine-sliced from a generated plate */
  --room-edge: 14px;        /* how much of the room shows outside the device */
  --pad: var(--s5);         /* inner padding of the glass */
  --gap: var(--s4);
  --box-y: 30px;            /* a box keeps its text this far from its own rule, all four sides */
  --box-x: 38px;            /* (the sides carry a display numeral, so they are the wider pair) */
  --bloom: 0 0 1px rgba(253, 232, 67, .9), 0 0 11px rgba(235, 177, 63, .5), 0 0 28px rgba(149, 76, 32, .45);
  --bloom-soft: 0 0 1px rgba(253, 232, 67, .7), 0 0 9px rgba(199, 129, 41, .4);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { background: var(--room); scrollbar-gutter: stable; }
body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font: 600 var(--t-body)/1.55 Technor, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- the device -------------------------------------------------------- */
.room, .glass, .bezel { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.room { background: radial-gradient(120% 120% at 30% 10%, #35352f 0%, #262624 55%, #1b1b1a 100%); }
.glass {
  inset: var(--room-edge);
  border-radius: 16px;
  background:
    radial-gradient(130% 110% at 50% 0%, #3a1d1c 0%, #2a1517 42%, #1c0f12 100%);
  box-shadow: inset 0 0 90px 30px rgba(10, 6, 8, .75), inset 0 0 8px 2px rgba(0, 0, 0, .9);
  overflow: hidden;
}
.raster {
  position: absolute; inset: 0;
  background:
    url("/img/grain.png") repeat,
    repeating-linear-gradient(to bottom, rgba(10, 4, 6, .5) 0 1px, rgba(255, 255, 255, 0) 1px 3px);
  background-size: 160px 160px, auto;
  opacity: .9;
  mix-blend-mode: normal;
}
.vignette { position: absolute; inset: 0; background: radial-gradient(85% 75% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%); }
.bezel {
  border: var(--rim) solid transparent;
  border-image: url("/img/bezel.png") 136 / var(--rim) / 0 stretch;
  z-index: 40;
}

/* ---- the print --------------------------------------------------------- */
.strip {
  position: relative; z-index: 10; display: flex; flex-direction: column;
  padding: calc(var(--room-edge) + var(--rim) + var(--s4)) calc(var(--room-edge) + var(--rim) + var(--pad)) calc(var(--s7) + var(--s5));
  max-width: 1920px; margin: 0 auto;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--core); color: #1a0d10; padding: var(--s3) var(--s4); font-weight: 700;
}
.skip:focus { left: 90px; top: 60px; }
.live { position: absolute; left: -9999px; }

.strip a { color: var(--core); text-decoration-color: rgba(253, 232, 67, .4); text-underline-offset: 3px; }
.strip a:hover { text-decoration-color: var(--core); }
.strip a.key { text-decoration: none; color: #24120f; }   /* a key is a plate: its label is the dark one */
.strip a.key.ghost { color: var(--core); }

:is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--core); outline-offset: 3px;
}

/* ---- ward strip (the nav) ----------------------------------------------
   Five beds of one width, one grammar: the name, the lead, the live word. The rows are fixed, so
   the three lines of all five beds sit on the same baselines whatever the words are. */
.ward { margin-bottom: var(--s4); }
.beds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.beds > li { display: grid; }
.bedlink {
  display: grid; grid-template-rows: auto 22px auto; gap: var(--s2);
  width: 100%; padding: var(--s3) var(--s4);
  background: none; border: 1px dashed var(--dot-soft); border-radius: 2px;
  color: var(--ink); font: 700 var(--t-lab)/1.15 Technor, sans-serif; letter-spacing: .09em; text-transform: uppercase;
  text-align: left; text-decoration: none; cursor: pointer; text-shadow: none;
  transition: background-color .12s linear, border-color .12s linear, color .12s linear;
}
.bedlink canvas { display: block; width: 100%; height: 22px; align-self: center; }
.bedlink .state { font: 400 var(--t-small)/1.2 RX100, monospace; letter-spacing: .01em; color: var(--mid); text-transform: none; }
.bedlink:hover { border-color: var(--core); color: var(--core); background: rgba(253, 232, 67, .06); }
.bedlink:hover .state { color: var(--ink); }
.bedlink:active { background: rgba(253, 232, 67, .15); }
.bedlink[aria-current="page"] {
  background: var(--core); color: var(--plate-ink); border: 1px solid var(--core);
}
.bedlink[aria-current="page"] .state { color: var(--plate-sub); }
.bedlink[aria-current="page"]:hover { background: #FFEE62; color: var(--plate-ink); }
.bedlink[aria-current="page"]:active { background: #EBD63C; }

/* ---- the wordmark ------------------------------------------------------
   One outlined word across the glass. The right margin is its own padding, so the last letter never
   runs into the rim, and the stroke is a fraction of the cap, so it is one weight at every size. */
.mark {
  margin: 0 0 var(--s4); position: relative;
  font: 900 clamp(40px, 10.2vw, 192px)/0.96 Technor, sans-serif;
  letter-spacing: .012em; white-space: nowrap;
}
.mark-line {
  display: inline-block; transform: skewX(-9deg); transform-origin: 0 100%;
  color: transparent; -webkit-text-stroke: clamp(2px, .018em, 3.4px) var(--core);
  filter: drop-shadow(0 0 14px rgba(235, 177, 63, .42));
}

/* ---- shared parts ------------------------------------------------------ */
.bed:focus { outline: none; }
.screen { margin-bottom: var(--s7); }
.screen:last-child { margin-bottom: 0; }

.title {
  margin: 0 0 var(--s4); font: 900 var(--t-head)/1.1 Technor, sans-serif; letter-spacing: .02em;
  color: var(--core); text-shadow: var(--bloom);
}
.lede { margin: 0 0 var(--s4); max-width: 62ch; color: var(--ink); }
.lab { font: 700 var(--t-lead)/1.2 Technor, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--mid); }
.val { font: 400 var(--t-lead)/1.4 RX100, monospace; color: var(--ink); }
.big { font: 900 var(--t-display)/0.9 Technor, sans-serif; color: var(--core); text-shadow: var(--bloom); letter-spacing: .01em; }
.mono { font-family: RX100, monospace; font-weight: 400; }

/* a cell: the machine draws its boxes with a dotted beam, exactly as the reference does */
.cell {
  position: relative; border: 2px dotted var(--dot); border-radius: 2px;
  padding: var(--box-y) var(--box-x);
  box-shadow: 0 0 18px rgba(149, 76, 32, .22), inset 0 0 26px rgba(149, 76, 32, .12);
}
/* .stack is a grid with a gap of its own: a cell in it never carries a margin as well */
.cell.has-ticks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 44%); gap: 0; padding-right: 0; align-items: center; }
.cell.has-ticks > :not(.ticks) { grid-column: 1; }
/* the readout beside the number: label left, value right, one row rhythm, nothing out of step */
.cell .ticks {
  grid-column: 2; grid-row: 1 / -1; align-self: stretch;
  border-left: 2px dotted var(--dot);
  padding: var(--s4) var(--box-x) var(--s4) var(--s4);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; align-items: baseline;
  gap: var(--s3) var(--s3);
}
.ticks .t { font: 700 var(--t-small)/1.25 Technor, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--mid); }
.ticks .n { font: 400 var(--t-value)/1.25 RX100, monospace; color: var(--ink); text-align: right; }

.rows { display: grid; gap: 0; }
/* a table inside a box: its rules run the whole width of the box and the rows carry the text inset,
   so the two paddings are never added to each other and a long word still has room on a phone */
.cell > .rows { margin-left: calc(var(--box-x) * -1); margin-right: calc(var(--box-x) * -1); }
.row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) var(--s5); border-bottom: 1px dotted var(--dot-soft); align-items: baseline; }
.row:last-child { border-bottom: 0; }
.row .lab { font-size: var(--t-lab); }

/* keys: generated plate, the brand mark printed on it */
.keys { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 56px; padding: var(--s3) var(--s4); border: 0; cursor: pointer; text-align: center;
  background: transparent; color: #24120f;
  font: 700 var(--t-value)/1 Technor, sans-serif; letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
  /* the slice has to be under half the plate, or the middle slice is zero wide and the cap
     renders as four loose corners */
  border-image: url("/img/key.png") 36 fill / 18px / 0 stretch;
}
.key img { width: 20px; height: 20px; display: block; }
.key:hover { filter: brightness(1.12); }
.key:active { filter: brightness(.9); }
.key[aria-disabled="true"], .key:disabled { filter: grayscale(.55) brightness(.62); cursor: not-allowed; }
.key.ghost {
  border-image: none; background: none; color: var(--core);
  border: 2px dotted var(--dot); text-shadow: none;
}
.key.ghost:hover { background: rgba(253, 232, 67, .08); filter: none; }
.key.ghost:active { background: rgba(253, 232, 67, .16); filter: none; }

.note { font-size: var(--t-small); color: var(--mid); margin-top: var(--s2); }
.warn { color: var(--core); }

/* ---- ward screen -------------------------------------------------------
   The left column is the episode, the right column is what the machine made of it. Both are one
   grid with one gap: no block on this page carries a margin of its own. */
.ward-screen { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.col-left, .col-right { display: grid; gap: var(--gap); align-content: start; }
.episode-no { font: 900 var(--t-display)/0.9 Technor, sans-serif; color: var(--core); text-shadow: var(--bloom); letter-spacing: .02em; }
.phase { font: 900 var(--t-head)/1.1 Technor, sans-serif; color: var(--ink); text-shadow: var(--bloom-soft); letter-spacing: .04em; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); }
.phase .count { font-family: RX100, monospace; font-weight: 400; }
/* the voice key reads the episode out loud, so it stands on its own line under the phase */
.voicerow { display: flex; flex-wrap: wrap; gap: var(--s3); }

.traces { display: grid; gap: var(--s3); }
.tracebox { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s3); align-items: center; }
.tracebox .who { font: 700 var(--t-value)/1.2 Technor, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); }
.tracebox .who b { display: block; font: 400 var(--t-lab)/1.4 RX100, monospace; color: var(--ink); letter-spacing: 0; text-transform: none; }
.tracebox canvas { display: block; width: 100%; height: 116px; }

.speech { display: grid; gap: var(--s3); min-height: 96px; align-content: start; }
.line { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s3); align-items: baseline; }
.line .who { font: 700 var(--t-lab)/1.4 Technor, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); }
.line p { margin: 0; }

.onair .name { font: 900 var(--t-sub)/1.15 Technor, sans-serif; color: var(--core); text-shadow: var(--bloom-soft); }
.onair .by { font: 400 var(--t-body)/1.5 RX100, monospace; color: var(--ink); margin-top: var(--s2); }

/* the admission card: name, ticker, mint, keys */
/* the mark and the name sit on one centre line, the mark sized to the two lines beside it */
.card .patient { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s4); align-items: center; }
.card .patient img { width: 56px; height: 56px; display: block; }
.card .pname { font: 900 var(--t-sub)/1.05 Technor, sans-serif; color: var(--core); text-shadow: var(--bloom-soft); }
.card .pticker { font: 700 var(--t-lead)/1.2 Technor, sans-serif; letter-spacing: .1em; color: var(--ink); margin-top: var(--s2); }
.mintline {
  margin-top: var(--s4); padding: var(--s4); display: grid; gap: var(--s2);
  background: rgba(10, 5, 7, .55); border: 1px dotted var(--dot-soft);
}
/* an address is always the whole address: it breaks where it must and selects in one go */
.addr { font: 400 var(--t-value)/1.45 RX100, monospace; color: var(--core); word-break: break-all; user-select: all; }
.addr.empty { color: var(--mid); word-break: normal; }

/* ---- lists, tree, forms ------------------------------------------------ */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: var(--gap); align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--gap); align-items: start; }
.stack { display: grid; gap: var(--gap); }

.queue { display: grid; gap: 0; }
.qrow { display: grid; grid-template-columns: 74px minmax(0, 1fr) 160px 132px; gap: var(--s3); align-items: center; padding: var(--s3) var(--s5); border-bottom: 1px dotted var(--dot-soft); }
.qrow .no { font: 400 var(--t-lead)/1 RX100, monospace; color: var(--mid); }
.qrow .nm { font: 700 var(--t-sub)/1.2 Technor, sans-serif; color: var(--core); }
.qrow .tk { font: 400 var(--t-lab)/1.4 RX100, monospace; color: var(--mid); }
.qrow .st { font: 700 var(--t-lab)/1.2 Technor, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.qrow .st.wait { color: var(--mid); }
.qrow .st.blessed { color: var(--core); }
.qrow .st.copy { color: #E2502F; }

form .field { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
form label { font: 700 var(--t-body)/1.2 Technor, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); }
form input[type="text"], form textarea, form input[type="file"] {
  width: 100%; padding: var(--s3) var(--s4); background: rgba(10, 5, 7, .6);
  border: 1px dotted var(--dot-soft); border-radius: 2px;
  color: var(--core); font: 400 var(--t-value)/1.45 RX100, monospace;
}
form textarea { min-height: 148px; resize: vertical; }
form input:focus, form textarea:focus { border-color: var(--core); outline: none; box-shadow: 0 0 0 2px rgba(253, 232, 67, .3); }
form .hint { font: 600 var(--t-small)/1.4 Technor, sans-serif; color: var(--mid); }
form .count { font-family: RX100, monospace; }

.tree { display: grid; gap: 0; }
.node { padding: var(--s4) var(--s5); border-bottom: 1px dotted var(--dot-soft); display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: var(--s4); align-items: start; }
.node .nm { font: 900 var(--t-sub)/1.1 Technor, sans-serif; color: var(--core); text-shadow: var(--bloom-soft); }
.node .raised { font: 600 var(--t-lab)/1.5 Technor, sans-serif; color: var(--mid); margin-top: var(--s2); }
.node .raised b { color: var(--ink); font-weight: 700; }
.node .amt { font: 400 var(--t-sub)/1.1 RX100, monospace; color: var(--ink); text-align: right; }
.node .amt small { display: block; font: 700 var(--t-small)/1.6 Technor, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); }

.chat { display: grid; gap: var(--s2); }
.msg { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--s3); align-items: baseline; padding: var(--s1) 0; }
.msg .w { font: 400 var(--t-small)/1.5 RX100, monospace; color: var(--mid); }
.msg p { margin: 0; font-size: var(--t-lab); }

.steps { display: grid; gap: var(--gap); counter-reset: step; }
.step { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--s4); align-items: start; }
.step .n { font: 900 var(--t-figure)/0.9 Technor, sans-serif; color: var(--mid); text-shadow: none; }
.step h3 { margin: 0 0 var(--s2); font: 900 var(--t-sub)/1.2 Technor, sans-serif; color: var(--core); }
.step p { margin: 0; max-width: 56ch; }

.flat { color: var(--mid); font: 700 var(--t-lead)/1.3 Technor, sans-serif; letter-spacing: .1em; text-transform: uppercase; }

/* ---- motion ------------------------------------------------------------ */
@keyframes blip { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.onair-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: var(--core); box-shadow: var(--bloom); animation: blip 1.6s steps(2, end) infinite; vertical-align: 2px; }

@media (prefers-reduced-motion: reduce) {
  .onair-dot { animation: none; }
}

/* ---- narrower screens (every override lives at the end of the file) ----- */
@media (max-width: 1365px) {
  /* a readout stands beside its number only while the cell is wide enough to hold both; under this
     it takes the line below the number, with the rule above it, and nothing in it ever wraps */
  .cell.has-ticks { grid-template-columns: minmax(0, 1fr); padding-right: var(--box-x); }
  .cell .ticks {
    grid-column: 1; grid-row: auto; width: auto; border-left: 0;
    border-top: 2px dotted var(--dot);
    padding: var(--s3) var(--s4) var(--s2); margin-top: var(--s3);
  }
}
@media (max-width: 1100px) {
  /* the episode and its readouts stack, and the two readouts pair up instead of stretching */
  .ward-screen { grid-template-columns: minmax(0, 1fr); }
  .col-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-right > .card { grid-column: 1 / -1; }
  .qrow { grid-template-columns: 60px minmax(0, 1fr) 128px; }
  .qrow .tk { display: none; }
}
@media (max-width: 900px) {
  :root { --rim: 22px; --room-edge: 10px; --pad: var(--s4); --gap: 22px; --box-y: 26px; --box-x: 34px; }
  .glass { border-radius: 12px; }
  .bezel { border-image-slice: 136; }
  .beds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .col-right { grid-template-columns: minmax(0, 1fr); }
  .node { grid-template-columns: minmax(0, 1fr); }
  .node .amt { text-align: left; }
  .row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
}
@media (max-width: 560px) {
  body { font-size: var(--t-lab); }
  .strip { padding-bottom: var(--s7); }
  /* on a phone the name of the thing comes first, then the beds, one bed per line */
  .mark { order: -1; font-size: 15.4vw; margin-bottom: var(--s4); }
  .beds { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .bedlink {
    min-height: 0; padding: var(--s3) var(--s4); font-size: var(--t-small); gap: var(--s3);
    display: flex; align-items: baseline; justify-content: space-between;
  }
  .bedlink .state { line-height: 1.15; text-align: right; }
  .bedlink canvas { display: none; }
  .mark-line { -webkit-text-stroke-width: 2px; }
  .tracebox { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .tracebox canvas { height: 104px; }
  .card .patient { grid-template-columns: 48px minmax(0, 1fr); gap: var(--s3); }
  .card .patient img { width: 48px; height: 48px; }
  .row { padding: var(--s2) var(--s4); }
  .qrow { grid-template-columns: 46px minmax(0, 1fr) 104px; gap: var(--s2); padding: var(--s3) var(--s4); }
  .step { grid-template-columns: 56px minmax(0, 1fr); gap: var(--s3); }
  .line, .msg { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
}

/* the value block of a cell with ticks is one group, centred in its own zone */
.cellmain { display: grid; gap: var(--s2); align-content: center; justify-items: center; text-align: center; padding: var(--s3) 0 var(--s2); }

/* the pitch itself, printed under the two leads */
.pitchtext { max-width: 62ch; }
.pitchtext .quote { margin: 0 0 var(--s2); font-size: var(--t-body); line-height: 1.55; }
.note a, .lede a, .quote a { color: var(--core); text-decoration-color: rgba(253, 232, 67, .45); }
.note a:hover, .lede a:hover { text-decoration-color: var(--core); }

/* the nursery: the waiting list and the queue on the left, the form on the right */
.nursery-screen { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.nursery-screen .block + .block { margin-top: var(--s6); }
.nursery-screen .block.cell { margin-top: 0; }
.grid3, .grid2 { align-items: stretch; }
.grid3 > .cell, .grid2 > .cell { height: 100%; }
@media (max-width: 1100px) {
  .nursery-screen { grid-template-columns: minmax(0, 1fr); }
  .nursery-screen .block + .block { margin-top: var(--s5); }
}

/* protocol: the steps beside the rubric and the limits */
.protocol-screen { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.protocol-screen .block + .block { margin-top: var(--s6); }
@media (max-width: 1100px) {
  .protocol-screen { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .protocol-screen .block + .block { margin-top: var(--s5); }
}

/* the verdict word is the widest thing in its cell: it shrinks with the glass, never past it */
.verdict-word { font-size: clamp(26px, 3.4vw, 46px) !important; }

/* the three tiles of a bed: one number each, shrinking with the glass */
.big.tile { font-size: clamp(42px, 4.2vw, 64px); }
.big.tile.tile-small { font-size: clamp(24px, 3vw, 44px); }

@media (max-width: 360px) {
  .beds { grid-template-columns: minmax(0, 1fr); }
  /* at this width a bed's word no longer fits beside its name, so it takes the line under it and
     all five beds keep the same height and the same two baselines */
  .bedlink { display: grid; gap: var(--s1); }
  .bedlink .state { text-align: left; }
  .card .patient { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .card .pticker { font-size: var(--t-body); }
}

/* an empty readout is a pair of dashes, as on the machine, but it is not a headline */
.big.nothing { font-size: var(--t-figure); letter-spacing: .12em; color: var(--mid); text-shadow: var(--bloom-soft); }