/* Dossier (docs/design/site-rev10-dossier.md): a two-pane workbench playing itself, sized to fit a laptop screen whole (the
   ask input sits in the window's toolbar). The record on the left (header and ten panels, six drawing their own figures), an
   inspector on the right. By default (no script, reduced motion) the finished dossier: every panel, the truth-check beside it
   and the memo (its actions and the Radar alert) across the foot. landing-dossier.js adds .dz-run, which puts the inspector's
   states (OM drop, truth-check, memo) in one grid cell and hides only what the timeline has not reached. State classes (.on,
   .got, .checking, .checked, .fresh, ...) change paint only, so the frame never moves.
   Dark product panels throughout; red only on price-moving lines and the refinance gap, amber where the OM differs, a match grey. */
.dossier { position: relative; isolation: isolate; padding: 140px 0 150px; background: var(--g0); border-top: 1px solid var(--line); }
.dossier > .sec-head, .dz-beats, .dz-frame { max-width: min(1240px, 90%); margin-left: auto; margin-right: auto; }

/* ---------- the four beats: a rail of buttons, each with its progress hairline */
.dz-beats { margin-bottom: 18px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; }
.dz-beats button { position: relative; width: 100%; height: auto; padding: 14px 0 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 4px;
  text-align: left; background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; color: var(--tx-3); font: inherit; cursor: pointer; }
.dz-beats button b { font-weight: 500; font-size: 15px; color: var(--tx-2); }
.dz-beats button > span:not(.dz-bn) { grid-column: 2; font-size: 12.5px; line-height: 1.4; }
.dz-bn { font: 500 11px/1.9 var(--mono); color: var(--tx-3); }
.dz-beats button i { position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--warm); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.dz-beats button[aria-pressed="true"] b { color: var(--tx-1); }
.dz-beats button[aria-pressed="true"] .dz-bn { color: var(--warm); }
.dz-beats button:hover b { color: var(--tx-1); }

/* ---------- the window */
.dz-frame { position: relative; border: 1px solid var(--line-2); border-radius: 4px; background: var(--g1); overflow: hidden;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 30%), 0 60px 120px -40px rgb(0 0 0 / 80%); }
.dz-chrome { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line); background: var(--g0);
  font: 500 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.dz-dots { display: flex; gap: 6px; }
