/* The /demo page: the five steps on stock footage, as a working console.
   Layout: one stage per step. The camera on the left (dark footage, because footage is dark), the phone a member
   of staff holds on the right, and under it the rules for the step and the running log. On the Watchdog steps
   (the check, the case file, the records) the desk takes the whole stage.
   Colours keep the site's roles: blue = the system, red = an alert only, green = deleted only, yellow = the Demo
   chip. Every class starts with dm- so nothing here reaches the other pages' parts. Loaded only by /demo/. */

:root {
  --dm-sys-soft: oklch(0.95 0.025 252);
  --dm-ok-soft: oklch(0.955 0.03 160);
  /* fixed: footage looks the same in both themes */
  --dm-foot: oklch(0.21 0.012 250);
  --dm-foot-panel: oklch(0.255 0.014 250);
  --dm-foot-line: oklch(0.34 0.014 250);
  --dm-foot-osd: oklch(0.93 0.005 250);
  --dm-foot-dim: oklch(0.72 0.01 250);
  --dm-foot-box: oklch(0.72 0.11 252);
  --dm-foot-ok: oklch(0.78 0.13 160);
  --dm-foot-alert: oklch(0.71 0.15 27);
  --dm-r-card: 8px;
}
:root[data-theme="dark"] {
  --dm-sys-soft: oklch(0.3 0.05 252);
  --dm-ok-soft: oklch(0.3 0.05 160);
}

.dm { padding-bottom: 0; }
.section.dm { padding-top: 40px; }
.dm .icon { width: 1.25em; height: 1.25em; }
.dm .num, .dm time { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dm-note { margin-top: 16px; font-size: .95rem; line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
.dm-note .ex { margin-right: 8px; }
/* wide screens: the note sits under the headline, and the lead spans both rows on the right */
@media (min-width: 1080px) {
  .dm .sec-head h1, .dm .sec-head h2 { grid-row: 1; }
  .dm .sec-head .dm-note { grid-column: 1 / 8; grid-row: 2; max-width: 52ch; }
  .dm .sec-head .lead { grid-row: 1 / 3; }
}

/* the steps */
.dm-steps-row { margin-top: 16px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.dm-steps { display: flex; gap: 2px; min-width: max-content; }
.dm-steps button { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border: 0; background: none; cursor: pointer; color: var(--ink-3); font: 700 .95rem/1.2 var(--text); white-space: nowrap; }
.dm-steps button .dm-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--edge); font: 600 .78rem/1 var(--mono); color: var(--ink-2); }
.dm-steps button .icon { width: 1.1em; height: 1.1em; }
.dm-steps button:hover { color: var(--ink); }
.dm-steps button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--sys); }
.dm-steps button[aria-selected="true"] .dm-n { background: var(--sys); border-color: var(--sys); color: var(--on-sys); }
.dm-steps button.dm-done { color: var(--ink-2); }
.dm-steps button.dm-done .dm-n { border-color: var(--sys); background: var(--dm-sys-soft); color: var(--sys); }
.dm-steps .dm-gap { width: 1px; margin: 10px 8px; background: var(--line); }

/* the stage */
.dm-stage { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px 32px; align-items: stretch; padding-top: 20px; padding-bottom: 8px; }
.dm-stage-head { grid-column: 1 / -1; align-self: start; display: grid; gap: 6px; }
.dm-stage-head h2 { margin: 0; font: 600 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--display); letter-spacing: -0.01em; text-wrap: balance; max-width: none; }
.dm-stage-head p { max-width: 70ch; color: var(--ink-2); }
.dm-desk-wrap { display: none; grid-column: 1 / -1; }
.dm-stage.dm-wide .dm-device, .dm-stage.dm-wide .dm-cam { display: none; }
.dm-stage.dm-wide .dm-desk-wrap { display: block; }

