/* Caverio build-0 components.css: the forms.
   Components are prefixed c- and named by their T7 id (c-01-state, c-05-clock, ...). Page layout is prefixed p-,
   gallery layout g-. Colour and type come only from tokens.css. The only literal lengths are 1 px hairlines,
   and the two breakpoints in @media, which cannot read custom properties (900 px layout, 480 px clock). */

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  background: var(--c-ground);
  color: var(--c-ink);
  font: var(--w-regular) var(--t-body) / var(--lh-body) var(--f-sans);
  -webkit-text-size-adjust: 100%;
}
body { min-height: 100vh; }
a { color: inherit; text-decoration-color: var(--c-hairline-strong); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--c-ink); }
:focus-visible { outline: var(--focus-ring) solid var(--c-user); outline-offset: var(--focus-ring); }
code, .mono, .num, time { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.num.in-text { font-size: 0.93em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }

.cap {
  font: var(--w-regular) var(--t-caption) / var(--lh-caption) var(--f-mono);
  color: var(--c-unknown);
}
.tag {
  display: inline-block;
  font: var(--w-regular) var(--t-caption) / 1 var(--f-mono);
  color: var(--c-unknown);
  border: var(--hairline) dotted var(--c-unknown);
  padding: 0 var(--s-1);
  margin-left: var(--s-1);
  white-space: nowrap;
  vertical-align: baseline;
}
.tag-provider { border-style: solid; border-color: var(--c-hairline-strong); }
.tag-stale { border-style: dashed; white-space: normal; }
.tag-member { color: var(--c-user); border-color: var(--c-user); }

/* family colours: reinforce, never carry alone */
.fam-evidence { color: var(--c-evidence); }
.fam-weakening { color: var(--c-weakening); }
.fam-neutral { color: var(--c-neutral); }
.fam-unknown { color: var(--c-unknown); }
.fam-user { color: var(--c-user); }
.fam-safety { color: var(--c-safety); }

/* ---------------- frame (every page) ---------------- */
.p-frame { border-bottom: var(--hairline) solid var(--c-hairline); }
.p-bar {
  display: flex; align-items: center; gap: var(--s-6);
  min-height: calc(var(--s-8) + var(--s-4)); padding: 0 var(--s-6);
  max-width: var(--page-max); margin: 0 auto;
}
.p-wordmark {
  display: flex; align-items: center; gap: var(--s-2) ; flex: 0 0 auto;
  font: var(--w-medium) var(--t-wordmark) / 1 var(--f-mono);
  letter-spacing: var(--tr-wordmark); text-transform: var(--case-wordmark);
  text-decoration: none; color: var(--c-ink);
}
[data-theme="b"] .p-wordmark { font-family: var(--f-sans); font-weight: var(--w-semibold); }
.p-wordmark i { display: block; width: var(--wm-tick); height: var(--wm-tick); background: var(--wm-tick-colour); border-radius: var(--wm-tick-radius); }
.p-wordmark::after { content: ""; display: block; width: var(--wm-rule); height: var(--hairline); background: var(--c-hairline-strong); }
.p-tabs { display: flex; gap: var(--s-4); }
.p-tab {
  color: var(--c-neutral); text-decoration: none; padding: var(--s-3) 0;
  border-bottom: var(--underline-state) solid transparent;
}
.p-tab.is-current { color: var(--c-ink); font-weight: var(--w-medium); border-bottom-color: var(--c-ink); }
.p-search { flex: 1; max-width: calc(var(--s-8) * 10); }
.p-search input {
  width: 100%; height: var(--row-h); padding: 0 var(--s-3);
  background: transparent; border: var(--hairline) solid var(--c-hairline); border-radius: var(--radius);
  color: var(--c-ink); font: var(--w-regular) var(--t-caption) var(--f-mono);
}
.p-search input::placeholder { color: var(--c-unknown); }
.p-health { margin-left: auto; position: relative; font: var(--w-regular) var(--t-caption) var(--f-mono); color: var(--c-neutral); }
.p-health-sum { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s-2); min-height: var(--touch); }
.p-health-sum::-webkit-details-marker { display: none; }
.p-health-dot { width: var(--s-2); height: var(--s-2); border-radius: 50%; background: var(--c-weakening); }
.p-health-pop {
  position: absolute; right: 0; top: 100%; z-index: 10;
  width: min(calc(var(--s-8) * 17), calc(100vw - var(--s-6)));
  background: var(--c-surface); border: var(--hairline) solid var(--c-hairline-strong); border-radius: var(--radius);
  padding: var(--s-4); display: grid; gap: var(--s-3);
}
.p-health-table { width: 100%; border-collapse: collapse; }
.p-health-table th { text-align: left; font-weight: var(--w-regular); color: var(--c-unknown); padding: var(--s-1) var(--s-2) var(--s-1) 0; }
.p-health-table td { padding: var(--s-1) var(--s-2) var(--s-1) 0; border-top: var(--hairline) solid var(--c-hairline); color: var(--c-ink); }
.p-health-table tr.is-gap td { color: var(--c-unknown); }
.p-health-notes li { color: var(--c-neutral); }
.p-health-notes li::before { content: "? "; color: var(--c-unknown); }
.p-fixture {
  max-width: var(--page-max); margin: 0 auto; padding: var(--s-2) var(--s-6);
  border-bottom: var(--hairline) solid var(--c-hairline);
}
.p-main { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--s-6) var(--s-8); }
.p-loading, .p-error { padding: var(--s-8) 0; color: var(--c-neutral); max-width: 60ch; }
.p-error { color: var(--c-weakening); }

