/* Bench v1.2 — one stylesheet: tokens (light, dark, system) then component classes.
   No external requests. Light/dark follows prefers-color-scheme; force with <html data-theme="light|dark">. */

:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #f3f0e8;
  --surface: #fffdf8;
  --surface-sunken: #ebe7dd;
  --surface-raised: #ffffff;
  --border: #ddd7c9;
  --border-strong: #857f71;
  --ink: #1c201e;
  --ink-muted: #585d58;
  --accent: #99510b;
  --accent-ink: #8c4a0a;
  --accent-soft: #f5e5cf;
  --on-accent: #ffffff;
  --confirm: #1b6a57;
  --confirm-ink: #16604e;
  --confirm-soft: #dcefe6;
  --on-confirm: #ffffff;
  --decline: #b03a2c;
  --decline-ink: #a2311f;
  --decline-soft: #f8e2dc;
  --on-decline: #ffffff;
  --diff-added: #e0f1e8;
  --diff-added-word: #b9e1cd;
  --diff-removed: #fbe6e1;
  --diff-removed-word: #f2c3b9;
  --inverse: #1c201e;
  --on-inverse: #f3f0e8;
  --inverse-accent: #edb06a;
  --scrim: rgba(18,20,19,0.48);
  --shadow-raised: 0 1px 2px rgba(28,32,30,0.06);
  --shadow-float: 0 6px 24px rgba(28,32,30,0.14), 0 1px 3px rgba(28,32,30,0.1);
  --shadow-bar: 0 -1px 0 #ddd7c9, 0 -6px 18px rgba(28,32,30,0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121413;
    --surface: #1a1d1b;
    --surface-sunken: #0d0f0e;
    --surface-raised: #262a28;
    --border: #2e3330;
    --border-strong: #78807a;
    --ink: #e9e6df;
    --ink-muted: #a4a9a2;
    --accent: #e7a457;
    --accent-ink: #edb06a;
    --accent-soft: #352717;
    --on-accent: #1f1306;
    --confirm: #4fb392;
    --confirm-ink: #72d2b3;
    --confirm-soft: #15302a;
    --on-confirm: #0a1e18;
    --decline: #e2796a;
    --decline-ink: #f59d90;
    --decline-soft: #3b1d19;
    --on-decline: #2a0c08;
    --diff-added: #132d25;
    --diff-added-word: #1f5141;
    --diff-removed: #341a17;
    --diff-removed-word: #5e2c25;
    --inverse: #e9e6df;
    --on-inverse: #121413;
    --inverse-accent: #8c4a0a;
    --scrim: rgba(0,0,0,0.6);
    --shadow-raised: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-float: 0 8px 28px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
    --shadow-bar: 0 -1px 0 #2e3330, 0 -6px 18px rgba(0,0,0,0.4);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121413;
  --surface: #1a1d1b;
  --surface-sunken: #0d0f0e;
  --surface-raised: #262a28;
  --border: #2e3330;
  --border-strong: #78807a;
  --ink: #e9e6df;
  --ink-muted: #a4a9a2;
  --accent: #e7a457;
  --accent-ink: #edb06a;
  --accent-soft: #352717;
  --on-accent: #1f1306;
  --confirm: #4fb392;
  --confirm-ink: #72d2b3;
  --confirm-soft: #15302a;
  --on-confirm: #0a1e18;
  --decline: #e2796a;
  --decline-ink: #f59d90;
  --decline-soft: #3b1d19;
  --on-decline: #2a0c08;
  --diff-added: #132d25;
  --diff-added-word: #1f5141;
  --diff-removed: #341a17;
  --diff-removed-word: #5e2c25;
  --inverse: #e9e6df;
  --on-inverse: #121413;
  --inverse-accent: #8c4a0a;
  --scrim: rgba(0,0,0,0.6);
  --shadow-raised: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-float: 0 8px 28px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-bar: 0 -1px 0 #2e3330, 0 -6px 18px rgba(0,0,0,0.4);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --size-target: 44px;
  --size-header: 56px;
  --size-actionbar: 76px;
  --size-content: 1120px;
  --size-sidebar: 360px;
  --size-dot: 10px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", "Roboto Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Bench — component classes. Tokens come from tokens.css (or the top of bench.css). */