/* the camera */
.dm-cam { background: var(--dm-foot); color: var(--dm-foot-osd); border-radius: var(--r-panel); overflow: hidden; }
.dm-cam-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; font: 400 .78rem/1.3 var(--mono); color: var(--dm-foot-dim); border-bottom: 1px solid var(--dm-foot-line); }
.dm-cam-head b { color: var(--dm-foot-osd); font-weight: 600; }
/* the display rules below would show an element the script hid */
.dm [hidden] { display: none !important; }
.dm-cam-view { position: relative; aspect-ratio: 16 / 9; background: var(--dm-foot); }
.dm-cam-view video, .dm-cam-view canvas, .dm-cam-view img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.dm-cam-view img { object-fit: contain; }
.dm-cam-view.dm-has-still { overflow: hidden; }
.dm-cam-view.dm-has-still::before { content: ""; position: absolute; inset: -24px; background: var(--dm-still) center / cover; filter: blur(18px) brightness(.4); }
.dm-osd { position: absolute; left: 12px; bottom: 10px; padding: 3px 6px; border-radius: var(--r-chip); background: color-mix(in oklch, var(--dm-foot) 72%, transparent); font: 400 .78rem/1 var(--mono); color: var(--dm-foot-osd); letter-spacing: .02em; }
.dm-cam-foot { display: grid; gap: 10px; padding: 12px 14px 14px; }
.dm-readout { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 .78rem/1.4 var(--mono); color: var(--dm-foot-dim); }
.dm-readout b { color: var(--dm-foot-osd); font-weight: 600; }
.dm-transport { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: end; }
.dm-timeline { position: relative; height: 34px; }
.dm-timeline .dm-track { position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--dm-foot-line); }
.dm-timeline .dm-seg { position: absolute; top: 21px; height: 4px; background: var(--dm-foot-box); opacity: .45; }
.dm-timeline .dm-mark { position: absolute; top: 19px; width: 2px; height: 8px; background: var(--dm-foot-ok); }
.dm-timeline .dm-mark.dm-flag { top: 15px; height: 16px; background: var(--dm-foot-box); }
.dm-timeline .dm-mark.dm-hit { top: 15px; height: 16px; background: var(--dm-foot-alert); }
.dm-timeline .dm-mark span { position: absolute; left: -1px; bottom: 100%; margin-bottom: 2px; font: 400 .78rem/1 var(--mono); color: var(--dm-foot-osd); white-space: nowrap; }
.dm-timeline .dm-head { position: absolute; top: 17px; width: 2px; height: 12px; background: var(--dm-foot-osd); }
.dm-transport button, .dm-jump { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 10px; border: 1px solid var(--dm-foot-line); border-radius: var(--r-ctl); background: var(--dm-foot-panel); color: var(--dm-foot-osd); font: 600 .78rem/1 var(--text); cursor: pointer; }
.dm-transport button:hover, .dm-jump:hover { border-color: var(--dm-foot-dim); }
.dm-transport .icon { width: 1em; height: 1em; }
.dm-jump { justify-self: start; min-height: 40px; border-color: var(--dm-foot-box); }
@media (min-width: 961px) { .dm-jump { display: none; } }
.dm-foot-note { margin: 0; font: 400 .78rem/1.45 var(--text); color: var(--dm-foot-dim); }
.dm-doorlog { min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; max-height: 9.6em; overflow: hidden; font: 400 .78rem/1.6 var(--mono); }
.dm-doorlog li { display: grid; grid-template-columns: 8ch 14ch minmax(0, 1fr); gap: 1.5ch; color: var(--dm-foot-dim); }
.dm-doorlog .dm-res { color: var(--dm-foot-ok); }
.dm-doorlog li.dm-hit .dm-res { color: var(--dm-foot-alert); font-weight: 600; }

