/* Fonts served from this site (SIL OFL, see fonts/OFL-*.txt): no request to Google, no visitor IP shared. */
@font-face { font-family: "Commissioner"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/commissioner-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Commissioner"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/commissioner-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* 6529 LFG, the 6529 chain explorer. Night-sky dial, parchment marks, one gilt hand. */
:root {
  --night: #0c1624;
  --vault: #13223a;
  --rim: #23395a;
  --rim-2: #34507a;
  --parchment: #efe6cd;
  --parchment-dim: rgba(239, 230, 205, 0.58);
  --haze: #98a6ba;
  --gilt: #d9b45c;
  --ok: #4cc08f;
  --warn: #f2aa3e;
  --bad: #ec6a5e;
  --mid: #9db4d6;
  /* block marks: final = settled, pending = not final yet */
  --c-final: #efe6cd;
  --c-pending: #8fb3e3;
  --c-nodata: rgba(52, 80, 122, 0.22);
  --sans: "Commissioner", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --wrap: 1180px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0;
  color: var(--parchment);
  font: 400 16px/1.55 var(--sans);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 18% -10%, rgba(52, 80, 122, 0.35), transparent 60%),
    var(--night);
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gilt); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: var(--vault); padding: 8px 12px; z-index: 10; }
.muted { color: var(--haze); }
.small { font-size: 13px; }
.mono, code { font-family: var(--mono); font-size: 0.86em; }
h1, h2, h3 { font-weight: 650; letter-spacing: -0.015em; margin: 0; }

/* ---------- top bar ---------- */
.top {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px 24px 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 26px; height: 26px; flex: 0 0 26px; }
.brand-name { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  text-decoration: none; color: var(--haze); padding: 6px 10px; border-radius: 8px; font-size: 15px;
}
.nav a:hover { color: var(--parchment); }
.nav a[aria-current] { color: var(--parchment); background: var(--vault); }
.burger { display: none; }
.tabbar { display: none; }
.search { flex: 1 1 220px; max-width: 400px; margin-left: auto; }
.search input {
  width: 100%; font: inherit; font-size: 14px; color: var(--parchment);
  background: var(--vault); border: 1px solid var(--rim); border-radius: 10px; padding: 8px 12px;
}
.search input::placeholder { color: var(--haze); }
.search { position: relative; }
/* suggestions under the search box: what it would open, with a word on what's there */
.search-pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--vault); border: 1px solid var(--rim); border-radius: 12px; padding: 6px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45); max-height: min(70vh, 470px); overflow-y: auto;
}
.search-pop[hidden] { display: none; }
.sug { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 8px; color: var(--parchment); text-decoration: none; }
.sug[aria-selected="true"] { background: rgba(143, 179, 227, 0.13); }
.sug-ico { flex: none; width: 28px; height: 28px; display: grid; place-items: center; }
.sug-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sug-t { font-size: 14px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.sug-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-t b { color: var(--gilt); font-weight: 600; }
.sug-s { font-size: 12.5px; color: var(--haze); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-note { padding: 8px 10px; font-size: 12.5px; color: var(--haze); line-height: 1.45; }
.sug + .sug-note { border-top: 1px solid var(--rim); margin-top: 4px; padding-top: 10px; }
.ico-block { width: 14px; height: 18px; border-radius: 3px; background: var(--c-pending); }
.ico-slot { width: 14px; height: 18px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--gilt); }
.ico-epoch { width: 24px; height: 14px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--c-pending) 0 2px, transparent 2px 3px); }
.ico-day { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ok); }
.ico-addr { font: 600 11px var(--mono); font-style: normal; color: var(--haze); }
.ico-page { width: 16px; height: 12px; border: 1.5px solid var(--haze); border-radius: 3px; }
.top-end { display: flex; align-items: center; gap: 14px; }
.top-end:not(:has(> :not([hidden]))) { display: none; }
/* the name with its two status badges under it: test chain, and whether data are live */
/* the badges hang under the name (no height of their own), so the name lines up with the menu;
   they still count for the width, so they never run under the menu */
.brand-badges { display: flex; align-items: flex-start; gap: 5px; height: 0; transform: translateY(5px); }
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid; font-size: 10.5px; font-weight: 600; line-height: 1.35; white-space: nowrap;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.live { color: var(--ok); border-color: rgba(76, 192, 143, 0.5); background: rgba(76, 192, 143, 0.1); }
.live.is-stale { color: var(--warn); border-color: rgba(242, 170, 62, 0.55); background: rgba(242, 170, 62, 0.12); }
.live.is-waiting { color: var(--haze); border-color: var(--rim-2); background: none; }
.lang { display: flex; border: 1px solid var(--rim); border-radius: 8px; overflow: hidden; }
.lang[hidden] { display: none; }
.lang button {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--haze); background: none; border: 0; padding: 4px 9px; cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--rim); color: var(--parchment); }
.demo-banner {
  max-width: var(--wrap); margin: 0 auto 8px; padding: 10px 24px; color: var(--gilt); font-size: 14px;
}

.stale-banner {
  max-width: calc(var(--wrap) - 48px); margin: 0 auto 12px; padding: 12px 16px; border-radius: 10px;
  background: rgba(242, 170, 62, 0.12); border: 1px solid rgba(242, 170, 62, 0.45); color: var(--warn); font-size: 15px;
}
.stale-banner[hidden] { display: none; }

/* ---------- layout ---------- */
main { max-width: var(--wrap); margin: 0 auto; padding: 8px 24px 64px; }
main:focus { outline: none; }
.band { margin-top: 64px; }
.band-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.band-head h2 { font-size: 21px; }
.band-head p { margin: 0; max-width: 64ch; font-size: 15px; }
.more { color: var(--gilt); font-size: 15px; text-decoration: none; }
.more:hover { text-decoration: underline; }
.split { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; }
.split > .band { margin-top: 64px; }
.sub-h { font-size: 21px; margin: 40px 0 14px; }

/* ---------- hero ---------- */
/* Two columns of equal height. Left: epoch row (92px), dial, legend. Right mirrors it: head level with the
   epoch squares, month switch / hour axis level with the epoch caption, calendar over the dial, legends on one line. */