/* ---------- Base ---------- */
.b-app, body.b-app {
  margin: 0; min-height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 15px; line-height: 22px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  container: app / inline-size;
  -webkit-tap-highlight-color: transparent;
}
/* v1.1: paint the page background past a short body. */
html:has(> body.b-app) { background: var(--bg); min-height: 100%; }
.b-app *, .b-app *::before, .b-app *::after { box-sizing: border-box; }
.b-app :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.b-app a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.b-app h1, .b-app h2, .b-app h3, .b-app p { margin: 0; }
/* Component display rules must never beat the hidden attribute. */
.b-app [hidden] { display: none !important; }
.b-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.b-muted { color: var(--ink-muted); }
.b-mono { font-family: var(--font-mono); }
.b-num { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.b-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.b-icon--sm { width: 16px; height: 16px; }

/* Type styles as classes */
.b-display { font-size: 28px; line-height: 34px; font-weight: 650; letter-spacing: -0.01em; }
.b-title { font-size: 20px; line-height: 26px; font-weight: 650; letter-spacing: -0.005em; }
.b-heading { font-size: 17px; line-height: 24px; font-weight: 600; }
.b-body { font-size: 15px; line-height: 22px; }
.b-small { font-size: 13px; line-height: 18px; }
.b-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- Layout ---------- */
.b-page { padding: var(--space-4); display: grid; gap: var(--space-6); align-content: start; }
.b-stack { display: grid; gap: var(--space-3); align-content: start; }
.b-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.b-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.b-layout { display: grid; gap: var(--space-6); }
.b-layout__side, .b-layout__main { min-width: 0; display: grid; gap: var(--space-4); align-content: start; }
@container app (min-width: 900px) {
  .b-page { padding: var(--space-8) var(--space-6) var(--space-12); max-width: var(--size-content); margin: 0 auto; width: 100%; }
  .b-layout { grid-template-columns: var(--size-sidebar) minmax(0, 1fr); align-items: start; }
  .b-layout--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .b-layout__side { position: sticky; top: calc(var(--size-header) + var(--space-6)); }
  .b-phone-only { display: none !important; }
}
@container app (max-width: 899.98px) { .b-laptop-only { display: none !important; } }

/* ---------- App header ---------- */
.b-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--space-1);
  min-height: var(--size-header); padding: 0 var(--space-2);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.b-header__title { flex: 1; min-width: 0; padding: 0 var(--space-2); font-size: 17px; line-height: 24px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-header__title small { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--ink-muted); font-family: var(--font-mono); }
.b-header__mark { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); margin-left: var(--space-3); flex: none; }
.b-header__actions { display: flex; gap: var(--space-1); }
@container app (min-width: 900px) { .b-header { padding: 0 var(--space-4); } .b-header__title { font-size: 20px; line-height: 26px; } }

/* ---------- Card ---------- */
.b-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.b-card--flush { padding: 0; gap: 0; overflow: hidden; }
.b-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.b-card--flush > .b-card__head { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
@container app (min-width: 900px) { .b-card:not(.b-card--flush) { padding: var(--space-5); } }

/* ---------- List + status dot ---------- */
.b-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.b-card--flush > .b-list { border: 0; border-radius: 0; }
.b-list > li + li { border-top: 1px solid var(--border); }
.b-item { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--size-target); padding: var(--space-3) var(--space-4); color: inherit; text-decoration: none; width: 100%; background: none; border: 0; font: inherit; text-align: left; }
a.b-item, button.b-item { cursor: pointer; }
a.b-item:hover, button.b-item:hover { background: var(--surface-raised); }
.b-item[aria-current="true"], .b-item[aria-current="page"] { background: var(--accent-soft); }
.b-app a.b-item { color: inherit; }
.b-item__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.b-item__title { font-size: 15px; line-height: 22px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.b-item__meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); display: flex; flex-wrap: wrap; column-gap: var(--space-2); }
.b-item__meta > * + *::before { content: "\00B7"; margin-right: var(--space-2); }
.b-item__aside { flex: none; display: grid; justify-items: end; gap: 2px; color: var(--ink-muted); }
.b-item > .b-dot { margin-top: 6px; }
.b-item__chev { align-self: center; color: var(--ink-muted); }

.b-dot { width: var(--size-dot); height: var(--size-dot); flex: none; display: inline-block; border-radius: 50%; }
.b-dot--undecided { border: 2px solid var(--accent); background: transparent; }
.b-dot--confirmed { background: var(--confirm); }
.b-dot--declined { background: var(--decline); border-radius: 2px; transform: scale(0.9); }
.b-status { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; line-height: 18px; font-weight: 600; }
.b-status--undecided { color: var(--accent-ink); }
.b-status--confirmed { color: var(--confirm-ink); }
.b-status--declined { color: var(--decline-ink); }

/* ---------- Buttons ---------- */
.b-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--size-target); min-width: var(--size-target); padding: 0 var(--space-4);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 20px; text-decoration: none; white-space: nowrap;
  cursor: pointer; background: transparent; color: var(--ink);
  transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
}
.b-btn:active { transform: translateY(1px); }
.b-btn--confirm { background: var(--confirm); color: var(--on-confirm); }
.b-btn--confirm:hover { filter: brightness(1.08); }
.b-btn--decline { background: var(--decline); color: var(--on-decline); }
.b-btn--decline:hover { filter: brightness(1.08); }
.b-btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--ink); }
.b-btn--secondary:hover { background: var(--surface-raised); }
.b-btn--ghost { color: var(--ink); }
.b-btn--ghost:hover { background: var(--surface-sunken); }
.b-btn--icon { padding: 0; width: var(--size-target); }
.b-btn--block { width: 100%; }
.b-btn[disabled], .b-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.b-app a.b-btn--confirm { color: var(--on-confirm); } .b-app a.b-btn--secondary, .b-app a.b-btn--ghost { color: var(--ink); }