/* labels */
.p-label, .p-label-inline {
  font: var(--w-semibold) var(--t-label) / 1 var(--f-sans);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--c-neutral);
}
.p-label { display: flex; justify-content: space-between; gap: var(--s-2); align-items: baseline; margin-bottom: var(--s-3); flex-wrap: wrap; }
.p-label-extra { font: var(--w-regular) var(--t-caption) var(--f-mono); letter-spacing: 0; text-transform: none; color: var(--c-unknown); }
.p-sublabel { font: var(--w-semibold) var(--t-label) / 1 var(--f-sans); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--c-unknown); margin: var(--s-4) 0 var(--s-2); }
.p-title { font: var(--w-semibold) var(--t-title) / 1 var(--f-sans); letter-spacing: var(--tr-state); }

/* ---------------- C01 StateLine ---------------- */
.c-01-state { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-6) 0 var(--s-1); }
.c-01-word {
  display: inline-flex; align-items: center; gap: var(--s-2) ;
  font: var(--w-semibold) var(--t-state) / 1 var(--f-sans);
  letter-spacing: var(--tr-state); text-transform: var(--case-state);
  position: relative;
  transition: opacity var(--m-state-in) var(--ease);
}
.c-01-dot { width: var(--dot-state); height: var(--dot-state); border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.c-01-state.fam-neutral .c-01-dot { background: transparent; border: var(--hairline) solid currentColor; }
.c-01-state.fam-evidence .c-01-word { color: var(--c-evidence); }
.c-01-state.fam-weakening .c-01-word { color: var(--c-weakening); }
.c-01-state.fam-neutral .c-01-word { color: var(--c-neutral); }
/* safety: at the full state size in its colour, or as a filled block with ground text when small */
.c-01-state.fam-safety .c-01-word { color: var(--c-safety); }
.c-01-state.fam-safety .c-01-dot { border-radius: 0; }
.c-01-state.is-compact.fam-safety .c-01-word { color: var(--c-on-safety); background: var(--c-safety); padding: var(--s-1) var(--s-2); }
.c-01-state.is-compact.fam-safety .c-01-dot { background: var(--c-on-safety); }
.c-01-since, .c-01-was { color: var(--c-neutral); }
.c-01-state.is-compact { padding: 0; gap: var(--s-1) var(--s-2); }
.c-01-state.is-compact .c-01-word { font-size: var(--t-caption); font-size: max(var(--t-caption), calc(var(--t-body) * 0.86)); }
.c-01-state.is-compact .c-01-dot { width: var(--dot-row); height: var(--dot-row); }
.c-01-state.is-compact .c-01-was { flex-basis: 100%; }
.c-01-state.is-leaving .c-01-word { opacity: 0; transition-duration: var(--m-state-out); }
.c-01-word::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--s-1) * -1.5);
  height: var(--underline-state); background: currentColor; transform: scaleX(0); transform-origin: left;
}
.c-01-state.is-changed .c-01-word::after { animation: c01-underline var(--m-underline) var(--ease) 1 forwards; }
@keyframes c01-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------- C02 HeroNumber ---------------- */
.c-02-hero { display: flex; align-items: baseline; gap: var(--s-2) var(--s-4); flex-wrap: wrap; padding: var(--s-3) 0 var(--s-1); }
.c-02-hero .c-field { display: contents; }
.c-02-num { font: var(--w-medium) var(--t-hero) / 1 var(--f-mono); letter-spacing: var(--tr-hero); }
.c-02-dir { font: var(--w-medium) calc(var(--t-hero) * 0.5) / 1 var(--f-mono); }
.c-02-label { font: var(--w-regular) var(--t-body) / var(--lh-tight) var(--f-sans); max-width: 28ch; }
.c-02-ref { font: var(--w-regular) var(--t-hero-ref) var(--f-mono); color: var(--c-neutral); }
.c-02-ref.is-missing { color: var(--c-unknown); }
.c-02-hero .c-03-fresh { flex-basis: 100%; order: 10; }