.dz-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.dz-chrome > b { font-weight: 500; color: var(--tx-1); }
.dz-mode { color: var(--tx-3); white-space: nowrap; }
.dz-tick { flex: 0 1 17rem; min-width: 0; text-align: right; font-family: var(--mono); letter-spacing: 0; text-transform: none; font-size: 11.5px; color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-clock { font: 400 15px/1 var(--mono); letter-spacing: 0; text-transform: none; color: var(--warm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dz-pause { display: none; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line-2); border-radius: 2px; background: none; color: var(--tx-2); cursor: pointer; }
.dz-pause span { display: block; width: 8px; height: 10px; margin: auto; border: solid currentColor; border-width: 0 3px; }
.dz-pause[aria-pressed="true"] span { width: 0; height: 0; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.dz-pause:hover { border-color: var(--line-3); color: var(--tx-1); }
.dz-run .dz-pause { display: block; }

/* ---------- ask: the toolbar's input, a fixed size (the status beside it has a fixed width) */
.dz-input { flex: 1 1 0; display: flex; align-items: center; gap: 10px; min-width: 0; height: 38px; padding: 0 6px 0 13px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--g1);
  font: 400 16px/1 var(--mono); letter-spacing: -.01em; text-transform: none; color: var(--tx-1); }
.dz-prompt { color: var(--orange-t); }
.dz-typed { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-caret { flex: none; width: 9px; height: 1.1em; margin-left: -10px; background: var(--warm); opacity: 0; }
.dz-enter { flex: none; margin-left: auto; padding: 5px 7px; border: 1px solid var(--line-2); border-radius: 2px; font: 500 10.5px/1 var(--mono); letter-spacing: .04em; color: var(--tx-3); white-space: nowrap; }

/* ---------- the stage: the record on the left, the inspector on the right */
.dz-stage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; padding: 14px; align-items: stretch; }
.dz-idle { display: none; }
.dz-doc { grid-column: 1; grid-row: 1; min-width: 0; }
/* finished state: the inspector's boxes are the stage's own cells, the truth-check beside the record, the memo across the foot */
.dz-side, .dz-states { display: contents; }
.dz-om, .dz-memo { min-width: 0; background: var(--card); border: 1px solid var(--line-2); border-radius: 2px; }
.dz-om { grid-column: 2; grid-row: 1; }
.dz-memo { grid-column: 1 / -1; grid-row: 2; }

/* the record */
.dz-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 2px 2px 10px; }
.dz-k { font: 500 10.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 6px !important; }
#main-landing .dz-head h3 { font: 400 clamp(21px, 1.8vw, 25px)/1.1 var(--sans); letter-spacing: -.03em; color: var(--tx-1); }
.dz-sub { margin-top: 5px !important; font: 400 12px/1.4 var(--mono); color: var(--tx-3); }
.dz-score { display: grid; justify-items: end; }
.dz-score span { font: 500 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.dz-score b { font: 400 36px/1 var(--sans); letter-spacing: -.04em; color: var(--warm); }
.dz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.dz-p { position: relative; display: flex; flex-direction: column; padding: 11px 13px 12px; background: var(--card); font-size: 12.5px; line-height: 1.4; color: var(--tx-2); min-width: 0; text-wrap: balance; }
.dz-wide { grid-column: span 2; }
#main-landing .dz-p h4 { display: flex; justify-content: space-between; gap: 6px; margin: 0 0 6px; font: 500 10.5px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.dz-p time { font: 400 10.5px/1.4 var(--mono); letter-spacing: 0; text-transform: none; color: var(--tx-3); white-space: nowrap; }
.dz-big { font: 400 19px/1.15 var(--sans); letter-spacing: -.02em; color: var(--tx-1); margin-bottom: 3px !important; }
.dz-big small { font-size: 12px; letter-spacing: 0; color: var(--tx-3); }
.dz-orange { color: var(--orange-t); }
.dz-warm { color: var(--warm); }
.dz-red, .dz-red b { color: var(--red-t) !important; }
.dz-chain { margin: 0 0 9px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: center; color: var(--tx-1); font-size: 12.5px; }
.dz-chain li + li::before { content: "→"; margin-right: 6px; color: var(--tx-4); }
.dz-chain small { color: var(--tx-3); font-size: 11.5px; }
.dz-contact { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-family: var(--mono); color: var(--tx-1); }
.dz-flag { padding: 2px 6px; border: 1px solid var(--line-2); border-radius: 2px; font: 500 10.5px/1.3 var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.dz-flag.amber { border-color: rgb(251 179 96 / 45%); color: var(--orange-t); }
.dz-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.dz-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.dz-rows b { font-weight: 400; color: var(--tx-2); }
.dz-rows span { color: var(--tx-1); text-align: right; }

/* ---------- the figures: each drawn from its panel's own numbers */
.dz-viz { flex: none; margin-top: auto; padding-top: 8px; }
.dz-wide .dz-viz { margin-top: 0; padding: 1px 0 8px; }
/* debt: today's stack on $18.0M (loan, lien, equity) over a refinance at today's rates (new loan, the gap, under the loan's end) */
.dz-stack { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.dz-stack span, .dz-rent span { font: 400 10.5px/1 var(--mono); color: var(--tx-3); }
.dz-stack p { display: flex; gap: 2px; height: 8px; }
.dz-stack i { display: block; height: 100%; }
.s-loan { flex: 69.4; background: var(--cool); }
.s-lien { flex: 2.3; background: var(--red); }
.s-eq { flex: 28.3; background: var(--line-3); }
.s-new { width: 59.4%; background: rgb(204 217 232 / 32%); }
.s-gap { width: 10%; background: repeating-linear-gradient(-45deg, var(--red) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--red); }
/* zoning: the massing on its lot, six floors by right in grey, six more under Live Local in orange, the by-right cap marked */
.dz-floors { position: absolute; right: 14px; bottom: 10px; width: auto; height: 74px; padding: 0; overflow: visible; }
.dz-floors .z-lot { fill: rgb(255 255 255 / 2%); stroke: var(--line-3); stroke-width: .6; stroke-dasharray: 1.6 1.4; }
.dz-floors .z-by .z-a { fill: #5a6472; }
.dz-floors .z-by .z-b { fill: #444c57; }
.dz-floors .z-ll polygon { stroke: var(--orange); stroke-width: .5; stroke-linejoin: round; }
.dz-floors .z-ll .z-a { fill: rgb(200 118 25 / 42%); }
.dz-floors .z-ll .z-b { fill: rgb(200 118 25 / 26%); }
.dz-floors .z-ll .z-top { fill: rgb(200 118 25 / 46%); }
.dz-floors .z-cap { fill: none; stroke: var(--tx-1); stroke-width: .7; }
/* flood: the block's lot lines, the half-mile ring, zone AE along the creek, the lot with a fifth of it in the zone, two EPA sites */
.dz-flood { display: block; width: 100%; height: 48px; }
.dz-flood .fl-road { fill: none; stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dz-flood .fl-ring { fill: none; stroke: var(--line-3); stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.dz-flood .fl-zone { fill: rgb(45 114 210 / 18%); }
.dz-flood .fl-lot { fill: var(--card-2); stroke: var(--tx-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dz-flood .fl-in { fill: rgb(45 114 210 / 70%); }
.dz-flood .fl-creek { fill: none; stroke: var(--blue-t); stroke-width: 1.2; stroke-dasharray: 100; }
.dz-flood .fl-epa { fill: var(--card); stroke: var(--tx-2); stroke-width: 1.2; }
/* permits: 96 units, the 36 renovated under permit */
.dz-units { display: block; width: 100%; height: 38px; }
.dz-units .u-off { fill: var(--line-2); }
.dz-units .u-on { fill: var(--cool); }
/* rents: effective against face */
.dz-rent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.dz-rent p { height: 6px; background: var(--line); }
.dz-rent i { display: block; height: 100%; transform-origin: 0 50%; }
.r-face { width: 100%; background: var(--line-3); }
.r-eff { width: 91.65%; background: var(--cool); }
/* comps: six recorded sales on a price-per-unit strip, the subject's $188K marked */
.dz-comps { position: relative; height: 32px; }
.dz-comps::before { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--line-3); }
.dz-comps i { position: absolute; bottom: 3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--tx-3); }
.dz-comps i:nth-child(1) { left: 9%; }
.dz-comps i:nth-child(2) { left: 24%; }
.dz-comps i:nth-child(3) { left: 38%; }
.dz-comps i:nth-child(4) { left: 55%; }
.dz-comps i:nth-child(5) { left: 67%; }
.dz-comps i:nth-child(6) { left: 88%; }
.dz-comps b { position: absolute; left: 46.5%; top: 0; padding-left: 6px; border-left: 1px solid var(--warm); height: 27px; font: 500 10.5px/1 var(--mono); color: var(--warm); }

/* ---------- the inspector: the OM drop (running only), the truth-check, the memo */
.dz-drop { display: none; }
.dz-k .dz-log-n { float: right; font: 400 11px/1.3 var(--mono); letter-spacing: 0; text-transform: none; color: var(--tx-2); }
.dz-om, .dz-memo { display: flex; flex-direction: column; padding: 18px; }
.dz-om header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; margin-bottom: 10px; }
#main-landing .dz-om header .dz-k { margin: 0 !important; }
#main-landing .dz-om header h3 { grid-column: 1 / -1; }
#main-landing .dz-om h3, #main-landing .dz-memo h3 { font: 400 17px/1.25 var(--sans); letter-spacing: -.02em; color: var(--tx-1); }
.dz-sum { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.dz-sum em { padding: 5px 7px; border: 1px solid var(--line-2); border-radius: 2px; font: 600 10.5px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-2); }
.dz-sum b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dz-sum .c-red { border-color: rgb(205 66 70 / 60%); color: var(--red-t); }
.dz-sum .c-amber { border-color: rgb(200 118 25 / 60%); color: var(--orange-t); }
.dz-om table { flex: 1; width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12.5px; line-height: 1.4; }
.dz-om th, .dz-om td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; overflow-wrap: break-word; }
.dz-om thead th { padding-top: 0; padding-bottom: 7px; border-top: 0; font: 500 10.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
/* the line and the verdict take what their longest word needs; the record's value gets the rest */
.dz-om thead th:nth-child(1) { width: 5.4rem; }
.dz-om thead th:nth-child(2) { width: 24%; }
.dz-om thead th:nth-child(4) { width: 5.2rem; }
.dz-om th:first-child { padding-left: 10px; }
.dz-om tbody th { font-weight: 500; color: var(--tx-1); }
.dz-om td:nth-child(2) { font-family: var(--mono); font-size: 12px; color: var(--tx-2); }
.dz-om td:nth-child(3) { position: relative; color: var(--tx-1); }
.dz-om td small { display: block; margin-top: 2px; font: 400 11px/1.3 var(--sans); color: var(--tx-3); }
.dz-om td:last-child { position: relative; padding-right: 0; text-align: right; }
.dz-bottom { margin-top: 12px !important; padding: 10px 12px 11px; border: 1px solid var(--line-2); border-left: 2px solid var(--red-t); border-radius: 2px; font-size: 13px; line-height: 1.5; color: var(--tx-2); }
.dz-bottom b { font-weight: 500; color: var(--tx-1); }
.dz-om .dz-hard td:nth-child(2) { color: var(--red-t); text-decoration: line-through; text-decoration-color: currentColor; }
.dz-stamp { display: inline-block; margin-top: -3px; padding: 4px 6px; border: 1px solid currentColor; border-radius: 2px; font: 600 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-2); white-space: nowrap; }
.dz-stamp.ok { color: var(--tx-2); }
.dz-stamp.amber { color: var(--orange-t); }
.dz-stamp.red { color: var(--red-t); background: rgb(205 66 70 / 16%); }
/* the memo: its two actions in the header, the memo under them, the Radar alert's reserved slot at its foot */
.dz-memo { gap: 7px; }
.dz-memo header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dz-memo > p { max-width: 72ch; font-size: 13px; line-height: 1.5; color: var(--tx-2); }
.dz-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-bottom: 0; border: 1px solid var(--line); background: var(--line); }
.dz-figs div { display: flex; flex-direction: column; padding: 8px 11px 9px; background: var(--card); }
/* in the inspector the key figures take the spare height: tiles with the label on top, the figure at the foot */
.dz-memo .dz-figs { flex: 1 1 auto; grid-auto-rows: 1fr; }
.dz-figs dt { font: 500 10.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.dz-figs dd { margin: auto 0 1px; padding-top: 4px; font: 400 22px/1.15 var(--sans); letter-spacing: -.02em; color: var(--tx-1); }
/* each key figure's own small drawing, from the record's numbers: the loan on the $18.0M value, the refinance and its gap, the six
   recorded sales around $188K a unit, the cap rate the OM shows against the record's */
.dz-mini { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 5px 8px; align-items: center; align-content: center; flex: 1 1 auto; padding: 4px 0 0; }
.dz-mini > span { font: 400 10.5px/1 var(--mono); color: var(--tx-3); }
.dz-mini p { display: flex; gap: 2px; height: 6px; background: var(--line); }
.dz-mini i { display: block; height: 100%; transform-origin: 0 50%; }
.dz-mini .m-om { width: 88.75%; background: none; box-shadow: inset 0 0 0 1px var(--red-t); }
.dz-mini .m-rec { width: 77.5%; background: var(--cool); }
.dz-mini-comps { position: relative; display: block; height: 16px; padding: 0; margin: 4px 0 0; flex: none; }
.dz-mini-comps::before { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--line-3); }
.dz-mini-comps i { position: absolute; bottom: 0; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--tx-3); }
.dz-mini-comps i:nth-child(1) { left: 9%; }
.dz-mini-comps i:nth-child(2) { left: 24%; }
.dz-mini-comps i:nth-child(3) { left: 38%; }
.dz-mini-comps i:nth-child(4) { left: 55%; }
.dz-mini-comps i:nth-child(5) { left: 67%; }
.dz-mini-comps i:nth-child(6) { left: 88%; }
.dz-mini-comps b { position: absolute; left: 46.5%; top: 0; bottom: 0; width: 1px; background: var(--warm); }
.dz-figs small { font-size: 12px; color: var(--tx-3); }
.dz-memo b { font-weight: 500; color: var(--tx-1); }
.dz-memo .c-red { color: var(--red-t); }
.dz-memo .c-amber { color: var(--orange-t); }
.dz-memo .dz-cite { margin-top: auto !important; padding-top: 9px; border-top: 1px solid var(--line); font: 400 11px/1.5 var(--mono); color: var(--tx-3); }

.dz-act { flex: none; display: flex; gap: 8px; }
.dz-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border: 1px solid var(--line-3); border-radius: 2px; font-size: 13px; color: var(--tx-1); white-space: nowrap; }
.dz-memo-btn { background: var(--tx-1); border-color: var(--tx-1); color: var(--g0); }
.dz-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; padding: 8px 14px 8px 12px; border: 1px solid rgb(244 233 214 / 45%);
  border-radius: 2px; background: rgb(244 233 214 / 7%); font-size: 13px; color: var(--tx-2); }
.dz-alert::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warm); }
.dz-alert-k { font: 500 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.dz-alert b { font-weight: 500; color: var(--warm); }
.dz-alert > span:last-child { font: 400 11.5px var(--mono); color: var(--tx-3); }

/* ---------- running: the inspector's states share one cell; only what the timeline has reached shows */
/* ask: the prompt over a parcel map (invented streets, lots and footprints, the creek's zone AE in blue). Once the address is
   sent the parcel is found: the map closes in on it, its lot line draws, the crosshair and its callout land, the prompt steps back */
.dz-run .dz-idle { grid-column: 1; grid-row: 1; display: block; position: relative; overflow: hidden; pointer-events: none; border: 1px solid var(--line); background: var(--g1);
  opacity: 0; visibility: hidden; }
.dz-run .dz-idle.on { opacity: 1; visibility: visible; }
.dz-map { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; }
.pm-blk { fill: rgb(255 255 255 / 1.5%); }
.pm-road { fill: none; stroke: rgb(255 255 255 / 3%); stroke-width: 14; }
.pm-lot, .pm-bld, .pm-sbld, .pm-pond, .pm-creek, .pm-epa, .pm-x, .pm-tag path, .pm-tag rect { vector-effect: non-scaling-stroke; }
.pm-lot { fill: none; stroke: var(--line); }
.pm-bld { fill: var(--card-2); stroke: var(--line-2); }
.pm-sbld { fill: #3a414b; stroke: var(--line-3); }
.pm-pond { fill: rgb(45 114 210 / 16%); stroke: rgb(45 114 210 / 45%); }
.pm-ae { fill: rgb(45 114 210 / 13%); }
.pm-creek { fill: none; stroke: rgb(138 187 255 / 55%); stroke-width: 1.5; }
.pm-epa { fill: none; stroke: var(--tx-3); }
.pm-x { fill: none; stroke: var(--line-3); stroke-dasharray: 3 4; }
.pm-lot-t { fill: rgb(244 233 214 / 8%); stroke: var(--warm); stroke-width: 1.4; stroke-dasharray: 101; }
.pm-tag path { fill: none; stroke: var(--warm); }
.pm-tag rect { fill: var(--g0); stroke: var(--warm); }
.pm-tag text { font: 500 11px var(--mono); fill: var(--tx-1); }
.pm-tag .pm-tag-s { font-weight: 400; font-size: 10.5px; fill: var(--tx-3); }
.dz-idle-t { position: relative; display: grid; justify-items: start; gap: 12px; padding: 22px 24px 76px; background: linear-gradient(var(--g1) 58%, rgb(32 37 44 / 0%)); }
.dz-idle-k { font: 500 10.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.dz-idle-h { max-width: 18em; font: 400 clamp(22px, 2.2vw, 30px)/1.15 var(--sans); letter-spacing: -.03em; color: var(--tx-2); text-wrap: balance; }
.dz-idle-eg { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-idle-eg span { padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--g1); font: 400 12px/1.2 var(--mono); color: var(--tx-3); }
.dz-run .dz-idle:not(.sent) .pm-lot-t { fill: transparent; stroke-dashoffset: 101; }
.dz-run .dz-idle:not(.sent) .pm-x, .dz-run .dz-idle:not(.sent) .pm-tag, .dz-run .dz-idle.sent .dz-idle-t { opacity: 0; }
.dz-run .dz-idle.sent .dz-map { transform: scale(1.14); }
.dz-run .dz-input.typing .dz-caret { opacity: .85; }
.dz-run .dz-input.sent { border-color: var(--warm); }
.dz-run .dz-input.sent .dz-enter { border-color: var(--warm); color: var(--warm); }

/* the record: hairlines come from each panel, so panels not reached leave no grey block */
.dz-run .dz-grid { background: none; border-color: transparent; }
.dz-run .dz-p { outline: 1px solid var(--line); }
.dz-run .dz-head, .dz-run .dz-p { opacity: 0; transform: translateY(10px); }
.dz-run .dz-head.on, .dz-run .dz-p.on { opacity: 1; transform: none; }
.dz-run .dz-p.fresh, .dz-run .dz-p.checking { z-index: 1; outline-color: var(--warm); }
.dz-run .dz-p.fresh time { color: var(--warm); }
.dz-run .dz-p .checking { background: rgb(244 233 214 / 12%); color: var(--tx-1); }
/* each figure draws as its panel lands */
.dz-run .dz-p:not(.on) .dz-stack p, .dz-run .dz-p:not(.on) .dz-units .dz-lit { clip-path: inset(0 100% 0 0); }
.dz-run .dz-p:not(.on) .dz-floors { clip-path: inset(100% 0 0 0); }
.dz-run .dz-p:not(.on) .dz-flood .fl-zone, .dz-run .dz-p:not(.on) .dz-flood .fl-in, .dz-run .dz-p:not(.on) .dz-flood .fl-epa, .dz-run .dz-p:not(.on) .dz-flood .fl-ring, .dz-run .dz-p:not(.on) .dz-comps b { opacity: 0; }
.dz-run .dz-p:not(.on) .dz-flood .fl-creek { stroke-dashoffset: 100; }
.dz-run .dz-p:not(.on) .dz-rent i { transform: scaleX(0); }
.dz-run .dz-p:not(.on) .dz-comps i { opacity: 0; transform: translateY(-14px); }

/* the inspector: one card, its states in one cell */
.dz-run .dz-side { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-width: 0; background: var(--card); border: 1px solid var(--line-2); border-radius: 2px; }
.dz-run .dz-states { flex: 1; display: grid; min-width: 0; }
.dz-run .dz-states > * { grid-area: 1 / 1; min-width: 0; border: 0; background: none; opacity: 0; visibility: hidden; }
.dz-run .dz-states > .on { opacity: 1; visibility: visible; }
.dz-run .dz-drop { display: flex; flex-direction: column; padding: 18px; }
.dz-log { margin: 4px 0 0; padding: 0; list-style: none; }
.dz-log li { display: grid; grid-template-columns: 44px 14px minmax(0, 1fr); align-items: center; height: 27px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--tx-3); }
.dz-log li::before { content: ""; grid-column: 2; grid-row: 1; width: 5px; height: 5px; border: 1px solid var(--tx-3); border-radius: 50%; }
.dz-log time { font: 400 11px/1 var(--mono); color: var(--tx-3); }
.dz-slot { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; min-height: 132px; margin-top: 14px; padding: 16px 18px;
  border: 1px dashed var(--line-3); border-radius: 2px; }
.dz-slot-t { grid-column: 2; grid-row: 1; display: grid; gap: 4px; font-size: 12.5px; line-height: 1.45; color: var(--tx-3); }
.dz-slot-t b { display: flex; align-items: center; gap: 8px; font: 400 16px/1.25 var(--sans); letter-spacing: -.01em; color: var(--tx-1); }
.dz-sheet { grid-column: 1; grid-row: 1; display: grid; align-content: start; gap: 6px; width: 76px; height: 98px; padding: 12px 10px; border: 1px solid var(--line-3); border-radius: 2px; background: var(--card-2);
  box-shadow: 0 14px 24px -10px rgb(0 0 0 / 60%); }
.dz-sheet i { display: block; height: 3px; border-radius: 1px; background: var(--line-3); }
.dz-sheet i:nth-child(1) { width: 70%; height: 5px; background: var(--tx-3); }
.dz-sheet i:nth-child(3), .dz-sheet i:nth-child(5), .dz-sheet i:nth-child(8) { width: 82%; }
.dz-sheet i:nth-child(2n+4) { background: var(--warm); }
.dz-pdf { padding: 4px 5px; border-radius: 2px; background: var(--warm); color: var(--g0); font: 600 10.5px/1 var(--mono); }
.dz-run .dz-log li.on { color: var(--tx-1); }
.dz-run .dz-log li.on::before { border-color: var(--cool); background: var(--cool); }
.dz-run .dz-log li.on time { color: var(--tx-2); }
.dz-run .dz-drop:not(.got) .dz-sheet { opacity: 0; transform: translateY(-40px) rotate(-6deg); }
.dz-run .dz-drop:not(.got) .dz-file, .dz-run .dz-drop.got .dz-hint { opacity: 0; }
.dz-run .dz-drop.got .dz-slot { border-style: solid; border-color: var(--warm); background: rgb(244 233 214 / 4%); }
/* the truth-check: the six claims are on the table from the first frame; the record's value, then the stamp, land per row */
.dz-run .dz-om td:nth-child(3)::before { content: ""; position: absolute; left: 0; top: 12px; width: 72%; height: 7px; border-radius: 1px; background: rgb(170 179 191 / 12%); }
.dz-run .dz-om td:last-child::before { content: "···"; position: absolute; right: 2px; top: 7px; font: 600 12px/1 var(--mono); color: var(--tx-3); }
.dz-run .dz-om tr:not(.got) td:nth-child(3) > * { opacity: 0; transform: translateX(-8px); }
.dz-run .dz-om tr.got td:nth-child(3)::before, .dz-run .dz-om tr.checked td:last-child::before { opacity: 0; }
.dz-run .dz-om tr.checking td:nth-child(3)::before { background: rgb(244 233 214 / 16%); }
.dz-run .dz-om tr.checking th { box-shadow: inset 2px 0 0 var(--warm); color: var(--warm); }
.dz-run .dz-om tr:not(.checked) .dz-stamp { opacity: 0; transform: scale(1.6); }
.dz-run .dz-om .dz-hard:not(.checked) td:nth-child(2) { color: var(--tx-2); text-decoration-color: transparent; }
.dz-run .dz-sum .zero { border-color: var(--line-2); color: var(--tx-3); }
.dz-run .dz-sum .c-red.fresh { background: rgb(205 66 70 / 16%); }
.dz-run .dz-sum .c-amber.fresh { background: rgb(200 118 25 / 16%); }
.dz-run .dz-sum .c-ok.fresh { background: rgb(170 179 191 / 12%); }
/* the memo writes itself, a paragraph at a time */
.dz-run .dz-bottom { opacity: 0; transform: translateY(6px); }
.dz-run .dz-bottom.on { opacity: 1; transform: none; }
.dz-run .dz-memo > :not(header):not(.dz-alert):not(.on) { opacity: 0; transform: translateY(6px); }
.dz-run .dz-figs:not(.on) .dz-mini i { transform: scaleX(0); }
.dz-run .dz-figs:not(.on) .dz-mini-comps i { transform: scale(0); }
/* act */
.dz-run .dz-btn.press { transform: scale(.96); }
.dz-run .dz-track-btn.press, .dz-run .dz-track-btn.done { border-color: var(--warm); background: rgb(244 233 214 / 10%); color: var(--warm); }
.dz-run .dz-alert { opacity: 0; transform: translateY(10px); }
.dz-run .dz-alert.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .dz-beats button i { transition: transform .2s linear; }
  .dz-run .dz-idle, .dz-run .dz-states > * { transition: opacity .4s, visibility 0s .4s; }
  .dz-run .dz-idle.on, .dz-run .dz-states > .on { transition: opacity .4s .15s, visibility 0s; }
  .dz-run .dz-input, .dz-run .dz-enter { transition: border-color .3s, color .3s; }
  .dz-run .dz-input.typing .dz-caret { animation: dz-blink 1s steps(2) infinite; }
  .dz-run .dz-map { transition: transform 1.6s cubic-bezier(.2, .8, .2, 1); }
  .dz-run .pm-lot-t { transition: stroke-dashoffset .9s cubic-bezier(.3, .7, .2, 1) .15s, fill .5s .6s; }
  .dz-run .pm-x { transition: opacity .5s; }
  .dz-run .pm-tag { transition: opacity .4s .6s; }
  .dz-run .dz-idle-t { transition: opacity .35s; }
  .dz-run .dz-head, .dz-run .dz-p { transition: opacity .45s, transform .5s cubic-bezier(.2, .8, .2, 1), outline-color .5s, translate .6s cubic-bezier(.2, .8, .2, 1); }
  .dz-run .dz-grid { transition: translate .6s cubic-bezier(.2, .8, .2, 1); }
  .dz-run .dz-p time, .dz-run .dz-p [data-for] { transition: color .5s, background-color .4s; }
  .dz-run .dz-stack p { transition: clip-path .9s cubic-bezier(.3, .7, .2, 1) .2s; }
  .dz-run .dz-stack p + span + p { transition-delay: .55s; }
  .dz-run .dz-floors { transition: clip-path 1s cubic-bezier(.3, .7, .2, 1) .2s; }
  .dz-run .dz-flood .fl-creek { transition: stroke-dashoffset 1s cubic-bezier(.3, .7, .2, 1) .1s; }
  .dz-run .dz-flood .fl-zone, .dz-run .dz-flood .fl-in { transition: opacity .6s .45s; }
  .dz-run .dz-flood .fl-ring { transition: opacity .5s .2s; }
  .dz-run .dz-flood .fl-epa { transition: opacity .4s .9s; }
  .dz-run .dz-units .dz-lit { transition: clip-path .7s steps(6) .25s; }
  .dz-run .dz-rent i { transition: transform .8s cubic-bezier(.3, .7, .2, 1) .2s; }
  .dz-run .dz-rent i.r-eff { transition-delay: .45s; }
  .dz-run .dz-comps i { transition: opacity .3s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
  .dz-run .dz-comps i:nth-child(2) { transition-delay: .08s; }
  .dz-run .dz-comps i:nth-child(3) { transition-delay: .16s; }
  .dz-run .dz-comps i:nth-child(4) { transition-delay: .24s; }
  .dz-run .dz-comps i:nth-child(5) { transition-delay: .32s; }
  .dz-run .dz-comps i:nth-child(6) { transition-delay: .4s; }
  .dz-run .dz-comps b { transition: opacity .4s .6s; }
  .dz-run .dz-sheet { transition: opacity .25s, transform .55s cubic-bezier(.3, 1.3, .5, 1); }
  .dz-run .dz-hint, .dz-run .dz-file { transition: opacity .3s; }
  .dz-run .dz-slot { transition: border-color .4s, background-color .4s; }
  .dz-run .dz-log li, .dz-run .dz-log li::before, .dz-run .dz-log time { transition: color .3s, background-color .3s, border-color .3s; }
  .dz-run .dz-om td:nth-child(3) > * { transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1); }
  .dz-run .dz-om td:nth-child(3)::before, .dz-run .dz-om td:last-child::before { transition: opacity .2s, background-color .3s; }
  .dz-run .dz-om tr.checking td:nth-child(3)::before { animation: dz-pulse .55s ease-in-out infinite alternate; }
  .dz-run .dz-om th { transition: color .3s, box-shadow .3s; }
  .dz-run .dz-om td:nth-child(2) { transition: color .3s, text-decoration-color .3s; }
  .dz-run .dz-stamp { transition: opacity .12s, transform .3s cubic-bezier(.5, 1.7, .6, 1); }
  .dz-run .dz-sum em { transition: background-color .45s; }
  .dz-run .dz-memo > *, .dz-run .dz-bottom { transition: opacity .4s, transform .45s cubic-bezier(.2, .8, .2, 1); }
  .dz-run .dz-mini i { transition: transform .7s cubic-bezier(.3, .7, .2, 1) .25s; }
  .dz-run .dz-btn { transition: transform .15s, border-color .3s, background-color .3s, color .3s; }
  .dz-run .dz-alert { transition: opacity .4s, transform .5s cubic-bezier(.3, 1.5, .5, 1); }
}
@keyframes dz-blink { 50% { opacity: 0; } }
@keyframes dz-pulse { from { opacity: .45; } }

/* ---------- one screen (owner 2026-10-06: the dossier "too large and doesn't fully fit from top to bottom"). On a laptop or a
   desktop, while the story plays, the heading, the four beats and the whole window are one screen under the 68 px bar from a 640 px
   window up, as the platform section is: the content is the window less the bar and a 12 px margin each side (at most 1000 px), the
   window takes what the heading and the beats leave, the record pane follows the panel in play (as on phones) and the inspector
   is a size container whose states shed their tertiary lines as it gets shorter. The finished dossier (reduced motion, no script)
   keeps its full height: it shows every panel, the truth-check and the memo at once. */
@media (min-width: 861px) {
  .dossier > .sec-head { grid-template-columns: minmax(0, 1fr); row-gap: 6px; margin-bottom: clamp(14px, 2.8svh, 40px); }
  #main-landing .dossier > .sec-head h2 { margin-bottom: 0; font-size: clamp(30px, min(4.6vw, 6.4svh), 60px); }
  .dossier > .sec-head .eyebrow { margin-bottom: clamp(4px, 1svh, 12px) !important; }
  .dossier > .sec-head > p:last-child { max-width: none; font-size: clamp(15px, 2.2svh, 18px); }
  .dossier.dz-run { box-sizing: content-box; display: flex; flex-direction: column; height: min(1000px, calc(100svh - 92px)); padding-top: 110px; padding-bottom: 120px; }
  .dz-run > .sec-head, .dz-run > .dz-beats, .dz-run > .dz-frame { box-sizing: border-box; width: 100%; flex: none; }
  .dz-run .dz-beats { margin-bottom: clamp(10px, 1.8svh, 18px); }
  .dz-run .dz-beats button { padding-top: clamp(8px, 1.4svh, 14px); }
  .dz-run > .dz-frame { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .dz-run .dz-chrome { flex: none; height: clamp(44px, 6svh, 56px); }
  .dz-run .dz-input { height: clamp(32px, 4.4svh, 38px); }
  .dz-run .dz-stage { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); padding: clamp(10px, 1.6svh, 14px); gap: clamp(10px, 1.6svh, 16px); }
  .dz-run .dz-doc { contain: size; overflow: hidden; }
  .dz-run .dz-head, .dz-run .dz-grid { translate: 0 calc(var(--dz-follow, 0) * -1px); }
  .dz-run .dz-doc.follow { -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px); }
  .dz-run .dz-side { min-height: 0; overflow: hidden; container: dzside / size; }
  .dz-run .dz-states { min-height: 0; grid-template-rows: minmax(0, 1fr); }  /* each state in the pane's height, not the tallest one's */
}
@media (min-width: 861px) and (max-height: 720px) {
  .dz-run .dz-beats button > span:not(.dz-bn) { display: none; }  /* the beats by name; the window tells the rest */
  .dossier > .sec-head .eyebrow { display: none; }
}
/* a short window, or a narrow one: one pane at a time, as on phones; the record while it is asked for and assembles, the
   inspector across the window for the check and the memo, each claim on one line */