/* the phone: what one business's staff see. Same body as the How it works phone. */
.dm-device { display: flex; flex-direction: column; }
.dm-ph { flex: 1; display: flex; position: sticky; top: 84px; min-height: 560px; max-height: calc(100dvh - 100px); padding: 10px; background: var(--navy); border-radius: 2.1em; }
.dm-screen { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 12px 14px 16px; background: var(--bg); border-radius: 1.65em; overflow-y: auto; scrollbar-width: thin; }
.dm-screen > :last-child { margin-top: auto; }
/* side by side: the phone takes the camera's height (its screen scrolls, the buttons stay pinned); the camera never stretches */
@media (min-width: 961px) { .dm-cam { align-self: start; } .dm-screen { contain: size; } }
.dm-status { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px 0; font: 600 .78rem/1 var(--mono); color: var(--ink-2); }
.dm-app { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.dm-app .dm-who { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; }
.dm-app .brand-mark { height: 22px; }
.dm-app .dm-where { font-size: .78rem; color: var(--ink-3); }
.dm-h { margin: 0; font: 700 1.2rem/1.3 var(--text); }
.dm-p { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink-2); }
.dm-small { margin: 0; font-size: .78rem; line-height: 1.4; color: var(--ink-3); }
.dm-clip { position: relative; flex: none; border-radius: var(--dm-r-card); overflow: hidden; background: var(--dm-foot); aspect-ratio: 16 / 9; }
.dm-clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-clip .dm-osd { font-size: .78rem; left: 8px; bottom: 6px; }
.dm-kv { display: grid; border: 1px solid var(--line); border-radius: var(--dm-r-card); background: var(--panel); }
.dm-kv > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 12px; font-size: .86rem; }
.dm-kv > div + div { border-top: 1px solid var(--line); }
.dm-kv .dm-k { color: var(--ink-3); }
.dm-kv .dm-v { font-weight: 700; text-align: right; }
.dm .btn.dm-block { width: 100%; }
.dm .btn .icon { width: 1.1em; height: 1.1em; }
.dm .btn:disabled { opacity: .5; cursor: not-allowed; }
.dm-stack { display: grid; gap: 8px; }
/* the answer or send buttons stick to the bottom of the phone screen, with a short fade above them */
.dm-pin { position: sticky; bottom: -16px; z-index: 1; padding: 10px 0 16px; background: var(--bg); }
.dm-pin::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.dm-warn { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
.dm-warn .icon { color: var(--ink-3); margin-top: 1px; width: 1.1em; height: 1.1em; }
.dm-notif { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px; border: 2px solid var(--sys); border-radius: var(--dm-r-card); background: var(--panel); }
.dm-notif .icon { color: var(--sys); width: 1.5em; height: 1.5em; }
.dm-notif b { display: block; font-size: 1.0625rem; }
.dm-notif p { margin: 0; font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
.dm-alert { display: grid; gap: 4px; padding: 12px 14px; border: 2px solid var(--alert); border-radius: var(--dm-r-card); background: var(--panel); }
.dm-alert .dm-t { display: flex; align-items: center; gap: 8px; color: var(--alert); font-weight: 700; font-size: 1.0625rem; }
.dm-alert .dm-t .icon { width: 1.3em; height: 1.3em; }
.dm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dm-pair figure { margin: 0; display: grid; gap: 4px; }
.dm-pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; background: var(--dm-foot); display: block; }
.dm-pair figcaption { font-size: .78rem; line-height: 1.3; color: var(--ink-3); }
.dm-empty { display: grid; place-items: center; gap: 8px; padding: 28px 12px; text-align: center; border: 1px dashed var(--line); border-radius: var(--dm-r-card); color: var(--ink-3); font-size: .86rem; }
.dm-empty .icon { width: 1.8em; height: 1.8em; color: var(--edge); }
.dm-done-mark { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: var(--dm-r-card); background: var(--dm-sys-soft); color: var(--ink); }
.dm-done-mark .icon { color: var(--sys); width: 1.5em; height: 1.5em; }
.dm-done-mark.dm-del { background: var(--dm-ok-soft); }
.dm-done-mark.dm-del .icon { color: var(--ok); }
.dm-warn #dm-ttl { white-space: nowrap; }
.dm-done-mark b { display: block; }
.dm-done-mark p { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--ink-2); }

