@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(figtree-latin-ext.f153aa07c1b1.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(figtree-latin.8330490a01c6.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: 'Inter Tight';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(inter-tight-latin-ext.3c299662298b.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(inter-tight-latin.83d548cd73ef.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-weight: 400;
  font-display: swap;
  src: url(ibm-plex-mono-400-latin-ext.f1050dc5317b.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(ibm-plex-mono-400-latin.c36f509c0a8f.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-weight: 500;
  font-display: swap;
  src: url(ibm-plex-mono-500-latin-ext.77f03e26f981.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(ibm-plex-mono-500-latin.a76f53ca6612.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-weight: 600;
  font-display: swap;
  src: url(ibm-plex-mono-600-latin-ext.1b6b18fd0fd2.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(ibm-plex-mono-600-latin.ad4580d8cb4b.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;
}

/* ============================================================
   TOKENS — docs/07-designsystem.md. No component sets hex.
   Angular: 2px radius everywhere. Clear colours, no pastels.
   ============================================================ */
:root {
  --bg:#F1F4F6; --surface:#FFFFFF; --surface-2:#E7ECEF; --surface-3:#DAE1E6;
  --border:#CFD8DE; --border-strong:#9EAEB8;
  --ink:#0A1015; --ink-muted:#44535E; --ink-faint:#5F6E79;

  --accent:#0B5FA5; --accent-hover:#08497F; --accent-soft:#D7E8F7; --on-accent:#FFFFFF;

  --good:#0E7A43; --warn:#9A5B00; --crit:#C2231A;
  --good-soft:#D5F0E0; --warn-soft:#FBE7C4; --crit-soft:#FBDBD8;
  --on-status:#FFFFFF;

  --data-1:#0B5FA5; --data-2:#2E8FBF; --data-3:#6FB6D4; --data-4:#A9D3E4;
  --cat-1:#0B5FA5; --cat-2:#C2571A; --cat-3:#00875F; --cat-4:#8A3FA8;
  --grid:#E7ECEF; --axis:#5F6E79;
  --tip-bg:#0A1015; --tip-ink:#FFFFFF;
  --su:#6B3FA0; --su-ink:#FFFFFF; --su-soft:#F0E9F8;

  --shadow:0 1px 0 rgba(10,16,21,.04);
  --shadow-lg:0 8px 28px rgba(10,16,21,.22);
  --r:2px; --r-pill:999px; --h:40px; --h-sm:32px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0A0F13; --surface:#121A20; --surface-2:#1A242B; --surface-3:#243039;
    --border:#2B373F; --border-strong:#4C5D67;
    --ink:#EAF1F5; --ink-muted:#AAB9C3; --ink-faint:#8B9BA6;
    --accent:#4DA3E8; --accent-hover:#7CBDF1; --accent-soft:#10293D; --on-accent:#05131F;
    --good:#2FC077; --warn:#E3A73E; --crit:#FF6E60;
    --good-soft:#0E2B1D; --warn-soft:#2E2413; --crit-soft:#341815;
    --on-status:#05131F;
    --data-1:#4DA3E8; --data-2:#2E8FBF; --data-3:#3C6E86; --data-4:#2A4A59;
    --cat-1:#3A8FDC; --cat-2:#DB7430; --cat-3:#12A374; --cat-4:#A574DE;
    --grid:#243039; --axis:#8B9BA6;
    --tip-bg:#EAF1F5; --tip-ink:#0A0F13;
    --su:#B68BEA; --su-ink:#12061F; --su-soft:#1C1430;
    --shadow:0 1px 0 rgba(0,0,0,.3);
    --shadow-lg:0 8px 28px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --bg:#0A0F13; --surface:#121A20; --surface-2:#1A242B; --surface-3:#243039;
  --border:#2B373F; --border-strong:#4C5D67;
  --ink:#EAF1F5; --ink-muted:#AAB9C3; --ink-faint:#8B9BA6;
  --accent:#4DA3E8; --accent-hover:#7CBDF1; --accent-soft:#10293D; --on-accent:#05131F;
  --good:#2FC077; --warn:#E3A73E; --crit:#FF6E60;
  --good-soft:#0E2B1D; --warn-soft:#2E2413; --crit-soft:#341815;
  --on-status:#05131F;
  --data-1:#4DA3E8; --data-2:#2E8FBF; --data-3:#3C6E86; --data-4:#2A4A59;
    --cat-1:#3A8FDC; --cat-2:#DB7430; --cat-3:#12A374; --cat-4:#A574DE;
  --grid:#243039; --axis:#8B9BA6;
  --tip-bg:#EAF1F5; --tip-ink:#0A0F13;
  --su:#B68BEA; --su-ink:#12061F; --su-soft:#1C1430;
  --shadow:0 1px 0 rgba(0,0,0,.3);
  --shadow-lg:0 8px 28px rgba(0,0,0,.6);
}

html { scrollbar-gutter: stable; }

/* Scrollbar — thin, round, tinted. Shows when needed, otherwise not. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
  background:var(--border-strong); border-radius:var(--r-pill);
  border:2px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover { background:var(--ink-faint); background-clip:padding-box; }
::-webkit-scrollbar-corner { background:transparent; }
* { box-sizing: border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
body.locked { overflow:hidden; }

h1,h2,h3 { margin:0; text-wrap:balance; letter-spacing:-.012em; }
h1 { font-size:22px; font-weight:600; }
h2 { font-size:15px; font-weight:600; }
h3 { font-size:13px; font-weight:600; }
p { margin:0; }
.num { font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; white-space:nowrap; }
.eyebrow { font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
.muted { color:var(--ink-muted); }
.faint { color:var(--ink-faint); }
.spacer { margin-left:auto; }

:where(a,input,select,summary,[tabindex]):focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r);
}
button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ============================================================ LAYOUT */
.shell { display:grid; grid-template-columns:236px 1fr; min-height:100dvh; }

/* min-width:0 — without it a grid cannot shrink its column below the
   content's width, and in the narrow layout the menu row pushes the whole
   page out so it scrolls sideways. .main already has it. */
.side {
  min-width:0;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:22px;
  padding:18px 12px; position:sticky; top:env(safe-area-inset-top,0px);
  height:100dvh; overflow-y:auto;
}
.brand { display:flex; align-items:center; gap:10px; padding:0 10px; }
.brand-mark {
  width:26px; height:26px; background:linear-gradient(135deg, #1D4ED8, #0891B2); flex-shrink:0;
  display:grid; place-items:center; border-radius:var(--r);
}
.brand-name { font-weight:600; font-size:14px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-sub { font-size:11px; color:var(--ink-muted); line-height:1.25; white-space:nowrap; }

.nav { display:flex; flex-direction:column; gap:2px; }
.nav-group { padding:0 10px 8px; }
.nav-item {
  display:flex; align-items:center; gap:10px;
  height:var(--h); padding:0 10px; border-radius:var(--r);
  background:none; border:0; border-left:2px solid transparent; width:100%;
  cursor:pointer; font:inherit; font-weight:500; color:var(--ink-muted); text-align:left;
}
.nav-item:hover { background:var(--surface-2); color:var(--ink); }
.nav-item[aria-current="page"] {
  background:var(--accent-soft); color:var(--accent);
  font-weight:600; border-left-color:var(--accent);
}
.nav-item svg { width:19px; height:19px; flex-shrink:0; }
.nav-badge {
  margin-left:auto; font-size:11px; font-weight:700; padding:2px 8px; min-width:22px; text-align:center;
  border-radius:var(--r-pill); background:var(--warn); color:var(--on-status);
}
.side-foot { margin-top:auto; padding:0; display:flex; align-items:center; gap:8px; }

.main { min-width:0; display:flex; flex-direction:column; }
.topbar {
  position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 24px; background:var(--bg); border-bottom:1px solid var(--border);
}
.content { padding:24px; display:flex; flex-direction:column; gap:24px; }

/* ============================================================ BUTTONS */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--h); padding:0 18px; border-radius:var(--r-pill);
  font:inherit; font-weight:600; font-size:13px; cursor:pointer;
  border:1px solid transparent; white-space:nowrap;
  transition:background .12s ease-out, border-color .12s ease-out, color .12s ease-out;
}
.btn svg { width:16px; height:16px; }
.btn-primary { background:var(--accent); color:var(--on-accent); }
.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) { background:var(--accent-hover); }
.btn-secondary { background:var(--surface); color:var(--ink); border-color:var(--border-strong); }
.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) { background:var(--surface-2); }
.btn-ghost { background:none; color:var(--ink-muted); }
.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) { background:var(--surface-2); color:var(--ink); }
.btn-destructive { background:var(--crit); color:var(--on-status); }
.btn-destructive:hover:not(:disabled):not([aria-disabled="true"]) { filter:brightness(1.08); }
.btn:disabled, .btn[aria-disabled="true"] { opacity:.4; cursor:not-allowed; }
.btn-sm { height:var(--h-sm); padding:0 14px; font-size:12px; }
.btn-icon { width:var(--h-sm); height:var(--h-sm); padding:0; border-radius:50%; }

/* ============================================================ FIELDS */
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field > label { font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; }
.field .help { font-size:12px; color:var(--ink-muted); }
.field .error { font-size:12px; color:var(--crit); font-weight:500; display:flex; align-items:center; gap:6px; }

.input, .select-btn {
  height:var(--h); width:100%; padding:0 11px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--border-strong); border-radius:var(--r);
  font:inherit; font-size:14px;
  transition:border-color .12s ease-out, box-shadow .12s ease-out;
}
.input::placeholder { color:var(--ink-faint); }
.input:hover, .select-btn:hover { border-color:var(--ink-faint); }
.input:focus, .select-btn:focus-visible {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.input[aria-invalid="true"] { border-color:var(--crit); }
.input:disabled, .select-btn:disabled { background:var(--surface-2); color:var(--ink-faint); cursor:not-allowed; }
.input-wrap { position:relative; display:flex; }
.input-wrap .input { padding-right:42px; }
.in-field-btn {
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; display:grid; place-items:center;
  background:none; border:0; border-radius:var(--r); cursor:pointer; color:var(--ink-muted);
}
.in-field-btn:hover { background:var(--surface-2); color:var(--ink); }
.in-field-btn svg { width:18px; height:18px; }

.check { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.check input {
  appearance:none; margin:0; flex-shrink:0;
  width:18px; height:18px; margin-top:2px;
  border:1px solid var(--border-strong); border-radius:var(--r);
  background:var(--surface); cursor:pointer; display:grid; place-items:center;
  transition:background .12s ease-out, border-color .12s ease-out;
}
.check input:checked { background:var(--accent); border-color:var(--accent); }
.check input:checked::after {
  content:""; width:10px; height:6px; margin-top:-2px;
  border-left:2px solid var(--on-accent); border-bottom:2px solid var(--on-accent);
  transform:rotate(-45deg);
}
.check input:disabled { opacity:.55; cursor:not-allowed; }
.check span { font-size:13px; }

/* ============================================================ DROPDOWN */
.select { position:relative; }
.select-btn { display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; text-align:left; }
.select-btn > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.select-btn svg { width:15px; height:15px; color:var(--ink-muted); flex-shrink:0; transition:transform .12s ease-out; }
.select[data-open="true"] .select-btn svg { transform:rotate(180deg); }
.select[data-open="true"] .select-btn { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.select-panel {
  position:absolute; z-index:60; top:calc(100% + 4px); right:0; min-width:100%;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r); box-shadow:var(--shadow-lg);
  padding:4px; display:flex; flex-direction:column; gap:1px;
}
.select-opt {
  display:flex; align-items:center; gap:10px; height:36px; padding:0 12px;
  border:0; background:none; border-radius:var(--r); cursor:pointer;
  font:inherit; font-size:13px; color:var(--ink); text-align:left; white-space:nowrap;
}
.select-opt:hover, .select-opt:focus-visible { background:var(--surface-2); outline:none; }
.select-opt[aria-selected="true"] { font-weight:600; }
.select-opt svg { width:14px; height:14px; color:var(--accent); flex-shrink:0; }
.select-opt .tick-space { width:14px; flex-shrink:0; }
.select-sep { height:1px; background:var(--border); margin:4px 2px; }

.range-row { display:flex; align-items:flex-end; gap:8px; padding:8px 6px 4px; }
.range-row .field { width:140px; }
.range-row .input { height:var(--h-sm); font-size:13px; }

/* ============================================================ CARD */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:18px; }
.card + .card { margin-top:0; } /* spacing is set by gap, never by margin */
.card-head { display:flex; align-items:center; gap:10px; margin-bottom:18px; min-height:var(--h-sm); flex-wrap:wrap; }
.card-head h2 { flex:0 1 auto; }
.card-flush { padding-bottom:0; overflow:hidden; }

.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tile {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  border-top:2px solid var(--data-1);
  padding:16px 18px; display:flex; flex-direction:column; gap:4px; min-width:0;
}
.tile .val { font-size:23px; font-weight:600; letter-spacing:-.02em; white-space:nowrap;
  display:flex; align-items:baseline; gap:4px; }
.unit { font-family:'Figtree', sans-serif; font-size:14px; font-weight:600; color:var(--ink-muted); }
.tile .sub { font-size:12px; color:var(--ink-muted); display:flex; align-items:center; gap:6px; }

/* ============================================================ METERS */
.meter-top { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.meter-val { font-size:30px; font-weight:600; letter-spacing:-.025em; line-height:1.1; white-space:nowrap; }
.meter-of { font-size:14px; color:var(--ink-muted); white-space:nowrap; }
.meter-track { height:14px; background:var(--surface-3); position:relative; border-radius:var(--r); overflow:hidden; }
.meter-fill { height:100%; background:var(--good); transition:width .3s ease-out; }
.meter-fill[data-state="warn"] { background:var(--warn); }
.meter-fill[data-state="crit"] { background:var(--crit); }
.meter-mark { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink); }
.meter-legend { display:flex; gap:24px; flex-wrap:wrap; margin-top:16px; font-size:12px; color:var(--ink-muted); }
.meter-legend b { color:var(--ink); font-weight:600; }

/* ============================================================ TABLE */
.table-scroll {
  overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  margin:0 -18px;
}
table { width:100%; border-collapse:collapse; font-size:13px; min-width:780px; }
thead th {
  text-align:left; font-weight:700; font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-muted);
  padding:10px 18px; background:var(--surface-2);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  white-space:nowrap;
}
tbody td { padding:12px 18px; border-bottom:1px solid var(--border); vertical-align:middle; white-space:nowrap; }
tbody tr:last-child td { border-bottom:0; padding-bottom:14px; }
tr.clickable { cursor:pointer; }
tr.clickable:hover { background:var(--surface-2); }
tr.clickable:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.ta-r { text-align:right; }
.ta-c { text-align:center; }
.cell-main { font-weight:600; }
.cell-sub { font-size:12px; color:var(--ink-muted); }
.chev { color:var(--ink-faint); width:15px; height:15px; }

.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:var(--r-pill); font-size:11px; font-weight:700;
  white-space:nowrap; letter-spacing:.01em;
}
.badge-good { background:var(--good); color:var(--on-status); }
.badge-warn { background:var(--warn); color:var(--on-status); }
.badge-crit { background:var(--crit); color:var(--on-status); }
.badge-info { background:var(--accent); color:var(--on-accent); }
.badge-neutral { background:var(--surface-3); color:var(--ink); }
.badge-outline { background:none; border:1px solid var(--border-strong); color:var(--ink-muted); font-weight:600; }

/* ============================================================ TOOLTIP
   Drawn in its own layer directly on body (position:fixed), never inside
   the flow. So it can neither be clipped by a container, end up behind
   the sticky menu row, nor stick out past the viewport. */
.tip-icon {
  width:16px; height:16px; flex-shrink:0; border:1px solid var(--border-strong); border-radius:var(--r);
  display:inline-grid; place-items:center; font-size:10px; font-weight:700;
  color:var(--ink-muted); cursor:help; background:none; padding:0;
  font-family:inherit; line-height:1; vertical-align:middle;
}
.tip-icon:hover, .tip-icon[data-tip-open] { color:var(--ink); border-color:var(--ink-faint); }
/* The hit area is larger than the ring. A 16 px button cannot be hit with a thumb. */
.tip-icon::after { content:""; position:absolute; inset:-9px; }
.tip-icon { position:relative; }

/* A heading or label with an explanation shows it with a dotted underline. */
th[data-tip], .eyebrow[data-tip], .has-tip {
  text-decoration:underline dotted; text-underline-offset:3px;
  text-decoration-color:var(--border-strong); cursor:help;
}
th[data-tip]:hover, .eyebrow[data-tip]:hover, .has-tip:hover { text-decoration-color:var(--ink-muted); }

#tip-layer {
  position:fixed; z-index:400; top:0; left:0;
  background:var(--tip-bg); color:var(--tip-ink);
  padding:9px 11px; border-radius:var(--r);
  font-size:12px; line-height:1.45; font-weight:400; text-align:left;
  max-width:260px; box-shadow:var(--shadow-lg); pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .12s ease-out;
}
#tip-layer[data-show="1"] { opacity:1; visibility:visible; }
#tip-layer b { font-weight:600; }
#tip-layer::after {
  content:""; position:absolute; left:var(--arrow-x,50%); margin-left:-5px;
  border:5px solid transparent;
}
#tip-layer[data-side="top"]::after { top:100%; border-top-color:var(--tip-bg); }
#tip-layer[data-side="bottom"]::after { bottom:100%; border-bottom-color:var(--tip-bg); }

/* ============================================================ MODE TOGGLE */
.mode-switch {
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  padding:4px; background:var(--surface-2); border-radius:var(--r-pill);
}
.mode-switch button {
  height:36px; border:0; background:none; border-radius:var(--r-pill);
  font:inherit; font-size:12px; font-weight:600; color:var(--ink-muted); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mode-switch button:hover { color:var(--ink); }
.mode-switch button[aria-pressed="true"] { background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
body[data-mode="su"] .mode-switch button[data-mode="su"][aria-pressed="true"] {
  background:var(--su); color:var(--su-ink);
}
body[data-mode="su"] .brand-mark { background:var(--su); }
body[data-mode="su"] .brand-mark svg { stroke:var(--su-ink); }

.crumbs { display:flex; align-items:center; gap:8px; font-size:13px; }
.crumbs button {
  border:0; background:none; padding:0; font:inherit; color:var(--accent);
  cursor:pointer; font-weight:600;
}
.crumbs button:hover { text-decoration:underline; }
.crumbs svg { width:14px; height:14px; color:var(--ink-faint); }

.tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); overflow-x:auto; }
.tabs button {
  height:38px; padding:0 14px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; color:var(--ink-muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs button:hover { color:var(--ink); }
.tabs button[aria-selected="true"] { color:var(--accent); border-bottom-color:var(--accent); }

.note {
  display:flex; flex-direction:column; gap:6px;
  padding:14px 16px; border:1px solid var(--border); border-left:2px solid var(--su);
  border-radius:var(--r); background:var(--surface);
}
.note-meta { font-size:11px; color:var(--ink-faint); display:flex; gap:10px; }

/* ============================================================ SUPERADMIN
   Everything only Carl-Johan sees carries this marking. Nothing
   customer-facing may look like this. */
.su {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:var(--r-pill);
  background:var(--su); color:var(--su-ink);
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap;
}
.su::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.su-banner {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:16px 18px; border:1px solid var(--su);
  border-left:3px solid var(--su); background:var(--su-soft); border-radius:var(--r);
  font-size:13px;
}
.su-card { border-left:3px solid var(--su); }
[data-su] { position:relative; }

.user-chip {
  display:flex; align-items:center; gap:9px; width:100%;
  padding:6px 8px; border:0; background:none; border-radius:var(--r);
  cursor:pointer; font:inherit; text-align:left; color:inherit;
}
.user-chip:hover { background:var(--surface-2); }
.user-chip[aria-current="page"] { background:var(--accent-soft); }
.avatar {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; font-size:11px; font-weight:700;
}

.doc-nav { display:flex; gap:8px; flex-wrap:wrap; }
.doc-nav button {
  height:var(--h-sm); padding:0 14px; border-radius:var(--r-pill);
  border:1px solid var(--border-strong); background:var(--surface);
  font:inherit; font-size:12px; font-weight:600; color:var(--ink-muted); cursor:pointer;
}
.doc-nav button:hover { background:var(--surface-2); color:var(--ink); }
.doc-nav button[aria-pressed="true"] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.doc > div > div { display:flex; flex-direction:column; gap:10px; }
.doc h3 { margin:0; }
.doc .code-block { margin:0; }
.doc .table-scroll { margin:0; }
.doc-sec > div { display:flex; flex-direction:column; gap:10px; }
.doc p, .doc li { font-size:13px; color:var(--ink-muted); }
.doc ul { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px; }
.doc strong { color:var(--ink); }
.doc-sec[hidden] { display:none; }

/* ============================================================ KEBAB MENU */
.menu-panel {
  position:absolute; z-index:60; top:calc(100% + 6px); right:0; min-width:230px;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r); box-shadow:var(--shadow-lg); padding:4px;
  display:flex; flex-direction:column; gap:1px;
}
.menu-item {
  display:flex; align-items:center; gap:10px; height:36px; padding:0 12px;
  border:0; background:none; border-radius:var(--r); cursor:pointer;
  font:inherit; font-size:13px; color:var(--ink); text-align:left; white-space:nowrap;
}
.menu-item:hover, .menu-item:focus-visible { background:var(--surface-2); outline:none; }
.menu-item[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
.menu-item[aria-disabled="true"]:hover { background:none; }
.menu-item svg { width:16px; height:16px; color:var(--ink-muted); flex-shrink:0; }
.menu-item .kbd { margin-left:auto; font-size:11px; color:var(--ink-faint); font-family:'IBM Plex Mono', monospace; }
.menu-sep { height:1px; background:var(--border); margin:4px 2px; }
.menu-label { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-faint); padding:8px 12px 6px; }

/* ============================================================ MODAL + PANEL */
.scrim {
  position:fixed; inset:0; z-index:100; background:rgba(8,14,18,.5);
  animation:fade .12s ease-out;
}
.scrim-center { display:grid; place-items:center; padding:16px; }
.modal {
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r);
  box-shadow:var(--shadow-lg); width:min(460px,100%); padding:18px;
  display:flex; flex-direction:column; gap:16px; animation:pop .16s ease-out;
}
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:2px; }
.warn-line { display:flex; align-items:flex-start; gap:10px; }
.warn-line > svg { width:20px; height:20px; color:var(--crit); flex-shrink:0; margin-top:2px; }

.panel {
  position:fixed; top:0; right:0; bottom:0; z-index:110;
  width:min(520px,100%); background:var(--surface);
  border-left:1px solid var(--border-strong); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; animation:slide .18s ease-out;
}
.panel-head {
  display:flex; align-items:flex-start; gap:12px;
  padding:18px; border-bottom:1px solid var(--border);
}
.panel-body { padding:18px; overflow-y:auto; display:flex; flex-direction:column; gap:24px; }
.panel-foot {
  margin-top:auto; padding:16px 18px; border-top:1px solid var(--border);
  display:flex; gap:10px; justify-content:flex-end; background:var(--surface);
}
.kv { display:grid; grid-template-columns:150px 1fr; gap:12px 18px; font-size:13px; align-items:baseline; }
.kv dt { color:var(--ink-muted); }
.kv dd { margin:0; font-weight:500; overflow-wrap:anywhere; }
.code-block {
  font-family:'IBM Plex Mono', monospace; font-size:12px; line-height:1.6;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r);
  padding:11px 12px; overflow-x:auto; white-space:pre;
}
.section-title { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:8px; }