/* ---------- Segmented control ---------- */
.b-seg { display: flex; padding: 3px; gap: 3px; background: var(--surface-sunken); border-radius: var(--radius-md); border: 1px solid var(--border); }
.b-seg__opt { flex: 1; min-height: 38px; padding: 0 var(--space-3); border: 0; border-radius: 6px; background: transparent; color: var(--ink-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); }
.b-seg__opt[aria-selected="true"], .b-seg__opt[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-raised), 0 0 0 1px var(--border); }
/* v1.2: segments can be links (page navigation), marked with aria-current. */
.b-app a.b-seg__opt { color: var(--ink-muted); text-decoration: none; }
.b-app a.b-seg__opt[aria-current="page"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-raised), 0 0 0 1px var(--border); }
.b-seg__count { white-space: nowrap; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-muted); }
/* The track is 44px tall: 38px option + 3px padding each side. */

/* ---------- Chips ---------- */
.b-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.b-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; max-width: 100%; padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-sunken); color: var(--ink); font-size: 13px; line-height: 18px; font-weight: 500; }
.b-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-chip--link { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); text-decoration: none; position: relative; }
.b-app a.b-chip--link { color: var(--accent-ink); text-decoration: none; }
.b-chip--link:hover span { text-decoration: underline; }
/* Chips are 32px tall: the ::after extends the hit area to 44px without growing the layout. */
.b-chip--link::after { content: ""; position: absolute; inset: -6px -2px; }

/* ---------- Fields + textarea ---------- */
.b-field { display: grid; gap: 6px; }
.b-field__label { font-size: 13px; line-height: 18px; font-weight: 600; }
.b-field__hint { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.b-textarea { width: 100%; min-height: 96px; resize: vertical; display: block; padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--surface-sunken); color: var(--ink); font: inherit; font-size: 16px; line-height: 24px; }
.b-textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.b-textarea::placeholder { color: var(--ink-muted); opacity: 1; }
.b-textarea--code { font-family: var(--font-mono); font-size: 14px; line-height: 22px; tab-size: 2; min-height: 200px; }
.b-textarea--nowrap { white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.b-textarea--prose { font-family: var(--font-sans); }
/* Prose is 16px so Android/iOS never zoom on focus. */

/* ---------- Line diff ---------- */
.b-diff { font-family: var(--font-mono); font-size: 13px; line-height: 20px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.b-diff__scroll { overflow-x: auto; }
.b-diff__line { display: grid; grid-template-columns: 3.2em 1.6em minmax(0, 1fr); min-width: 100%; }
.b-diff__no { text-align: right; padding-right: 6px; color: var(--ink-muted); font-variant-numeric: tabular-nums; user-select: none; }
.b-diff__sign { text-align: center; user-select: none; font-weight: 700; }
.b-diff__text { white-space: pre-wrap; overflow-wrap: anywhere; padding-right: var(--space-3); }
.b-diff--nowrap .b-diff__text { white-space: pre; overflow-wrap: normal; }
.b-diff__line--add { background: var(--diff-added); }
.b-diff__line--add .b-diff__sign { color: var(--confirm-ink); }
.b-diff__line--del { background: var(--diff-removed); }
.b-diff__line--del .b-diff__sign { color: var(--decline-ink); }
.b-diff__line--del .b-diff__text { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--decline-ink) 45%, transparent); text-decoration-thickness: 1px; }
.b-diff__line--add mark { background: var(--diff-added-word); color: inherit; border-radius: 3px; padding: 0 1px; }
.b-diff__line--del mark { background: var(--diff-removed-word); color: inherit; border-radius: 3px; padding: 0 1px; }
.b-diff__fold { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--size-target); padding: 0 var(--space-3) 0 calc(3.2em + 6px); border: 0; border-block: 1px dashed var(--border); background: var(--surface); color: var(--ink-muted); font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.b-diff__fold:first-child { border-top: 0; } .b-diff__fold:last-child { border-bottom: 0; }
.b-diff__fold:hover { color: var(--ink); background: var(--surface-raised); }
.b-diff__summary { display: flex; gap: var(--space-3); font-family: var(--font-mono); font-size: 12px; line-height: 16px; }
.b-diff__summary .add { color: var(--confirm-ink); } .b-diff__summary .del { color: var(--decline-ink); }
/* Plain text view (Draft / Old) */
.b-code { font-family: var(--font-mono); font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); margin: 0; }