/* the report form */
.dm-form { display: grid; gap: 12px; }
.dm-field { display: grid; gap: 5px; }
.dm-field label, .dm-field .dm-lbl { font-size: .86rem; font-weight: 700; }
.dm-field .dm-help { font-size: .78rem; color: var(--ink-3); line-height: 1.35; }
.dm-field input[type="text"], .dm-field select, .dm-field textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--panel); color: var(--ink); font: inherit; }
.dm-field textarea { min-height: 84px; resize: vertical; line-height: 1.4; font-size: .95rem; }
.dm-money { position: relative; }
.dm-money span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-family: var(--mono); }
.dm-money input { padding-left: 26px !important; font-family: var(--mono); }
.dm-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .86rem; line-height: 1.4; cursor: pointer; }
.dm-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--sys); }
.dm-seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--edge); border-radius: var(--r-ctl); overflow: hidden; }
.dm-seg label { display: grid; place-items: center; min-height: 40px; font-size: .86rem; font-weight: 700; cursor: pointer; background: var(--panel); }
.dm-seg label + label { border-left: 1px solid var(--edge); }
.dm-seg input { position: absolute; opacity: 0; pointer-events: none; }
.dm-seg label:has(input:checked) { background: var(--solid); color: var(--on-solid); }
.dm-seg label:has(input:focus-visible) { outline: 3px solid var(--sys); outline-offset: -3px; }
.dm-err { font-size: .78rem; color: var(--alert); font-weight: 700; }
.dm-attached { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: var(--dm-r-card); background: var(--panel); font-size: .86rem; }
.dm-attached img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }

/* the Watchdog desk: the checker's queue, the case file, the records */
.dm-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); }
.dm-desk { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 560px; }
.dm-side { padding: 16px; display: grid; align-content: start; gap: 12px; }
@media (min-width: 961px) {
  .dm-side { align-self: start; position: sticky; top: 84px; }
  .dm-main { border-left: 1px solid var(--line); }
}
.dm-side h3, .dm-main h3, .dm-records h3 { margin: 0; font: 700 .86rem/1.3 var(--text); color: var(--ink-3); letter-spacing: .02em; }
.dm-queue { display: grid; gap: 6px; }
.dm-queue button { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--dm-r-card); background: var(--bg); color: var(--ink); font: inherit; cursor: default; }
.dm-queue button[aria-current="true"] { border-color: var(--sys); background: var(--dm-sys-soft); }
.dm-queue button:disabled { color: var(--ink-2); }
.dm-queue button b { font-size: .95rem; }
.dm-queue button span { font-size: .78rem; color: var(--ink-3); }
.dm-queue .dm-tag { justify-self: start; margin-top: 4px; padding: 0 6px; border-radius: var(--r-chip); font: 600 .78rem/1.6 var(--text); border: 1px solid var(--line); color: var(--ink-2); }
.dm-queue .dm-tag.dm-sys { border-color: var(--sys); color: var(--sys); }
.dm-main { padding: 20px 24px 24px; display: grid; align-content: start; gap: 18px; min-width: 0; }
.dm-main h2, .dm-records h2 { margin: 0; font: 600 1.6rem/1.15 var(--display); letter-spacing: -0.01em; max-width: none; }
.dm-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
@media (min-width: 1080px) { .dm-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dm-checks li { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--dm-r-card); font-size: .95rem; }
.dm-checks li .icon { color: var(--sys); }
.dm-checks li small { display: block; font-size: .78rem; color: var(--ink-3); }
.dm-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dm-compare figure { margin: 0; display: grid; gap: 8px; }
.dm-compare img { width: 100%; max-height: 360px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--dm-r-card); background: var(--dm-foot); display: block; }
.dm-compare .dm-kv > div { font-size: .86rem; padding: 7px 10px; }
.dm-verdict { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dm-result { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--dm-r-card); border: 1px solid var(--sys); background: var(--dm-sys-soft); font-size: .95rem; }
.dm-result .icon { color: var(--sys); width: 1.3em; height: 1.3em; }
.dm-table { overflow-x: auto; }
.dm-table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.dm-table th { text-align: left; font: 700 .78rem/1.3 var(--text); color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.dm-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.dm-table .dm-r { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm-table th.dm-r { font-family: var(--text); }
.dm-table .dm-id { font-family: var(--mono); }
.dm-table tfoot td { font-weight: 700; border-bottom: 0; }
.dm-case-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: baseline; }
.dm-case-flag { padding: 2px 8px; border: 1px solid var(--edge); border-radius: var(--r-chip); font: 600 .78rem/1.5 var(--text); color: var(--ink-2); }
.dm-agree { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dm-agree li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--dm-r-card); font-size: .95rem; }
.dm-agree .dm-st { font: 600 .78rem/1.5 var(--text); color: var(--ink-2); }
.dm-records { padding: 20px 24px 24px; display: grid; gap: 18px; }
.dm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--line); border-radius: var(--dm-r-card); overflow: hidden; }
.dm-tiles div { padding: 14px 16px; display: grid; gap: 2px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; }
.dm-tiles b { font: 600 1.6rem/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.dm-tiles b.dm-ok { color: var(--ok); }
.dm-tiles span { font-size: .86rem; color: var(--ink-3); line-height: 1.3; }

/* the end of the demo, under the case file */
.dm-end { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--panel); }
.dm-end-h { margin: 0 0 4px; font: 600 1.2rem/1.3 var(--display); }
.dm-end .dm-p { max-width: 70ch; }