/* ---------------- C03 FreshnessCaption, and the null path ---------------- */
.c-field { display: inline-flex; flex-direction: column; gap: 0; }
.c-03-fresh { display: block; }
.num.is-stale { color: var(--c-stale); text-decoration: underline var(--stale-underline) var(--c-stale); text-underline-offset: 0.25em; }
.num.is-illus { color: var(--c-neutral); }
.c-null { color: var(--c-unknown); font: var(--w-regular) var(--t-caption) / var(--lh-caption) var(--f-mono); }
.c-null-mark {
  display: inline-block; min-width: var(--s-3); text-align: center; margin-right: var(--s-1);
  font: var(--w-medium) var(--t-caption) var(--f-mono); color: var(--c-unknown);
  background-image: repeating-linear-gradient(45deg, var(--c-hatch) 0 var(--hairline), transparent var(--hairline) calc(var(--s-1) + var(--hairline)));
}

/* ---------------- C04 NumberRow ---------------- */
.c-04-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--s-8) * 4), 1fr));
  border-top: var(--hairline) solid var(--c-hairline); border-bottom: var(--hairline) solid var(--c-hairline);
  margin: var(--s-3) 0;
}
.c-04-cell { padding: var(--s-2) var(--s-3) var(--s-2) 0; display: flex; flex-direction: column; }
.c-04-value .num { font: var(--w-medium) var(--t-row-value) / var(--lh-tight) var(--f-mono); }
.c-04-value .c-null { padding-top: var(--s-1); }
.c-04-key { order: -1; font: var(--w-regular) var(--t-caption) var(--f-sans); color: var(--c-neutral); }
.c-04-cell .c-field { order: 0; }

