/* ---- the radar head: the top of the ladder's token field (ui/site-rate-view.mjs, ui/model-speed-view.mjs,
   painted by the one rain loop in ui/rain.mjs) ----
   Left: a radar scope whose sweep turns with the site total. Beside it the total on rolling wheels, with
   ≈ kW and heaters. Right: the model lane, scrolling at one even pace; below it the open strip where
   swept cards release tokens into the ladder. The head and the ladder share one open frame.
   Faint range rings run from the scope across the whole head.
   Layers: the head's background (scope disc, range rings) < the head canvas (sweep, scan line, echoes,
   tokens) < the scope's static rings and all text. With the loop off (effects off, reduced motion) the
   head is a still picture: a static sweep sector in the scope, the cards scroll by hand.
   Readout state: data-status and data-tier 0–4 (rate tiers with hysteresis, live only) on #site-rate. */

.flow-head { --scope: 96px; --pad-x: 16px; --pad-y: 10px; --fall: 46px;
  --scope-cx: calc(var(--pad-x) + var(--scope) / 2); --scope-cy: 50%;
  position: relative; isolation: isolate; overflow: hidden; margin: 0 0 12px; padding: var(--pad-y) var(--pad-x);
  border: 0; border-radius: 0; color: var(--ink-3); font: 12px/1.6 var(--mono);
  background:
    linear-gradient(90deg, transparent 0 34%, rgba(9, 17, 12, .55)),
    radial-gradient(circle at var(--scope-cx) var(--scope-cy), #020604 0 calc(var(--scope) / 2), transparent calc(var(--scope) / 2 + .5px)),
    repeating-radial-gradient(circle at var(--scope-cx) var(--scope-cy), rgba(57, 255, 136, .055) 0 1px, transparent 1.5px 74px),
    linear-gradient(180deg, #050b07, var(--panel)); }
/* The radar and ladder meet without an enclosing frame. */
.ladder-shell > .ladder-wrap { border: 0; border-radius: 0; }
.ladder-shell:not(:has(> #site-rate-detail:not([hidden]))) .flow-head { margin-bottom: 0; }
.head-rain { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.flow-head > .rc-site { position: relative; z-index: 1; }

.rc-site { --rs-tone: var(--ink-3); --rs-rgb: 102, 128, 111;
  display: grid; grid-template-columns: var(--scope) max-content minmax(0, 1fr);
  grid-template-rows: auto minmax(var(--fall), auto);
  grid-template-areas: "scope read lane" "scope read .";
  column-gap: 20px; align-items: start; min-width: 0; }
.rs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---- the scope ---- */
.fh-scope { grid-area: scope; align-self: center; position: relative; width: var(--scope); height: var(--scope); border-radius: 50%; }
.fh-ring, .fh-beam { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.fh-ring { border: 1px solid rgba(var(--rs-rgb), .44); box-shadow: 0 0 18px rgba(var(--rs-rgb), .07), inset 0 0 16px rgba(0, 0, 0, .55);
  background:
    radial-gradient(circle closest-side, transparent calc(34% - .5px), rgba(var(--rs-rgb), .17) calc(34% - .5px) calc(34% + .5px),
      transparent calc(34% + .5px) calc(67% - .5px), rgba(var(--rs-rgb), .15) calc(67% - .5px) calc(67% + .5px), transparent calc(67% + .5px)),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(var(--rs-rgb), .13) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(transparent calc(50% - .5px), rgba(var(--rs-rgb), .13) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(135deg, rgba(185, 255, 205, .42), rgba(35, 223, 114, .18) 45%, rgba(2, 38, 23, .86));
  transition: border-color .6s; }
/* A fixed green gradient belongs to the disc only; the emitted wave stays green. */
.fh-ring::before { content: ""; position: absolute; inset: -2px; border-radius: 50%;
  background: conic-gradient(from 210deg, #07462b, #19b86a 24%, #47ff99 53%, #d1ffe1 74%, #13864f 91%, #07462b);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); }
/* Bearing ticks every 30°, inside the rim. */
.fh-ring::after { content: ""; position: absolute; inset: 2px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(var(--rs-rgb), .5) 0 1.2deg, transparent 1.2deg 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); }
/* The still sweep shown only while the loop is off; the canvas draws the live one. */
.fh-beam { inset: 1px; background: conic-gradient(from 30deg, rgba(var(--rs-rgb), 0), rgba(var(--rs-rgb), .22) 84deg, rgba(var(--rs-rgb), .55) 85deg, rgba(var(--rs-rgb), 0) 85.5deg); }
.flow-head[data-flow] .fh-beam { display: none; }
/* With it, the still scan arc on the bearing ticks: the rim light ui/radar-orb.mjs paints behind the
   live beam, faint at its tail and white-hot at the beam (115°). No motion here; the live halo, rotor
   and lights exist only on the head canvas, on the sweep's own phase. */
.fh-beam::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 43deg, rgba(var(--rs-rgb), 0), rgba(var(--rs-rgb), .4) 40deg, rgba(var(--rs-rgb), .75) 66deg,
    rgba(236, 255, 244, .8) 72deg, rgba(var(--rs-rgb), 0) 72.5deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3.25px), #000 calc(100% - 3px) calc(100% - 2px), transparent calc(100% - 1.75px));
  mask: radial-gradient(closest-side, transparent calc(100% - 3.25px), #000 calc(100% - 3px) calc(100% - 2px), transparent calc(100% - 1.75px)); }
/* Status: the radar's origin; its reason is the tooltip and aria-label. */
.rs-dot { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ink-3); }

/* ---- the total ---- */
.rs-read { grid-area: read; align-self: center; display: grid; gap: 8px; justify-items: start; min-width: 0; }
/* Two readouts of the same frame, the same size and style: site speed and its API-equivalent $/s. */
.rs-metric { display: block; min-width: 0; }
.rs-cost[data-none] .rs-numbox { font-size: 18px; }
.rs-cost[data-none] :is(.rs-num, .rs-odo) { color: var(--ink-3); text-shadow: none; }
.rs-cost[data-none] .rs-unit { display: none; }
.rs-value { display: inline-flex; align-items: baseline; gap: 8px; }
.rs-numbox { position: relative; display: inline-block; font: 700 44px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.rs-num { font: inherit; color: #effff5; white-space: nowrap;
  text-shadow: 0 0 1px var(--bg), 0 0 4px var(--bg); }
/* Rolling wheels (ui/odometer.mjs) over the exact text, which stays for reading and copying. Glyphs come
   from generated content; each wheel is one transform transition per real frame. */
.rs-value[data-odo] .rs-num { color: transparent; text-shadow: none; }
.rs-value:not([data-odo]) .rs-odo { display: none; }
.rs-odo { --h: 1.16em; position: absolute; left: 0; top: calc((1em - var(--h)) / 2); display: flex; pointer-events: none;
  color: #effff5; text-shadow: 0 0 1px var(--bg), 0 0 4px var(--bg); }
.rs-odo i { display: block; width: 1ch; height: var(--h); font-style: normal; clip-path: inset(0 -.5em); }
.rs-odo i::before { display: block; line-height: var(--h); text-align: center; white-space: pre; }
.rs-odo .od-d::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
  transform: translateY(calc(var(--p, 10) * var(--h) * -1)); transition: transform .9s cubic-bezier(.2, .72, .18, 1); }
.rs-odo .od-s::before { content: attr(data-c); }
.rs-odo[data-park] i::before, .rs-odo i[data-park]::before { transition: none; }
.rs-unit { font: 700 13px/1 var(--mono); letter-spacing: .02em; color: var(--ink-2); }
.rs-side { display: flex; align-items: center; gap: 16px; font: 500 12px/1.1 var(--mono); color: var(--ink-2); text-shadow: var(--halo); }
.rs-power { display: inline-flex; align-items: baseline; gap: 3px; cursor: help; }
.rs-approx { color: var(--ink-3); }
.rs-kw { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.rs-kwu { font-size: 11px; color: var(--ink-2); }
.rs-heat { display: inline-flex; align-items: center; gap: 6px; cursor: help; }
.rs-heater { flex: none; width: 17px; height: 17px; color: rgba(var(--rs-rgb), .85); transition: color .5s; }
.rs-heaters { font: 600 13px/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-site:not([data-status="live"]):not([data-status="standby"]) :is(.rs-approx, .rs-kwu) { display: none; }
.rc-site:not([data-status="live"]) :is(.rs-heater, .rs-heaters) { opacity: .45; }
.rc-site[data-power="waiting"] :is(.rs-approx, .rs-kwu) { display: none; }
.rs-demo-tag { padding: 2px 6px; border: 1px dashed rgba(242, 193, 78, .6); border-radius: 3px; font: 600 10px/1.2 var(--sans); color: var(--warn); }
.rs-info { grid-area: info; position: relative; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; margin-top: 2px;
  border: 1px solid var(--line); border-radius: 50%; background: rgba(5, 8, 6, .8);
  color: var(--ink-2); font: italic 700 12px/1 Georgia, "Times New Roman", serif; cursor: pointer; }
.rs-info::after { content: ""; position: absolute; inset: -11px; }
.rs-info:hover, .rs-info[aria-expanded="true"] { color: var(--accent); border-color: var(--accent-2); }

/* The active radar keeps the Token rain's green. Only scan speed follows rate. */
.rc-site[data-status="live"] { --rs-tone: #39ff88; --rs-rgb: 57, 255, 136; }
.flow-head:has(> .rc-site[data-demo]) { outline: 1px dashed rgba(242, 193, 78, .6); outline-offset: -4px; }

/* Live: the dot takes the tier tone. No value: a dim dash and a coloured dot — connection problems
   read amber or red, never green; no sample or no supported value reads grey and hollow. */
.rc-site[data-status="live"] .rs-dot { background: var(--rs-tone); box-shadow: 0 0 8px rgba(var(--rs-rgb), .8); }
.rc-site[data-status="standby"] .rs-dot { background: var(--mint); }
.rc-site:is([data-status="connecting"], [data-status="warming"], [data-status="waiting"], [data-status="resyncing"]) .rs-dot {
  background: var(--warn); animation: rc-blink 1.4s steps(1) infinite; }
.rc-site:is([data-status="offline"], [data-status="stale"], [data-status="mismatch"]) .rs-dot { background: var(--down); }
.rc-site:is([data-status="empty"], [data-status="unavailable"], [data-status="unsupported"]) .rs-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.rc-site:not([data-status="live"]):not([data-status="standby"]) :is(.rs-num, .rs-odo) { color: var(--ink-3); text-shadow: none; }
.rc-site[data-status="standby"] :is(.rs-num, .rs-odo) { color: var(--ink-2); text-shadow: none; }
.rc-site[data-status="standby"] .rs-value[data-odo] .rs-num,
.rc-site:not([data-status="live"]):not([data-status="standby"]) .rs-value[data-odo] .rs-num { color: transparent; }

@keyframes rc-blink { 50% { opacity: .2; } }
.rc-site[data-idle] *, .rc-site[data-idle] *::before, .rc-site[data-idle] *::after { animation-play-state: paused !important; transition: none !important; }
.rc-site[data-calm] *, .rc-site[data-calm] *::before, .rc-site[data-calm] *::after { animation: none !important; transition: none !important; }

/* ---- the model lane (ui/model-speed-view.mjs, ui/model-marquee.mjs) ----
   Every qualifying model as a full-name card over its five-minute speed and requests; no trend mark.
   When they do not fit they loop sideways: the track (real list + its copy) moves by −50 % in one linear
   CSS animation, transform only. Hover (pointer devices), keyboard focus and an open chart hold it;
   data-idle pauses it and data-calm stops it (a still list that scrolls by hand). The lane's lower edge
   is where swept cards release their tokens. */
.ms-strip { --ms-gap: 30px; grid-area: lane; position: relative; min-width: 0; padding-bottom: 3px; }
.ms-view { position: relative; display: flex; justify-content: safe center; overflow: clip; padding: 4px 0; }
.ms-track { display: flex; flex: none; }
.ms-list { display: flex; flex: none; gap: var(--ms-gap); margin: 0; padding: 0; list-style: none; }
.ms-clone, .ms-strip[data-count="0"] .ms-view { display: none; }
.ms-empty { margin: 0; padding: 12px 0 6px; text-align: center; font: 500 12px/1.3 var(--mono); color: var(--ink-2); text-shadow: var(--halo); }
.ms-empty:empty { display: none; }
.ms-strip[data-roll] .ms-view { justify-content: flex-start;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.ms-strip[data-roll] .ms-list { min-width: var(--ms-view-width); justify-content: flex-start;
  gap: var(--ms-loop-gap, var(--ms-gap)); padding-inline-end: var(--ms-loop-gap, var(--ms-gap)); }
.ms-strip[data-roll] .ms-clone { display: flex; }
.ms-strip[data-roll] .ms-track { animation: ms-roll var(--ms-lap, 39s) linear infinite; }
@keyframes ms-roll { to { transform: translateX(-50%); } }
@media (hover: hover) { .ms-strip[data-roll] .ms-view:hover .ms-track { animation-play-state: paused; } }
.ms-strip:is([data-hold], :has(.ms-cell:focus-visible)) .ms-track { animation-play-state: paused; }
.ms-strip:not([data-state="ok"]):not([data-state="held"]) .ms-track { animation-play-state: paused; }
/* Reduced motion or effects off: the same cards, still, scrolled sideways by hand. */
.rc-site[data-calm] .ms-strip .ms-view { overflow-x: auto; -webkit-mask-image: none; mask-image: none;
  scrollbar-width: thin; scrollbar-color: rgba(57, 255, 136, .3) transparent; }
.rc-site[data-calm] .ms-strip .ms-list { padding-inline-end: 0; }
.rc-site[data-calm] .ms-strip .ms-clone { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ms-strip[data-roll] .ms-view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; }
  .ms-strip[data-roll] .ms-track { animation: none; }
  .ms-strip[data-roll] .ms-list { min-width: var(--ms-view-width); justify-content: space-between; padding-inline-end: 0; }
  .ms-strip[data-roll] .ms-clone { display: none; }
}

.ms-cell { display: grid; grid-template-columns: auto auto; grid-template-areas: "name name" "num req"; justify-content: start;
  align-items: baseline; gap: 3px 7px; flex: none; min-width: 0; padding: 1px 2px; border-radius: 3px; cursor: help; }
.ms-name { grid-area: name; font: 700 12px/1.25 var(--mono); letter-spacing: .01em; color: #e7f5ed; white-space: nowrap; text-shadow: var(--halo); }
.ms-num { grid-area: num; font: 700 22px/1.05 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: #f1fff6; text-shadow: var(--halo); }
.ms-req { grid-area: req; font: 600 12px/1 var(--mono); font-variant-numeric: tabular-nums; color: #c1d9cb; white-space: nowrap; text-shadow: var(--halo); }
.ms-req:empty { display: none; }
.ms-cell[data-value="zero"] .ms-num { color: #d1e8db; }
.ms-cell[data-value="none"] .ms-num { color: var(--ink-3); }
.ms-cell[data-open] .ms-name { color: #fff; }
.ms-cell:focus { outline: none; }
.ms-cell:focus-visible { outline: 1px dashed rgba(57, 255, 136, .75); outline-offset: 2px; }

/* Desktop: the model cards and total share the radar's vertical centre.
   Power stays below the total without shifting either centre line. */
@media (min-width: 981px) {
  .rs-read { position: relative; display: flex; align-items: flex-end; gap: 26px; }
  .rs-side { position: absolute; top: calc(100% + 8px); left: 0; width: max-content; }
  .ms-strip { grid-row: 1 / -1; align-self: center; padding-bottom: 0; }
}

/* ---- sizes ---- */
@media (max-width: 1180px) {
  .flow-head { --scope: 84px; }
  .rs-numbox { font-size: 38px; }
  .rc-site { column-gap: 16px; }
}
/* Narrow: the scope and the total share the first line, the lane runs the full width below it. */
@media (max-width: 980px) {
  .flow-head { --scope: 72px; --pad-x: 12px; --pad-y: 10px; --fall: 30px; --scope-cy: calc(var(--pad-y) + var(--scope) / 2); }
  .rc-site { grid-template-columns: var(--scope) minmax(0, 1fr); grid-template-rows: auto auto auto var(--fall);
    grid-template-areas: "scope read" "summary summary" "lane lane" ". ."; column-gap: 14px; row-gap: 8px; }
  .fh-scope { align-self: start; }
}
@media (max-width: 980px) {
  .rs-read { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 22px; }
}
@media (max-width: 720px) {
  .flow-head { --scope: 38px; --pad-x: 10px; --pad-y: 8px; --fall: 26px; margin: 0 0 10px; }
  .rc-site { column-gap: 6px; row-gap: 6px; }
  .rs-read { flex-wrap: nowrap; gap: 8px; }
  .rs-metric { flex: none; }
  .rs-value { gap: 4px; }
  /* Restore the pre-label size. Only unusually long pairs shrink, together, within the one row. */
  .rs-numbox { font-size: min(32px, calc((100vw - 154px) / (var(--rs-digits, 11) * .61))); }
  .rs-unit { font-size: 10px; }
  .rs-side { gap: 12px; font-size: 11px; flex-wrap: wrap; row-gap: 4px; }
  .rs-kw { font-size: 14px; }
  .rs-heater { width: 15px; height: 15px; }
  .rs-heaters { font-size: 12px; }
  .ms-strip { --ms-gap: 22px; }
  .ms-cell { gap: 2px 6px; }
  .ms-name { font-size: 12px; }
  .ms-num { font-size: 20px; }
  .ms-req { font-size: 11px; }
}
@media (max-width: 389px) {
  /* Give both large figures the whole row; the scope shares the participation row above it. */
  .ladder-shell .flow-head .rc-site { grid-template-areas: "scope summary" "read read" "lane lane"; }
  .rs-numbox { font-size: min(32px, calc((100vw - 110px) / (var(--rs-digits, 11) * .61))); }
}
@media (max-width: 380px) {
  .flow-head { --scope: 32px; }
  .rs-numbox { font-size: min(28px, calc((100vw - 110px) / (var(--rs-digits, 11) * .61))); }
}

/* The 24-hour curve of one card (ui/model-speed-pop.mjs). */
.ms-pop { position: fixed; left: 0; top: 0; z-index: 60; box-sizing: border-box; width: 266px; max-width: calc(100vw - 16px);
  padding: 7px 10px 8px; border: 1px solid var(--tip-line); border-radius: var(--tip-radius); background: var(--tip-bg);
  box-shadow: var(--tip-shadow); color: var(--tip-ink); font: 500 11.5px/1.45 var(--sans); pointer-events: auto;
  animation: ui-tip-fade .14s ease-out; }
.ms-pop[hidden] { display: none; }
.ms-pop > :is(b, span) { display: block; }
.ms-pop-name { overflow-wrap: anywhere; font: 600 12.5px/1.35 var(--mono); color: #eef8f1; }
.ms-pop-cap { color: var(--ink-2); font-size: 11px; }
.ms-pop-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 7px 0;
  padding: 6px 0; border-block: 1px solid var(--tip-line); font-family: var(--mono); }
.ms-pop-stat { min-width: 0; }
.ms-pop-stat dt { color: var(--ink-2); font-size: 10px; white-space: nowrap; }
.ms-pop-stat dd { margin: 2px 0 0; color: #eef8f1; font-size: 17px; line-height: 1.2; font-weight: 650; font-variant-numeric: tabular-nums; }
.ms-pop-stat:first-child dd { color: var(--accent); }
.ms-pop-plot { position: relative; height: 60px; margin: 6px 0 2px;
  background: radial-gradient(circle, rgba(57, 255, 136, .09) .7px, transparent 1px) 0 0 / 4px 4px; }
.ms-pop-svg { display: block; max-width: 100%; overflow: visible; }
.ms-pop-grid { fill: none; stroke: rgba(57, 255, 136, .22); stroke-width: 1; stroke-dasharray: 1 3; }
.ms-pop-line { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(57, 255, 136, .45)); }
.ms-pop-dots circle { fill: var(--accent); }
.ms-pop-dots .ms-pop-last { fill: #eef8f1; }
.ms-pop-current, .ms-pop-plot[data-status="ready"]::after { position: absolute; right: 0; padding-left: 4px; background: var(--tip-bg);
  font: 600 10px/1 var(--mono); color: var(--ink-2); }
.ms-pop-current { right: 12px; transform: translateY(-50%); padding: 2px 4px; border-radius: 3px; }
.ms-pop-current:empty { display: none; }
.ms-pop-plot[data-status="ready"]::after { content: "0"; bottom: -2px; color: var(--ink-3); }
.ms-pop-note { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); }
.ms-pop-note:empty { display: none; }
.ms-pop > .ms-pop-axis { display: flex; justify-content: space-between; min-height: 13px; font: 500 10px/1.3 var(--mono); color: var(--ink-3); }
.ms-pop-req { margin-top: 4px; font-variant-numeric: tabular-nums; }
.ms-pop-req:empty { display: none; }
.ms-pop-now { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ms-pop-arrow { position: absolute; left: var(--tip-x, 50%); width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);
  background: var(--tip-bg); border: 1px solid var(--tip-line); }
.ms-pop[data-side="top"] .ms-pop-arrow { bottom: -5px; border-top: 0; border-left: 0; }
.ms-pop[data-side="bottom"] .ms-pop-arrow { top: -5px; border-right: 0; border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .ms-pop { animation: none; } }
html:has(#fx-toggle[aria-pressed="false"]) .ms-pop { animation: none; }

/* i panel: the short hover lines for touch screens, the pick and one row per model, the long notes folded. */
.rs-tips { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 2px; color: var(--ink-2); font-size: 12.5px; }
.rs-tips li::before { content: "› "; color: var(--accent-2); }
.ms-detail-title { margin: 12px 0 6px; font: 600 12.5px/1.3 var(--mono); color: var(--ink); }
.ms-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 20px; margin: 0 0 8px; }
.ms-facts dt { font: 600 10.5px/1.4 var(--mono); letter-spacing: .05em; color: var(--ink-3); }
.ms-facts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; white-space: pre-line; }
@media (max-width: 720px) { .ms-facts { grid-template-columns: minmax(0, 1fr); } }
.rs-more { margin: 10px 0 4px; }
.rs-more > summary { width: max-content; cursor: pointer; font: 600 12px/1.6 var(--mono); color: var(--ink-2); }
.rs-more > summary:hover, .rs-more[open] > summary { color: var(--ink); }

/* Site activity replaces the power estimate and its information button. */
.rs-summary { position: absolute; left: calc(var(--scope) + 20px); right: 0; bottom: 0;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 20px; color: var(--ink-2); font: 500 11px/1.3 var(--mono); }
.rs-summary > span { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.rs-summary b { color: #e5f6eb; font-size: 12px; font-variant-numeric: tabular-nums; }
@media (min-width: 981px) and (max-width: 1180px) { .rs-summary { left: calc(var(--scope) + 16px); } }
@media (max-width: 980px) { .rs-summary { position: static; grid-area: summary; gap: 6px 16px; } }
@media (max-width: 480px) { .rs-summary { gap: 5px 10px; font-size: 10px; } .rs-summary b { font-size: 11px; } }