/* OneOS Console — the One system at console density.
   Faces, palette, space, radii and motion come from One (one.ml app/one-system.css): Ratch 500 for page titles,
   TT Commons Pro 400/500 to read, JetBrains Mono for identifiers and code only. Warm paper and stone in light, black and
   chalk in dark, hairlines, and no interface hue: colour belongs to One's characters, so status is carried by shape and
   word, emphasis by ink. Every value below is a token; components read the semantic names (--ink, --line, --canvas…). */

@font-face { font-family: 'TT Commons Pro'; src: url('../assets/fonts/tt-commons-pro-regular-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'TT Commons Pro'; src: url('../assets/fonts/tt-commons-pro-medium-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ratch'; src: url('../assets/fonts/ratch-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }
/* Arial scaled to TT Commons Pro's widths (One's measured fallback), so nothing moves when the face swaps in. */
@font-face { font-family: 'TT Commons Pro Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 400; size-adjust: 94.2%; ascent-override: 106.2%; descent-override: 26.5%; line-gap-override: 0%; }
@font-face { font-family: 'TT Commons Pro Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 500; size-adjust: 96.5%; ascent-override: 103.6%; descent-override: 25.9%; line-gap-override: 0%; }

:root {
  color-scheme: light;
  /* One's surfaces and inks (one-system.css 5.2). */
  --one-paper: #f4f2ec; --one-stone: #eae7df; --one-paper-raised: #fbfaf6;
  --one-black: #0b0c0c; --one-black-raised: #141615; --one-black-lift: #1d1f1e;
  --one-ink: #191614; --one-ink-soft: #33302e; --one-muted: #625f5d; --one-subtle: #6e6a67;
  --one-chalk: #f2f1ea; --one-chalk-muted: #b2afad; --one-chalk-subtle: #8f8c8a;

  /* Semantic roles. Light: work on raised paper, navigate on paper. */
  --canvas: var(--one-paper-raised);
  --rail: var(--one-paper);
  --hover: rgb(25 22 20 / 5%);
  --selected: rgb(25 22 20 / 8%);
  --ink: var(--one-ink);
  --ink-soft: var(--one-ink-soft);
  --ink-2: var(--one-muted);            /* secondary text: 6.1:1 on canvas */
  --ink-3: var(--one-subtle);           /* tertiary text: 4.9:1 on canvas, 4.6:1 on rail */
  --line: rgb(25 22 20 / 12%);
  --line-2: rgb(25 22 20 / 22%);
  --wash: rgb(25 22 20 / 3%);
  --slash: #c9c8c4;
  --brand: var(--ink);
  --focus: var(--ink);
  --button: var(--one-ink);
  --button-hover: var(--one-ink-soft);
  --button-ink: var(--one-paper-raised);
  --control: var(--one-paper-raised);
  --control-line: rgb(25 22 20 / 48%); /* 3:1 against canvas: a field's edge is visible to everyone */
  --pop: var(--one-paper-raised);
  --skel: rgb(25 22 20 / 7%);
  --frost: rgb(251 250 246 / 82%);
  --veil: rgb(25 22 20 / 18%);
  --shadow-pop: 0 0 0 1px var(--line), 0 12px 32px rgb(25 22 20 / 10%);
  --shadow-press: inset 0 1px 0 rgb(255 255 255 / 8%);
  /* Status: shape and word carry the meaning; ink only weights it (no interface hue). */
  --ok: var(--ink); --warn: var(--ink); --warn-mark: var(--ink); --serious: var(--ink); --crit: var(--ink); --idle: var(--ink-3);
  --series: var(--ink); --series-soft: var(--line-2);
  --sandbox: var(--ink); --sandbox-wash: var(--one-stone); --sandbox-line: var(--line-2);

  /* Type: one scale, two weights (400 to read, 500 to label). */
  --font-sans: 'TT Commons Pro', 'TT Commons Pro Fallback', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-display: Ratch, 'TT Commons Pro', 'TT Commons Pro Fallback', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  --t-caption: 400 12px/16px var(--font-sans);
  --t-small: 400 13px/18px var(--font-sans);
  --t-body: 400 14px/20px var(--font-sans);
  --t-lead: 400 15px/22px var(--font-sans);
  --t-title: 500 17px/24px var(--font-sans);
  --t-stat: 500 24px/28px var(--font-sans);
  --t-display: 500 28px/32px var(--font-display);
  --t-display-track: -0.02em;
  --t-code: 400 12px/18px var(--font-mono);

  /* Space (One 5.4) and the console's four radii: control, card, overlay, pill. */
  --s-2: 2px; --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-64: 64px; --s-96: 96px;
  --r-1: 8px; --r-2: 8px; --r-3: 12px; --r-4: 18px; --r-pill: 980px;

  /* Motion (One 5.5): enter with ease-ui, exit 40–50% shorter with ease-exit. */
  --ease-ui: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-move: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-feedback: 160ms;
  --dur-ui: 240ms;
  --dur-exit: 140ms;

  --rail-w: 248px; --top-h: 52px; --cap-w: 208px;
}
.dark {
  color-scheme: dark;
  --canvas: var(--one-black);
  --rail: var(--one-black-raised);
  --hover: rgb(242 241 234 / 6%);
  --selected: rgb(242 241 234 / 10%);
  --ink: var(--one-chalk);
  --ink-soft: var(--one-chalk);
  --ink-2: var(--one-chalk-muted);      /* 9.0:1 on canvas */
  --ink-3: var(--one-chalk-subtle);     /* 5.9:1 on canvas, 5.0:1 on popovers */
  --line: rgb(242 241 234 / 12%);
  --line-2: rgb(242 241 234 / 24%);
  --wash: rgb(242 241 234 / 3%);
  --slash: #4c4c4a;
  --button: var(--one-chalk);
  --button-hover: var(--one-paper-raised);
  --button-ink: var(--one-ink);
  --control: rgb(242 241 234 / 4%);
  --control-line: rgb(242 241 234 / 42%);
  --pop: var(--one-black-lift);
  --skel: rgb(242 241 234 / 8%);
  --frost: rgb(11 12 12 / 80%);
  --veil: rgb(0 0 0 / 48%);
  --shadow-pop: 0 0 0 1px var(--line), 0 16px 40px rgb(0 0 0 / 56%);
  --sandbox-wash: rgb(242 241 234 / 7%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; scrollbar-gutter: stable; background: var(--canvas); }
body { margin: 0; background: var(--canvas); color: var(--ink-soft); font: var(--t-body); font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'lnum' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; padding: 0; }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
p, dd { text-wrap: pretty; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
table { border-collapse: collapse; width: 100%; }
svg { display: block; flex: none; }
b, strong { font-weight: 500; color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--ink) 18%, transparent); }
::placeholder { color: var(--ink-3); opacity: 1; }
.mono { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 8px 12px; background: var(--button); color: var(--button-ink); border-radius: var(--r-2); font: var(--t-small); font-weight: 500; transform: translateY(-200%); transition: transform var(--dur-ui) var(--ease-ui); }
.skip:focus { transform: none; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ic-16 { width: 16px; height: 16px; } .ic-14 { width: 14px; height: 14px; } .ic-20 { width: 20px; height: 20px; }

/* ── Shell ─────────────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100dvh; }
.rail { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--rail); border-right: 1px solid var(--line); z-index: 30; }
.rail-top { padding: 12px 12px 8px; }
.brand { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px; margin-bottom: 8px; }
/* "One / OneOS", emblems only: the One Eye (always the black circle; one-eye.css), a thin light slash, the OneOS emblem
   in the ink. Both emblems 20px tall; 10px apart. The collapsed rail keeps the OneOS emblem alone. */
.brand .lockup { display: flex; align-items: center; gap: 10px; }
.brand .lockup a { display: flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; border-radius: var(--r-1); }
.lockup-one .one-eye { --one-eye-size: 20px; }
.lockup-slash { display: block; width: 8px; height: 20px; flex: none; color: var(--slash); }
.dark .lockup-slash { color: var(--slash); }
.lockup-genesis .mark-emblem-tight { height: 20px; width: auto; display: block; }
.brand .rail-toggle { margin-left: auto; }
.jump { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: var(--r-2); color: var(--ink-3); font: var(--t-small); text-align: left; background: var(--canvas); transition: border-color var(--dur-feedback) var(--ease-ui), color var(--dur-feedback) var(--ease-ui); }
.jump:hover { border-color: var(--line-2); color: var(--ink-2); }
.jump kbd { margin-left: auto; }
kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; font: 500 12px/1 var(--font-sans); color: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); }
.rail-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 16px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.rail-bottom { border-top: 1px solid var(--line); padding: 8px; }
.nav-group { margin-top: 16px; }
.nav-group > h3 { display: flex; align-items: center; height: 24px; padding: 0 10px; font: 500 12px/16px var(--font-sans); color: var(--ink-3); }
.nav-group-toggle { display: flex; align-items: center; gap: 6px; width: calc(100% + 20px); height: 24px; margin: 0 -10px; padding: 0 10px; border-radius: var(--r-2); font: inherit; color: inherit; text-align: left; transition: color var(--dur-feedback) var(--ease-ui), background-color var(--dur-feedback) var(--ease-ui); }
.nav-group-toggle:hover { color: var(--ink); background: var(--hover); }
.nav-group-toggle:focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: -2px; }
.nav-group-toggle > span { flex: 1; min-width: 0; }
.nav-group-toggle > svg { flex: none; color: var(--ink-3); transition: transform var(--dur-ui) var(--ease-ui); }
.nav-group-toggle[aria-expanded='false'] > svg { transform: rotate(-90deg); }
.app[data-rail='mini'] .nav-group-items[hidden] { display: block; }
.nav-group > h3 > span { margin-left: auto; font: 400 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.nav a, .nav button.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 6px 10px; border-radius: var(--r-2); font: var(--t-body); color: var(--ink-soft); text-align: left; transition: background-color var(--dur-feedback) var(--ease-ui), color var(--dur-feedback) var(--ease-ui); }
.nav a:hover, .nav button.nav-item:hover { background: var(--hover); color: var(--ink); }
.nav a:active, .capnav a:active { background: var(--selected); }
.nav a .ic { color: var(--ink-3); transition: color var(--dur-feedback) var(--ease-ui); }
.nav a:hover .ic { color: var(--ink-2); }
.nav a[aria-current='page'] { background: var(--selected); color: var(--ink); font-weight: 500; }
.nav a[aria-current='page'] .ic { color: var(--ink); }
.nav a .count { margin-left: auto; font: 400 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.nav a .flag { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.nav a .ext { margin-left: auto; color: var(--ink-3); }
.rail .who { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; margin-top: 4px; border-radius: var(--r-2); text-align: left; transition: background-color var(--dur-feedback) var(--ease-ui); }
.rail .who:hover { background: var(--hover); }
.avatar { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 26px; height: 26px; min-width: 26px; padding: 0; border-radius: 50%; overflow: hidden; background: var(--ink); color: var(--canvas); font: 500 11px/1 var(--font-sans); line-height: 1; letter-spacing: .02em; text-align: center; vertical-align: middle; flex: none; }
.avatar-initials { display: block; line-height: 1; }
.avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.who > span:not(.avatar) { display: block; min-width: 0; }
.who b { display: block; font: 500 13px/16px var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who i { display: block; font-style: normal; font: 400 12px/16px var(--font-sans); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 2px; height: var(--top-h); padding: 0 16px 0 16px; background: var(--frost); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.topbar .menu-btn { display: none; }
.ctx { display: flex; align-items: center; min-width: 0; }
.ctx-sep { color: var(--line-2); margin: 0 2px; flex: none; }
.ctx-btn { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px; border-radius: var(--r-2); text-align: left; min-width: 0; max-width: 220px; transition: background-color var(--dur-feedback) var(--ease-ui); }
.ctx-btn:hover, .ctx-btn[aria-expanded='true'] { background: var(--hover); }
.ctx-btn > span { display: block; min-width: 0; }
.ctx-btn small { display: block; font: 400 12px/16px var(--font-sans); color: var(--ink-3); }
.ctx-btn b { display: block; font: 500 14px/18px var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-btn .ic { color: var(--ink-3); }
.ctx-btn[data-unset] b { font-weight: 400; color: var(--ink-2); }
.env { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; margin-left: 8px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font: 500 12px/1 var(--font-sans); color: var(--ink); flex: none; transition: border-color var(--dur-feedback) var(--ease-ui), background-color var(--dur-feedback) var(--ease-ui); }
.env:hover { border-color: var(--ink-3); }
.env i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
/* Sandbox is marked by pattern, not hue: stone with a fine hatch, and a hollow mark. */
.env[data-env='sandbox'] { color: var(--sandbox); background: var(--sandbox-wash) repeating-linear-gradient(-45deg, transparent 0 4px, var(--line) 4px 5px); border-color: var(--sandbox-line); border-style: dashed; }
.env[data-env='sandbox'] i { background: transparent; border: 1.5px solid currentColor; }
.ctx-dir-error { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: 8px; padding: 4px 8px; border-radius: var(--r-2); font: var(--t-small); color: var(--ink); border: 1px solid var(--line-2); background: var(--wash); }
.ctx-dir-error ul { margin: 0; padding: 0; list-style: none; min-width: 0; }
.ctx-dir-error li { overflow-wrap: anywhere; }
.ctx-dir-error code { font-size: 12px; }
.ctx-dir-error .btn { flex: none; }
.top-tools { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.icon-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-2); color: var(--ink-2); transition: background-color var(--dur-feedback) var(--ease-ui), color var(--dur-feedback) var(--ease-ui), transform var(--dur-feedback) var(--ease-ui); }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn:active { transform: scale(.94); background: var(--selected); }

/* ── Page frame ────────────────────────────────────────────────────────── */
.page { width: 100%; max-width: 1320px; padding: 32px 40px 96px; }
.page.wide { max-width: none; }
.svc { display: grid; grid-template-columns: var(--cap-w) minmax(0, 1fr); align-items: start; }
.capnav { position: sticky; top: var(--top-h); height: calc(100dvh - var(--top-h)); overflow-y: auto; padding: 24px 8px 32px 12px; border-right: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.capnav .svc-id { display: flex; align-items: center; gap: 12px; padding: 0 8px 16px; }
.capnav .svc-id b { display: block; font: 500 17px/22px var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.capnav .svc-id small { display: block; font: 400 12px/16px var(--font-sans); color: var(--ink-3); }
.capnav h3 { margin: 16px 0 4px; padding: 0 10px; font: 500 12px/16px var(--font-sans); color: var(--ink-3); }
.capnav a { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 10px; border-radius: var(--r-2); font: var(--t-body); color: var(--ink-soft); transition: background-color var(--dur-feedback) var(--ease-ui), color var(--dur-feedback) var(--ease-ui); }
.capnav a:hover { background: var(--hover); color: var(--ink); }
.capnav a[aria-current='page'] { background: var(--selected); color: var(--ink); font-weight: 500; }
.capnav a .count { margin-left: auto; font: 400 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.capnav a .ext { margin-left: auto; color: var(--ink-3); }
.cap-select, .cap-select.field { display: none; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 12px; font: var(--t-small); color: var(--ink-3); }
.crumbs a { transition: color var(--dur-feedback) var(--ease-ui); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current='page'] { color: var(--ink-2); }
.crumbs .ic { color: var(--line-2); }
.head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
.glyph { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--canvas); color: var(--ink); flex: none; }
.glyph .ic { width: 20px; height: 20px; }
.head h1 { font: var(--t-display); letter-spacing: var(--t-display-track); color: var(--ink); }
.head .sub { margin-top: 8px; max-width: 64ch; font: var(--t-lead); color: var(--ink-2); }
.head .aside { margin-left: auto; display: flex; align-items: center; gap: 12px; padding-top: 0; flex: none; min-height: 32px; }
.head .title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.read-at { display: inline-flex; align-items: center; gap: 6px; font: var(--t-small); font-variant-numeric: tabular-nums; color: var(--ink-3); }
h2.sec { display: flex; align-items: baseline; gap: 12px; margin: 48px 0 16px; font: var(--t-title); color: var(--ink); }
h2.sec small { font: var(--t-small); color: var(--ink-3); }
h2.sec a { margin-left: auto; font: 500 13px/18px var(--font-sans); color: var(--ink-2); transition: color var(--dur-feedback) var(--ease-ui); }
h2.sec a:hover { color: var(--ink); }
.lede { max-width: 72ch; font: var(--t-body); color: var(--ink-2); }

/* ── Controls ──────────────────────────────────────────────────────────── */
/* One button family: primary (ink), secondary (hairline), quiet (no edge); two heights, 32 and 28. */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: transparent; color: var(--ink); font: 500 14px/1 var(--font-sans); white-space: nowrap; transition: background-color var(--dur-feedback) var(--ease-ui), border-color var(--dur-feedback) var(--ease-ui), color var(--dur-feedback) var(--ease-ui), transform var(--dur-feedback) var(--ease-ui); }
.btn:hover { background: var(--hover); border-color: var(--ink-3); }
.btn:active { transform: scale(.98); background: var(--selected); }
.btn .ic { color: currentColor; }
.btn.primary { background: var(--button); border-color: var(--button); color: var(--button-ink); }
.btn.primary:hover { background: var(--button-hover); border-color: var(--button-hover); }
.btn.quiet { border-color: transparent; color: var(--ink-2); padding: 0 8px; }
.btn.quiet:hover { background: var(--hover); color: var(--ink); }
.btn.danger { color: var(--ink); border-color: var(--ink-3); }
.btn.danger:hover { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.btn.sm { height: 28px; padding: 0 10px; gap: 6px; font-size: 13px; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .4; cursor: not-allowed; transform: none; }
.field { display: grid; gap: 8px; }
.field > label, .field > span.lab { font: 500 13px/18px var(--font-sans); color: var(--ink); }
.field > small { font: var(--t-small); color: var(--ink-3); }
.input, .select { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--control-line); border-radius: var(--r-2); background: var(--control); color: var(--ink); font: var(--t-body); transition: border-color var(--dur-feedback) var(--ease-ui), box-shadow var(--dur-feedback) var(--ease-ui); }
.input:hover, .select:hover { border-color: var(--ink-2); }
.input:focus-visible, .select:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.select { appearance: none; padding-right: 30px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23625f5d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; }
.dark .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2afad' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); }
.search { position: relative; flex: 1 1 220px; max-width: 320px; }
.search .ic { position: absolute; left: 10px; top: 8px; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.search .input { padding-left: 34px; padding-right: 32px; }
.search kbd { position: absolute; right: 6px; top: 6px; }
.seg { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--wash); }
.seg button { height: 26px; padding: 0 10px; border-radius: 6px; font: 400 13px/1 var(--font-sans); color: var(--ink-2); transition: background-color var(--dur-feedback) var(--ease-ui), color var(--dur-feedback) var(--ease-ui); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed='true'], .seg button[aria-selected='true'] { background: var(--canvas); color: var(--ink); font-weight: 500; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgb(25 22 20 / 6%); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); font: 500 12px/1 var(--font-sans); color: var(--ink-2); white-space: nowrap; transition: border-color var(--dur-feedback) var(--ease-ui), color var(--dur-feedback) var(--ease-ui); }
.chip.on { border-color: var(--ink); color: var(--ink); }
button.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); background: var(--hover); font: 400 12px/1 var(--font-mono); letter-spacing: -.01em; color: var(--ink-2); white-space: nowrap; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.toolbar .spacer { flex: 1; }
.toolbar .tally { font: var(--t-small); font-variant-numeric: tabular-nums; color: var(--ink-3); }

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs [role='tab'], .tabs a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 0 12px; font: var(--t-body); color: var(--ink-2); white-space: nowrap; transition: color var(--dur-feedback) var(--ease-ui); }
.tabs [role='tab']:hover, .tabs a:hover { color: var(--ink); }
.tabs [aria-selected='true'], .tabs a[aria-current='page'] { color: var(--ink); font-weight: 500; }
.tabs [aria-selected='true']::after, .tabs a[aria-current='page']::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: var(--ink); }
.tabs .count { font: 400 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.tabs .ext { color: var(--ink-3); }

/* ── Tables ────────────────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; margin: 0 -8px; padding: 0 8px; }
.tbl { font: var(--t-body); color: var(--ink-soft); }
.tbl th { padding: 10px 12px; border-bottom: 1px solid var(--line); font: 500 12px/16px var(--font-sans); color: var(--ink-3); text-align: left; white-space: nowrap; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl td.r, .tbl td .num { font-variant-numeric: tabular-nums; }
.tbl th button { display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; transition: color var(--dur-feedback) var(--ease-ui); }
.tbl th button:hover { color: var(--ink); }
.tbl th[aria-sort] { color: var(--ink); }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl th:first-child, .tbl td:first-child { padding-left: 8px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 8px; }
.tbl tbody tr { transition: background-color var(--dur-feedback) var(--ease-ui); }
.tbl tbody tr:hover { background: var(--wash); }
.tbl tbody tr[data-href] { cursor: pointer; }
.tbl tbody tr[data-href]:active { background: var(--hover); }
.tbl tbody tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tbl tbody tr[data-gone] td { color: var(--ink-3); }
.tbl .name { font-weight: 500; color: var(--ink); }
.tbl .name small { display: block; margin-top: 2px; font: 400 12px/16px var(--font-mono); letter-spacing: -.01em; color: var(--ink-3); }
.tbl .go { width: 32px; color: var(--ink-3); }
.tbl .go .ic { transition: transform var(--dur-feedback) var(--ease-ui), color var(--dur-feedback) var(--ease-ui); }
.tbl tr:hover .go { color: var(--ink); }
.tbl tr:hover .go .ic { transform: translateX(2px); }
.tbl td.wrap { white-space: normal; min-width: 220px; }
.tbl.compact td { padding-top: 8px; padding-bottom: 8px; }
.tbl-foot { display: flex; align-items: center; gap: 12px; padding: 12px 8px 0; font: var(--t-small); color: var(--ink-3); }
.tbl-foot .spacer { flex: 1; }

/* Status: glyph + label, never colour. Ink weights what needs a person; muted marks what is at rest. */
.st { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/18px var(--font-sans); color: var(--ink); white-space: nowrap; }
.st svg { width: 12px; height: 12px; color: var(--ink); }
.st[data-s='running'] svg, .st[data-s='ok'] svg, .st[data-s='active'] svg { color: var(--ok); }
.st[data-s='attention'] svg, .st[data-s='pending'] svg { color: var(--warn-mark); }
.st[data-s='failed'] svg, .st[data-s='revoked'] svg { color: var(--crit); }
.st[data-s='paused'] svg, .st[data-s='unknown'] svg, .st[data-s='deleted'] svg { color: var(--idle); }
.st[data-s='paused'], .st[data-s='deleted'], .st[data-s='unknown'] { color: var(--ink-2); font-weight: 400; }
/* "Not measured" is a value in its own right. It is never rendered as 0. Quiet in place, explained on hover or focus. */
.nm { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font: var(--t-small); text-decoration: underline dotted; text-decoration-color: var(--line-2); text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: help; transition: color var(--dur-feedback) var(--ease-ui), text-decoration-color var(--dur-feedback) var(--ease-ui); }
.nm:hover, .nm:focus-visible { color: var(--ink-2); text-decoration-color: var(--ink-3); }

/* ── Facts, strips, panels ─────────────────────────────────────────────── */
/* One card: raised surface, hairline, the card radius. Strips, panels, code and logs are all this card. */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--line); overflow: hidden; }
.strip > div { padding: 16px 20px 20px; background: var(--canvas); min-width: 0; }
.strip dt, .strip .k { font: var(--t-small); color: var(--ink-2); }
.strip dd, .strip .v { margin-top: 8px; font: var(--t-stat); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.strip dd .nm, .strip .v .nm { font: var(--t-body); }
.strip .v.sm { font: 500 15px/22px var(--font-sans); letter-spacing: 0; }
.strip .n { display: block; margin-top: 4px; font: var(--t-caption); color: var(--ink-3); }
.strip a.n { transition: color var(--dur-feedback) var(--ease-ui); }
.strip a.n:hover { color: var(--ink); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: 32px; border-top: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.facts dt { font: var(--t-small); color: var(--ink-2); }
.facts dd { font: var(--t-body); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.rows { border-top: 1px solid var(--line); }
.rows > * { display: grid; grid-template-columns: minmax(160px, .7fr) minmax(0, 1.6fr) auto; align-items: center; gap: 24px; padding: 16px 8px; border-bottom: 1px solid var(--line); transition: background-color var(--dur-feedback) var(--ease-ui); }
.rows > a:hover { background: var(--wash); }
.rows > a > svg:last-child, .rows > a > .ic:last-child { color: var(--ink-3); transition: transform var(--dur-feedback) var(--ease-ui), color var(--dur-feedback) var(--ease-ui); }
.rows > a:hover > svg:last-child, .rows > a:hover > .ic:last-child { color: var(--ink); transform: translateX(2px); }
.rows b { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.rows p { font: var(--t-body); color: var(--ink-2); }
.panel { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--canvas); }
.panel > header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel > header h3 { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.panel > header .spacer { flex: 1; }
.panel > .body { padding: 16px; }
.split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .9fr); gap: 40px; align-items: start; }
.copy { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font: var(--t-code); letter-spacing: -.01em; color: var(--ink); }
.copy button { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--ink-3); transition: background-color var(--dur-feedback) var(--ease-ui), color var(--dur-feedback) var(--ease-ui); }
.copy button:hover { background: var(--hover); color: var(--ink); }
.copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Notices: a rule and a sentence. No tinted boxes. Tone is the rule's weight and the glyph's shape. */
.note { display: grid; grid-template-columns: 16px 1fr; gap: 12px; padding: 2px 0 2px 16px; border-left: 2px solid var(--line); font: var(--t-body); color: var(--ink-2); max-width: 88ch; }
.note .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--ink-3); }
.note b { color: var(--ink); font-weight: 500; }
.note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: text-decoration-color var(--dur-feedback) var(--ease-ui); }
.note a:hover { text-decoration-color: var(--ink); }
.note[data-tone='warn'] { border-left-color: var(--ink-3); } .note[data-tone='warn'] .ic { color: var(--ink); }
.note[data-tone='crit'] { border-left-color: var(--ink); color: var(--ink-soft); } .note[data-tone='crit'] .ic { color: var(--ink); }
.note + .note { margin-top: 12px; }
.headless { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--wash); font: var(--t-body); color: var(--ink-2); }
.headless .ic { color: var(--ink-3); }
.headless b { color: var(--ink); font-weight: 500; }
.headless code { font: var(--t-code); color: var(--ink); padding: 2px 8px; border-radius: 6px; background: var(--hover); }
.headless .spacer { flex: 1; }