/* ---------------- C05 ClockStrip, and the shared strip ---------------- */
.c-05-clock { margin: var(--s-2) 0 var(--s-4); }
.c-05-box, .c-strip-box { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.c-strip { display: block; }
.c-strip text { font-family: var(--f-mono); }
.c-strip-tick { stroke: var(--c-hairline); stroke-width: 1; }
.c-strip-tick.is-minor { stroke-dasharray: var(--dash-minor); }
.c-strip-ticklabel { font-size: var(--t-caption); fill: var(--c-unknown); }
.c-strip-lane { font-size: var(--t-label); letter-spacing: var(--tr-lane); fill: var(--c-neutral); }
.c-strip-lane.is-you { fill: var(--c-user); }
.c-strip-base { stroke: var(--c-hairline-strong); stroke-width: 1; }
.c-strip-end { font-size: var(--t-caption); fill: var(--c-unknown); }
.c-strip-end.is-value { fill: var(--c-ink); font-size: var(--t-clock); }
.hatch-stroke { stroke: var(--c-hatch); stroke-width: var(--sw-hatch); }
.c-05-now { stroke: var(--c-ink); stroke-width: var(--sw-now); }
.c-05-now-label { font-size: var(--t-clock); font-weight: var(--w-medium); fill: var(--c-ink); }
.c-05-now-line { transition: transform 0ms steps(1, end); }
.c-05-price-line { fill: none; stroke: var(--c-neutral); stroke-width: 1; }
.c-05-price-read { fill: var(--c-ground); stroke: var(--c-ink); stroke-width: var(--sw-mark); }
.c-05-val { font-size: var(--t-caption); fill: var(--c-ink); }
.c-05-val.is-dim { fill: var(--c-neutral); }
.c-05-empty { font-size: var(--t-caption); fill: var(--c-unknown); }
.c-05-evlabel { font-size: var(--t-caption); fill: var(--c-neutral); }
.c-05-you { stroke: var(--c-user); stroke-width: var(--sw-mark); }
.c-05-youlabel { font-size: var(--t-caption); fill: var(--c-user); }
.c-05-since-entry { fill: var(--c-user); opacity: 0.06; }
.c-05-entry-bracket { fill: none; stroke: var(--c-user); stroke-width: 1; }
.c-05-state-change line { stroke: var(--c-neutral); stroke-width: 1; }
.c-05-state-label { font-size: var(--t-caption); fill: var(--c-neutral); }
.c-05-legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-2); }
.c-05-lg { font-family: var(--f-mono); }
/* glyphs: shape carries the kind, colour reinforces */
.g { stroke-width: var(--sw-mark); }
.g.fam-evidence { fill: var(--c-evidence); stroke: var(--c-evidence); }
.g.fam-weakening { fill: var(--c-weakening); stroke: var(--c-weakening); }
.g.fam-neutral { fill: none; stroke: var(--c-neutral); }
.g.fam-unknown { fill: none; stroke: var(--c-unknown); }
.g.fam-safety { fill: var(--c-safety); stroke: var(--c-safety); }
.g-ring, .g-triangle-open-down, .g-step-up, .g-check-box { fill: none !important; }
.g-step-up { stroke-width: var(--sw-strong); }
.g.is-landing, .is-landing { animation: land var(--m-land) ease-out 1; }
@keyframes land {
  from { outline: var(--hairline) solid currentColor; box-shadow: 0 0 0 var(--hairline) var(--c-evidence); }
  to { outline-color: transparent; box-shadow: 0 0 0 var(--hairline) transparent; }
}
/* mini strip on a Now row */
.c-05-miniwrap { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.c-05-mini { width: 100%; }
.c-05-mini-svg { display: block; }

/* ---------------- C06 LagBracket ---------------- */
.c-06-line { fill: none; stroke: var(--c-ink); stroke-width: 1; }
.c-06-line.is-dashed, .c-06-line.is-open { stroke-dasharray: var(--dash-open); }
.c-06-bg { fill: var(--c-ground); }
.c-06-label { font-size: var(--t-clock); font-weight: var(--w-medium); fill: var(--c-ink); }
.c-06-cap { margin-top: var(--s-1); }
.c-06-lag.is-empty, .c-09-lane.is-empty { color: var(--c-unknown); font: var(--w-regular) var(--t-caption) var(--f-mono); }

/* ---------------- C07 FlowBars ---------------- */
.c-07-bar.is-up { fill: var(--c-evidence-fill); }
.c-07-bar.is-down { fill: var(--c-weakening); }
.c-07-bar.is-latest { stroke: var(--c-evidence); stroke-width: 1; }
.c-07-val { font-size: var(--t-caption); fill: var(--c-ink); }
.c-07-net { margin-top: var(--s-2); display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; }
.c-07-k { color: var(--c-neutral); }

/* ---------------- C08 BulletBar ---------------- */
.c-08-bullet { display: grid; gap: var(--s-1); margin: var(--s-2) 0; }
.c-08-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.c-08-label { color: var(--c-neutral); }
.c-08-value { font: var(--w-medium) var(--t-row-value) var(--f-mono); }
.c-08-track { position: relative; height: var(--bullet-h); background: var(--c-tint); }
.c-08-bar { position: absolute; left: 0; top: calc((var(--bullet-h) - var(--bullet-bar)) / 2); height: var(--bullet-bar); background: var(--c-ink); }
.c-08-tick { position: absolute; top: 0; width: var(--bullet-tick); height: var(--bullet-h); background: var(--c-neutral); transform: translateX(-50%); }

/* ---------------- C09 LaneLine ---------------- */
.c-09-path { fill: none; stroke: var(--c-ink); stroke-width: var(--sw-line); opacity: 0.85; }
.c-09-point { fill: var(--c-ground); stroke: var(--c-ink); stroke-width: var(--sw-mark); }
.c-09-point.is-illus { stroke-dasharray: var(--dash-illus); }
.c-09-val { font-size: var(--t-caption); fill: var(--c-neutral); }

/* ---------------- C14 GapHatch ---------------- */
.c-14-rect { stroke: var(--c-hairline-strong); stroke-width: 1; }
.c-14-label, .c-15-label, .c-05-evlabel, .c-05-val, .c-09-val, .c-07-val, .c-05-youlabel, .c-05-state-label { paint-order: stroke; stroke: var(--c-ground); stroke-width: var(--sw-halo); stroke-linejoin: round; }
.c-14-label { font-size: var(--t-caption); fill: var(--c-neutral); }
.c-14-label.is-full { fill: var(--c-ink); }

/* ---------------- C15 SuspectPrint ---------------- */
.c-15-mark { fill: none; stroke: var(--c-weakening); stroke-width: var(--sw-mark); stroke-dasharray: var(--dash-illus); }
.c-15-strike { stroke: var(--c-weakening); stroke-width: 1; }
.c-15-label { font-size: var(--t-caption); fill: var(--c-neutral); }
.c-15-list li { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: baseline; padding: var(--s-1) 0; }
.c-15-glyph { color: var(--c-weakening); font-family: var(--f-mono); }

/* ---------------- C16 RefusalLine ---------------- */
.c-16-refusal li { display: grid; grid-template-columns: var(--s-4) 1fr; gap: var(--s-2); padding: var(--s-1) 0; }
.c-16-mark { font-family: var(--f-mono); color: var(--c-unknown); }
.c-16-refusal li.is-refused .c-16-text b { font-weight: var(--w-medium); }
.c-16-text b { font-weight: var(--w-medium); color: var(--c-ink); }
.c-16-text { color: var(--c-neutral); }

/* ---------------- C17 WaitingForLine ---------------- */
.c-17-sentence { font: var(--w-medium) var(--t-body) / var(--lh-body) var(--f-sans); }
.c-17-why { margin-top: var(--s-1); }
.c-17-waiting.is-compact { color: var(--c-neutral); font-size: var(--t-caption); font-size: max(var(--t-caption), calc(var(--t-body) * 0.9)); }
.c-17-waiting.is-compact b { color: var(--c-ink); font-weight: var(--w-medium); }
.c-17-k { color: var(--c-neutral); }

/* ---------------- C18 LightsRow ---------------- */
.c-18-lights { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--s-8) * 4), 1fr)); gap: var(--s-1) var(--s-4); }
.c-18-lights li { display: grid; grid-template-columns: var(--lights-dot) auto; column-gap: var(--s-2); align-items: center; }
.c-18-dot { width: var(--lights-dot); height: var(--lights-dot); border-radius: 50%; border: var(--hairline) solid var(--c-neutral); }
.c-18-lights li.is-lit .c-18-dot {
  border-color: var(--c-evidence);
  background: linear-gradient(to top, var(--c-evidence) var(--fill, 100%), transparent var(--fill, 100%));
}
.c-18-lights li.is-refused .c-18-dot { border-style: dashed; border-color: var(--c-unknown); background-image: repeating-linear-gradient(45deg, var(--c-hatch) 0 var(--hairline), transparent var(--hairline) calc(var(--s-1) - var(--hairline))); }
.c-18-name { font: var(--w-medium) var(--t-caption) var(--f-mono); }
.c-18-lights li.is-off .c-18-name, .c-18-lights li.is-refused .c-18-name { color: var(--c-unknown); }
.c-18-sub { grid-column: 2; }
.c-18-lights.is-snapshot { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------------- C22 MethodNote ---------------- */
.c-22-method summary { cursor: pointer; list-style: none; font: var(--w-regular) var(--t-caption) var(--f-mono); color: var(--c-neutral); }
.c-22-method summary::-webkit-details-marker { display: none; }
.c-22-how { text-decoration: underline dotted; text-underline-offset: 0.2em; color: var(--c-ink); }
.c-22-body { padding: var(--s-2) 0 var(--s-2) var(--s-3); border-left: var(--hairline) solid var(--c-hairline-strong); margin-top: var(--s-1); display: grid; gap: var(--s-1); color: var(--c-neutral); font-size: var(--t-caption); }

/* ---------------- C23 EndOfList ---------------- */
.c-23-end { padding: var(--s-4) 0; border-top: var(--hairline) solid var(--c-hairline-strong); display: grid; gap: var(--s-1); }
.c-23-line { font: var(--w-regular) var(--t-clock) var(--f-mono); color: var(--c-neutral); }

/* ---------------- situation room layout ---------------- */
.p-room-head {
  display: flex; align-items: baseline; gap: var(--s-2) var(--s-4); flex-wrap: wrap;
  padding: var(--s-4) 0 var(--s-3); border-bottom: var(--hairline) solid var(--c-hairline);
}
.p-symbol { font: var(--w-semibold) var(--t-title) / 1 var(--f-sans); letter-spacing: var(--tr-lane); }
.p-room-meta { color: var(--c-neutral); font: var(--w-regular) var(--t-clock) var(--f-mono); display: inline-flex; flex-wrap: wrap; gap: 0 var(--s-1); align-items: baseline; }
.p-room-meta .c-03-fresh { display: inline; }
.p-actions { margin-left: auto; display: flex; gap: var(--s-2); }
.p-btn {
  background: transparent; border: var(--hairline) solid var(--c-hairline-strong); border-radius: var(--radius);
  min-height: var(--row-h); min-width: var(--touch); padding: 0 var(--s-4);
  font: var(--w-medium) var(--t-caption) var(--f-sans); cursor: pointer;
}
.p-btn[aria-disabled="true"] { cursor: not-allowed; color: var(--c-neutral); }
.p-room-top {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--s-8);
  grid-template-areas: "read since" "why since" "wait since" "clock clock";
  grid-template-rows: auto auto 1fr auto;
}
.p-read { grid-area: read; min-width: 0; }
.p-area-why { grid-area: why; min-width: 0; align-self: start; }
.p-clock { grid-area: clock; min-width: 0; padding-top: var(--s-6); }
.p-area-since { grid-area: since; min-width: 0; border-left: var(--hairline) solid var(--c-hairline); padding: var(--s-6) 0 0 var(--s-6); }
.p-area-wait { grid-area: wait; min-width: 0; align-self: start; padding: var(--s-4) 0; }
.p-sentence { font: var(--w-regular) var(--t-sentence) / var(--lh-sentence) var(--f-sans); max-width: 72ch; padding: var(--s-2) 0; }
.p-sentence .cap { display: block; }
.p-why, .p-notes, .p-evsec, .p-since-more, .p-now-sec.is-cooling, .p-illus { border-bottom: var(--hairline) solid var(--c-hairline); }
.p-why > summary, .p-notes > summary, .p-evsec > summary, .p-since-more > summary, .p-now-sec.is-cooling > summary, .p-illus > summary {
  cursor: pointer; list-style: none; min-height: var(--touch); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-2) 0;
}
.p-why > summary::-webkit-details-marker, .p-notes > summary::-webkit-details-marker, .p-evsec > summary::-webkit-details-marker, .p-since-more > summary::-webkit-details-marker, .p-now-sec.is-cooling > summary::-webkit-details-marker, .p-illus > summary::-webkit-details-marker { display: none; }
.p-why > summary::after, .p-notes > summary::after, .p-evsec > summary::after, .p-now-sec.is-cooling > summary::after, .p-illus > summary::after {
  content: "+"; margin-left: auto; font: var(--w-regular) var(--t-sentence) var(--f-mono); color: var(--c-neutral);
}
.p-why[open] > summary::after, .p-notes[open] > summary::after, .p-evsec[open] > summary::after, .p-now-sec.is-cooling[open] > summary::after, .p-illus[open] > summary::after { content: "\2212"; }
.p-why-body, .p-notes-body { padding: 0 0 var(--s-4); display: grid; gap: var(--s-2); }
.p-evlist { display: grid; }
.p-evline { display: grid; grid-template-columns: calc(var(--s-8) * 3) var(--s-4) minmax(0, 1fr); gap: var(--s-2); padding: var(--s-1) 0; border-top: var(--hairline) solid var(--c-hairline); }
.p-evline time { color: var(--c-neutral); font-size: var(--t-caption); padding-top: var(--hairline); }
.p-glyph { font-family: var(--f-mono); text-align: center; }
.p-evcap { display: inline; }
.p-member { color: var(--c-user); }