/* ---------- Banner ---------- */
.b-banner { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); font-size: 14px; line-height: 20px; border: 1px solid var(--border); }
.b-banner > .b-icon { margin-top: 0; }
.b-banner__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.b-banner__title { font-weight: 600; }
.b-banner--attention { background: var(--accent-soft); border-color: transparent; } .b-banner--attention > .b-icon { color: var(--accent-ink); }
.b-banner--success { background: var(--confirm-soft); border-color: transparent; } .b-banner--success > .b-icon { color: var(--confirm-ink); }
.b-banner--danger { background: var(--decline-soft); border-color: transparent; } .b-banner--danger > .b-icon { color: var(--decline-ink); }
.b-banner .b-btn { min-height: 36px; margin: -8px -8px -8px 0; padding: 0 var(--space-3); font-size: 14px; position: relative; }
.b-banner .b-btn::after { content: ""; position: absolute; inset: -4px 0; }

/* ---------- Toast ---------- */
.b-toast-region { position: fixed; left: var(--space-4); right: var(--space-4); bottom: calc(var(--size-actionbar) + var(--space-3) + env(safe-area-inset-bottom, 0px)); z-index: 30; display: grid; justify-items: center; pointer-events: none; }
.b-toast { pointer-events: auto; display: flex; align-items: center; gap: var(--space-3); width: 100%; max-width: 420px; min-height: 48px; padding: 6px 6px 6px var(--space-4); border-radius: var(--radius-md); background: var(--inverse); color: var(--on-inverse); box-shadow: var(--shadow-float); font-size: 14px; line-height: 20px; }
.b-toast__text { flex: 1; min-width: 0; }
.b-toast__action { min-height: var(--size-target); padding: 0 var(--space-3); border: 0; background: transparent; border-radius: 6px; color: var(--inverse-accent); font: inherit; font-weight: 700; cursor: pointer; }
.b-toast__mark { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.b-toast__mark--confirmed { background: var(--confirm); } .b-toast__mark--declined { background: var(--decline); border-radius: 2px; }

/* ---------- Progress ---------- */
.b-progress { display: flex; height: 6px; border-radius: var(--radius-sm); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.b-progress__bar { background: var(--accent); height: 100%; }
.b-progress__bar--confirmed { background: var(--confirm); }
.b-progress__bar--declined { background: var(--decline); }
.b-progress__bar + .b-progress__bar { margin-left: 2px; }
.b-progress--lg { height: 10px; }

/* ---------- Empty state ---------- */
.b-empty { display: grid; justify-items: center; gap: var(--space-2); text-align: center; padding: var(--space-12) var(--space-6); color: var(--ink-muted); }
.b-empty__glyph { width: 48px; height: 48px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink-muted); margin-bottom: var(--space-2); }
.b-empty__title { color: var(--ink); font-size: 17px; line-height: 24px; font-weight: 600; }
.b-empty p { max-width: 32ch; }
.b-empty .b-btn { margin-top: var(--space-3); }

/* ---------- Sticky action bar ---------- */
.b-actionbar { position: sticky; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); background: var(--surface); box-shadow: var(--shadow-bar); }
.b-actionbar__note { grid-column: 1 / -1; margin: -4px 0 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); text-align: center; }
.b-actionbar .b-btn { min-height: 48px; }
@container app (min-width: 900px) {
  .b-actionbar { position: static; box-shadow: none; padding: 0; background: none; grid-template-columns: auto auto 1fr; justify-content: start; }
  .b-actionbar__note { grid-column: auto; margin: 0; text-align: right; align-self: center; }
  .b-actionbar .b-btn { min-width: 132px; }
}

/* On phone, a review screen drops the card chrome and the action bar bleeds to the screen edges. */
@container app (max-width: 899.98px) {
  .b-card--bare-phone { background: none; border: 0; border-radius: 0; padding: 0; gap: var(--space-5); }
  .b-page .b-actionbar { margin: 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4)); }
}

/* ---------- Intentional additions: signal + key/value ---------- */
.b-signal { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px 0 8px; border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .02em; border: 1px solid var(--border); background: var(--surface); }
.b-signal::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.b-signal--up { color: var(--confirm-ink); }
.b-signal--down { color: var(--decline-ink); background: var(--decline-soft); border-color: transparent; }
.b-signal--down::before { border-radius: 2px; }
.b-signal--unknown { color: var(--ink-muted); }
.b-signal--unknown::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.b-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-3) var(--space-4); margin: 0; }
.b-kv > div { display: grid; gap: 2px; min-width: 0; }
.b-kv dt { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.b-kv dd { margin: 0; font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-kv dd .b-progress { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) { .b-btn { transition: none; } .b-btn:active { transform: none; } }