/* ── Code ──────────────────────────────────────────────────────────────── */
.code { border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; background: var(--canvas); }
.code > header { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 8px 0 8px; border-bottom: 1px solid var(--line); background: var(--wash); }
.code > header [role='tab'] { height: 26px; padding: 0 10px; border-radius: 6px; font: 400 13px/1 var(--font-sans); color: var(--ink-2); transition: background-color var(--dur-feedback) var(--ease-ui), color var(--dur-feedback) var(--ease-ui); }
.code > header [role='tab']:hover { color: var(--ink); }
.code > header [role='tab'][aria-selected='true'] { background: var(--canvas); color: var(--ink); font-weight: 500; box-shadow: 0 0 0 1px var(--line); }
.code > header .spacer { flex: 1; }
.code pre { margin: 0; padding: 16px; overflow-x: auto; font: 400 12px/20px var(--font-mono); color: var(--ink); tab-size: 2; scrollbar-width: thin; }
.code pre .c { color: var(--ink-3); }
.code pre .k { color: var(--ink); font-weight: 500; }
.log { border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.log > header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--wash); }
.log ol { max-height: 440px; overflow: auto; padding: 8px 0; font: 400 12px/20px var(--font-mono); }
.log li { display: grid; grid-template-columns: 96px 52px minmax(0, 1fr); gap: 12px; padding: 2px 16px; }
.log li:hover { background: var(--wash); }
.log time { color: var(--ink-3); }
.log .lv { font-weight: 500; }
.log .lv[data-l='warn'] { color: var(--ink); } .log .lv[data-l='error'] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .log .lv[data-l='info'], .log .lv[data-l='debug'] { color: var(--ink-3); }
.log .msg { overflow-wrap: anywhere; color: var(--ink-soft); }
.live { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/16px var(--font-sans); color: var(--ink); }
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: pulse 2s var(--ease-ui) infinite; }
.live[data-paused] i { background: transparent; border: 1.5px solid var(--ink-3); animation: none; }
@keyframes pulse { 50% { opacity: .35; } }

