/* Mobile breakpoint: @media (max-width: 640px), shared by #58–#62. Media queries
   can't read custom properties and browsers don't support @custom-media yet, so
   write the width out and keep it in step with this note. Below it, the layout
   follows the 390px phone design (design/EHR Stack Mobile.dc.html, variant 1a).
   Above it, nothing changes. */

:root {
  --ink: #13202A;
  --muted: #56666F;
  --accent: #0B5C6B;
  --page: #E9EEF0;
  --surface: #FFFFFF;
  --surface-soft: #F3F6F7;
  --line: #C8D2D7;
  --line-soft: #DCE3E6;

  /* Ownership: vendor-built vs usually third-party */
  --vendor-fill: #EEF5F6;
  --vendor-swatch: #D5E9EC;
  --third-fill: #FCEFD9;
  --third-stroke: #B4731A;
  --third-ink: #6E430C;
  --third-cell-stroke: #D9A860;

  /* Protocol colours */
  --p-hl7: #2F62C9;
  --p-fhir: #C04620; /* design #C94A22, darkened for 4.5:1 */
  --p-dicom: #7446C2;
  --p-x12: #1B7D53;
  --p-ncpdp: #B02F72;
  --p-cda: #9A650E;
  --p-dev: #5E7212;
  --p-app: #62717A; /* design #6B7A83, darkened for 4.5:1 */

  --font-display: Archivo, sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

button { font: inherit; color: inherit; cursor: pointer; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.page {
  min-height: 100vh;
  /* viewport-fit=cover: keep clear of the notch in landscape. */
  padding: 28px max(clamp(16px, 3vw, 40px), env(safe-area-inset-right)) 48px max(clamp(16px, 3vw, 40px), env(safe-area-inset-left));
}
.page-inner { max-width: 1520px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.main { display: flex; flex-direction: column; gap: 18px; }

.masthead { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-end; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.masthead-text { display: flex; flex-direction: column; gap: 10px; max-width: 700px; }
.eyebrow { display: flex; gap: 10px; align-items: center; font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--accent); }
.eyebrow.plain { line-height: normal; }
.eyebrow.plain::before { display: none; }
.masthead h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: 115%; font-size: clamp(38px, 5vw, 60px); line-height: .92; letter-spacing: -.025em; }

/* View tabs */
.tabs { display: flex; flex-wrap: wrap; border: 1px solid var(--ink); background: var(--surface); }
.tab { text-align: left; border: none; padding: 11px 18px 12px; min-width: 190px; flex: 1 1 auto; background: var(--surface); color: var(--ink); font-family: var(--font-display); font-stretch: 95%; font-weight: 700; font-size: 17px; line-height: 1.1; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--surface); }
/* Patient wristband */
.patient-bar { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.wristband { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 18px 6px 8px; font: 12px/1.3 var(--font-mono); }
.wristband b { font-family: var(--font-body); font-weight: 600; font-size: 13px; }
.wristband-plan { color: var(--muted); }
.barcode {
  width: 56px; height: 22px; flex: none; border-radius: 999px 3px 3px 999px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 3px, var(--ink) 3px 4px, transparent 4px 7px, var(--ink) 7px 10px, transparent 10px 11px);
}

.disclaimer { font-size: 12px; color: var(--muted); max-width: 95ch; text-wrap: pretty; }

/* Panels */
.workbench { display: flex; flex-direction: column; gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); }

