/* lab.jasonsla.de — "03:00". Dark is the instrument; light is SOP-0300, the daylight copy.
   Tokens: :root = dark. The light sheet is written twice (explicit switch + OS preference) and the two
   copies must stay identical (scripts/check-contrast.mjs fails if they drift). */

@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Serif"; src: url("/assets/fonts/plex-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Serif"; src: url("/assets/fonts/plex-serif-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --ground: #000000;
  --ground-2: #06080a;
  --rule: #1d242b;
  --rule-2: #36404a;
  --ink: #e8ecef;
  --ink-2: #aeb6be;
  --ink-3: #8a939c;
  --phosphor: #d6ffe6;
  --life: #7fd4ff;
  --warn: #ffb648;
  --alarm: #ff6b5c;
  --focus: #d6ffe6;
  --wedge: rgba(127, 212, 255, 0.06);
  --glow: rgba(214, 255, 230, 0.16);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --ground: #ffffff;
  --ground-2: #f6f6f3;
  --rule: #000000;
  --rule-2: #6b6b6b;
  --ink: #111111;
  --ink-2: #3a3a3a;
  --ink-3: #5c5c5c;
  --phosphor: #171a1c;
  --life: #1577b8;
  --warn: #8a5a00;
  --alarm: #a1261a;
  --focus: #000000;
  --wedge: rgba(21, 119, 184, 0.07);
  --glow: transparent;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  --ground: #ffffff;
  --ground-2: #f6f6f3;
  --rule: #000000;
  --rule-2: #6b6b6b;
  --ink: #111111;
  --ink-2: #3a3a3a;
  --ink-3: #5c5c5c;
  --phosphor: #171a1c;
  --life: #1577b8;
  --warn: #8a5a00;
  --alarm: #a1261a;
  --focus: #000000;
  --wedge: rgba(21, 119, 184, 0.07);
  --glow: transparent;
  color-scheme: light;
  }
}
@media (prefers-contrast: more) {
  :root { --ink-3: #aeb6be; --rule: #36404a; }
  :root[data-theme="light"] { --ink-3: #3a3a3a; }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 0.875rem/1.5 "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: 16px; top: -100px; background: var(--ground); color: var(--ink); padding: 8px 12px; z-index: 10; }
.skip:focus { top: 8px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.serif { font-family: "Plex Serif", Georgia, "Times New Roman", serif; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); line-height: 1.65; max-width: 60ch; }
.serif em, em.serif { font-style: italic; }
.dim { color: var(--ink-3); }
.caps { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; }
.js-only { display: none; }
.js .js-only { display: revert; }
.js .no-js-only { display: none; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }

/* header */
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.top .controls { grid-column: 1 / -1; }
@media (max-width: 420px) { .site-more { display: none; } }
@media (min-width: 900px) { .top { grid-template-columns: minmax(0, 1fr) auto auto; } .top .controls { grid-column: auto; } }
.site { margin: 0; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; }
.site a { color: inherit; text-decoration: none; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.exit { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; padding: 10px 2px; }
@media (max-width: 480px) { .exit-long { display: none; } }
.ctl {
  font: inherit; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-2); background: transparent; border: 1px solid var(--rule-2); border-radius: 0;
  min-height: 36px; padding: 6px 12px; cursor: pointer;
}
.ctl:hover { color: var(--ink); border-color: var(--ink-3); }
.ctl[aria-pressed="true"] { color: var(--ground); background: var(--ink); border-color: var(--ink); }
.vol { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 0.75rem; }
.vol input { width: 84px; accent-color: var(--ink-2); }
@media (pointer: coarse) { .ctl { min-height: 44px; } }

/* the stage: dial + readout */
.stage { display: grid; gap: 28px; padding: 20px 0 8px; }
@media (min-width: 960px) {
  .stage { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 28px; }
  .readout { order: 2; }
  .dial { order: 1; position: sticky; top: 12px; }
}

.clock { margin: 0; line-height: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.4em; }
.clock time { font-size: clamp(2.6rem, 9vw, 5.6rem); font-weight: 400; letter-spacing: -0.02em; color: var(--phosphor); text-shadow: 0 0 22px var(--glow); }
.clock .zone { font-size: 0.875rem; color: var(--ink-2); letter-spacing: 0.08em; }
.clock-cap { margin: 6px 0 0; color: var(--ink-3); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.yourclock { margin: 4px 0 0; color: var(--ink-3); font-size: 0.8125rem; min-height: 1.5em; }

.title { margin-top: 26px; }
h1 { margin: 0; font: 500 clamp(1.5rem, 4vw, 2.5rem)/1 "Plex Mono", ui-monospace, monospace; letter-spacing: 0.02em; }
h1 .h1-sub { display: block; margin-top: 6px; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.lede { margin: 12px 0 0; color: var(--ink-2); }

h2 { font: 500 0.75rem/1.4 "Plex Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); margin: 0 0 10px; }
h3 { font: 500 0.8125rem/1.4 "Plex Mono", ui-monospace, monospace; letter-spacing: 0.04em; margin: 0; }

/* the vial block */
.vial { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); }
.vialword { margin: 0; font-weight: 500; font-size: clamp(1.75rem, 5vw, 2.75rem); line-height: 1.05; letter-spacing: 0.22em; color: var(--ink); overflow-wrap: anywhere; }
.vialword[data-state="unobserved"] { color: var(--ink-2); }
.vialword[data-state="light"] { color: var(--life); }
.vialword[data-state="noscript"], .vialword[data-state="waiting"], .vialword[data-state="stale"], .vialword[data-state="silent"] { color: var(--ink-3); }
.stateline { margin: 10px 0 0; font-weight: 500; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); overflow-wrap: anywhere; }
.stateline .warn { color: var(--warn); }
.vialsentence { margin: 12px 0 0; }
.capture { margin: 12px 0 0; padding: 10px 12px; border: 1px dashed var(--rule-2); color: var(--ink); }
.readings { margin: 16px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; }
.readings dt { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; padding-top: 2px; }
.readings dd { margin: 0; overflow-wrap: anywhere; }
.readings .is-warn { color: var(--warn); }
.readings .is-alarm { color: var(--alarm); }
.gap { margin: 18px 0 0; }
.gap cite { font-style: italic; }
.prov { color: var(--ink-3); font-size: 0.8125rem; margin: 6px 0 0; }

.others { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--rule); }
.others ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.others li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 0 12px; }
.others .k { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; padding-top: 2px; }
.others .v { overflow-wrap: anywhere; }
.others .s { color: var(--ink-3); }
.is-stale, .is-silent { color: var(--ink-3); }

.unseen { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--rule); }
.unseen ul { margin: 0; padding: 0 0 0 1.2em; color: var(--ink-2); }
.unseen li { margin: 2px 0; }
.unseen li::marker { content: "× "; color: var(--ink-3); }

/* the dial */
.dial { margin: 0; min-width: 0; }
.dial-box {
  position: relative; width: 100%; max-width: min(100%, calc(100vh - 140px)); min-width: 0; aspect-ratio: 1 / 1; margin: 0 auto;
  touch-action: pan-y; cursor: crosshair; outline-offset: 4px;
}
@media (max-width: 959px) { .dial-box { max-width: min(100%, 640px); } }
.dial-box svg, .dial-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dial-box canvas { pointer-events: none; }
.dial-box svg { overflow: visible; --u: 1.6; }
.dial-box:focus-visible { outline: 2px solid var(--focus); }
.dial svg text { font-family: "Plex Mono", ui-monospace, monospace; fill: var(--ink-3); font-size: calc(10.5px * var(--u)); letter-spacing: 0.04em; }
.dial svg .t-hour { fill: var(--ink-2); font-size: calc(11px * var(--u)); }
.dial svg .t-ring { font-size: calc(9.5px * var(--u)); text-transform: uppercase; }
.dial svg .t-capture { fill: var(--ink); font-size: calc(10.5px * var(--u)); }
.dial svg .t-wedge { fill: var(--ink-3); font-size: calc(9.5px * var(--u)); }
.dial svg .t-vial { fill: var(--ink-2); font-size: calc(10px * var(--u)); letter-spacing: 0.14em; font-weight: 500; }
.dial svg .t-vial-sub { fill: var(--ink-3); font-size: calc(9px * var(--u)); letter-spacing: 0.06em; }
.dial svg .t-fresh { fill: var(--ink); font-size: calc(10.5px * var(--u)); }
.dial svg .ring { fill: none; stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dial svg .ring-out { stroke: var(--rule-2); }
.dial svg .tick { stroke: var(--rule-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dial svg .tick-major { stroke: var(--ink-3); }
.dial svg .capture-line { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.dial svg .wedge { fill: var(--wedge); }
.dial svg .wedge-edge { stroke: var(--life); stroke-opacity: 0.35; stroke-width: 1; vector-effect: non-scaling-stroke; }
.dial svg .hand { stroke: var(--phosphor); stroke-width: 1; stroke-opacity: 0.75; vector-effect: non-scaling-stroke; }
.dial svg .hand-tip { fill: var(--phosphor); }
.dial svg .vial-ring { fill: none; stroke: var(--rule-2); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.dial svg .vial-glass { fill: none; stroke: var(--rule-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dial svg .vial-halo { opacity: 0; }
.dial svg[data-vial="light"] .vial-ring { stroke: var(--ink-2); stroke-dasharray: none; }
.dial svg[data-vial="light"] .vial-halo { opacity: var(--halo, 0.12); }
.dial svg[data-vial="light"] .vial-glass { stroke: var(--ink-3); }
.dial svg[data-vial="unobserved"] .vial-ring, .dial svg[data-vial="noled"] .vial-ring { stroke: var(--ink-3); stroke-dasharray: none; }
.dial svg[data-vial="unobserved"] .vial-glass { stroke: var(--ink-3); }
.dial svg[data-vial="silent"] .vial-ring { opacity: 0.6; }
.dial svg .halo-stop { stop-color: var(--life); }
.dial svg .cursor { fill: var(--phosphor); fill-opacity: 0.12; stroke: var(--phosphor); stroke-opacity: 0.7; stroke-width: 1; vector-effect: non-scaling-stroke; }
.dial svg .m-det { fill: var(--phosphor); }
.dial svg .m-read { fill: var(--phosphor); }
.dial svg .leader { stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dial svg .aperture { stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.tip {
  position: absolute; z-index: 3; max-width: min(320px, 80%); cursor: default;
  background: var(--ground); color: var(--ink); border: 1px solid var(--rule-2); padding: 6px 8px; font-size: 0.75rem; line-height: 1.4;
}
.tip .s { display: block; color: var(--ink-3); }
.vialcap { position: absolute; left: 50%; top: 61%; transform: translateX(-50%); z-index: 2; margin: 0; color: var(--ink-2); font-size: 0.75rem; white-space: nowrap; pointer-events: none; transition: opacity 600ms; }
.dial figcaption { margin: 12px auto 0; max-width: 60ch; color: var(--ink-3); font-size: 0.8125rem; }
.slot { margin: 8px auto 0; max-width: 60ch; min-height: 1.5em; color: var(--ink); font-size: 0.8125rem; }
.slotnav { display: none !important; gap: 8px; justify-content: center; margin-top: 6px; }
@media (pointer: coarse) { .js .slotnav { display: flex !important; } }
.slotnav .ctl { min-width: 44px; min-height: 44px; }
.hint { margin: 6px auto 0; max-width: 60ch; color: var(--ink-3); font-size: 0.75rem; }

/* exposure */
.exposure { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 14px 0; margin-top: 20px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.exposure p { margin: 0; }
.exposure .ex { font-weight: 500; letter-spacing: 0.06em; }
.returnline { color: var(--ink-2); }

/* the ledger */
.ledger { padding: 28px 0 8px; }
.ledger-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; }
.ledger-head p { margin: 0; color: var(--ink-3); font-size: 0.8125rem; max-width: 70ch; }
.day { margin-top: 22px; }
.day h3 { padding-bottom: 6px; border-bottom: 1px solid var(--rule); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; }
.rows { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; }
.row { display: grid; grid-template-columns: 7.2em minmax(0, 1fr) auto; gap: 2px 14px; padding: 7px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.row > time { color: var(--ink-2); white-space: nowrap; }
.row .what { overflow-wrap: anywhere; }
.row .src { grid-column: 2; color: var(--ink-3); overflow-wrap: anywhere; }
.row .raw { grid-column: 3; grid-row: 1; font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; padding: 2px 0; }
.row.k-detection .what { color: var(--ink); }
.row.k-detection > time::before { content: "● "; color: var(--phosphor); font-size: 0.6rem; vertical-align: 0.15em; }
.row.is-new { animation: arrive 4s ease-out 1; }
.row.is-hot { background: var(--ground-2); outline: 1px solid var(--rule-2); }
.row:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
@keyframes arrive { from { background: var(--ground-2); } to { background: transparent; } }
.row details { grid-column: 2 / 4; }
.row summary { cursor: pointer; color: var(--ink-2); list-style-position: outside; }
.row summary:hover { color: var(--ink); }
.row details .rows { margin-top: 6px; }
.row details .row { grid-template-columns: 6.4em minmax(0, 1fr) auto; padding: 4px 0; border-bottom-color: var(--ground-2); }
.row.k-group > time { color: var(--ink-3); }
.ledger .empty { color: var(--ink-3); margin: 16px 0; }
.ledger .rendered { color: var(--ink-3); font-size: 0.8125rem; }
@media (max-width: 520px) {
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .row > time { grid-column: 1; }
  .row .what, .row .src { grid-column: 1 / 3; }
  .row .raw { grid-column: 2; grid-row: 1; }
  .row details { grid-column: 1 / 3; }
  .row details .row { grid-template-columns: minmax(0, 1fr) auto; }
}

/* footer */
.foot { margin-top: 36px; padding: 18px 0 40px; border-top: 1px solid var(--rule); color: var(--ink-2); }
.foot nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.foot nav a { display: inline-block; padding: 8px 0; }
.foot .last { margin: 14px 0 0; }
.foot .colophon { margin: 10px 0 0; color: var(--ink-3); font-size: 0.75rem; max-width: 90ch; }

/* SOP-0300 (light) furniture: hidden in the dark */
.sop-only { display: none; }
:root[data-theme="light"] .sop-only { display: block; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .sop-only { display: block; } }

.sop-head { margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--rule); }
.sop-head p { margin: 0; }
.sop-head .sop-id { font-weight: 500; letter-spacing: 0.06em; }
.sop-head .sop-note { margin-top: 6px; font-family: "Plex Serif", Georgia, serif; font-style: italic; color: var(--ink-2); }
.signoff { margin-top: 28px; padding: 14px; border: 1px solid var(--rule); }
.signoff p { margin: 0; }
.signoff .line { display: inline-block; min-width: 10ch; border-bottom: 1px solid var(--rule); padding: 0 6px; }

/* light-scheme treatments (applied via [data-sop] numbering and ruled boxes) */
:root[data-theme="light"] [data-sop]::before { content: attr(data-sop); display: block; margin-bottom: 6px; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) [data-sop]::before { content: attr(data-sop); display: block; margin-bottom: 6px; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 4px; } }
:root[data-theme="light"] .clock time { text-shadow: none; }
:root[data-theme="light"] .vial, :root[data-theme="light"] .others, :root[data-theme="light"] .unseen { border-top: 0; padding: 12px 14px; border: 1px solid var(--rule); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .vial, :root:not([data-theme="dark"]) .others, :root:not([data-theme="dark"]) .unseen { border-top: 0; padding: 12px 14px; border: 1px solid var(--rule); } }
:root[data-theme="light"] .unseen li::marker { content: "☐ "; color: var(--ink); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .unseen li::marker { content: "☐ "; color: var(--ink); } }
:root[data-theme="light"] .vialword { letter-spacing: 0.12em; }
:root[data-theme="light"] .capture { border-style: solid; }

/* prose pages */
.page { padding: 28px 0 0; }
.page h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
.page .lede { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); color: var(--ink); }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 40px; }
.prose p, .prose li { font-family: "Plex Serif", Georgia, serif; font-size: 1.0625rem; line-height: 1.65; }
.prose li { margin: 4px 0; }
.prose code, .prose .mono { font-family: "Plex Mono", ui-monospace, monospace; font-size: 0.875em; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.8125rem; margin: 12px 0; }
.tbl th, .tbl td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--rule); vertical-align: top; overflow-wrap: anywhere; }
.tbl th { color: var(--ink-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; }
.path { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 6px 0; font-family: "Plex Mono", ui-monospace, monospace; font-size: 0.8125rem; }
.path li { font-family: inherit; font-size: inherit; margin: 0; }
.path li + li::before { content: "→"; color: var(--ink-3); padding: 0 10px; }
.chart { margin: 20px 0 8px; max-width: 900px; }
.chart svg { width: 100%; height: auto; display: block; --u: 1.6; }
.chart svg text { font-family: "Plex Mono", ui-monospace, monospace; fill: var(--ink-3); font-size: calc(10px * var(--u)); }
.chart svg .lab { fill: var(--ink-2); }
.chart svg .ax { stroke: var(--rule-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart svg .grid { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart svg .band { fill: var(--life); fill-opacity: 0.12; }
.chart svg .hot { fill: var(--alarm); fill-opacity: 0.12; }
.chart svg .line { fill: none; stroke: var(--phosphor); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.chart svg .dot { fill: var(--phosphor); }
.chart svg .mark { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.chart svg .n-no { fill: var(--rule-2); }
.chart svg .n-flash { fill: var(--phosphor); }
.chart svg .n-amb { fill: none; stroke: var(--phosphor); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart svg .n-none { fill: none; stroke: var(--rule); stroke-dasharray: 2 2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart figcaption { margin-top: 8px; color: var(--ink-3); font-size: 0.8125rem; }
.chart details { margin-top: 6px; font-size: 0.8125rem; color: var(--ink-2); }
.chart details summary { cursor: pointer; }
.chart details p { font-family: "Plex Mono", ui-monospace, monospace; font-size: 0.8125rem; }

/* 404 */
.nf { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 40px 0; }
.nf svg { width: min(220px, 60vw); height: auto; }
.nf svg circle { fill: none; stroke: var(--rule-2); stroke-width: 1.5; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.nf .result { margin: 14px 0 0; color: var(--ink-2); letter-spacing: 0.12em; }
.nf h1 { margin-top: 18px; font-family: "Plex Serif", Georgia, serif; font-weight: 400; font-size: clamp(1.5rem, 4vw, 2.25rem); }
.nf .asked { color: var(--ink-3); margin: 10px 0 0; overflow-wrap: anywhere; }
.nf ul { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: center; }
.nf ul a { display: inline-block; padding: 8px 0; }

@media (prefers-reduced-motion: reduce) {
  .row.is-new { animation: none; }
  .vialcap { transition: none; }
}
@media (forced-colors: active) {
  .dial-box canvas { display: none; }
  .dial svg .vial-halo { display: none; }
  .dial svg .m-det, .dial svg .m-read, .dial svg .hand-tip { fill: CanvasText; }
  .dial svg .ring, .dial svg .tick, .dial svg .hand, .dial svg .vial-ring, .dial svg .vial-glass, .dial svg .capture-line, .dial svg .leader { stroke: CanvasText; }
  .dial svg text { fill: CanvasText; }
  .dial svg[data-vial="light"] .vial-ring { stroke-width: 3; }
  .ctl[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
@media print {
  .controls, .slotnav, canvas { display: none !important; }
}

/* phone/tablet order: clock, title, dial, then the readout */
@media (max-width: 959px) {
  .readout { display: contents; }
  .clockblock { order: 1; }
  .night { order: 2; margin-top: 0; }
  .dial { order: 3; }
  .title { order: 4; margin-top: 4px; }
  .vial { order: 5; margin-top: 0; }
  .others { order: 6; margin-top: 0; }
  .unseen { order: 7; margin-top: 0; }
  .stage { gap: 20px; }
}
.dial svg[data-size="s"] .t-long { display: none; }

.soundstatus { margin: 6px 0 0; font-size: 0.75rem; min-height: 0; }
.soundstatus:empty { display: none; }
.next { margin: 10px 0 0; color: var(--ink-2); font-size: 0.8125rem; }
.next b { font-weight: 500; color: var(--ink); letter-spacing: 0.04em; }
.dial svg .t-hour.is-covered { display: none; }

/* night in the garage (the instrument reports the dark phase, dark scheme only): a different place.
   The chrome collapses, the readings fold away behind one button, the vial is drawn empty, and the
   countdown to the 03:00 capture (qualified: not reported whether it still runs) is the main text. */
.night { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); }
.night-word { margin: 0; font-weight: 400; font-size: clamp(1.9rem, 4.3vw, 4.4rem); line-height: 1; letter-spacing: 0.22em; white-space: nowrap; color: var(--ink-2); overflow-wrap: anywhere; }
.night-count { margin: 20px 0 0; font-size: clamp(1.25rem, 2.4vw, 1.9rem); line-height: 1.25; color: var(--ink); letter-spacing: 0.02em; }
.night-count .q { display: block; margin-top: 8px; max-width: 62ch; font-size: 0.8125rem; line-height: 1.5; letter-spacing: 0; color: var(--ink-3); }
.night-line { margin: 12px 0 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); overflow-wrap: anywhere; }
.night-more { margin-top: 18px; }
.is-night:not(.show-all) .nc { display: none !important; }
.is-night .top { border-bottom-color: transparent; }
.is-night .site, .is-night .exit, .is-night .ctl { color: var(--ink-3); }
.is-night .ctl { border-color: var(--rule); }
.is-night .ctl[aria-pressed="true"] { color: var(--ground); background: var(--ink-3); border-color: var(--ink-3); }
.is-night .site-more, .is-night .clock-cap { display: none; }
.is-night .clock time { font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--ink-3); text-shadow: none; }
.is-night .title { margin-top: 18px; }
.is-night .exposure { border-color: var(--ground-2); }
.is-night .dial svg .vial-glass { stroke: var(--rule); }
.is-night .dial svg .vial-ring { stroke: var(--rule-2); stroke-dasharray: 1 7; }
.is-night .dial svg .t-vial { fill: var(--ink-3); }
.is-night .dial figcaption, .is-night .hint { color: var(--ink-3); }
.is-night .dial svg #fresh { display: none; }
.is-night .dial svg .wedge { fill: transparent; }
.is-night .dial svg .wedge-edge { stroke-opacity: 0.18; }

/* missing time: from a feed's last relay to now, when the feed itself is stale or silent */
.dial svg .gap-arc { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.dial svg .gap-end { stroke: var(--ink-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dial svg .t-gap { fill: var(--ink-2); font-size: calc(9.5px * var(--u)); }
.dial svg .is-clipped { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .js .dial svg .capture-line { animation: creep 21s linear infinite; }
}
@keyframes creep { to { stroke-dashoffset: -14; } }
@media (max-width: 600px) { html:not(.js) .dial svg .t-long { display: none; } }
@media (max-width: 520px) { .chart svg .ann { display: none; } }

.ledger-more { margin: 18px 0 0; }
.bufnote { margin: 6px 0 0; color: var(--ink-3); font-size: 0.75rem; }
.nf .line { border-bottom: 1px solid var(--rule-2); padding: 0 6px; }
:root[data-theme="light"] .nf-sheet { border: 1px solid var(--rule); padding: 14px 20px 18px; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .nf-sheet { border: 1px solid var(--rule); padding: 14px 20px 18px; } }

:root[data-theme="light"] .dial svg .ring { stroke-opacity: 0.3; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .dial svg .ring { stroke-opacity: 0.3; } }
@media (max-width: 600px) { .dial-box svg { --u: 3.1; } }
.tbl td.mono { white-space: nowrap; font-family: "Plex Mono", ui-monospace, monospace; }