@media (min-width: 861px) and (max-height: 720px), (min-width: 861px) and (max-width: 1280px) {
  .dz-run .dz-stage { grid-template-columns: minmax(0, 1fr); }
  .dz-run .dz-idle, .dz-run .dz-doc, .dz-run .dz-side { grid-column: 1; grid-row: 1; }
  .dz-run[data-beat="2"] .dz-doc, .dz-run[data-beat="3"] .dz-doc, .dz-run[data-beat="0"] .dz-side, .dz-run[data-beat="1"] .dz-side { opacity: 0; visibility: hidden; }
  .dz-run .dz-om thead { display: none; }
  .dz-run .dz-om tr { display: grid; grid-template-columns: 6rem minmax(0, .8fr) minmax(0, 1.4fr) 5.4rem; gap: 2px 12px; align-items: baseline;
    padding: clamp(5px, 1.4svh, 12px) 0; border-top: 1px solid var(--line); }
  .dz-run .dz-om th, .dz-run .dz-om td { padding: 0; border: 0; }
  .dz-run .dz-om tbody th { grid-area: 1 / 1; padding-left: 10px; }
  .dz-run .dz-om td:nth-child(2) { grid-area: 1 / 2; padding-left: 0; }
  .dz-run .dz-om td:nth-child(3) { grid-area: 1 / 3; }
  .dz-run .dz-om td:last-child { grid-area: 1 / 4; }
  .dz-run .dz-om td:nth-child(2)::before { content: "OM"; display: inline-block; margin-right: 6px; color: var(--tx-3); }
  .dz-run .dz-om td small { display: inline; margin: 0 0 0 8px; }
  .dz-run .dz-om td:nth-child(3)::before { top: 5px; }
  .dz-run .dz-om td:last-child::before { top: 4px; }
}
@media (min-width: 861px) and (max-height: 720px) and (prefers-reduced-motion: no-preference),
  (min-width: 861px) and (max-width: 1280px) and (prefers-reduced-motion: no-preference) {
  .dz-run .dz-doc, .dz-run .dz-side { transition: opacity .35s, visibility 0s .35s; }
  .dz-run[data-beat="0"] .dz-doc, .dz-run[data-beat="1"] .dz-doc, .dz-run[data-beat="2"] .dz-side, .dz-run[data-beat="3"] .dz-side { transition: opacity .35s .1s, visibility 0s; }
}
/* the inspector's states on a short pane: tertiary lines go first (its height, as a size container) */
@container dzside (max-height: 540px) {
  .dz-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dz-memo .dz-mini { display: none; }
  #main-landing .dz-om h3 { display: none; }
  .dz-om th, .dz-om td { padding-top: 6px; padding-bottom: 6px; }
}
@container dzside (max-height: 470px) {
  .dz-log { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 16px; }
  .dz-log li { grid-template-columns: 38px 12px minmax(0, 1fr); }
  .dz-memo .dz-cite { display: none; }
  .dz-om td small { display: none; }
}
@container dzside (max-height: 400px) {
  .dz-om, .dz-memo, .dz-run .dz-drop { padding: 14px; }
  .dz-memo-flags { display: none; }  /* the truth-check said it: the claims that disagree, in red */
  .dz-figs small { display: none; }
  .dz-slot { min-height: 0; margin-top: 10px; padding: 10px 14px; }
  .dz-sheet { width: 58px; height: 74px; padding: 9px 8px; gap: 5px; }
}
@container dzside (max-height: 350px) {
  .dz-memo > p:nth-of-type(3) { display: none; }
  .dz-bottom { display: none; }  /* the table says it: the cap rate the record supports, in red against the OM's */
  .dz-log li { height: 24px; }
  .dz-om, .dz-memo, .dz-run .dz-drop { padding: 12px; }
}
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .dz-run .dz-head, .dz-run .dz-grid { transition: translate .6s cubic-bezier(.2, .7, .2, 1); }
}