/* since you looked */
.p-since-when { display: inline-flex; gap: 0 var(--s-1); align-items: baseline; color: var(--c-user); font: var(--w-medium) var(--t-caption) var(--f-mono); text-transform: none; letter-spacing: 0; flex-wrap: wrap; }
.p-since-when .c-03-fresh { display: inline; color: var(--c-unknown); }
.p-difflist { display: grid; }
.p-diff { display: grid; grid-template-columns: calc(var(--s-8) + var(--s-6)) var(--s-4) minmax(0, 1fr); gap: var(--s-2); padding: var(--s-2) 0; border-top: var(--hairline) solid var(--c-hairline); }
.p-diff:first-child { border-top: 0; }
.p-diff time { color: var(--c-neutral); font-size: var(--t-caption); padding-top: var(--hairline); }
.p-diff-g { font: var(--w-medium) var(--t-clock) var(--f-mono); text-align: center; color: var(--c-neutral); }
.p-diff.is-material .p-diff-g { color: var(--c-evidence); }
.p-diff.is-unknown .p-diff-g { color: var(--c-unknown); }
.p-diff-text .cap { display: block; }
.p-nochange { color: var(--c-neutral); }
.p-since-rule { margin-top: var(--s-2); }

.p-fold { margin: var(--s-6) 0 0; padding: var(--s-2) 0; border-top: var(--hairline) dashed var(--c-hairline-strong); font: var(--w-regular) var(--t-caption) var(--f-mono); color: var(--c-unknown); }
.p-evidence { display: grid; }
.p-evsec.is-lead { border-bottom-color: var(--c-hairline-strong); }
.p-evsec.is-lead > summary .p-evsec-title { color: var(--c-ink); }
.p-evsec-title { font: var(--w-semibold) var(--t-label) / 1 var(--f-sans); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--c-neutral); min-width: calc(var(--s-8) * 6); }
.p-evsec-reading { color: var(--c-ink); }
.p-evsec-body { padding: 0 0 var(--s-6); display: grid; gap: var(--s-3); max-width: calc(var(--s-8) * 28); }
.p-kv { width: 100%; border-collapse: collapse; }
.p-kv th { text-align: left; font-weight: var(--w-regular); color: var(--c-neutral); padding: var(--s-2) var(--s-4) var(--s-2) 0; vertical-align: top; width: 46%; border-bottom: var(--hairline) solid var(--c-hairline); }
.p-kv td { padding: var(--s-2) 0; vertical-align: top; border-bottom: var(--hairline) solid var(--c-hairline); }
.p-kv td .num { font: var(--w-medium) var(--t-body) var(--f-mono); }
.p-kv-note { display: block; }
.p-kv th, .p-kv td { overflow-wrap: anywhere; }
.p-notes-list li { color: var(--c-neutral); padding: var(--s-1) 0; }
.p-notes-list li::before { content: "? "; font-family: var(--f-mono); color: var(--c-unknown); }