/* ── Charts: one series, in ink ────────────────────────────────────────── */
.chart { position: relative; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .bar { fill: var(--series); opacity: .82; transition: opacity var(--dur-feedback) var(--ease-ui); }
.chart .bar.dim { fill: var(--series-soft); opacity: 1; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ax { fill: var(--ink-3); font: 400 11px var(--font-sans); font-variant-numeric: tabular-nums; }
.chart .hit { fill: transparent; }
.chart .hit:hover + .bar, .chart .bar.on { opacity: 1; }
.chart details summary { color: var(--ink-3); }
.tip { position: absolute; z-index: 5; pointer-events: none; padding: 8px 10px; border-radius: var(--r-2); background: var(--pop); box-shadow: var(--shadow-pop); font: var(--t-caption); color: var(--ink-2); white-space: nowrap; transform: translate(-50%, calc(-100% - 8px)); animation: pop-in var(--dur-feedback) var(--ease-ui); }
.tip b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.meter { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: baseline; }
.meter .track { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--hover); overflow: hidden; }
.meter .track i { display: block; height: 100%; border-radius: 2px; background: var(--ink); transition: width var(--dur-ui) var(--ease-ui); }

/* ── States ────────────────────────────────────────────────────────────── */
/* One empty-state pattern: a quiet mark, a sentence title, one line of why, the next step. */
.state { max-width: 600px; padding: 40px 0 32px; }
.state .ic-wrap { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--canvas); color: var(--ink-2); }
.state h3 { font: var(--t-title); color: var(--ink); }
.state p { margin-top: 8px; font: var(--t-body); color: var(--ink-2); max-width: 64ch; }
.state p b { color: var(--ink); }
.state .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.state .code { margin-top: 16px; }
.state dl { margin-top: 16px; font: var(--t-small); color: var(--ink-2); display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
.state dd { font: var(--t-code); color: var(--ink); }
.skel td { padding-top: 14px; padding-bottom: 14px; }
.skel i { display: block; height: 10px; border-radius: 4px; background: var(--skel); animation: breathe 1.6s var(--ease-move) infinite; }
@keyframes breathe { 50% { opacity: .4; } }

/* ── Overlays ──────────────────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; z-index: 60; background: var(--veil); animation: fade-in var(--dur-ui) var(--ease-ui); }
.palette { position: fixed; left: 50%; top: 14vh; z-index: 70; width: min(600px, calc(100vw - 32px)); transform: translateX(-50%); border-radius: var(--r-4); background: var(--pop); box-shadow: var(--shadow-pop); overflow: hidden; animation: palette-in var(--dur-ui) var(--ease-ui); }
.palette input { width: 100%; height: 52px; padding: 0 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; font: 400 17px/24px var(--font-sans); color: var(--ink); }
.palette ul { max-height: 52vh; overflow: auto; padding: 8px; scrollbar-width: thin; }
.palette li.h { padding: 12px 12px 4px; font: 500 12px/16px var(--font-sans); color: var(--ink-3); }
.palette li[role='option'] { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 8px 12px; border-radius: var(--r-2); font: var(--t-body); color: var(--ink-soft); cursor: pointer; }
.palette li[role='option'] .ic { color: var(--ink-3); }
.palette li[role='option'] small { margin-left: auto; font: var(--t-caption); color: var(--ink-3); }
.palette li[aria-selected='true'] { background: var(--selected); color: var(--ink); }
.palette li[aria-selected='true'] .ic { color: var(--ink); }
.palette footer { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--line); font: var(--t-caption); color: var(--ink-3); }
.menu { position: absolute; z-index: 50; min-width: 240px; max-width: 340px; padding: 6px; border-radius: var(--r-3); background: var(--pop); box-shadow: var(--shadow-pop); animation: pop-in var(--dur-feedback) var(--ease-ui); transform-origin: top left; }
.menu h4 { padding: 8px 10px 4px; font: 500 12px/16px var(--font-sans); color: var(--ink-3); }
.menu [role='menuitemradio'], .menu [role='menuitem'] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 6px 10px; border-radius: 6px; font: var(--t-body); color: var(--ink-soft); text-align: left; transition: background-color var(--dur-feedback) var(--ease-ui); }
.menu [role='menuitemradio']:hover, .menu [role='menuitem']:hover, .menu [role]:focus-visible { background: var(--hover); color: var(--ink); outline: none; }
.menu [aria-checked='true'] { font-weight: 500; color: var(--ink); }
.menu .tick { margin-left: auto; color: var(--ink); }
.menu small { display: block; font: var(--t-caption); color: var(--ink-3); font-weight: 400; }
.menu hr { height: 1px; margin: 6px 0; border: 0; background: var(--line); }
.sheet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; display: flex; flex-direction: column; width: min(520px, 100vw); background: var(--canvas); border-left: 1px solid var(--line); box-shadow: var(--shadow-pop); animation: slide-in var(--dur-ui) var(--ease-ui); }
@keyframes slide-in { from { transform: translateX(32px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.97); } }
@keyframes palette-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.98); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }
.sheet > header { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); }
.sheet > header h2 { font: 500 20px/24px var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.sheet > header p { margin-top: 4px; font: var(--t-small); color: var(--ink-2); }
.sheet > header .icon-btn { margin-left: auto; margin-top: -4px; margin-right: -8px; }
.sheet > .body { flex: 1; overflow: auto; padding: 24px; display: grid; gap: 20px; align-content: start; }
.sheet > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--line); }
.steps { display: flex; gap: 4px; margin-bottom: 4px; }
.steps i { flex: 1; height: 2px; border-radius: 1px; background: var(--line); transition: background-color var(--dur-ui) var(--ease-ui); }
.steps i.on { background: var(--ink); }
.choice { display: grid; gap: 8px; }
.choice label { display: grid; grid-template-columns: 18px 1fr; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-3); cursor: pointer; transition: border-color var(--dur-feedback) var(--ease-ui), box-shadow var(--dur-feedback) var(--ease-ui); }
.choice label:hover { border-color: var(--ink-3); }
.choice label:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.choice input { margin: 3px 0 0; accent-color: var(--ink); }
.choice b { display: block; font: 500 14px/20px var(--font-sans); color: var(--ink); }
.choice small { display: block; margin-top: 2px; font: var(--t-small); color: var(--ink-2); }
.secret { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--wash); font: 500 12px/18px var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.toast { position: fixed; left: 50%; bottom: 32px; z-index: 90; transform: translateX(-50%); padding: 10px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--canvas); font: 500 14px/20px var(--font-sans); box-shadow: 0 12px 32px rgb(0 0 0 / 18%); animation: toast-in var(--dur-ui) var(--ease-ui); }

/* Environment band: the sandbox guard, by pattern instead of hue. */
.band { display: flex; align-items: center; gap: 12px; padding: 8px 40px; background: var(--sandbox-wash) repeating-linear-gradient(-45deg, transparent 0 6px, var(--line) 6px 7px); border-bottom: 1px solid var(--sandbox-line); font: var(--t-small); color: var(--sandbox); }
.band b { font-weight: 500; }

/* ── Design-reference chrome (not product UI) ──────────────────────────── */
.dock { position: fixed; right: 14px; bottom: 14px; z-index: 55; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border: 1px dashed var(--ink-3); border-radius: 999px; background: var(--pop); box-shadow: var(--shadow-pop); font: 500 11px/1 var(--font-mono); color: var(--ink-2); }
.dock select { height: 24px; padding: 0 22px 0 8px; border: 1px solid var(--line); border-radius: 999px; background-color: var(--canvas); font: 500 11px/1 var(--font-mono); color: var(--ink); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; background-size: 11px; }
.dock a { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--canvas); }
.dock a[aria-current='page'] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.dock button { height: 24px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; font: 500 11px/1 var(--font-mono); color: var(--ink); background: var(--canvas); }
.dock button[aria-pressed='true'] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.annot { display: none; }
.annotate .annot { display: block; margin: 10px 0; padding: 8px 10px; border: 1px dashed var(--ink-3); border-radius: 8px; font: 400 11.5px/17px var(--font-mono); color: var(--ink-2); }
.annot b { font-weight: 600; }