.hero {
  display: grid;
  grid-template-columns: minmax(300px, 470px) 1fr;
  gap: 56px;
  align-items: stretch;
  padding-top: 24px;
}
.hero-dial { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.epoch-now { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 92px; flex: none; width: 100%; }
/* as wide as the ring: outer diameter 2 x 176 of the dial's 448-unit viewBox */
.epoch-now .epoch-big { width: calc(100% * 352 / 448); max-width: none; --g: 6px; gap: var(--g); position: relative; }
/* one gold frame over the running epoch's squares: it slides on to the next slot when one fills up,
   and the slot it leaves glows for a moment */
.slot-frame, .slot-glow {
  position: absolute; top: 0; bottom: 0; pointer-events: none; border-radius: 6px;
  width: calc((100% - 7 * var(--g)) / 8);
  left: calc((100% - 7 * var(--g)) / 8 * var(--i) + var(--g) * var(--i));
}
.slot-frame { box-shadow: inset 0 0 0 2px var(--gilt); transition: left 0.38s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; }
.slot-frame.on-solid { box-shadow: inset 0 0 0 2px var(--gilt), inset 0 0 0 4px var(--night); }
.slot-glow { box-shadow: 0 0 16px 4px rgba(143, 179, 227, 0.5); opacity: 0; animation: slot-glow 1.1s ease-in-out forwards; }
@keyframes slot-glow { 40% { opacity: 1; } }
.epoch-slide .cell-now::after, .epoch-slide .cell.is-now::after { display: none; }
.epoch-now .epoch-big .cell { height: 42px; border-radius: 6px; }
/* level with the Days heading (42 px row), as wide as the squares under it */
.epoch-cap { width: calc(100% * 352 / 448); min-height: 42px; margin: 0; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--haze); font-variant-numeric: tabular-nums; }
.epoch-cap h2 { font-size: 21px; color: var(--parchment); }
.epoch-cap .epoch-pos { margin-left: auto; }
.epoch-ghost { position: fixed; z-index: 30; margin: 0; max-width: none !important; pointer-events: none; transform-origin: 50% 50%; gap: 6px; }
.epoch-ghost .cell { height: 42px; border-radius: 6px; }
.epoch-enter { animation: epoch-enter 0.5s ease-out; }
@keyframes epoch-enter { from { opacity: 0; transform: translateY(-6px); } }
.dial { margin: 0; width: 100%; }
.dial svg { width: 100%; height: auto; display: block; overflow: visible; }
.dial-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; min-height: 20px; color: var(--haze); font-size: 13px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.sw-pending { background: var(--c-pending); }
.sw-final { background: var(--c-final); }
.sw-nodata { background: var(--c-nodata); box-shadow: inset 0 0 0 1px rgba(52, 80, 122, 0.6); }
.seg-current .seg-track { fill: rgba(217, 180, 92, 0.28); opacity: 1; }
.landing { opacity: 0; }
.landed path { animation: land 2.2s ease-out; }
@keyframes land {
  0%, 35% { fill: var(--gilt); opacity: 1; filter: drop-shadow(0 0 5px rgba(217, 180, 92, 0.95)); }
  100% { filter: none; }
}
.impact {
  position: fixed; z-index: 31; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  border: 2px solid var(--gilt); pointer-events: none; animation: impact 0.9s ease-out forwards;
}
@keyframes impact { from { transform: scale(0.4); opacity: 1; } to { transform: scale(5); opacity: 0; } }
.seg-track { fill: var(--rim); opacity: 0.42; }
.seg-future { fill: none; stroke: var(--rim); stroke-width: 1; opacity: 0.7; }
.seg-unknown { fill: var(--c-nodata); }
.seg-final { fill: var(--c-final); }
.seg-pending { fill: var(--c-pending); }
.dial g.ep:hover { filter: brightness(1.35); }
.tick { stroke: var(--rim-2); stroke-width: 1.2; }
.tick-long { stroke: var(--haze); stroke-width: 1.6; }
.tick-label { fill: var(--haze); font: 500 12px var(--sans); text-anchor: middle; dominant-baseline: middle; }
.hand { transition: opacity 0.4s ease; }
.is-landing .hand { opacity: 0.12; }
.hand line { stroke: var(--gilt); stroke-width: 2.5; stroke-linecap: round; }
.hand circle { fill: var(--gilt); }
.dial-center { text-decoration: none; }
.dial-num { fill: var(--parchment); font: 700 54px var(--sans); letter-spacing: -0.03em; text-anchor: middle; }
.dial-label { fill: var(--haze); font: 400 14px var(--sans); text-anchor: middle; }
.dial-ago { fill: var(--gilt); font: 500 14px var(--sans); text-anchor: middle; }
.dial-day { fill: var(--haze); font: 500 14px var(--sans); letter-spacing: 0.01em; text-anchor: middle; }
.dial-day-link:hover .dial-day { fill: var(--parchment); }
.dial-center:hover .dial-num { fill: #fff; }

.status-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.learn-link { color: var(--gilt); font-size: 14px; text-decoration: none; }
.learn-link:hover { text-decoration: underline; }
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px 32px; margin: 0 0 14px; }
.board-cell { border-top: 1px solid var(--rim); padding-top: 12px; margin: 0; }
.board-cell dt { color: var(--haze); font-size: 13px; }
.board-cell dd { margin: 0; }
.v-warn { color: var(--warn); }
.v-ok { color: var(--ok); }
.v-bad { color: var(--bad); }
.board-v { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; margin-top: 4px !important; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.board-v .level { font-size: 14px; letter-spacing: 0; }
.status-help .tag { margin-bottom: 4px; }
.verdict h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.025em; max-width: 20ch; margin: 14px 0 14px; }
.lede { font-size: 19px; line-height: 1.5; margin: 0 0 10px; }
.lede .line { display: block; }
.ago-fixed { font-variant-numeric: tabular-nums; }
.explain { color: var(--haze); margin: 0 0 24px; }
.tag {
  display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; font-weight: 600;
  padding: 4px 11px 4px 8px; border-radius: 999px; border: 1px solid currentColor;
}
.tag svg { width: 16px; height: 16px; }
.tag.inline { margin-left: 8px; font-size: 13px; vertical-align: 2px; }
.tag-ok { color: var(--ok); }
.tag-warn { color: var(--warn); }
.tag-bad { color: var(--bad); }
.tag-info { color: var(--mid); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 28px; margin: 22px 0 0; }
.fact { border-top: 1px solid var(--rim); padding-top: 10px; }
.fact dt { color: var(--haze); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.fact dd { margin: 2px 0 0; font-size: 17px; }
.fact .sub, .sub { display: block; color: var(--haze); font-size: 13px; }
.hint {
  position: relative; display: inline-flex; align-items: center; vertical-align: -2px; width: 15px; height: 15px;
  color: var(--haze); cursor: help; margin-left: 4px;
}
.hint svg { width: 15px; height: 15px; }
.hint:hover, .hint:focus { color: var(--gilt); outline: none; }
.hint:hover::after, .hint:focus::after {
  content: attr(data-tip); position: absolute; left: -10px; top: calc(100% + 8px);
  width: max-content; max-width: 300px; background: var(--vault); border: 1px solid var(--rim-2);
  color: var(--parchment); padding: 10px 12px; border-radius: 10px; font: 400 13px/1.45 var(--sans);
  letter-spacing: 0; text-transform: none; white-space: normal; text-align: left; z-index: 40;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.hint.tip-left:hover::after, .hint.tip-left:focus::after { left: auto; right: -10px; }
h2 .hint { vertical-align: 1px; }
h1 .hint { vertical-align: 0.35em; margin-left: 10px; width: 18px; height: 18px; }
h1 .hint svg { width: 18px; height: 18px; }

/* ---------- the strip, by epochs ---------- */
.strip { display: grid; grid-template-columns: repeat(15, 1fr); gap: 14px; }
.epoch-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.epoch { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.strip .epoch { background: rgba(35, 57, 90, 0.32); padding: 4px; border-radius: 6px; }
.epoch-no { font-size: 11px; color: var(--haze); height: 14px; padding-left: 4px; }
.epoch-no.is-cur { color: var(--parchment); }
.cell { display: block; height: 42px; border-radius: 3px; position: relative; }
.cell:hover, .cell:focus-visible { outline: 2px solid var(--gilt); outline-offset: 1px; z-index: 1; }
.cell-block { background: var(--c-pending); }
.cell-final { background: var(--c-final); }
.cell-empty { background: var(--rim-2); }
.cell-unknown { background: var(--c-nodata); }
.cell-future { background: none; box-shadow: inset 0 0 0 1px rgba(52, 80, 122, 0.45); }
/* The running slot fills with pale blue as its 30 seconds pass, inside its gold frame. When it is over and
   its result is still on the way (results reach the site a few seconds late) it stays full and breathes.
   Then it settles: the pale fill fades into a blue block (or the gold checkpoint), or drains to an empty slot. */
.cell { overflow: hidden; transition: background-color 0.6s ease; }
.cell::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; pointer-events: none;
  background: rgba(143, 179, 227, 0); box-shadow: inset 0 1px 0 rgba(196, 216, 242, 0);
  transition: height 0.8s cubic-bezier(0.55, 0, 0.8, 0.2), background-color 0.6s ease, box-shadow 0.4s ease;
}
.cell-now::before, .cell-pending::before { background: rgba(143, 179, 227, 0.26); box-shadow: inset 0 1px 0 rgba(196, 216, 242, 0.85); }
.cell-now::before { height: 100%; animation: slot-fill var(--slot-ms, 30s) linear var(--slot-at, 0s) both; }
@keyframes slot-fill { from { height: 0; } to { height: 100%; } }
.cell-now::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--gilt); pointer-events: none; }
.cell-pending { background: none; box-shadow: inset 0 0 0 1px rgba(143, 179, 227, 0.55); }
.cell-pending::before { height: 100%; animation: slot-wait 2.4s ease-in-out var(--wait-at, 0s) infinite; }
@keyframes slot-wait { 50% { opacity: 0.4; } }
.cell-block::before, .cell-final::before { height: 100%; }
.cell-empty::before { background: rgba(143, 179, 227, 0.26); }
/* the gold frame stays on the running slot whatever has already come in for it (a block, say) */
.cell.is-now::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--gilt), inset 0 0 0 4px var(--night);
}
/* the frame held on a slot still waiting for its result (or not started by this device's clock) */
.cell-pending.is-now::after, .cell-future.is-now::after { box-shadow: inset 0 0 0 2px var(--gilt); }
.day-chain { margin: 8px 0 40px; }
.day-strip { position: relative; padding-bottom: 22px; }
.day-strip .dl-axis { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; }
@keyframes breathe { 50% { box-shadow: inset 0 0 0 2px rgba(217, 180, 92, 0.25); } }
.cell.is-cp { background: var(--gilt); }
.cp-inline { display: inline-flex; align-items: center; gap: 8px; }
.cp-inline .cell { width: 12px; height: 18px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; color: var(--haze); font-size: 13px; }
.lg { display: inline-flex; align-items: center; gap: 8px; }
.lg .cell { width: 12px; height: 18px; animation: none; }
.lg .cell::before { animation: none; }
.lg .cell-now::before { height: 50%; }