/* ---------------- Now list ---------------- */
.p-weather { display: flex; gap: var(--s-2) var(--s-6); flex-wrap: wrap; align-items: baseline; padding: var(--s-3) 0; border-bottom: var(--hairline) solid var(--c-hairline); color: var(--c-neutral); }
.p-now-head { padding: var(--s-6) 0 var(--s-3); display: grid; gap: var(--s-2); }
.p-now-sec { padding-top: var(--s-6); }
.p-rows { border-top: var(--hairline) solid var(--c-hairline-strong); }
.p-row {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 2.6fr) minmax(0, 1.9fr);
  gap: 0 var(--s-4); padding: var(--s-3) 0; border-bottom: var(--hairline) solid var(--c-hairline); min-height: calc(var(--s-8) * 2);
}
.p-row-sym { font: var(--w-semibold) var(--t-body) var(--f-sans); letter-spacing: var(--tr-lane); }
.p-row-id { display: flex; flex-direction: column; }
.p-row-num { display: flex; flex-direction: column; gap: var(--s-1); }
.p-row-cap .num { font: var(--w-medium) var(--t-list-hero) / 1 var(--f-mono); }
.p-row-chg .num { font: var(--w-medium) var(--t-clock) var(--f-mono); }
.p-row-why { display: grid; gap: var(--s-1); }
.p-row-whynow { font: var(--w-regular) var(--t-body) / var(--lh-body) var(--f-sans); }
.p-row-whynow .cap, .p-row-whynow .c-03-fresh { display: inline; }
.p-row-changes .c-03-fresh { display: inline; }
.p-row.is-illus .p-row-sym { color: var(--c-neutral); }