/* ── Responsive ────────────────────────────────────────────────────────── */
.app[data-rail='mini'] { --rail-w: 60px; }
.app[data-rail='mini'] .rail-top { padding: 12px 8px 8px; }
.app[data-rail='mini'] .brand .lockup-one, .app[data-rail='mini'] .brand .lockup-slash, .app[data-rail='mini'] .jump span, .app[data-rail='mini'] .jump kbd, .app[data-rail='mini'] .nav a > span, .app[data-rail='mini'] .nav a .count, .app[data-rail='mini'] .nav a .ext, .app[data-rail='mini'] .nav-group > h3, .app[data-rail='mini'] .who > span:not(.avatar) { display: none; }
.app[data-rail='mini'] .brand { justify-content: center; padding: 0; flex-direction: column; height: auto; gap: 12px; }
.app[data-rail='mini'] .brand .rail-toggle { margin: 0; }
.app[data-rail='mini'] .jump, .app[data-rail='mini'] .nav a, .app[data-rail='mini'] .who { justify-content: center; padding-left: 0; padding-right: 0; }
.app[data-rail='mini'] .nav-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.app[data-rail='mini'] .nav a .flag { position: absolute; margin: -14px 0 0 16px; }
.app[data-rail='mini'] .nav a { position: relative; }

