/* The pages' shared look: the launcher's direction D (its tokens: tokens.css, the protocol's theme.g.css generated
   from theme.tokens.json). Black ground, white text, tones not strokes, one green accent that may fill, gold for the mark only,
   amber warns, red is danger. Saira: Condensed ExtraBold leaning for display, Semi Condensed for everything read.
   8 px grid; corners on the launcher's scale (Huskui "Normal": tiles 9, panels 14, controls 6). */

@font-face { font-family: "Saira Condensed"; font-weight: 800; font-display: swap; src: url("../fonts/SairaCondensed-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Saira Semi Condensed"; font-weight: 400; font-display: swap; src: url("../fonts/SairaSemiCondensed-Regular.ttf") format("truetype"); }
@font-face { font-family: "Saira Semi Condensed"; font-weight: 600; font-display: swap; src: url("../fonts/SairaSemiCondensed-SemiBold.ttf") format("truetype"); }

:root {
  color-scheme: dark;
  --corner-tile: 9px;
  --corner-panel: 14px;
  --corner-control: 6px;
  --body-font: "Saira Semi Condensed", "Segoe UI", system-ui, sans-serif;
  --display-font: "Saira Condensed", "Arial Narrow", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--text);
  font: 400 var(--size15)/1.5 var(--body-font);
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
::selection { background: var(--accent); color: var(--on-accent); }

/* Display: leaning capitals (the font has no italic: a 12 degree skew, as the launcher's TextBlock.display). */
.display {
  display: inline-block; font-family: var(--display-font); font-weight: 800; text-transform: uppercase;
  transform: skewX(-12deg); transform-origin: 0 100%; letter-spacing: .02em; line-height: 1; padding-right: .2em;
}
.d64 { font-size: var(--display64); }
.d40 { font-size: var(--display40); letter-spacing: .03em; }
.d20 { font-size: var(--display20); letter-spacing: .06em; }

/* The mark: a gold plate, leaning. */
.mark { display: inline-block; width: 12px; height: 24px; background: var(--gold); transform: skewX(-15deg); border-radius: 2px; flex: none; }

/* Small spaced capitals: a label above a value. */
.label { font-size: var(--size11); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.dim { color: var(--dim); }
.faint { color: var(--faint); }
.good { color: var(--accent); }
.warn { color: var(--warn); }
.bad { color: var(--danger); }

/* A dot that says a state: green up, amber between, red down, grey off. */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--off); flex: none; }
.dot.good { background: var(--accent); }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--danger); }
.dot.live { animation: pulse 2s var(--ease-out) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dot.live { animation: none; } }

/* Tiles: a number and its label. */
.tile { background: var(--well); border-radius: var(--corner-tile); padding: var(--gap16) var(--gap16) 12px; min-width: 0; }
.tile .value { display: block; font-family: var(--display-font); font-weight: 800; font-size: var(--display40); line-height: 1.1; color: var(--text); }
.tile .value.good { color: var(--accent); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tile .value.warn { color: var(--warn); }
.tile .value.bad { color: var(--danger); }
[hidden] { display: none !important; }