/* ---------------- hold ---------------- */
.p-hold-badge { font: var(--w-medium) var(--t-caption) var(--f-mono); color: var(--c-user); border: var(--hairline) solid var(--c-user); padding: var(--s-1) var(--s-2); }
.p-hold-head { padding: var(--s-4) 0; display: grid; gap: var(--s-3); }
.p-hold-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--s-8) * 5), 1fr)); border-top: var(--hairline) solid var(--c-hairline); border-bottom: var(--hairline) solid var(--c-hairline); }
.p-hold-facts > div { padding: var(--s-2) var(--s-3) var(--s-2) 0; }
.p-hold-facts dt { font: var(--w-regular) var(--t-caption) var(--f-sans); color: var(--c-neutral); }
.p-hold-facts dd .num { font: var(--w-medium) var(--t-row-value) var(--f-mono); }
.p-hold-facts dd .c-03-fresh { display: block; }
.p-hold-state .c-01-state { padding: var(--s-1) 0 0; }
.p-lights-pair { grid-template-columns: repeat(auto-fit, minmax(calc(var(--s-8) * 9), 1fr)); column-gap: var(--s-8); }
.p-diffcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.p-hold-diff { padding-top: var(--s-6); }
.p-hold-alerts { padding: var(--s-4) 0; border-top: var(--hairline) solid var(--c-hairline); display: grid; gap: var(--s-1); }
.p-roomlink { padding: var(--s-4) 0; }