/* the current epoch in the hero */
.now-epoch { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.epoch-big { max-width: 240px; gap: 4px; }
.epoch-big .cell { height: 26px; border-radius: 4px; }


/* ---------- days & blocks ---------- */
.days, .blocks, .transfers { list-style: none; margin: 0; padding: 0; }
.day-row, .block-row {
  display: grid; align-items: center; gap: 14px; text-decoration: none; padding: 11px 6px;
  border-bottom: 1px solid var(--rim); border-radius: 4px;
}
.day-row:hover, .block-row:hover { background: rgba(35, 57, 90, 0.35); }
.day-row { grid-template-columns: 92px 1fr 52px; row-gap: 6px; }
.day-meta { grid-column: 2 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.day-date { font-weight: 600; }
.day-pct { text-align: right; }
.block-row { grid-template-columns: 96px 1fr auto auto; }
.b-height { font-weight: 650; }
.b-state { font-size: 13px; color: var(--warn); }
.b-state.is-final { color: var(--ok); }
.transfer-row { display: flex; gap: 14px; padding: 10px 6px; border-bottom: 1px solid var(--rim); }
.tx-amount { font-weight: 600; min-width: 90px; }
.empty { color: var(--haze); max-width: 46ch; }

.wbar { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--rim); }
.wbar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--parchment); }
.wbar-tick { position: absolute; top: -3px; bottom: -3px; width: 1.5px; background: var(--gilt); opacity: 0.8; transform: translateX(-0.75px); }
.wbar-big { height: 16px; border-radius: 8px; }
.wbar-big .wbar-fill { border-radius: 8px; }
.wbar-big .wbar-tick { top: -5px; bottom: -5px; background: var(--gilt); }
.weight-figure { margin: 28px 0 8px; }
.weight-scale { position: relative; height: 22px; font-size: 13px; color: var(--gilt); }
.weight-scale span { position: absolute; top: 6px; white-space: nowrap; }
/* the ½ mark's label ends at its line, the ⅔ label starts at its line: they never overlap */
.weight-scale span:first-child { transform: translateX(calc(-100% - 6px)); }
.weight-scale span:last-child { transform: translateX(6px); }