/* System map */
.map-scroll {
  overflow-x: auto;
  background-color: #F7F9FA;
  background-image: linear-gradient(#E6ECEE 1px, transparent 1px), linear-gradient(90deg, #E6ECEE 1px, transparent 1px);
  background-size: 20px 20px;
  padding: 8px 8px 10px;
}
.map { display: block; width: 100%; min-width: 760px; height: auto; aspect-ratio: 1000 / 658; overflow: hidden; }
.map .no-pointer { pointer-events: none; }

.map-bands { opacity: .35; }
.band { fill: rgba(19, 32, 42, .025); stroke: var(--line); stroke-dasharray: 3 4; }
.band-ehr { fill: rgba(11, 92, 107, .04); stroke: #8FB0B7; }
.layer-label { font: 600 9.5px var(--font-mono); letter-spacing: .1em; fill: var(--muted); white-space: pre; }
.layer-label.accent { fill: var(--accent); }

.node { transition: opacity .4s, fill .3s, stroke .3s; }
.node-text { transition: opacity .4s; }
.node-label { font-family: var(--font-display); font-weight: 650; font-stretch: 86%; font-size: 13px; fill: var(--ink); }
.node-sub { font-family: var(--font-body); font-size: 10.5px; fill: var(--muted); }

/* Systems outside the current step fade back in place and stop taking
   clicks; their hit rects also leave the tab order (map.rs). */
.map .is-off { opacity: .16; }

.edge { transition: opacity .2s; }
.edge path { fill: none; }
.edge-label {
  font: 500 10px var(--font-mono);
  paint-order: stroke; stroke: #F7F9FA; stroke-width: 4px; stroke-linejoin: round;
  transition: opacity .2s;
}

/* Moved by the rAF loop in packets.rs; hidden until it runs. */
.packet { stroke: #FFFFFF; stroke-width: 1.5; }

.hit { fill: transparent; cursor: pointer; }
.hit.is-off { pointer-events: none; }

.panel-heading { margin: 0; font: 600 10.5px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.chip { flex: none; font: 500 9.5px/1 var(--font-mono); padding: 3px 5px; border: 1px solid; white-space: nowrap; }
.chip-lg { font-size: 10px; padding: 4px 6px; }

/* Step card */
.step-card { border-left: 4px solid var(--accent); padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: flex-start; }
.step-main { flex: 3 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.step-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font: 500 12px var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.step-time { color: var(--ink); font-weight: 600; }
.step-controls { display: flex; gap: 4px; margin-left: auto; }
.step-btn { height: 30px; min-width: 32px; border: 1px solid var(--line); background: var(--surface-soft); font-size: 11px; }
.step-btn:disabled { opacity: .4; cursor: default; }
.play-btn { height: 30px; min-width: 70px; border: 1px solid var(--accent); background: var(--accent); color: var(--surface); font: 600 12.5px var(--font-body); }
.step-title { margin: 0; font-family: var(--font-display); font-weight: 750; font-size: 28px; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.step-body { margin: 0; max-width: 78ch; text-wrap: pretty; }
.behind { flex: 2 1 320px; min-width: 0; align-self: stretch; background: var(--surface-soft); padding: 11px 14px; display: flex; flex-direction: column; gap: 4px; }
.behind-label { font: 600 10px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.behind-text { font-size: 13.5px; color: #3D4C55; text-wrap: pretty; }

/* System detail */
.map-wrap { position: relative; }

/* Vendor lens bar and ownership legend */
.lens-bar { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.lens-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lens-seg { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); background: var(--surface-soft); }
.lens-btn { border: none; padding: 6px 12px; background: transparent; color: var(--ink); font-size: 12.5px; font-weight: 600; }
.lens-btn[aria-pressed="true"] { background: var(--accent); color: var(--surface); }
.own-legend { min-height: 62px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); }
.own-item { display: inline-flex; align-items: center; gap: 6px; }
.own-swatch { display: inline-block; width: 18px; height: 12px; border: 1.4px solid var(--accent); }

/* Protocol key footer */
.map-footer { padding: 12px 16px 14px; border-top: 1px solid var(--line-soft); }
.proto-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.proto-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.proto-swatch { display: inline-block; width: 16px; height: 0; border-top: 2.5px solid; }
.system-detail {
  position: absolute; top: 12px; right: 12px; width: min(360px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto;
  border: 1.5px solid var(--accent); box-shadow: 0 10px 30px rgba(19, 32, 42, .16); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px;
}
.sys-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.sys-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.close-btn { flex: none; height: 28px; padding: 0 10px; border: 1px solid var(--line); background: var(--surface-soft); font-size: 12px; }
.sys-layer { font: 500 10.5px var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sys-label { font-family: var(--font-display); font-stretch: 95%; font-weight: 750; font-size: 19px; line-height: 1.1; }
.sys-prod { font-size: 12.5px; font-weight: 600; }
.sys-desc { margin: 0; font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
.sys-msgs { display: flex; flex-direction: column; gap: 4px; }
.sys-msgs-label { font: 600 10px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.sys-msg { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 7px 9px; border: 1px solid var(--line-soft); background: var(--surface); }
.sys-msg[aria-pressed="true"] { border-color: var(--accent); background: #EEF5F6; }
.sys-msg-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.sys-msg-m { font: 600 11.5px var(--font-mono); }
.sys-msg-dir { font-size: 12.5px; color: var(--ink); }
.sys-msg-desc { font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* How the EHRs differ */
.compare { display: flex; flex-direction: column; gap: 18px; }
.compare-intro { padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 8px; }
.compare-intro > :not(.ways) { max-width: 84ch; }
.compare-intro h2 { margin: 0; font-family: var(--font-display); font-weight: 750; font-stretch: 105%; font-size: 34px; line-height: 1.05; letter-spacing: -.01em; }
.compare-intro p { margin: 0; color: var(--muted); text-wrap: pretty; }

/* Three ways to build a hospital EHR: one sketch per vendor */
.ways { margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.way { margin: 0; border: 1px solid var(--line); display: flex; flex-direction: column; }
.way figcaption { padding: 12px 14px 10px; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 3px; }
.way figcaption b { font-family: var(--font-display); font-weight: 750; font-size: 17px; }
.way figcaption span { font-size: 12.5px; color: var(--muted); line-height: 1.4; text-wrap: pretty; }
.way-body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.way-modules { display: flex; flex-wrap: wrap; gap: 4px; }
.way-modules span { font: 600 10.5px var(--font-mono); padding: 3px 6px; background: var(--vendor-swatch); border: 1px solid var(--accent); color: var(--accent); }
.way-flow { text-align: center; font: 600 12px var(--font-mono); color: var(--accent); letter-spacing: .3em; }
.way-db { background: var(--ink); color: var(--surface); padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.way-db-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.way-db-head b { font-family: var(--font-display); font-size: 14px; }
.way-db-head span { font: 500 10px var(--font-mono); opacity: .75; }
.way-tree { display: flex; flex-direction: column; font: 500 11.5px/1.6 var(--font-mono); }
.way-tree .d1 { padding-left: 12px; }
.way-tree .d2 { padding-left: 30px; }
.way-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; font: 500 10.5px/1.5 var(--font-mono); }
.way-table { border: 1px solid #5C6E78; }
.way-table div { padding: 2px 6px; }
.way-table div:first-child { background: #2A3A45; font-weight: 700; }
.way-caveat { font: 500 9.5px var(--font-mono); opacity: .6; }
.way-account { padding: 5px 8px; background: var(--accent); font: 700 11px var(--font-mono); }
.way-depts { margin-left: 10px; border-left: 2px solid var(--accent); padding: 3px 0; display: flex; flex-direction: column; font: 500 11px/1.5 var(--font-mono); }
.way-depts span { padding-left: 10px; }
.way-report { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--muted); }
.way-via { font: 600 11px var(--font-mono); color: var(--accent); white-space: nowrap; }
.way-target { padding: 3px 7px; border: 1px solid var(--accent); font: 600 10.5px var(--font-mono); color: var(--ink); }
.way-target.copy { border-style: dashed; }
.way-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.way-aside { padding: 6px 8px; border: 1px dashed var(--muted); font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.way-platforms { display: flex; flex-direction: column; gap: 4px; }
.way-platforms-label { font: 600 10px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.way-platform-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; font: 600 10.5px var(--font-mono); text-align: center; }
.way-platform-row span { padding: 4px 2px; border: 1px solid var(--line); color: var(--muted); }
.way-platform-row .current { background: var(--vendor-swatch); border-color: var(--accent); color: var(--accent); }

.stack { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.stack-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: flex-end; }
.stack-top h2 { margin: 0; font-family: var(--font-display); font-weight: 750; font-size: 24px; line-height: 1.1; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.stack-legend span { display: inline-flex; align-items: center; gap: 6px; }
.stack-swatch { display: inline-block; width: 18px; height: 12px; }
.stack-swatch.db { background: var(--ink); }
.stack-swatch.vendor { background: var(--vendor-swatch); border: 1.2px solid var(--accent); }
.stack-swatch.third { background: var(--third-fill); border: 1.2px solid var(--third-stroke); }
.stack-scroll { overflow-x: auto; }
.stack-grid { min-width: 820px; display: flex; flex-direction: column; }
.stack-row, .stack-detail-line { display: grid; grid-template-columns: 130px repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.stack-heads { padding-bottom: 8px; }
.stack-col-head { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-bottom: 3px solid var(--ink); }
.stack-col-head b { font-family: var(--font-display); font-stretch: 95%; font-weight: 750; font-size: 18px; }
.stack-col-head span { font: 500 11px/1.4 var(--font-mono); color: var(--muted); }
.layer { align-items: stretch; outline-offset: 2px; }
.layer[role="button"] { cursor: pointer; }
.layer[role="button"]:hover { background: #F7F9FA; }
.layer > div { padding: 5px 10px; display: flex; flex-direction: column; justify-content: center; }
.layer-link > div { padding: 2px 10px; }
.layer > .stack-label { flex-direction: row; justify-content: flex-start; align-items: center; gap: 6px; font: 600 10px/1.4 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.layer.open .stack-label { color: var(--accent); }
.stack-caret { font: 600 12px var(--font-mono); color: var(--accent); }
.stack-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stack-chip { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; background: var(--vendor-fill); border: 1.2px solid var(--accent); color: var(--ink); }
.stack-chip b { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; line-height: 1.2; }
.stack-chip span { font-size: 11.5px; line-height: 1.35; opacity: .85; text-wrap: pretty; }
.layer-mix .stack-chip { flex: 1 1 120px; }
.stack-chip.third { background: var(--third-fill); border-color: var(--third-stroke); color: var(--third-ink); }
.layer-db .stack-chip { padding: 14px; background: var(--ink); border: 1px solid var(--ink); color: var(--surface); }
.layer-db .stack-chip b { font-weight: 750; font-size: 17px; }
.layer-link .stack-chips { justify-content: center; }
.layer-link .stack-chip { flex: 0 0 auto; padding: 0; background: none; border: none; color: var(--accent); text-align: center; }
.layer-link .stack-chip b { font: 600 11.5px var(--font-mono); }
.stack-detail { margin: 4px 0 12px; border: 1px solid var(--accent); background: var(--surface); }
.stack-detail-line { border-bottom: 1px solid var(--line-soft); }
.stack-detail-label { padding: 11px 0 11px 12px; font: 600 10.5px/1.5 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.stack-detail-cell { padding: 10px; font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.stack-hint { margin: 0; font-size: 12.5px; color: var(--muted); }

/* Who builds each box */
.own { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.own-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; align-items: flex-end; }
.own-intro { display: flex; flex-direction: column; gap: 6px; max-width: 70ch; }
.own-intro h2 { margin: 0; font-family: var(--font-display); font-weight: 750; font-size: 24px; line-height: 1.1; }
.own-intro p { margin: 0; font-size: 13.5px; color: var(--muted); }
.own-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.own-scroll { overflow-x: auto; }
.own-grid { min-width: 760px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.own-group { display: flex; flex-direction: column; gap: 3px; }
.own-row { display: grid; grid-template-columns: 200px repeat(3, minmax(0, 1fr)); gap: 3px; }
.own-col-head { padding: 4px 10px; font-family: var(--font-display); font-stretch: 95%; font-weight: 750; font-size: 15px; }
.own-group-label { padding: 12px 0 4px; font: 600 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.own-label { padding: 7px 10px 7px 0; font-weight: 600; }
.own-cell { padding: 6px 10px; border: 1.2px solid var(--accent); }
.own-cell.core { background: var(--vendor-swatch); }
.own-cell.prod { background: var(--surface); border-style: dashed; }
.own-cell.third { background: var(--third-fill); border-color: var(--third-cell-stroke); color: var(--third-ink); }
.own-sources { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.7; }

/* Message inspector */
.inspector-tabs { display: flex; align-items: stretch; border-bottom: 1px solid var(--line-soft); }
.inspector-tabs-label { flex: none; display: flex; align-items: center; padding: 0 16px; font: 600 10.5px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--line-soft); }
.msg-tablist { display: flex; overflow-x: auto; scrollbar-width: thin; min-width: 0; }
.msg-tab-cell { flex: none; display: flex; align-items: stretch; }
.msg-tab { flex: none; display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 14px 9px; border: none; background: #F7F9FA; }
.msg-tab[aria-selected="true"] { background: var(--surface); box-shadow: inset 0 -3px 0 var(--accent); }
.msg-tab:focus-visible { outline-offset: -2px; }
.msg-tab-head { display: flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.msg-tab-dot { flex: none; align-self: center; width: 7px; height: 7px; border-radius: 50%; }
.msg-tab-m { font: 600 12px var(--font-mono); }
.msg-tab-m.struck { text-decoration: line-through; }
.msg-tab-payload { color: var(--accent); font-size: 8px; }
.msg-tab-route { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.msg-sep { display: flex; align-items: center; padding: 0 2px; color: #AEBCC2; font-size: 15px; }
.inspector-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; padding: 14px 16px 0; }
.inspector-title { font-family: var(--font-display); font-stretch: 92%; font-size: 18px; font-weight: 700; }
.inspector-sub { font-size: 13px; color: var(--muted); }
.inspector-body { padding: 14px 16px 16px; display: flex; flex-wrap: wrap; gap: 16px 24px; }
.callout { flex: 1 1 100%; margin: 0; padding: 9px 12px; background: #EEF5F6; border: 1px dashed var(--accent); font-size: 13px; }
.payload-col { flex: 3 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.payload {
  margin: 0; background: #F5F8F9; border: 1px solid var(--line-soft); padding: 12px 14px;
  font: 12px/1.65 var(--font-mono); overflow: auto; max-height: 360px; white-space: pre; color: var(--ink);
}
.payload-line { min-height: 1.65em; }
.payload-std { font: 500 11px var(--font-mono); color: var(--muted); }
.field-notes { flex: 2 1 260px; margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; align-content: start; }
.field-notes dt { font: 600 11.5px/1.6 var(--font-mono); white-space: nowrap; }
.field-notes dd { margin: 0; color: var(--muted); text-wrap: pretty; }
.no-payload { display: flex; flex-direction: column; gap: 6px; max-width: 70ch; }
.no-payload p { margin: 0; }
.no-payload-desc { font-size: 14px; }
.no-payload-why { font-size: 13.5px; color: var(--muted); }

/* Mobile shell (#58): app bar on top, step bar pinned to the bottom, and
   only the middle scrolls. The breakpoint is also MOBILE_QUERY in
   src/mobile.rs, which swaps the masthead, wristband, disclaimer and Play
   for these bars. Every control here is at least 44px tall (#62). */
@media (max-width: 640px) {
  .page { height: 100vh; height: 100dvh; min-height: 0; padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); }
  .page-inner { height: 100%; gap: 0; }
  .main { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; gap: 12px; }

  .app-bar { flex: none; display: flex; flex-direction: column; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
  .app-bar-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .wordmark { font-family: var(--font-display); font-weight: 800; font-stretch: 115%; font-size: 20px; letter-spacing: -.02em; }
  .view-pills { display: flex; padding: 2px; background: #EDF2F3; border-radius: 999px; }
  .view-pill { min-height: 44px; border: none; border-radius: 999px; padding: 6px 12px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; }
  .view-pill[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(19, 32, 42, .18); }
  .sc-switch { display: flex; border: 1px solid var(--ink); }
  .sc-btn { flex: 1; min-height: 44px; border: none; padding: 7px 10px; background: transparent; color: var(--ink); font-size: 12.5px; font-weight: 600; }
  .sc-btn[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
  .lens-row { display: flex; gap: 6px; }
  .lens-pick { flex: 1; min-height: 44px; border: 1px solid var(--line); padding: 7px 4px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 600; }
  .lens-pick[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--surface); }

  .step-bar { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line-soft); }
  .bar-btn { flex: none; width: 48px; height: 48px; border: 1px solid var(--line); background: var(--surface-soft); }
  .bar-next { border-color: var(--accent); background: var(--accent); color: var(--surface); }
  .bar-btn:disabled { opacity: .35; cursor: default; }
  .bar-progress { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
  .bar-count { font: 600 12px var(--font-mono); font-variant-numeric: tabular-nums; }
  .bar-track { display: block; width: 100%; height: 4px; background: var(--line-soft); }
  .bar-fill { display: block; height: 100%; background: var(--accent); }

  /* Visit (#59): full-width step header, then the fitted map and legend. */
  .main { padding: 0; gap: 0; }
  .workbench { padding: 12px; gap: 12px; }
  .step-card { display: block; padding: 14px 16px 12px; border: none; border-bottom: 1px solid var(--line-soft); }
  .step-main { gap: 6px; }
  .step-head { justify-content: space-between; font-size: 11.5px; }
  .step-title { font-size: 22px; line-height: 1.1; letter-spacing: 0; }
  .step-body { font-size: 14px; line-height: 1.5; }

  .m-map-scroll {
    overflow: auto; max-height: 340px; border-bottom: 1px solid var(--line-soft);
    background-color: #F7F9FA;
    background-image: linear-gradient(#E6ECEE 1px, transparent 1px), linear-gradient(90deg, #E6ECEE 1px, transparent 1px);
    background-size: 16px 16px;
  }
  .m-map-scroll:focus-visible { outline-offset: -2px; }
  .m-map { display: block; min-width: 100%; }
  .m-node { transition: opacity .4s, fill .3s, stroke .3s; }
  .m-edge { transition: opacity .2s; }
  .m-edge path { fill: none; }
  .m-node-text { transition: opacity .4s; }
  .m-node-text.is-off { opacity: 0; }
  .m-no-pointer { pointer-events: none; }
  .m-node-label { font-family: var(--font-display); font-weight: 700; font-stretch: 82%; font-size: 17px; fill: var(--ink); }
  .m-node-sub { font-family: var(--font-body); font-weight: 600; font-stretch: 90%; font-size: 12px; fill: var(--muted); }
  .m-map .hit:focus-visible { outline: none; stroke: var(--accent); stroke-width: 3; }
  /* The tapped system's panel sits under the map rather than over it. */
  .m-map-panel .system-detail { position: static; width: auto; max-height: none; margin: 12px 12px 0; box-shadow: none; scroll-margin: 12px; }
  .m-map-panel .close-btn { height: 44px; padding: 0 14px; }
  .m-map-panel .sys-msg { min-height: 44px; }
  .m-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 16px; font-size: 11px; color: var(--muted); }
  .m-legend .own-item { gap: 5px; }
  .m-swatch { display: inline-block; width: 14px; height: 10px; border: 1.2px solid var(--accent); }

  /* Message card and Behind the scenes (#60) */
  .m-card { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 -2px 0 var(--accent); }
  .m-card .msg-tablist { scrollbar-width: none; }
  .m-card .msg-tablist::-webkit-scrollbar { display: none; }
  .m-card .msg-tab { min-height: 44px; justify-content: center; padding: 10px 12px; }
  .m-card .msg-tab-m { font-size: 11.5px; }
  .m-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
  .m-card-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .m-card-route { font-size: 12.5px; color: var(--muted); }
  .m-card-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.2; }
  .m-card-desc { margin: 0; font-size: 13px; color: #3D4C55; text-wrap: pretty; }
  .m-toggle { align-self: flex-start; min-height: 44px; border: 1px solid var(--accent); background: var(--surface); color: var(--accent); padding: 7px 12px; font-size: 12.5px; font-weight: 600; }
  .m-payload { display: flex; flex-direction: column; gap: 8px; }
  .m-payload .callout { padding: 8px 10px; font-size: 12.5px; }
  .m-payload .payload { padding: 10px 12px; font: 11px/1.6 var(--font-mono); max-height: 260px; }
  .m-payload .payload-line { min-height: 1.6em; }
  .m-payload .field-notes { gap: 6px 10px; font-size: 12.5px; }
  .m-payload .field-notes dt { font-size: 11px; white-space: normal; }
  .m-why { margin: 0; font-size: 12.5px; color: var(--muted); }
  .m-behind { padding: 11px 13px; background: #EDF2F3; display: flex; flex-direction: column; gap: 3px; }
  .m-behind-text { font-size: 13px; color: #3D4C55; text-wrap: pretty; }

  /* How the EHRs differ (#61): layer cards, then the ownership grid scrolling sideways. */
  .compare { padding: 16px 12px 30px; gap: 16px; }
  .m-cmp { display: flex; flex-direction: column; }
  .m-cmp-intro { padding: 0 4px 14px; display: flex; flex-direction: column; gap: 6px; }
  .m-cmp-intro h2 { margin: 0; font-family: var(--font-display); font-weight: 750; font-size: 24px; line-height: 1.05; }
  .m-cmp-intro p { margin: 0; font-size: 13.5px; color: var(--muted); text-wrap: pretty; }
  .m-cmp-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-top: 4px; font-size: 11px; color: var(--muted); }
  .m-cmp-legend span { display: inline-flex; align-items: center; gap: 5px; }
  .m-swatch.db { background: var(--ink); border-color: var(--ink); }
  .m-swatch.vendor { background: var(--vendor-fill); }
  .m-swatch.third { background: var(--third-fill); border-color: var(--third-stroke); }
  .m-ways { display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; }
  .m-cmp-label { padding: 0 4px; font: 600 10.5px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .m-cmp-label.stack { padding-top: 8px; }
  .m-ways .ways { margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .m-ways .way { background: var(--surface); }
  .m-ways .way figcaption { padding: 11px 12px 9px; }
  .m-ways .way figcaption b { font-size: 16px; }
  .m-ways .way-body { padding: 12px; gap: 9px; }
  .m-ways .way-db { padding: 11px 11px 12px; gap: 7px; }
  .m-layers { display: flex; flex-direction: column; gap: 10px; }
  .m-layer { background: var(--surface); border: 1px solid var(--line-soft); }
  .m-layer.open { border-color: var(--accent); }
  .m-layer-head { width: 100%; min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border: none; background: transparent; padding: 11px 14px 8px; text-align: left; }
  .m-layer-label { font: 600 10.5px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .m-layer.open .m-layer-label { color: var(--accent); }
  .m-layer-caret { font: 600 11.5px var(--font-mono); color: var(--accent); white-space: nowrap; }
  .m-layer-vendors { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 12px; }
  .m-vendor { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: start; }
  .m-vendor-name { padding-top: 7px; font: 600 11px/1.3 var(--font-mono); color: var(--muted); }
  .m-vendor-items { display: flex; flex-direction: column; gap: 4px; }
  .m-via { font: 600 10.5px var(--font-mono); color: var(--accent); }
  .m-layer .stack-chips { gap: 4px; }
  .m-layer .stack-chip { gap: 1px; padding: 7px 9px; }
  .m-layer .stack-chip b { font-size: 13px; }
  .m-layer .stack-chip span { font-size: 11px; }
  .m-layer.layer-db .stack-chip { padding: 7px 9px; }
  .m-layer.layer-db .stack-chip b { font-weight: 700; font-size: 13px; }
  .m-layer-detail { border-top: 1px solid var(--line-soft); background: #F7F9FA; padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 14px; }
  .m-layer-topic { display: flex; flex-direction: column; gap: 6px; }
  .m-layer-topic-label { font: 600 10.5px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
  .m-layer-topic p { margin: 0; font-size: 12.5px; line-height: 1.5; text-wrap: pretty; }
  .m-layer-topic b { font-weight: 600; }
  .m-cmp-hint { margin: 12px 4px 0; font-size: 12px; color: var(--muted); }
  .own { padding: 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .map *, .m-map * { transition: none; }
}