/* axi0 Metrics (/metrics/): the axi0 family look, as on Tools and Notes. True black, Instrument Sans, the orange core
   as the one accent. No inline styles (style-src 'self'). The layout is fixed before the counters arrive: every value
   sits in a box of its final size, so nothing moves when the JSON is read (CLS 0), and the one part that grows (the
   engine table) is last on the page. */
@font-face {
  font-family: "Instrument Sans";
  src: url(/axi0/fonts/instrument-sans-latin-var.woff2) format("woff2");
  font-weight: 400 700;
  font-display: optional;
}
:root {
  --bg: #000; --panel: #0a0a0c; --hover: #141418;
  --line: #1c1c21; --line2: #2a2a31; --line3b: #33333b;
  --head: #fff; --text: #d6d6dc; --mute: #8e8e98;
  --core: #f6a04d; --core-ink: #f6a04d; --on-core: #000;
  --up: #7bd88f; --down: #ff8f78; --unknown: #5a5a64;
  color-scheme: dark;
}
html[data-axi0-theme="light"] {
  --bg: #f6f2ea; --panel: #fffdf9; --hover: #efe8dc;
  --line: #e6dfd3; --line2: #d3cabb; --line3b: #b9ae9c;
  --head: #17140f; --text: #2c2823; --mute: #675f54;
  --core-ink: #9a4a0a; --up: #1f7a3a; --down: #b3261e; --unknown: #a39a8c;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  html:not([data-axi0-theme="dark"]) {
    --bg: #f6f2ea; --panel: #fffdf9; --hover: #efe8dc;
    --line: #e6dfd3; --line2: #d3cabb; --line3b: #b9ae9c;
    --head: #17140f; --text: #2c2823; --mute: #675f54;
    --core-ink: #9a4a0a; --up: #1f7a3a; --down: #b3261e; --unknown: #a39a8c;
    color-scheme: light;
  }
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--text); background: var(--bg);
  font: 15px/1.55 "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
}
a { color: var(--core-ink); text-underline-offset: 3px; }
::selection { background: rgba(246, 160, 77, .35); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 8px 14px; border-radius: 999px; background: var(--core); color: var(--on-core); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---- the app bar, as on every suite page ------------------------------------------------------------------------ */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1120px; margin: 0 auto; padding: 22px 20px 8px; }
.mark { display: inline-flex; align-items: baseline; gap: .12em; color: var(--head); text-decoration: none; font-size: 26px; font-weight: 600; letter-spacing: -.045em; white-space: nowrap; }
.mark-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--core); box-shadow: 0 0 9px var(--core); transform: translateY(-2px); }
.mark-s { color: var(--mute); font-weight: 500; }
.top-right { display: flex; align-items: center; gap: 14px; }
.me-slot { position: relative; flex: none; width: 36px; height: 36px; }
.me-slot:empty { display: none; }
#axi0-apps { min-width: 84px; min-height: 40px; }   /* the launcher's two buttons (40 px each, 4 px apart) before launcher.js draws them: nothing moves */
@media (max-width: 600px) { .mark { font-size: 22px; } }

/* ---- the page ------------------------------------------------------------------------------------------------ */
main { max-width: 1120px; margin: 0 auto; padding: 8px 20px 60px; }
.intro h1 { margin: 18px 0 6px; font-size: 40px; letter-spacing: -.035em; color: var(--head); line-height: 1.05; }
.lede { max-width: 62em; margin: 0 0 10px; color: var(--text); }
.counted { max-width: 62em; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); font-size: 14px; line-height: 1.5; }
.counted b { color: var(--head); font-weight: 600; }
.error { color: var(--down); }
.updated { min-height: 44px; margin: 0 0 6px; color: var(--mute); font-size: 14px; }   /* two lines: the no-data line wraps on phones */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 22px; }
.card { min-height: 128px; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.card h2, .spark h2, .engines h2 { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.big { margin: 0; min-height: 44px; font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; color: var(--head); font-variant-numeric: tabular-nums; }
.big .unit { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--mute); }
.sub { margin: 4px 0 0; min-height: 22px; color: var(--mute); font-size: 14px; font-variant-numeric: tabular-nums; }
.stat { color: var(--text); }   /* the one line under a chart or a list that the JSON fills: one line, so nothing below it moves */
.mute { color: var(--mute); }
.health { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.health li { display: flex; align-items: center; gap: 10px; min-height: 22px; color: var(--head); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--unknown); flex: none; }
.dot[data-s="up"] { background: var(--up); box-shadow: 0 0 8px var(--up); }
.dot[data-s="down"] { background: var(--down); box-shadow: 0 0 8px var(--down); }
.spark { margin: 0 0 22px; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
#spark { display: block; width: 100%; height: 80px; margin-top: 8px; }
#spark .pts { fill: var(--core); }
#spark .median { stroke: var(--mute); stroke-width: 1; stroke-dasharray: 4 4; }
#spark .area { fill: rgba(246, 160, 77, .14); }
#spark .line { fill: none; stroke: var(--core); stroke-width: 1.5; }
.engines { padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-height: 32px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--line2); border-radius: 999px; font-size: 14px; color: var(--head); }
.table-wrap { overflow-x: auto; margin-top: 12px; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--mute); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
td { color: var(--text); }
td:first-child { color: var(--head); }
td.num, th.num { text-align: right; }
tr.down td { color: var(--mute); }
.foot { margin: 0 0 18px; color: var(--mute); font-size: 14px; }   /* above the counters: the engine table, the one part that grows, is last */
@media (max-width: 760px) {
  .cards { grid-template-columns: 1fr; }
  .intro h1 { font-size: 32px; }
}

/* Until launcher.js has drawn the bar's buttons (locked, the Make it mine pill comes in the same task), the
   top-right stays hidden: this light page can paint before the deferred launcher runs, and the group then grew
   from 84 to 198 px in view on desktops (release 36's header sweep). Hidden, it appears whole. */
.top-right:not(:has(#axi0-apps-btn)) { visibility: hidden; }