.level { font-size: 13px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.level-ok { color: var(--ok); }
.level-mid { color: var(--mid); }
.level-warn { color: var(--warn); }

/* ---------- days panel (right of the dial) ---------- */
.dp-head { gap: 14px; }
.dp-head .more { margin-left: auto; }
.seg { display: inline-flex; border: 1px solid var(--rim); border-radius: 8px; overflow: hidden; }
.seg button { font: inherit; font-size: 13px; color: var(--haze); background: none; border: 0; padding: 4px 11px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--rim); color: var(--parchment); }
.seg button:hover { color: var(--parchment); }
/* calendar: one month, 6 weeks, rings sized to the dial's height */
.days-panel { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dp-top { flex: none; display: flex; flex-direction: column; }
.dp-top .dp-head { min-height: 42px; margin: 0; align-items: center; flex-wrap: wrap; row-gap: 8px; }
/* list: the days share the height left of the head, so switching modes never changes the page height */
.list-body { flex: 1 1 0; min-height: 0; container-type: size; display: flex; flex-direction: column; }
.list-body .dp-axis { flex: none; padding: 6px 6px 2px; }
.list-body .daylines { flex: 1; min-height: 0; }
.list-body .dayline:not(.dp-axis) { flex: 1 1 0; min-height: 0; padding-top: 0; padding-bottom: 0; align-content: center; }
@container (max-height: 470px) {
  .list-body .dl-date small { display: none; }
  .list-body .dayline { row-gap: 3px; }
}
@container (max-height: 380px) { .list-body .daylines > .dayline:nth-child(n + 6) { display: none; } }
.dp-head .cal-nav { margin-left: auto; }
.cal-legend .dp-all { margin-left: auto; }
.days-panel { container-type: inline-size; }
/* narrow panel: keep the calendar head on one line ("All days" is also in the top menu) */
@container (max-width: 580px) {
  .dp-top.is-cal .more { display: none; }
  /* a month of this year without its year, and a little less space around, so the head stays on one line */
  .cal-y.is-this { display: none; }
  .days-panel .dp-head { column-gap: 10px; }
  .days-panel .cal-nav { gap: 2px; }
  .days-panel .cal-month { min-width: 4.5em; }
}
@container (max-width: 360px) {
  .days-panel .seg button { padding: 4px 8px; }
  .days-panel .cal-arrow { width: 24px; height: 24px; }
}
.cal-body { flex: 1 1 0; min-height: 0; contain: size; display: flex; flex-direction: column; }
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 8px; padding: 6px 0 4px; }
.cal-wd { font-size: 12px; color: var(--haze); text-align: center; text-transform: lowercase; }
.cal-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 2px 8px; }
.cal-cell { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; border-radius: 10px; }
.cal-cell.is-other { opacity: 0.4; }
.cal-cell.is-future { opacity: 0.35; }
.cal-cell.is-future.is-other { opacity: 0.18; }
a.cal-cell:hover .mr, a.cal-cell:focus-visible .mr { filter: brightness(1.3); }
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-month { min-width: 8.5em; text-align: center; font-weight: 600; font-size: 15px; color: var(--parchment); }
.cal-arrow { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--rim); border-radius: 8px; background: none; color: var(--haze); cursor: pointer; }
.cal-arrow svg { width: 14px; height: 14px; }
.cal-arrow:hover:not(:disabled) { color: var(--parchment); border-color: var(--haze); }
.cal-arrow:disabled { opacity: 0.35; cursor: default; }
.cal-back { margin-left: 10px; font: inherit; font-size: 13px; color: var(--gilt); background: none; border: 0; padding: 0; cursor: pointer; }
.cal-back:hover { text-decoration: underline; }
.mr { width: 100%; height: 100%; display: block; overflow: visible; }
.mr-ttrack { fill: none; stroke: rgba(52, 80, 122, 0.45); stroke-width: 2.5; }
.mr-base { fill: none; stroke: rgba(35, 57, 90, 0.35); }
.mr-track { fill: rgba(35, 57, 90, 0.45); }
.mr-nodata { fill: var(--c-nodata); }
.mr-final { fill: var(--c-final); }
.mr-pending { fill: var(--c-pending); }
.mr-tdh { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.mr-ok { stroke: var(--ok); }
.mr-mid { stroke: var(--mid); }
.mr-warn { stroke: var(--warn); }
.mr-hand { stroke: var(--gilt); stroke-width: 1.6; stroke-linecap: round; }
.mr-num { fill: var(--haze); font: 600 9px var(--sans); text-anchor: middle; }
.mr-num.is-today { fill: var(--gilt); }
.cal-legend { display: flex; align-items: center; gap: 18px; min-height: 20px; flex: none; color: var(--haze); font-size: 13px; }
.sw-arc { width: 14px; height: 4px; border-radius: 2px; background: var(--ok); }
.daylines { display: flex; flex-direction: column; }
.dayline {
  display: grid; grid-template-columns: 92px 1fr 76px; column-gap: 14px; row-gap: 6px; align-items: center;
  text-decoration: none; padding: 10px 6px; border-bottom: 1px solid var(--rim); border-radius: 4px;
}
a.dayline:hover { background: rgba(35, 57, 90, 0.35); }
.dp-axis { padding-top: 0; padding-bottom: 2px; border-bottom: 0; }
.dl-date { font-weight: 600; font-size: 15px; display: flex; flex-direction: column; line-height: 1.25; }
.dl-date small { font-weight: 400; color: var(--haze); font-size: 12px; }
.dl-strip { display: block; height: 22px; position: relative; }
.ds { display: block; width: 100%; height: 100%; overflow: visible; }
.ds-base { stroke: var(--rim); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ds-track { fill: rgba(35, 57, 90, 0.45); }
.ds-nodata { fill: var(--c-nodata); }
.ds-final { fill: var(--c-final); }
.ds-pending { fill: var(--c-pending); }
.ds-now { stroke: var(--gilt); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ds-empty { position: absolute; inset: 0; display: flex; align-items: center; font-size: 12px; color: var(--haze); border-bottom: 1px dashed var(--rim); }
.dl-fill { text-align: right; display: flex; flex-direction: column; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dl-fill strong { font-weight: 650; }
.dl-fill small { color: var(--haze); font-size: 12px; }
.dl-tdh { grid-column: 2 / -1; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dl-tdh .wbar { flex: 1; height: 5px; }
.dl-tdh .wbar-tick { top: -2px; bottom: -2px; }
.dl-tdh .level { font-size: 12px; padding: 1px 8px; min-width: 92px; text-align: center; }
.dl-tdh-v { color: var(--haze); min-width: 72px; text-align: right; }
.dl-axis { position: relative; display: block; height: 14px; font-size: 11px; color: var(--haze); }
.dl-axis span { position: absolute; transform: translateX(-50%); }
.dl-axis span:first-child { transform: none; }
.dl-axis span:last-child { transform: translateX(-100%); }
.dl-axis.big { margin: 6px 0 4px; }
/* the days page: the overview's day rows at full width, with one more line of detail */
.days-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 18px; }
.days-head h1 { margin: 0; }
.days-page .facts { margin-bottom: 26px; }
.days-list .dayline { grid-template-columns: 120px 1fr 112px; column-gap: 18px; padding: 14px 8px; }
.days-list .dp-axis { padding-top: 0; padding-bottom: 4px; }
.days-list .dl-strip { height: 30px; }
.days-list .dl-date { font-size: 16px; }
.days-list .dl-fill strong { font-size: 17px; }
.dl-meta { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 12.5px; color: var(--haze); }

.day-strip-big { height: 48px; margin-top: 8px; }

/* ---------- detail pages ---------- */
/* sub-pages use the same width as the overview; prose keeps its own readable measure */
.page { padding-top: 24px; }
.page h1 { font-size: clamp(30px, 3.4vw, 40px); margin-bottom: 12px; }
/* title + one outward action: the button sits on the title's line, right-aligned */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 12px; }
.page-head h1 { margin: 0; }
.page-title { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
/* a small sticker that says out loud what the page is */
.plug {
  display: inline-block; padding: 3px 10px; border: 1px dashed rgba(217, 180, 92, 0.6); border-radius: 6px;
  color: var(--gilt); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: help;
}
.cta-out { margin: 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 18px; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(217, 180, 92, 0.35), 0 6px 18px -8px rgba(217, 180, 92, 0.55); transition: filter 0.15s, transform 0.15s; }
.cta-out:hover { transform: translateY(-1px); }
.cta-out:focus-visible { outline: 2px solid var(--parchment); outline-offset: 3px; }
.cta-short { display: none; }
.cta-arrow { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(12, 22, 36, 0.14); font-size: 12px; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .cta-out, .cta-out:hover { transition: none; transform: none; } }
.page > .tag { margin: 4px 0 8px; }
.page h2 { font-size: 21px; margin: 40px 0 14px; }
.crumb { margin: 0 0 6px; font-size: 14px; }
.crumb a { color: var(--haze); text-decoration: none; }
.crumb a::before { content: "‹ "; }
.note {
  display: flex; gap: 10px; align-items: flex-start; background: var(--vault); border-radius: 10px;
  padding: 12px 14px; color: var(--haze); font-size: 14px; margin: 24px 0;
}
.note svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; color: var(--mid); }
.note.error svg { color: var(--bad); }
.pager { display: flex; justify-content: space-between; gap: 16px; margin: 28px 0; }
.pager a { color: var(--gilt); text-decoration: none; }
.pager a:hover { text-decoration: underline; }
.copy { font: inherit; color: var(--parchment); background: none; border: 0; padding: 0; cursor: copy; border-bottom: 1px dashed var(--rim-2); }

.table-wrap { overflow-x: auto; }
.table { border-collapse: collapse; width: 100%; font-size: 15px; }
.table th { text-align: left; color: var(--haze); font-weight: 500; font-size: 13px; padding: 8px 10px; border-bottom: 1px solid var(--rim-2); }
.table td { padding: 9px 10px; border-bottom: 1px solid var(--rim); }
.table .r { text-align: right; }
.share-cell { width: 22%; }
.minitrack { display: block; height: 6px; background: var(--c-nodata); border-radius: 3px; overflow: hidden; }
.minibar { display: block; height: 100%; background: var(--c-pending); border-radius: 3px; min-width: 2px; }
.m-only { display: none; }
/* day grid: 24 hours x 15 epochs */
.dg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 20px; flex-wrap: wrap; margin: 40px 0 12px; }
.day-chain .dg-head h2 { margin: 0; }
.dg-head .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--haze); }
.dg-head .lg { display: inline-flex; align-items: center; gap: 6px; }
.dg-head .m { width: 6px; height: 14px; }
.day-grid { display: grid; gap: 3px; margin-bottom: 18px; }
.dg-row { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: stretch; }
.dg-hour-btn { background: none; border: 0; color: var(--haze); font: inherit; font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 5px; padding: 0; }
.dg-hour-btn:hover, .dg-hour-btn.is-sel { color: var(--parchment); background: var(--vault); }
.dg-cells { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; }
.dg-cell { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; align-items: end; height: 16px; padding: 1px 2px; border: 1px solid transparent; border-radius: 4px; background: none; cursor: pointer; }
.dg-cell:hover { border-color: var(--rim-2); background: rgba(19, 34, 58, 0.55); }
.dg-cell.is-sel { border-color: var(--gilt); background: var(--vault); }
.dg-cell:focus-visible, .dg-hour-btn:focus-visible { outline: 2px solid var(--gilt); outline-offset: 1px; }
.dg-cell.is-before { background: none; cursor: default; }
.m { display: block; border-radius: 1px; }
.dg-cell .m { height: 100%; }
.m-block { background: var(--c-pending); }
.m-final { background: var(--c-final); }
.m-empty { background: var(--rim-2); }
.m-unknown { background: var(--c-nodata); }
.m-now { background: none; box-shadow: inset 0 0 0 1px var(--gilt); }
/* hours still to come: faint ghost slots (a 1 px line rendered unevenly on scaled screens) */
.m-future { background: rgba(52, 80, 122, 0.09); }
.dg-panel { margin: 6px 0 10px 42px; padding: 14px 16px; border: 1px solid var(--rim-2); border-radius: 12px; background: var(--vault); }
.dg-panel-head { display: flex; align-items: center; gap: 8px 12px; margin-bottom: 12px; flex-wrap: wrap; }
.dg-panel-head h3 { margin: 0; font-size: 16px; }
.dg-steps { display: flex; gap: 8px; margin-left: auto; }
.dg-step, .dg-close { white-space: nowrap; background: none; border: 1px solid var(--rim-2); color: var(--parchment); border-radius: 8px; font: inherit; font-size: 13px; padding: 4px 10px; cursor: pointer; }
.dg-close { font-size: 18px; line-height: 1; padding: 2px 9px; }
.dg-steps + .dg-close { margin-left: 0; }
.dg-panel-head h3 + .dg-close { margin-left: auto; }
.dg-step:hover, .dg-close:hover { border-color: var(--gilt); }
.dg-panel .epoch-big { max-width: none; gap: 6px; }
.dg-panel .epoch-big .cell { height: 38px; border-radius: 5px; }
/* each slot a column: the cell, then its block and time under it */
.slot-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dg-slot { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: center; }
.dg-slot .muted { font-size: 12.5px; }
.dg-panel .epoch-labelled { row-gap: 14px; }
@media (max-width: 640px) { .dg-panel .epoch-labelled { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dg-hour { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 22px; }
.dg-hour-row { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; font-size: 13px; }
.dg-hour-row .cell { height: 22px; }
.dg-blocks { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.dg-blocks li { display: inline-flex; gap: 6px; }
@media (max-width: 760px) {
  .dg-cells { gap: 2px; }
  .dg-cell { padding: 1px; height: 14px; border-radius: 3px; }
  .dg-panel { margin-left: 0; }
  .dg-hour { grid-template-columns: 1fr; }
}

/* validators */
.vchart { margin: 30px 0 8px; }
.vchart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; }
.vchart-head h2 { margin: 0; }
.vchart-head .legend { display: flex; gap: 16px; margin: 0; font-size: 13px; color: var(--haze); }
.vchart-head .lg { display: inline-flex; align-items: center; gap: 7px; }
.vchart .sw { width: 14px; height: 3px; border-radius: 2px; display: inline-block; flex: none; }
.vchart-plot { position: relative; margin-top: 12px; min-height: 210px; }
.vchart-plot svg { display: block; overflow: visible; touch-action: pan-y; }
.vc-grid { stroke: rgba(52, 80, 122, 0.45); stroke-width: 1; stroke-dasharray: 2 4; }
.vc-y, .vc-x { fill: var(--haze); font-size: 12px; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.vc-y { text-anchor: end; }
.vc-line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.vc-dot, .vc-hot { stroke: var(--night); stroke-width: 2.5; }
.vc-end { font-size: 13px; font-family: var(--sans); font-weight: 650; font-variant-numeric: tabular-nums; }
.vc-cross { stroke: rgba(239, 230, 205, 0.28); stroke-width: 1; }
.vc-acc.vc-line, .sw.vc-acc { stroke: var(--c-final); background: var(--c-final); }
.vc-mach.vc-line, .sw.vc-mach { stroke: var(--c-pending); background: var(--c-pending); }
.vc-dot.vc-acc, .vc-hot.vc-acc, .vc-end.vc-acc { fill: var(--c-final); }
.vc-dot.vc-mach, .vc-hot.vc-mach, .vc-end.vc-mach { fill: var(--c-pending); }
.vc-hit { fill: transparent; cursor: crosshair; }
.vc-tip {
  position: absolute; z-index: 2; pointer-events: none; min-width: 190px; padding: 10px 12px; border-radius: 10px;
  background: rgba(19, 34, 58, 0.96); border: 1px solid var(--rim-2); box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.7);
  font-size: 13px; color: var(--parchment); font-variant-numeric: tabular-nums;
}
.vc-tip-date { color: var(--haze); font-size: 12px; margin-bottom: 6px; }
.vc-tip-row { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; column-gap: 8px; }
.vc-tip-row + .vc-tip-row { margin-top: 4px; }
.vc-tip-row strong { font-weight: 650; text-align: right; }
.vc-tip-row .muted { grid-column: 2 / 4; font-size: 12px; margin-top: -1px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.val-dist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; margin: 22px 0 30px; }
/* world map of machines by country, the country list beside it */
.val-geo { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(220px, 1fr); gap: 18px 32px; align-items: start; margin: 30px 0 8px; }
.val-map { margin: 0; }
.val-map-plot { aspect-ratio: 1000 / 416; }
.val-map-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.val-map-plot path, .val-map-plot circle { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.vm-base path { fill: rgba(52, 80, 122, 0.42); stroke: var(--night); stroke-width: 0.6px; }
.vm-pt { fill: var(--gilt); stroke: var(--night); stroke-width: 0.6px; cursor: pointer; outline: none; }
.vm-pt:hover, .vm-pt.is-on { stroke: var(--parchment); stroke-width: 1.6px; }
.vm-pt:focus-visible { stroke: var(--parchment); stroke-width: 2px; }
.vm-labels text { fill: #fff8e6; stroke: var(--night); paint-order: stroke; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.vm-legend { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--haze); }
.vm-legend:empty { display: none; }
.vm-legend i { width: 72px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(217, 180, 92, 0.32), rgba(217, 180, 92, 0.95)); }
.val-map-cap { margin-top: 8px; min-height: 1.55em; font-size: 13.5px; color: var(--haze); }
/* same head as the chart: the title, and on the right the colour scale and the region/country switch */
.val-geo-h { grid-column: 1 / -1; align-items: center; margin-bottom: 4px; }
.geo-ctrl { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.val-geo .dist h3 { display: none; }
.val-geo .dist { padding-top: 4px; }
.dist-unknown { color: var(--haze); border-top: 1px dashed var(--rim); padding-top: 6px; margin-top: 2px; }
.dist-unknown .dist-bar { visibility: hidden; }
.dist h3 { font-size: 14px; color: var(--haze); font-weight: 500; margin: 0 0 8px; }
.dist ul { list-style: none; padding: 0; margin: 0; }
.dist li { display: grid; grid-template-columns: minmax(0, 1fr) 72px 40px; gap: 10px; align-items: center; padding: 4px 0; font-size: 14px; }
.dist-k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist-bar { height: 6px; background: var(--c-nodata); border-radius: 3px; overflow: hidden; }
.dist-bar span { display: block; height: 100%; background: var(--c-pending); border-radius: 3px; }
.dist-n { text-align: right; color: var(--haze); font-variant-numeric: tabular-nums; }
.val-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 8px 0 6px; }
.val-tools h2 { margin: 0; }
#val-filter { background: var(--vault); border: 1px solid var(--rim-2); border-radius: 10px; color: var(--parchment); padding: 9px 12px; font: inherit; font-size: 15px; width: min(320px, 100%); }
#val-filter:focus-visible { outline: 2px solid var(--gilt); outline-offset: 1px; }
.val-table td { vertical-align: middle; }
.val-table .share-cell .sub { display: block; font-size: 12px; color: var(--haze); margin-top: 3px; }
.val-name { display: inline-flex; align-items: center; gap: 9px; color: var(--parchment); text-decoration: none; }
.val-name:hover span:last-child { text-decoration: underline; }
.avatar { position: relative; overflow: hidden; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--parchment); font-size: 12px; font-weight: 600; flex: none; }
.avatar .pfp { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-big { width: 76px; height: 76px; font-size: 30px; box-shadow: 0 0 0 1px var(--rim-2); }
.val-who { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.val-chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.val-chips:empty { display: none; }
/* small status words after a validator's name: on the chain or not, signed every day */
.vchip { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; border: 1px solid; font-size: 10.5px; font-weight: 600; line-height: 1.35; white-space: nowrap; cursor: help; }
.vchip-chain { color: var(--c-pending); border-color: rgba(143, 179, 227, 0.45); background: rgba(143, 179, 227, 0.08); }
.vchip-tdh { color: var(--warn); border-color: rgba(242, 170, 62, 0.5); background: rgba(242, 170, 62, 0.08); }
.vchip-left { color: var(--bad); border-color: rgba(226, 109, 90, 0.5); background: rgba(226, 109, 90, 0.08); }
.vchip-every { color: var(--gilt); border-color: rgba(217, 180, 92, 0.5); background: rgba(217, 180, 92, 0.1); }
/* level as on 6529.io: the number in a ring of its level's color */
.lvl { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; font-size: 11px; font-weight: 600; line-height: 1; cursor: help; flex: none; }
.lvl-big { min-width: 32px; height: 32px; font-size: 14px; }
.val-head { align-items: center; margin-bottom: 22px; }
.val-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.val-id > div { min-width: 0; }
.val-wallet { margin-top: 6px; font-size: 13.5px; color: var(--haze); overflow-wrap: anywhere; text-align: left; }
.vstat.big { font-size: 20px; font-weight: 600; }
@media (max-width: 560px) { .avatar-big { width: 56px; height: 56px; font-size: 22px; } .val-id { gap: 12px; } }
.chip { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--rim-2); color: var(--haze); vertical-align: middle; }
.chip-own { border-color: var(--gilt); color: var(--gilt); }
tr.is-own td { background: rgba(217, 180, 92, 0.06); }
.vstat { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--haze); white-space: nowrap; }
.vstat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vstat.is-ok { color: var(--ok); }
.vstat.is-wait { color: var(--warn); }
.vstat.is-bad { color: var(--bad); }
.joining { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.joining a { display: inline-flex; align-items: center; gap: 8px; color: var(--parchment); text-decoration: none; }
.net-live { margin: 6px 0 26px; }
@media (max-width: 900px) { .val-dist { grid-template-columns: repeat(2, minmax(0, 1fr)); } .val-geo { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .validators .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .val-dist { grid-template-columns: 1fr; } }
.releases { list-style: none; padding: 0; margin: 0; }
.releases li { display: grid; grid-template-columns: 130px 1fr 56px; gap: 14px; align-items: center; padding: 8px 0; }
.rel-p { text-align: right; }

/* figures on the "how it works" page */
/* figure left, its caption beside it: the page uses the same width as the others */
.fig { margin: 8px 0 12px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px 40px; align-items: center; }
.fig svg { width: 100%; height: auto; display: block; }
.fig figcaption { color: var(--haze); font-size: 15px; max-width: 64ch; margin-top: 6px; line-height: 1.6; }
.f-final { fill: var(--c-final); }
.f-pending { fill: var(--c-pending); }
.f-dot { fill: var(--rim-2); }
.f-cp { fill: var(--gilt); }
.f-line { fill: none; stroke: var(--rim-2); stroke-width: 1.5; }
.f-label { fill: var(--parchment); font: 600 14px var(--sans); text-anchor: middle; }
.f-small { fill: var(--haze); font: 400 13px var(--sans); text-anchor: middle; }
.f-gilt { fill: var(--gilt); }
.f-start { text-anchor: start; }
.f-end { text-anchor: end; }
.f-in { fill: var(--night); font: 600 14px var(--sans); text-anchor: middle; }
.f-in-dark { fill: var(--night); }
.f-track { fill: var(--rim); opacity: 0.55; }
.f-votes { fill: var(--c-pending); }
.f-votes-ok { fill: var(--c-final); }
.f-threshold { stroke: var(--gilt); stroke-width: 2; stroke-dasharray: 4 3; }
.f-node { stroke-width: 3; }
.f-node-final { fill: var(--c-final); stroke: var(--c-final); }
.f-node-justified { fill: var(--night); stroke: var(--c-final); }
.f-node-waiting { fill: var(--night); stroke: var(--rim-2); }
.f-state { font: 600 14px var(--sans); text-anchor: middle; }
.f-state-final { fill: var(--c-final); }
.f-state-justified { fill: var(--parchment); }
.f-state-waiting { fill: var(--haze); }
.f-curve { fill: none; stroke: var(--c-final); stroke-width: 2.5; }
.learn h2 { margin-top: 44px; }

.glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px 40px; margin: 28px 0 0; }
.glossary dt { font-weight: 650; font-size: 18px; }
.glossary dd { margin: 4px 0 0; color: var(--haze); }

/* ---------- technical details ---------- */
.tech { margin-top: 36px; }
.tech > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: var(--haze);
  font-size: 15px; padding: 6px 0;
}
.tech > summary::-webkit-details-marker { display: none; }
.tech > summary::before { content: "›"; display: inline-block; transition: transform 0.15s; font-size: 18px; }
.tech[open] > summary::before { transform: rotate(90deg); }
.tech > summary:hover { color: var(--parchment); }
.tech-body { background: var(--vault); border-radius: 12px; padding: 18px 20px; margin-top: 8px; }
.tech-body h3 { font-size: 14px; font-weight: 600; margin: 4px 0 10px; }
.tech-body h3 + .json { margin-bottom: 18px; }
.json { font: 13px/1.6 var(--mono); overflow-x: auto; }
.json ul { list-style: none; margin: 0; padding-left: 18px; border-left: 1px solid var(--rim); }
.j-node { display: inline-block; vertical-align: top; }
.j-node > summary { cursor: pointer; }
.j-node > summary::marker { color: var(--rim-2); }
.j-key { color: var(--mid); }
.j-str { color: var(--parchment); }
.j-num { color: var(--gilt); }
.j-bool, .j-null { color: var(--ok); }
.j-punct { color: var(--haze); }
.j-hash { font: inherit; color: var(--parchment); background: none; border: 0; padding: 0; cursor: copy; text-align: left; word-break: break-all; }
.j-hash:hover { color: #fff; text-decoration: underline dotted; }

/* ---------- footer & toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--vault);
  border: 1px solid var(--rim-2); padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 20;
}

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .cal-body { flex: none; contain: none; }
  .cal-grid { grid-template-rows: none; }
  .cal-cell { aspect-ratio: 1; }
  .list-body { flex: none; container-type: normal; }
  .list-body .dayline:not(.dp-axis) { padding-top: 10px; padding-bottom: 10px; }
  .days-list .dayline { grid-template-columns: 76px 1fr 72px; column-gap: 10px; padding: 12px 4px; }
  .days-list .dl-date { font-size: 15px; }
  .days-head h1 { font-size: 34px; }
  .hero-dial { max-width: 440px; margin: 0 auto; width: 100%; }
  .split { grid-template-columns: 1fr; gap: 0; }
  .search { order: 3; max-width: none; flex-basis: 100%; }
}
@media (max-width: 720px) {
  .board-v { font-size: 22px; }
  .dayline { grid-template-columns: 74px 1fr 64px; column-gap: 10px; }
  .dl-tdh { gap: 8px; }
  .dl-tdh .wbar { min-width: 70px; }
  .dl-tdh-v { min-width: 0; }
  .dl-tdh .level { min-width: 0; }
  .top { gap: 14px; padding: 14px 16px; }
  main { padding: 8px 16px 48px; }
  .strip { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .cell { height: 30px; }
  .day-row { grid-template-columns: 78px 1fr 44px; }
  .block-row { grid-template-columns: 84px 1fr auto; }
  .b-slot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .epoch-enter, .impact { animation: none; }
  .cell, .cell::before { transition: none; }
  .cell-now::before { animation: none; height: calc(100% * var(--slot-f, 0)); }
  .cell-pending::before { animation: none; opacity: 0.7; }
  .slot-frame { transition: none; }
  .burger span { transition: none; }
  .menu-open .nav { animation: none; }
  .slot-glow { display: none; }
  .landed path { animation: none; fill: var(--gilt); }
  .tech > summary::before { transition: none; }
}

.glossary.api dt { font-weight: 400; }
.glossary.api dt .mono { color: var(--parchment); }
/* technical section on the How it works page: a compact list of unfoldable answers */
.learn #sec-tech + p, .learn .intro { color: var(--haze); }
.learn .tech { margin: 0; border-top: 1px solid var(--rim); padding: 10px 0; }
.learn .tech:last-of-type { border-bottom: 1px solid var(--rim); }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.toc button { font: inherit; font-size: 14px; color: var(--haze); background: none; border: 1px solid var(--rim); border-radius: 999px; padding: 5px 14px; cursor: pointer; }
.toc button:hover { color: var(--parchment); border-color: var(--haze); }
.learn [id^="sec-"] { scroll-margin-top: 24px; }
.learn h3 { font-size: 17px; margin: 30px 0 12px; color: var(--parchment); }

/* ---------- orloj ---------- */
.orloj-stage { position: relative; margin: 18px 0 10px; border: 1px solid var(--rim); border-radius: 14px; overflow: hidden; background: #070d17; }
.orloj-stage iframe { position: relative; display: block; width: 100%; height: min(80vh, 860px); border: 0; }
/* over the artwork until its page has loaded (it paints its own dark wall first, before its scripts run) */
.orloj-stage::before { content: attr(data-loading); position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: var(--haze); font-size: 15px; pointer-events: none; animation: orloj-wait 1.6s ease-in-out infinite alternate; }
.orloj-stage.loaded::before { animation: none; opacity: 0; transition: opacity .3s; }
@keyframes orloj-wait { from { opacity: .35; } to { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .orloj-stage::before { animation: none; } }
.orloj-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 8px; }
.orloj-actions button, .orloj-actions a { font: inherit; font-size: 14px; color: var(--gilt); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.orloj-actions button:hover, .orloj-actions a:hover { text-decoration: underline; }
.orloj-info { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.orloj-about p { line-height: 1.6; color: var(--haze); }
.orloj-about strong { color: var(--parchment); }
.warn-num { color: var(--warn); }
.blocks-stats { margin: 4px 0 26px; }
.blocks-stats .big-num a { color: inherit; text-decoration: none; }
.blocks-stats .big-num a:hover { color: var(--gilt); }
.big-num { font-size: 26px; font-weight: 650; color: var(--parchment); letter-spacing: -0.01em; }
.cta { display: inline-block; margin-top: 6px; padding: 9px 16px; border-radius: 10px; background: var(--gilt); color: var(--night); font-weight: 600; text-decoration: none; }
.cta:hover { filter: brightness(1.08); }
@media (max-width: 900px) { .orloj-info { grid-template-columns: 1fr; gap: 0; } }

/* test chain badge under the name, on every page */
.testnet { border-color: rgba(242, 170, 62, 0.55); background: rgba(242, 170, 62, 0.12); color: var(--warn); cursor: help; }
@media (max-width: 720px) {
  .brand-block { display: flex; flex-direction: column; gap: 6px; }
  .brand-badges { height: auto; transform: none; }
}

/* footer: the way out to 6529.io */
.foot { max-width: calc(var(--wrap) - 48px); margin: 0 auto; padding: 22px 0 40px; border-top: 1px solid var(--rim); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; text-align: center; }
.foot-link { color: var(--gilt); text-decoration: none; font-size: 15px; }
.foot-link:hover { text-decoration: underline; }
.foot-note { margin: 2px 0 0; flex-basis: 100%; color: var(--haze); font-size: 13px; }
/* network page: closing invitation to run a validator. Hairlines and the logo's ring, no card. */
.join {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 20px 32px;
  margin: 64px 0 24px; padding: 30px 0; border-top: 1px solid var(--rim); border-bottom: 1px solid var(--rim);
}
.join-mark { width: 88px; height: 88px; display: block; }
.join h2 { margin: 0 0 6px !important; font-size: 22px; }
.join p { margin: 0; color: var(--haze); line-height: 1.6; }
.join .cta { margin: 0; white-space: nowrap; }
@media (max-width: 720px) {
  .join { grid-template-columns: 56px minmax(0, 1fr); }
  .join-mark { width: 56px; height: 56px; }
  .join .cta { grid-column: 1 / -1; justify-self: start; }
}
.glossary.status-help { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 900px) { .fig { grid-template-columns: 1fr; } }

/* block list: a height we never saw sits in its place, an inferred one carries a small tag */
.block-row.is-missing .b-height { color: var(--haze); }
.b-state.is-missed { color: var(--mid); }
.b-tag { margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--rim); color: var(--haze); font-size: 11px; font-weight: 500; vertical-align: 2px; }

/* ---------- phones ---------- */
@media (max-width: 720px) {
  /* header: name and badges on one row with the menu button, the search under it; the menu
     (and, on the local explorer, the language) opens between them */
  .top { gap: 10px 12px; padding: 12px 16px 10px; }
  .brand-block { flex-direction: row; align-items: center; gap: 10px; order: 1; flex: 1 1 auto; min-width: 0; }
  .brand-badges { flex-wrap: nowrap; }
  .burger {
    order: 2; display: inline-grid; place-content: center; gap: 4px; width: 40px; height: 40px; margin: -4px -8px -4px 0;
    padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  }
  .burger span { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--parchment); transition: transform 0.2s ease, opacity 0.2s ease; }
  .burger:hover, .menu-open .burger { background: var(--vault); }
  .menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-open .burger span:nth-child(2) { opacity: 0; }
  .menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav { display: none; order: 3; flex: 1 1 100%; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px solid var(--rim); }
  .menu-open .nav { display: flex; animation: menu-in 0.18s ease-out; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
  .nav a { padding: 11px 12px; font-size: 16px; }
  .top-end { display: none; order: 4; flex: 1 1 100%; padding-bottom: 4px; }
  .top-end:not(:has(> :not([hidden]))) { display: none !important; }
  .menu-open .top-end { display: flex; }
  .search { order: 5; flex: 1 1 100%; max-width: none; margin-left: 0; }
  /* the bar at the bottom: one floating pill with the main places under the thumb. Scrolling down
     it shrinks to icons only, scrolling up (or at the top / end of a page) it grows back */
  .tabbar {
    --ease: cubic-bezier(0.32, 0.72, 0, 1); --dur: 0.42s;
    display: flex; position: fixed; z-index: 30; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom));
    width: min(calc(100% - 24px), 420px); margin: 0 auto; padding: 5px; border-radius: 999px;
    background: rgba(19, 34, 58, 0.8); border: 1px solid rgba(52, 80, 122, 0.75);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(239, 230, 205, 0.07);
    -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    transition: width var(--dur) var(--ease), padding var(--dur) var(--ease), bottom var(--dur) var(--ease);
  }
  .tabbar a {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 7px 2px 6px; border-radius: 999px; color: var(--haze); text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: padding var(--dur) var(--ease), gap var(--dur) var(--ease), color 0.2s ease, background-color 0.2s ease;
  }
  .tabbar a span {
    max-width: 100%; max-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 13px;
    transition: max-height var(--dur) var(--ease), opacity 0.22s ease, transform var(--dur) var(--ease);
  }
  .tabbar svg { width: 22px; height: 22px; flex: none; transition: width var(--dur) var(--ease), height var(--dur) var(--ease), color 0.2s ease; }
  .tabbar a:active { background: rgba(143, 179, 227, 0.08); }
  .tabbar a[aria-current] { color: var(--parchment); background: rgba(143, 179, 227, 0.13); }
  .tabbar a[aria-current] svg { color: var(--gilt); }
  /* shrunk: a short pill of icons; the labels fold away. Keyboard focus inside keeps it full */
  .tabbar.is-compact:not(:has(:focus-visible)) { width: min(calc(100% - 24px), 264px); padding: 4px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .tabbar.is-compact:not(:has(:focus-visible)) a { padding: 7px 2px; gap: 0; }
  .tabbar.is-compact:not(:has(:focus-visible)) a span { max-height: 0; opacity: 0; transform: translateY(4px) scale(0.9); }
  .tabbar.is-compact:not(:has(:focus-visible)) svg { width: 20px; height: 20px; }
  @media (prefers-reduced-motion: reduce) { .tabbar, .tabbar a, .tabbar a span, .tabbar svg { transition: none; } }
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .search-pop { width: 100%; }
  .search input { padding: 9px 12px; }
}
@media (max-width: 640px) {
  /* facts and the overview summary in two columns: half the scrolling */
  .facts, .board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .fact dd { font-size: 16px; overflow-wrap: anywhere; }
  .board-v { font-size: 22px; }
  .big-num { font-size: 24px; }
  h1 { font-size: 30px; }
  .page-head .cta-out { padding: 8px 14px; font-size: 14px; }
  /* the button shrinks to its short label and stays beside the title */
  .page-head.has-short { flex-wrap: nowrap; }
  .page-head.has-short .page-title { min-width: 0; }
  .page-head.has-short .cta-out { flex: none; gap: 6px; padding: 6px 10px 6px 12px; font-size: 13px; border-radius: 9px; }
  .page-head.has-short .cta-long { display: none; }
  .page-head.has-short .cta-short { display: inline; }
  .page-head.has-short .cta-arrow { width: 16px; height: 16px; font-size: 10px; }
  /* tooltips as a bar at the bottom of the screen: never cut off at an edge */
  .hint:hover::after, .hint:focus::after { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(86px + env(safe-area-inset-bottom)); width: auto; max-width: none; font-size: 14px; z-index: 31; }
  .hint.tip-left:hover::after, .hint.tip-left:focus::after { left: 12px; right: 12px; }
  /* explainer figures switch to their narrow layout (app.js), drawn at about real size */
  .fig { display: block; }
  .fig svg { width: 100%; max-width: 440px; }
  /* transfers: one line each */
  .transfer-row { grid-template-columns: auto 1fr auto; column-gap: 10px; }
  .transfer-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* validators list as cards: who and today on top, weight and 30 days under it */
  .val-table thead { display: none; }
  .val-table, .val-table tbody { display: block; }
  .val-table tr {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "n who today" ". share s30";
    align-items: center; column-gap: 10px; row-gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--rim);
  }
  .val-table td { display: block; width: auto; padding: 0; border: 0; }
  .val-table td:nth-child(1) { grid-area: n; align-self: start; line-height: 28px; font-size: 13px; }
  .val-table td:nth-child(2) { grid-area: who; min-width: 0; }
  .val-table td:nth-child(3) { grid-area: share; display: flex; align-items: center; gap: 10px; padding-left: 37px; }
  .val-table td:nth-child(3) .minitrack { flex: none; width: 88px; }
  .val-table td:nth-child(3) .sub { margin: 0; font-size: 13px; }
  .val-table td:nth-child(4), .val-table td:nth-child(5) { display: none; }
  .val-table td:nth-child(6) { grid-area: s30; font-size: 13px; color: var(--haze); white-space: nowrap; }
  .val-table td:nth-child(7) { grid-area: today; align-self: start; line-height: 28px; }
  .val-who { row-gap: 6px; }
  .val-who .val-name { min-width: 0; }
  .val-who .val-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .val-chips { flex-basis: 100%; padding-left: 37px; }
  #val-filter { width: 100%; }
  .m-only { display: inline; }
  /* the running epoch's caption stays on one line */
  .epoch-cap { width: 100%; gap: 10px; font-size: 13px; }
  .epoch-cap h2 { font-size: 19px; white-space: nowrap; }
  .epoch-cap > span { white-space: nowrap; }
  .epoch-now .epoch-big { width: 100%; --g: 5px; }
  /* a validator's machines as labelled cards, two columns of facts each */
  .val-machines thead { display: none; }
  .val-machines, .val-machines tbody { display: block; }
  .val-machines tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 14px 0; border-bottom: 1px solid var(--rim); }
  .val-machines td { display: block; padding: 0; border: 0; text-align: left !important; font-size: 15px; }
  .val-machines td:first-child { grid-column: 1 / -1; font-weight: 650; color: var(--parchment); }
  .val-machines td:first-child::before { content: "#"; }
  .val-machines td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--haze); margin-bottom: 2px; }
  /* agreement bar marks sit beside their line, so the two never collide */
}