@keyframes fade { from { opacity:0 } }
@keyframes pop { from { opacity:0; transform:translateY(6px) } }
@keyframes slide { from { transform:translateX(24px); opacity:0 } }

.progress { height:6px; background:var(--surface-3); border-radius:var(--r); overflow:hidden; }
.progress i { display:block; height:100%; background:var(--accent); width:0; transition:width .2s linear; }

/* ============================================================ TOAST */
.toasts {
  position:fixed; z-index:200; right:16px; left:16px;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--bg); border-radius:var(--r);
  box-shadow:var(--shadow-lg); padding:11px 14px;
  font-size:13px; font-weight:500; max-width:380px; animation:pop .16s ease-out;
}
.toast svg { width:16px; height:16px; flex-shrink:0; }

/* ============================================================ CHART */
.spark { display:flex; align-items:flex-end; gap:4px; height:72px; }
.spark i { flex:1; background:var(--data-3); min-height:3px; display:block; border-radius:var(--r) var(--r) 0 0; }
.spark i:hover, .spark i:focus-visible { background:var(--data-1); outline:none; }
.spark i[data-today="true"] { background:var(--data-1); }
.spark-axis { display:flex; justify-content:space-between; margin-top:12px; font-size:11px; color:var(--ink-muted); }

.split { display:grid; grid-template-columns:1.45fr 1fr; gap:16px; align-items:start; }
.row { display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.row > .field { flex:1 1 190px; }
.stack { display:flex; flex-direction:column; gap:16px; }
.stack-cards { display:flex; flex-direction:column; gap:24px; }
.stack-lg { display:flex; flex-direction:column; gap:18px; }

/* A view is a column with even spacing. Without this every card sits directly
   against the next — that was the root cause of the margins looking broken. */
.view { display:flex; flex-direction:column; gap:24px; }
.view[hidden] { display:none !important; }
.tab-sec { display:flex; flex-direction:column; gap:24px; }
.tab-sec[hidden] { display:none !important; }

/* ============================================================ CHART
   Drawn as SVG with a viewBox, so it scales with the card instead of being
   redrawn on every window resize. The text carries the text token, never
   the series colour — the colour sits on the mark, not on the number. */
.chart { width:100%; display:block; }
.chart .grid-line { stroke:var(--grid); stroke-width:1; }
.chart .axis-text { fill:var(--axis); font-size:11px; font-family:'Figtree',sans-serif; }
.chart .axis-num { fill:var(--axis); font-size:11px; font-family:'IBM Plex Mono',monospace; }
.chart .series-line { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chart .series-area { opacity:.14; }
.chart .snitt { stroke:var(--ink-faint); stroke-width:1.5; stroke-dasharray:4 4; }
.chart .punkt { r:3.5; stroke:var(--surface); stroke-width:2; }
.chart .krysshar { stroke:var(--border-strong); stroke-width:1; }
.chart .traff { fill:transparent; cursor:crosshair; }
.chart .stapel { rx:2; }
.chart .varde { fill:var(--ink); font-size:12px; font-weight:600; font-family:'IBM Plex Mono',monospace; }
.chart .etikett { fill:var(--ink); font-size:12px; font-family:'Figtree',sans-serif; }

.legend { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; font-size:12px; color:var(--ink-muted); }
.legend span { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.legend i { width:10px; height:10px; border-radius:2px; flex-shrink:0; }

.chart-foot { display:flex; justify-content:space-between; gap:12px; margin-top:12px;
  font-size:11px; color:var(--ink-muted); }

/* ============================================================ PROVIDERS
   The cards the customer clicks to connect their own account. One card per
   provider, with logo mark, status and what is missing. */
.prov-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.prov {
  display:flex; flex-direction:column; gap:12px;
  padding:16px; border:1px solid var(--border); border-radius:var(--r);
  background:var(--surface); min-width:0;
}
.prov[data-on="true"] { border-color:var(--good); border-left:3px solid var(--good); }
.prov-top { display:flex; align-items:center; gap:10px; min-width:0; }
.prov-mark {
  width:34px; height:34px; flex-shrink:0; border-radius:var(--r);
  display:grid; place-items:center; font-weight:700; font-size:13px;
  background:var(--surface-2); color:var(--ink); border:1px solid var(--border);
}
.prov-name { font-weight:600; font-size:14px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prov-sub { font-size:11px; color:var(--ink-muted); line-height:1.3; }
.prov-body { font-size:12px; color:var(--ink-muted); line-height:1.5; }
.prov-foot { display:flex; align-items:center; gap:8px; margin-top:auto; flex-wrap:wrap; }

/* ============================================================ STEPS
   Numbered steps in the help. The number is round, the text aligns to it. */
.steps { display:flex; flex-direction:column; gap:20px; counter-reset:steg; }
.step { display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start; }
.step-n {
  width:28px; height:28px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; font-size:12px; font-weight:700;
}
.step-b { display:flex; flex-direction:column; gap:8px; min-width:0; }
.step-b h3 { font-size:14px; }
.step-b p, .step-b li { font-size:13px; color:var(--ink-muted); }
.step-b ul { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
.step-b a { color:var(--accent); }

/* ============================================================ SERVER-RENDERED
   Three rules the prototype does not need but the portal does: there panels
   and menus are built by script, here they are in the markup the server sent. */

/* A hidden panel must be hidden. display:flex in the class otherwise beats
   the browser's [hidden], and the menu sits open on the page. */
[hidden] { display:none !important; }

/* Links that look like buttons or menu rows carry no underline. */
a.btn, a.nav-item, a.user-chip, a.menu-item { text-decoration:none; color:inherit; }
a.btn-primary { color:var(--on-accent); }
a.btn-destructive { color:var(--on-status); }

/* A button or link alone in a view must not be stretched across the full
   width just because the view is a flex column. */
.view > .btn, .tab-sec > .btn { align-self:flex-start; }

@media (max-width: 980px) { .tiles { grid-template-columns:repeat(2,1fr); } .split { grid-template-columns:1fr; } }
@media (max-width: 720px) {
  .shell { grid-template-columns:1fr; }
  .side {
    position:static; height:auto; flex-direction:column; align-items:stretch;
    gap:10px; overflow:visible; padding:12px 16px;
    border-right:0; border-bottom:1px solid var(--border);
  }
  .brand { display:none; }
  .mode-switch { width:100%; }
  .side .nav { flex-direction:row; gap:4px; overflow-x:auto; padding-bottom:2px; }
  .side .nav-group { display:none; }
  .nav-item { flex:0 0 auto; }
  /* The bottom row cannot hold everything on a narrow screen. It scrolls
     sideways like the menu, instead of pushing the whole page out. */
  .side-foot { flex-direction:row !important; align-items:center; margin-top:0; padding:0; gap:6px;
    min-width:0; overflow-x:auto; }
  .side-foot > * { flex:0 0 auto; }
  .side-foot .user-chip { width:auto; flex:1 1 auto; min-width:0; }
  .side-foot .user-chip .chev { display:none; }
  /* "Byt kund" only exists for those with several customers. On a narrow screen it is
     an icon like the menu above, otherwise it squeezes the name to nothing. */
  .side-foot .switch-org span { display:none; }
  #theme-toggle { flex:0 0 auto; }
  .nav-item { width:auto; padding:0 12px; border-left:0; border-bottom:2px solid transparent; }
  .nav-item[aria-current="page"] { border-bottom-color:var(--accent); }
  .nav-item span:not(.nav-badge) { display:none; }
  /* The menu row became three rows on a phone: heading, filter, buttons. Now
     the heading sits on its own and the filters on one row below it. The
     question marks by the selectors are removed — the selectors carry the
     same explanation themselves, and a 16 px ring next to a dropdown eats
     width that is needed elsewhere. */
  .topbar { gap:8px; padding:12px 16px; }
  .topbar h1 { flex:0 1 auto; }
  .topbar > .tip-icon { display:none; }
  /* The spacer becomes a line break: heading and status on the first row,
     all controls on the second. A three-row menu bar eats a third of the
     screen before a single number has been seen. */
  .topbar .spacer { flex:1 0 100%; height:0; margin:0; }
  #period-select { flex:1 1 auto; width:auto !important; min-width:0; }
  #currency-select { width:92px !important; flex:0 0 auto; }

  /* A heading must not wrap to three lines because a subheading is
     crowding beside it. The subheading gets its own row. */
  .card-head { row-gap:6px; }
  .card-head > .faint { flex:1 1 100%; order:9; }

  .topbar, .content { padding-left:16px; padding-right:16px; }
  .table-scroll { margin-left:-18px; margin-right:-18px; }
  .kv { grid-template-columns:1fr; gap:2px 0; }
  .kv dd { margin-bottom:8px; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration:.01ms !important; transition-duration:.01ms !important; } }