/* ---------------- board ---------------- */
.p-subtabs { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); border-bottom: var(--hairline) solid var(--c-hairline); padding-bottom: var(--s-2); }
.p-subtabs a { text-decoration: none; color: var(--c-neutral); min-height: var(--touch); display: inline-flex; align-items: center; }
.p-board-sec { padding-top: var(--s-6); }
.p-brow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 4fr); gap: 0 var(--s-4); padding: var(--s-3) 0; border-bottom: var(--hairline) solid var(--c-hairline); }
.p-brow-id { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.p-brow-id .c-03-fresh { display: inline; }
.p-brow-changes { display: grid; gap: var(--s-1); }
.p-brow-count .c-03-fresh { display: inline; }
.p-brow-top li::before { content: "+ "; font-family: var(--f-mono); color: var(--c-evidence); }
.p-brow-intact::before { content: "= "; font-family: var(--f-mono); color: var(--c-neutral); }

/* ---------------- gallery ---------------- */
.g-toc { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font: var(--w-regular) var(--t-caption) var(--f-mono); }
.g-comp { padding: var(--s-8) 0 var(--s-4); border-bottom: var(--hairline) solid var(--c-hairline-strong); }
.g-head { overflow-wrap: anywhere; display: grid; gap: var(--s-1); margin-bottom: var(--s-4); }
.g-head h2 { font: var(--w-semibold) var(--t-sentence) var(--f-sans); }
.g-id { font-family: var(--f-mono); color: var(--c-user); margin-right: var(--s-2); }
.g-cls { font-size: var(--t-caption); color: var(--c-unknown); }
.g-rule { color: var(--c-neutral); max-width: 90ch; }
.g-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.g-comp.is-wide .g-cells { grid-template-columns: minmax(0, 1fr); }
.g-cell { min-width: 0; border-top: var(--hairline) solid var(--c-hairline); padding-top: var(--s-2); }
.g-cell-head { margin-bottom: var(--s-2); }
.g-motion-body { display: grid; gap: var(--s-3); justify-items: start; }
.g-motion-body .c-05-clock { width: 100%; }
.g-motion-item { padding: var(--s-2); }

/* index */
.p-walk { display: grid; gap: var(--s-4); max-width: calc(var(--s-8) * 26); padding-top: var(--s-6); }
.p-walk h2 { margin-top: var(--s-4); }
.p-walk li { margin-left: var(--s-4); list-style: disc; padding: var(--s-1) 0; }

/* ---------------- phone: under 900 px (A's phone sizes live in tokens.css) ---------------- */
@media (max-width: 900px) {
  .p-bar { gap: var(--s-3); padding: 0 var(--s-4); flex-wrap: wrap; }
  .p-search { order: 5; flex-basis: 100%; max-width: none; padding-bottom: var(--s-2); }
  .p-tab { min-height: var(--touch); display: inline-flex; align-items: center; }
  .p-main, .p-fixture { padding-left: var(--s-4); padding-right: var(--s-4); }
  .p-room-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "read" "why" "clock" "since" "wait"; grid-template-rows: none; }
  .p-area-wait { border-top: var(--hairline) solid var(--c-hairline); }
  .p-area-since { border-left: 0; padding: var(--s-4) 0 0; border-top: var(--hairline) solid var(--c-hairline); }
  .p-actions { margin-left: 0; width: 100%; }
  .p-btn { flex: 1; min-height: var(--touch); }
  .p-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id num" "state state" "why why" "clock clock"; gap: var(--s-2) var(--s-3); }
  .p-row-id { grid-area: id; } .p-row-num { grid-area: num; text-align: right; align-items: flex-end; }
  .p-row-state { grid-area: state; } .p-row-why { grid-area: why; } .p-row-clock { grid-area: clock; }
  .p-brow { grid-template-columns: minmax(0, 1fr) auto; }
  .p-brow-changes { grid-column: 1 / -1; }
  .p-diffcols { grid-template-columns: minmax(0, 1fr); }
  .g-cells { grid-template-columns: minmax(0, 1fr); }
  .p-evsec-title { min-width: 0; flex-basis: 100%; }
  .c-04-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c-04-cell.is-desk-only { display: none; }
  .p-evline { grid-template-columns: calc(var(--s-8) * 2) var(--s-4) minmax(0, 1fr); }
  .p-kv th { width: 40%; }
}
@media (max-width: 480px) {
  .p-evline time { font-size: var(--t-caption); }
  .p-health-pop { right: calc(var(--s-4) * -1); }
}

/* prefers-reduced-motion: the three motions become instant (tokens set durations to 0 ms; this is the guard) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; }
}