@media (max-width: 1180px) {
  :root { --cap-w: 188px; }
  .page { padding: 32px 32px 96px; }
  .split { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 1023px) {
  .app, .app[data-rail='mini'] { grid-template-columns: minmax(0, 1fr); --rail-w: 280px; }
  .rail { position: fixed; left: 0; top: 0; width: 280px; transform: translateX(-100%); transition: transform var(--dur-ui) var(--ease-ui); box-shadow: var(--shadow-pop); }
  .app[data-drawer='open'] .rail { transform: none; }
  .app[data-rail='mini'] .jump span, .app[data-rail='mini'] .jump kbd, .app[data-rail='mini'] .nav a > span, .app[data-rail='mini'] .nav a .count, .app[data-rail='mini'] .nav-group > h3, .app[data-rail='mini'] .who > span:not(.avatar) { display: revert; }
  .app[data-rail='mini'] .brand .lockup-one, .app[data-rail='mini'] .brand .lockup-slash { display: flex; }
  .rail-toggle { display: none !important; }
  .topbar .menu-btn { display: grid; }
  .ctx .ctx-btn[data-level='workspace'], .ctx .ctx-sep[data-for='workspace'] { display: none; }
  .svc { grid-template-columns: minmax(0, 1fr); }
  .capnav { display: none; }
  .cap-select, .cap-select.field { display: grid; margin-bottom: 24px; }
  .nav a, .capnav a { min-height: 40px; }
}
@media (max-width: 720px) {
  .page { padding: 24px 16px 96px; }
  .band { padding: 8px 16px; }
  .topbar { padding: 0 8px; }
  .ctx .ctx-btn[data-level='project'], .ctx .ctx-sep[data-for='project'] { display: none; }
  .ctx-btn { max-width: 150px; }
  .head { flex-wrap: wrap; margin-bottom: 24px; }
  .head .aside { margin-left: 0; flex-basis: 100%; flex-wrap: wrap; }
  .head h1 { font-size: 24px; line-height: 28px; }
  h2.sec { margin-top: 40px; }
  .rows > * { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .rows p { grid-column: 1; }
  /* Tables become labelled records. Every cell keeps its column name. */
  .tbl.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl.stack tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 8px; border-bottom: 1px solid var(--line); }
  .tbl.stack td { display: block; padding: 0; border: 0; text-align: left; }
  .tbl.stack td.r { text-align: left; }
  .tbl.stack td:first-child { grid-column: 1; }
  .tbl.stack td[data-k='status'] { grid-column: 2; grid-row: 1; justify-self: end; }
  .tbl.stack td:not(:first-child):not([data-k='status']) { grid-column: 1 / -1; display: grid; grid-template-columns: 112px 1fr; font: var(--t-small); }
  .tbl.stack td:not(:first-child):not([data-k='status'])::before { content: attr(data-label); color: var(--ink-3); }
  .tbl.stack td.go { display: none; }
  .log li { grid-template-columns: 1fr; gap: 0; padding: 4px 12px; }
  .dock { left: 10px; right: 10px; justify-content: space-between; border-radius: 12px; }
  .toolbar .select { flex: 1 1 140px; }
  .toolbar .tally { flex-basis: 100%; }
  .strip { grid-template-columns: 1fr 1fr; }
  .strip > div { padding: 12px 16px 16px; }
  .strip dd, .strip .v { font-size: 20px; line-height: 24px; }
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .palette { top: 8vh; }
  .dock .lbl { display: none; }
  .toast { bottom: 24px; max-width: calc(100vw - 32px); }
}
/* Touch: every target reaches 40px or more. */
@media (pointer: coarse) {
  .btn { height: 40px; } .btn.sm { height: 36px; }
  .icon-btn { width: 40px; height: 40px; }
  .input, .select { height: 40px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root, .dark { --ink-2: var(--ink); --ink-3: var(--ink); --line: var(--line-2); }
}
@media (forced-colors: active) {
  .st svg, .nav a[aria-current='page'], .tabs [aria-selected='true']::after { forced-color-adjust: auto; }
  .chart .bar { fill: Highlight; }
}

/* ── Additions ─────────────────────────────────────────────────────────── */
.brand a { color: var(--ink); border-radius: var(--r-1); }
/* Full-page brand states (loading, sign-in result, signed out): the emblem, centred. */
.app.brand-screen-host { display: block; }
.brand-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 100dvh; padding: 24px 16px; text-align: center; color: var(--ink); background: var(--canvas); }
.brand-screen .mark-emblem { width: min(112px, 30vw); height: auto; margin-bottom: 12px; }
.brand-screen h1 { font: var(--t-display); letter-spacing: var(--t-display-track); }
.brand-screen p { max-width: 420px; font: var(--t-lead); color: var(--ink-2); }
.brand-screen .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.brand-screen-status { font: var(--t-small); color: var(--ink-3); }
.page-mark { color: var(--ink); margin-bottom: 16px; }
.page-mark .mark-emblem { width: 48px; height: auto; display: block; }
.glyph.sm { width: 32px; height: 32px; border-radius: var(--r-2); }
.glyph.sm .ic { width: 18px; height: 18px; }
.svc-cell { display: flex; align-items: center; gap: 12px; }
.tbl tr.grp th { padding: 24px 8px 8px; border-bottom: 1px solid var(--line); font: 500 12px/16px var(--font-sans); color: var(--ink-3); text-align: left; }
.tbl tbody:first-of-type tr.grp th { padding-top: 12px; }
.tbl tr.grp:hover { background: none; }
.tbl thead + tbody tr.grp th { border-top: 0; }
@media (max-width: 720px) {
  .tbl.stack tr.grp { display: block; padding: 16px 8px 8px; }
  .tbl.stack tr.grp th { display: block; padding: 0; border: 0; }
}
.seg a { display: inline-flex; border-radius: 6px; }
.seg a:focus-visible { outline-offset: 0; }
.seg a button { pointer-events: none; }
nav.seg { flex-wrap: wrap; }
.rows > div > .st, .rows > div > .tag, .rows > div > .mono, .rows > div > .nm { justify-self: end; }
#page-title:focus, #page-title:focus-visible { outline: none; }
@media (max-width: 720px) { .tbl.stack td.go { display: none !important; } }
/* The refusal line and its Details: the code and request id to quote, then the full record on demand. */
.refusal { margin-top: 16px; font: var(--t-small); color: var(--ink-2); }
.refusal b { font-weight: 400; color: var(--ink); }
.state-details { margin-top: 12px; font: var(--t-small); color: var(--ink-2); }
.state-details summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink-2); list-style: none; transition: color var(--dur-feedback) var(--ease-ui); }
.state-details summary::-webkit-details-marker { display: none; }
.state-details summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-feedback) var(--ease-ui); }
.state-details[open] summary::before { transform: rotate(45deg); }
.state-details summary:hover { color: var(--ink); }
.state-details dl { margin-top: 12px; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
.state-details dd { color: var(--ink); overflow-wrap: anywhere; }
details > summary { cursor: pointer; }

/* ── Component layer ───────────────────────────────────────────────────── */
/* Counts: a zero recedes; what exists stands out. */
.zero { color: var(--ink-3); }
time.num { white-space: nowrap; }
/* One primary action per page: a state that sits under a section heading is part of the page, not the page. */
h2.sec + .state { padding: 8px 0 16px; }
h2.sec + .state .ic-wrap { width: 32px; height: 32px; margin-bottom: 12px; border-radius: var(--r-2); }
h2.sec + .state .ic-wrap .ic { width: 16px; height: 16px; }
h2.sec + .state h3 { font: 500 15px/22px var(--font-sans); }
h2.sec + .state .acts { margin-top: 16px; }
h2.sec + .state .btn.primary { background: transparent; border-color: var(--line-2); color: var(--ink); }
h2.sec + .state .btn.primary:hover { background: var(--hover); border-color: var(--ink-3); }
/* The palette is the focus: its field draws no ring of its own. */
.palette input:focus-visible { outline: none; }
.menu h4 { padding: 8px 10px 2px; }
.menu [role^='menuitem'] > span { display: block; min-width: 0; }
.menu [role^='menuitem'] small { margin-top: 2px; }
@media (max-width: 720px) {
  /* A stacked record's value is as wide as its words, so a dotted "Not measured" never spans the row. */
  .tbl.stack td:not(:first-child):not([data-k='status']) { justify-items: start; align-items: baseline; }
}
/* A figure that was not measured sits on the same line as a text figure beside it. */
.strip dd:has(> .nm:only-child), .strip .v:has(> .nm:only-child) { font: 500 15px/22px var(--font-sans); letter-spacing: 0; }
.tbl .name small.sans { font-family: var(--font-sans); letter-spacing: 0; }
@media (max-width: 720px) {
  /* Home on a phone: each service is two lines — name and state, then resources and last change — every value kept. */
  .tbl.stack.svc-table tbody tr[data-href] { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 8px; }
  .tbl.stack.svc-table tbody tr[data-href] td:first-child { grid-column: 1; grid-row: 1; }
  .tbl.stack.svc-table tbody tr[data-href] td[data-label='State'] { grid-column: 2; grid-row: 1; align-self: center; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 8px; text-align: right; font: var(--t-small); }
  .tbl.stack.svc-table tbody tr[data-href] td[data-label='State']::before { content: none; }
  .tbl.stack.svc-table tbody tr[data-href] td[data-label='Resources'], .tbl.stack.svc-table tbody tr[data-href] td[data-label='Last change'] { grid-column: auto; grid-row: 2; display: flex; align-items: baseline; gap: 6px; font: var(--t-caption); }
  .tbl.stack.svc-table tbody tr[data-href] td[data-label='Resources'] { padding-left: 44px; }
  .tbl.stack.svc-table tbody tr[data-href] td[data-label='Last change'] { justify-content: flex-end; }
  .tbl.stack.svc-table tbody tr[data-href] td[data-label='Resources']::before, .tbl.stack.svc-table tbody tr[data-href] td[data-label='Last change']::before { color: var(--ink-3); }
  .svc-table .nm { font: var(--t-caption); }
  .svc-table td[data-label='State'] .nm { font: var(--t-small); }
}

/* ── Layout utilities (One's space scale; they replace inline margins in screens) ── */
.u-mt-8 { margin-top: 8px; } .u-mt-16 { margin-top: 16px; } .u-mt-24 { margin-top: 24px; }
.u-mb-8 { margin-bottom: 8px; } .u-mb-16 { margin-bottom: 16px; } .u-mb-24 { margin-bottom: 24px; }
.u-my-16 { margin-top: 16px; margin-bottom: 16px; } .u-pt-8 { padding-top: 8px; }
.u-measure { max-width: 880px; } .u-stack { display: grid; gap: 12px; } .u-small { font: var(--t-small); } .u-medium { font-weight: 500; color: var(--ink); }
.u-link { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: text-decoration-color var(--dur-feedback) var(--ease-ui); }
.u-link:hover { text-decoration-color: currentColor; }
.u-stack > .note + .note { margin-top: 0; }
/* A section heading that opens the page sits close under the page head, on every width. */
h2.sec.u-mt-8 { margin-top: 8px; }

/* Several refusals in a row: the first is the page's; the rest are compact lines under a hairline. */
div:has(> .state) + div:has(> .state) > .state { padding: 16px 0; border-top: 1px solid var(--line); max-width: none; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; }
div:has(> .state) + div:has(> .state) > .state > * { grid-column: 2; }
div:has(> .state) + div:has(> .state) > .state .ic-wrap { grid-column: 1; grid-row: 1 / span 2; width: 32px; height: 32px; margin: 0; border-radius: var(--r-2); }
div:has(> .state) + div:has(> .state) > .state .ic-wrap .ic { width: 16px; height: 16px; }
div:has(> .state) + div:has(> .state) > .state h3 { font: 500 15px/22px var(--font-sans); }
div:has(> .state) + div:has(> .state) > .state p { margin-top: 2px; }
div:has(> .state) + div:has(> .state) > .state .acts { margin-top: 12px; }
div:has(> .state) + div:has(> .state) > .state .btn.primary { background: transparent; border-color: var(--line-2); color: var(--ink); }
div:has(> .state) + div:has(> .state) > .state .btn.primary:hover { background: var(--hover); border-color: var(--ink-3); }

@media (max-width: 720px) {
  /* No sideways scroll on a phone: long paths and commands wrap inside their cell or block. */
  .tbl.stack td { min-width: 0; overflow-wrap: anywhere; }
  .code pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}