/* ---------- widths: three record columns from 1200 px (a 1280 laptop keeps them), two below */
@media (max-width: 1280px) {
  .dz-mode { display: none; }
  .dz-stage { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  /* the truth-check in three columns: the claim's line over what the OM says, the record and its type, the verdict */
  .dz-om thead { display: none; }
  .dz-om tr { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 5.2rem; gap: 2px 10px; padding: 9px 0; border-top: 1px solid var(--line); }
  .dz-om th, .dz-om td { padding: 0; border: 0; }
  .dz-om tbody th { grid-column: 1; grid-row: 1; padding-left: 10px; }
  .dz-om td:nth-child(2) { grid-column: 1; grid-row: 2; padding-left: 10px; }
  .dz-om td:nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
  .dz-om td:last-child { grid-column: 3; grid-row: 1 / 3; }
  .dz-om td:nth-child(2)::before { content: "OM"; display: inline-block; margin-right: 6px; color: var(--tx-3); }
  .dz-run .dz-om td:nth-child(3)::before { top: 5px; }
  .dz-run .dz-om td:last-child::before { top: 4px; }
}
@media (max-width: 1199px) {
  .dz-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); }
  .dz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 861px) {
  .dossier:not(.dz-run) .dz-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }  /* the finished memo runs across the foot */
}
@media (max-width: 860px) {
  .dossier { padding: 100px 0 110px; }
  .dz-beats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .dz-mode { display: none; }
  /* the toolbar in two rows: the status, the clock and pause, then the input across */
  .dz-chrome { flex-wrap: wrap; height: auto; padding: 8px 10px 12px 16px; row-gap: 8px; }
  .dz-tick { flex: 1 1 0; text-align: left; }
  .dz-input { order: 1; flex: 1 0 100%; height: 44px; font-size: 15px; }
  /* one pane at a time, in one cell: the record while it is asked for and assembles, the inspector for the check and the memo */
  .dz-stage { grid-template-columns: minmax(0, 1fr); }
  .dz-om { grid-column: 1; grid-row: 2; }
  .dz-memo { grid-column: 1; grid-row: 3; }
  .dz-run .dz-idle, .dz-run .dz-doc, .dz-run .dz-side { grid-column: 1; grid-row: 1; }
  .dz-idle-t { padding: 18px 18px 64px; }
  /* the record pane takes the inspector's height (the taller pane would leave the other an empty band) and follows the newest
     panel as the record assembles (--dz-follow, set by landing-dossier.js) */
  .dz-run .dz-doc { contain: size; overflow: hidden; }
  .dz-run .dz-head, .dz-run .dz-grid { translate: 0 calc(var(--dz-follow, 0) * -1px); }
  .dz-run .dz-doc.follow { -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px); }
  .dz-run[data-beat="2"] .dz-doc, .dz-run[data-beat="3"] .dz-doc, .dz-run[data-beat="0"] .dz-side, .dz-run[data-beat="1"] .dz-side { opacity: 0; visibility: hidden; }
  .dz-run .dz-doc, .dz-run .dz-side { transition: opacity .35s, visibility 0s .35s; }
  .dz-run[data-beat="0"] .dz-doc, .dz-run[data-beat="1"] .dz-doc, .dz-run[data-beat="2"] .dz-side, .dz-run[data-beat="3"] .dz-side { transition: opacity .35s .1s, visibility 0s; }
}
@media (max-width: 560px) {
  .dossier > .sec-head, .dz-beats, .dz-frame { max-width: calc(100% - 32px); }
  .dz-beats button > span:not(.dz-bn) { display: none; }
  .dz-chrome { gap: 10px; padding-left: 12px; }
  .dz-dots, .dz-chrome > b { display: none; }
  .dz-input { padding-left: 12px; gap: 8px; }
  .dz-enter { display: none; }
  .dz-stage { padding: 14px; }
  .dz-head { flex-wrap: wrap; align-items: start; }
  .dz-score { justify-items: start; }
  .dz-score b { font-size: 36px; }
  .dz-p { padding: 12px; }
  .dz-floors { position: static; align-self: flex-start; height: 70px; margin-top: 10px; }
  .dz-om, .dz-memo, .dz-run .dz-drop { padding: 16px; }
  .dz-om header { grid-template-columns: minmax(0, 1fr); }
  .dz-sum { grid-column: 1; grid-row: 3; }
  /* the truth-check as stacked lines: the claim's line and its stamp, what the OM says, then the record and its type */
  .dz-om tr { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; }
  .dz-om td:nth-child(3) { grid-column: 1; grid-row: 3; padding-left: 10px; }
  .dz-om td:last-child { grid-column: 2; grid-row: 1 / 4; }
  .dz-run .dz-om td:nth-child(3)::before { left: 10px; }
  .dz-memo header { flex-wrap: wrap; }
  .dz-act { flex: 1 1 100%; }
  .dz-btn { flex: 1 1 auto; justify-content: center; }
}