/* under the stage: the rules for this step and the running log */
.dm-under { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; padding-top: 28px; padding-bottom: 56px; }
.dm-under h2.sub, .dm-under h3 { margin: 0 0 12px; font: 700 1.0625rem/1.3 var(--text); }
.dm-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dm-rules li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.dm-rules li .icon { color: var(--sys); margin-top: 3px; width: 1.1em; height: 1.1em; }
.dm-rules li p { margin: 0; font-size: .95rem; line-height: 1.5; }
.dm-rules li cite { display: block; font: italic 400 .78rem/1.5 var(--mono); color: var(--ink-3); }
.dm-log { list-style: none; margin: 0; padding: 0; display: grid; max-height: 15.5em; overflow-y: auto; font: 400 .86rem/1.5 var(--mono); border-top: 1px solid var(--line); scrollbar-width: thin; }
.dm-log li { display: grid; grid-template-columns: 8ch 13ch minmax(0, 1fr); gap: 1.5ch; padding-block: 2px; border-bottom: 1px solid var(--line); }
.dm-log time { color: var(--ink-3); }
.dm-log .dm-by { color: var(--ink-2); }
.dm-log .dm-what { color: var(--ink); font-family: var(--text); }
.dm-log li.dm-del .dm-what { color: var(--ok); }
.dm-log li.dm-hit .dm-what { color: var(--alert); font-weight: 600; }
.dm-log li.dm-sys .dm-what { color: var(--sys); }
.dm-credit { padding-top: 0; padding-bottom: 40px; font-size: .86rem; line-height: 1.5; color: var(--ink-3); }
.dm-credit p { margin: 0; max-width: 90ch; }
.dm-credit p + p { margin-top: 6px; }

@media (max-width: 960px) {
  .dm-stage { grid-template-columns: minmax(0, 1fr); }
  .dm-device { max-width: 380px; width: 100%; justify-self: center; }
  .dm-ph { position: static; min-height: 0; max-height: none; }
  .dm-screen > :last-child { margin-top: 0; }
  .dm-steps-row { mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .dm-desk { grid-template-columns: minmax(0, 1fr); }
  .dm-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .dm-under { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .dm-main, .dm-records { padding: 16px; }
  .dm-compare { gap: 10px; }
  .dm-log li { grid-template-columns: 8ch minmax(0, 1fr); }
  .dm-log .dm-by { display: none; }
}
/* a new state steps in: readouts step from state to state, they do not glide (the site's rule) */
.dm-in { animation: dm-stepin .28s steps(4, end) both; }
@keyframes dm-stepin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dm-in { animation: none; } }