/* chrrpr field v0 — shared components. Assumes tokens.css is loaded first.
   Semantic variables only; no raw colour values anywhere in this file.
   Contrast policy (see tokens.css notes): readable text uses --ink or --ink-muted. --ink-faint is
   reserved for disabled states, decorative glyphs and 3:1 control outlines, never for text that must be read.
   --signal is on-air/audio activity and appears only on .hardware surfaces. */

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box }
[hidden] { display:none !important }
body { margin:0; background-color:var(--ground); background-image:var(--texture); background-size:var(--texture-size); color:var(--ink); font:var(--text-body)/1.5 var(--font-ui); -webkit-font-smoothing:antialiased }
button, input, select, textarea { font:inherit; color:inherit }
button { background:none; border:0; cursor:pointer; border-radius:var(--r-control); padding:0 }
a { color:inherit; text-decoration:none }
p { margin:0 }
h1, h2, h3, h4 { margin:0; font:inherit }
ul, ol { margin:0 }
hr { border:0; border-top:1px solid var(--line); margin:var(--s4) 0 }

/* Keyboard focus: ring in --focus plus a hairline of --ink so the ring keeps 3:1 against pale surfaces. */
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 1px var(--ink) }
.hardware :focus-visible { box-shadow:none }
:focus:not(:focus-visible) { outline:none }

.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* ── Type ─────────────────────────────────────────────────────────────── */
.eyebrow { font-size:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; font-weight:700; color:var(--ink-muted) }
.display-s, .display-m, .display-l { font-family:var(--font-display); font-weight:400; letter-spacing:-.02em; line-height:1.15; color:var(--ink) }
.display-s { font-size:var(--display-s) }
.display-m { font-size:var(--display-m) }
.display-l { font-size:var(--display-l) }
.title { font-size:var(--text-title); font-weight:600; line-height:1.3; letter-spacing:-.01em }
.label { font-size:var(--text-label); font-weight:600; color:var(--ink) }
.small { font-size:var(--text-small) }
.muted { color:var(--ink-muted) }
.mono { font-family:var(--font-mono); font-size:var(--text-label) }
kbd { font:600 11px/1 var(--font-mono); padding:4px 7px; border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:var(--r-badge); background:var(--paper-raised); color:var(--ink-muted); display:inline-block }
.hardware kbd { background:var(--hardware-raised); border-color:var(--hardware-edge); color:var(--hardware-ink) }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:var(--target-min); padding:0 var(--s4); border-radius:var(--r-control); font-weight:600; font-size:var(--text-small); line-height:1.2; border:1px solid var(--line-strong); background:var(--paper-raised); color:var(--ink); transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); text-align:center }
.btn:hover { background:var(--select); color:var(--select-ink) }
.btn:active { opacity:.85 }
.btn.primary { background:var(--action); color:var(--action-ink); border-color:transparent }
.btn.primary:hover { background:var(--action); color:var(--action-ink); opacity:.9 }
.btn.secondary { background:var(--paper-raised) }
.btn.ghost { background:transparent; border-color:transparent; color:var(--ink-muted) }
.btn.ghost:hover { background:var(--select); color:var(--select-ink) }
.btn.danger { background:var(--danger-bg); color:var(--danger); border-color:var(--danger) }
.btn.danger:hover { background:var(--danger-bg); color:var(--danger); border-width:2px; padding:0 calc(var(--s4) - 1px) }
/* Filled danger fails AA with every existing text token (white on --danger is 3.93:1), so the confirm variant is a heavier outline. */
.btn.danger.solid { background:var(--paper-raised); color:var(--danger); border:2px solid var(--danger); padding:0 calc(var(--s4) - 1px) }
.btn.danger.solid:hover { background:var(--danger-bg) }
.btn.sm { min-height:36px; padding:0 var(--s3); font-size:var(--text-label) }
.btn.lg { min-height:52px; padding:0 var(--s5); font-size:var(--text-body) }
.btn.icon { width:var(--target-min); padding:0; font-size:16px }
.btn.icon.sm { width:36px }
.btn[disabled], .btn[aria-disabled=true] { background:var(--ground); color:var(--ink-faint); border-color:var(--line); cursor:not-allowed; opacity:1 }
.btn[disabled]:hover, .btn[aria-disabled=true]:hover { background:var(--ground); color:var(--ink-faint) }
.btn-row { display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center }
@media (pointer:coarse) { .btn.sm, .btn.icon.sm { min-height:var(--target-min) } .btn.icon.sm { width:var(--target-min) } }

/* ── Chips ────────────────────────────────────────────────────────────── */
.chip { display:inline-flex; align-items:center; gap:var(--s2); min-height:32px; padding:0 var(--s3); border:1px solid var(--line-strong); border-radius:var(--r-chip); font-size:var(--text-small); background:var(--paper-raised); color:var(--ink); white-space:nowrap }
.chip small { color:var(--ink-muted); font-size:11px }
button.chip { cursor:pointer }
button.chip:hover { background:var(--select) }
.chip[aria-pressed=true] { background:var(--select); color:var(--select-ink); border-color:transparent; font-weight:600 }
.chip.agent { padding:var(--s1) var(--s3) var(--s1) var(--s1); border-color:var(--line) }
.av { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--paper-raised); flex-shrink:0; background:var(--ink-muted) }
.a1 .av, .av.a1 { background:var(--id1) } .a2 .av, .av.a2 { background:var(--id2) } .a3 .av, .av.a3 { background:var(--id3) } .a4 .av, .av.a4 { background:var(--id4) }
.a5 .av, .av.a5 { background:var(--id5) } .a6 .av, .av.a6 { background:var(--id6) } .a7 .av, .av.a7 { background:var(--id7) } .a8 .av, .av.a8 { background:var(--id8) }
.me .av, .av.me { background:var(--ink-muted) }
.av.lg { width:36px; height:36px; font-size:14px }
.stages { display:inline-flex; gap:2px; flex-wrap:wrap; padding:2px; border:1px solid var(--line-strong); border-radius:var(--r-control); background:var(--paper-raised); max-width:100% }
.stage { display:inline-flex; align-items:center; justify-content:center; min-height:30px; border:0; border-radius:calc(var(--r-control) - 2px); padding:0 var(--s3); font-size:var(--text-label); font-weight:600; color:var(--ink-muted); background:transparent }
.stage:hover { background:var(--select); color:var(--select-ink) }
.stage[aria-pressed=true], .stage[aria-checked=true] { background:var(--action); color:var(--action-ink); font-weight:700 }
.chip-row { display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center }
@media (pointer:coarse) { button.chip, .stage { min-height:var(--target-min) } }

/* ── Status badge (icon glyph + word, always both) ────────────────────── */
.status { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; border-radius:var(--r-badge); padding:2px 9px; white-space:nowrap; line-height:1.5 }
.status .gl { font-size:11px; line-height:1 }
.s-success { color:var(--success); background:var(--success-bg) }
.s-warning { color:var(--warning); background:var(--warning-bg) }
.s-danger { color:var(--danger); background:var(--danger-bg) }
.s-info { color:var(--info); background:var(--info-bg) }
.s-neutral { color:var(--neutral); background:var(--neutral-bg) }
.dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--ink-muted) }
.dot.ok { background:var(--success); box-shadow:0 0 0 3px var(--success-bg) }
.dot.warn { background:var(--warning); box-shadow:0 0 0 3px var(--warning-bg) }
.dot.bad { background:var(--danger); box-shadow:0 0 0 3px var(--danger-bg) }

/* ── Scope badge (truth labels for settings leaves) ───────────────────── */
.scope { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:2px 7px; border-radius:var(--r-badge); border:1px solid var(--line-strong); color:var(--ink-muted); background:transparent; vertical-align:2px; white-space:nowrap; line-height:1.5 }
.scope .gl { font-size:10px; line-height:1 }
.scope-device { background:var(--select); color:var(--select-ink); border-color:transparent }
.scope-network { background:var(--neutral-bg); color:var(--ink); border-color:var(--line-strong) }
.scope-agent { background:transparent; color:var(--ink); border-color:var(--ink-muted) }
.scope-operator { background:var(--paper-raised); color:var(--ink); border-color:var(--ink); }
.scope-protected { background:var(--hardware); color:var(--hardware-ink); border-color:var(--hardware) }
.scope-planned { background:transparent; color:var(--ink-muted); border-style:dashed }

/* Truth labels: how much to trust what is on screen. */
.truth { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:var(--r-badge); line-height:1.5; border:1px dashed var(--line-strong); color:var(--ink-muted); background:transparent; white-space:nowrap }
.truth-unmounted { border-style:dashed; color:var(--ink-muted); background:var(--neutral-bg) }
.truth-defect { border-style:solid; border-color:var(--danger); color:var(--danger); background:var(--danger-bg) }
.truth-narrative { border-style:solid; border-color:transparent; color:var(--info); background:var(--info-bg); font-style:italic }

/* ── Navigation ───────────────────────────────────────────────────────── */
.nav { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:var(--r-control); color:var(--ink-muted); min-height:36px; font-size:var(--text-body); transition:background var(--dur-fast) var(--ease) }
.nav:hover, .nav.is-hover { background:var(--select); color:var(--ink) }
.nav.active, .nav[aria-current=page] { background:var(--select); color:var(--select-ink); font-weight:600 }
.nav.dim, .nav.is-planned { color:var(--ink-muted); cursor:default }
.nav.dim:hover, .nav.is-planned:hover { background:transparent; color:var(--ink-muted) }
.nav.dim .ico, .nav.is-planned .ico { color:var(--ink-faint) }
.ico { width:18px; text-align:center; font-size:13px; flex-shrink:0 }
.nav-group, .group { font-size:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; font-weight:700; color:var(--ink-muted); margin:14px 10px 4px }
.count { margin-left:auto; font-size:11px; font-weight:700; background:var(--hardware); color:var(--signal); border-radius:var(--r-pill); padding:1px 7px; line-height:1.5 }
.planned { margin-left:auto; font-size:9.5px; letter-spacing:.4px; text-transform:uppercase; border:1px dashed var(--line-strong); color:var(--ink-muted); border-radius:5px; padding:1px 5px }
@media (pointer:coarse) { .nav { min-height:var(--target-min) } }

/* Tabs */
.tabs { display:flex; align-items:center; gap:var(--s1); border-bottom:1px solid var(--line); flex-wrap:wrap }
.tabs [role=tab] { padding:0 var(--s3); min-height:var(--target-min); display:inline-flex; align-items:center; border-radius:0; border-bottom:2px solid transparent; color:var(--ink-muted); font-size:var(--text-small); margin-bottom:-1px }
.tabs [role=tab]:hover { color:var(--ink); background:var(--select) }
.tabs [role=tab][aria-selected=true] { color:var(--ink); border-bottom-color:var(--ink); font-weight:600 }
.tabs .count { margin-left:var(--s1) }
.spacer { flex:1 }
.ctx { font-size:var(--text-label); color:var(--ink-muted); padding:4px 8px; border:1px solid var(--line); border-radius:8px; margin-left:6px }

/* Segmented control (theme switch etc.) */
.seg { display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r-control); padding:2px; background:var(--paper-raised); gap:2px }
.seg button { min-height:40px; padding:0 var(--s3); border-radius:calc(var(--r-control) - 2px); font-size:var(--text-label); font-weight:600; color:var(--ink-muted) }
.seg button:hover { background:var(--select); color:var(--select-ink) }
.seg button[aria-pressed=true] { background:var(--action); color:var(--action-ink) }

/* ── Forms ────────────────────────────────────────────────────────────── */
.field { display:grid; gap:var(--s1) }
.field > label, .field-label { font-size:var(--text-label); font-weight:600; color:var(--ink) }
.help { font-size:var(--text-label); color:var(--ink-muted) }
.field-error { font-size:var(--text-label); color:var(--danger); display:flex; gap:var(--s1); align-items:baseline }
.input, .select, .textarea { width:100%; min-height:var(--target-min); border:1px solid var(--ink-faint); border-radius:var(--r-control); padding:0 var(--s3); background:var(--paper-raised); color:var(--ink); font-size:var(--text-body); transition:border-color var(--dur-fast) var(--ease) }
.textarea { padding:var(--s3); min-height:96px; resize:vertical; line-height:1.5 }
.input::placeholder, .textarea::placeholder { color:var(--ink-muted); opacity:1 }
.input:hover, .select:hover, .textarea:hover { border-color:var(--ink-muted) }
.input[aria-invalid=true] { border-color:var(--danger) }
.input[disabled], .select[disabled], .textarea[disabled] { background:var(--ground); color:var(--ink-faint); border-color:var(--line); cursor:not-allowed }
.select { padding-right:var(--s2) }

/* Toggle switch: button[role=switch][aria-checked]. Position of the knob plus an On/Off word carry the state. */
.switch { position:relative; width:48px; height:28px; flex-shrink:0; border-radius:var(--r-pill); border:1.5px solid var(--ink-faint); background:var(--paper-raised); padding:0; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease) }
.switch::before { content:""; position:absolute; inset:-8px -2px }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--ink-faint); transition:transform var(--dur) var(--ease), background var(--dur) var(--ease) }
.switch[aria-checked=true] { background:var(--action); border-color:var(--action) }
.switch[aria-checked=true]::after { transform:translateX(20px); background:var(--action-ink) }
.switch[disabled], .switch[aria-disabled=true] { cursor:not-allowed; background:var(--ground); border-color:var(--line-strong) }
.switch[disabled]::after, .switch[aria-disabled=true]::after { background:var(--line-strong) }
.switch[aria-checked=true][disabled], .switch[aria-checked=true][aria-disabled=true] { background:var(--line-strong) }
.switch-wrap { display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--text-label); font-weight:600; color:var(--ink-muted) }

/* Settings rows */
.srow { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s4); align-items:center; padding:var(--s4) 0; border-bottom:1px solid var(--line) }
.srow:last-child { border-bottom:0 }
.srow-label { font-weight:600; color:var(--ink); display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap }
.srow-help { font-size:var(--text-label); color:var(--ink-muted); margin-top:2px; max-width:56ch }
.srow-ctl { display:flex; align-items:center; gap:var(--s3); justify-content:flex-end; min-width:0 }
.srow-ctl .select, .srow-ctl .input { min-width:180px }
.srow-value { color:var(--ink); font-size:var(--text-small); text-align:right }
.srow.is-planned .srow-label, .srow.is-planned .srow-help { color:var(--ink-muted) }
.srow-reason { font-size:var(--text-label); color:var(--ink-muted) }
@media (max-width:560px) { .srow { grid-template-columns:1fr } .srow-ctl { justify-content:flex-start; flex-wrap:wrap } .srow-value { text-align:left } }

/* ── Cards & rows ─────────────────────────────────────────────────────── */
.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s4) }
.card.raised { background:var(--paper-raised); box-shadow:var(--shadow) }
.card-title { font-weight:600; margin-bottom:var(--s1) }
.conn-card { border:1px solid var(--line); background:var(--paper); border-radius:var(--r-card); padding:12px; margin-bottom:6px; font-size:var(--text-label); display:grid; gap:3px }
.conn-card .conn-line { display:flex; align-items:center; gap:var(--s2) }
.conn-card .conn-actions { margin-top:var(--s2); display:flex; gap:var(--s2) }
.net { display:flex; align-items:center; gap:8px; padding:7px 10px; margin:0 0 10px; border:1px solid var(--line); background:var(--paper); font-size:var(--text-label); color:var(--ink-muted); text-align:left; min-height:var(--target-min) }
.net b { color:var(--ink) }

.timeline { list-style:none; margin:0; padding:0; display:grid; gap:2px }
.row { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:14px; padding:14px 12px; border-radius:var(--r-card); cursor:pointer; border:1px solid transparent }
.row:hover { background:var(--ground) }
.row[aria-selected=true] { background:var(--select); border-color:var(--line) }
.row .av { width:30px; height:30px; font-size:12px }
.who { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap }
.who b { font-weight:650 }
.meta { font-size:var(--text-label); color:var(--ink-muted) }
.headline { font-weight:600; margin:2px 0 }
.preview { color:var(--ink-muted); font-size:var(--text-small); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.row-side { display:flex; flex-direction:column; align-items:flex-end; gap:var(--s2) }
.time { font-size:var(--text-label); color:var(--ink-muted) }
.day { font-size:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; font-weight:700; color:var(--ink-muted); margin:18px 0 6px }
.transcript { color:var(--ink-muted); line-height:1.65 }

/* ── Radio hardware layer ─────────────────────────────────────────────── */
.hardware { background:var(--hardware); color:var(--hardware-ink); border:1px solid var(--hardware-edge); box-shadow:var(--shadow-hardware) }
.hardware .muted { color:var(--hardware-muted) }
.play { position:relative; width:var(--target-min); height:var(--target-min); border-radius:50%; background:var(--hardware-raised); color:var(--signal); font-size:14px; flex-shrink:0; display:grid; place-items:center; border:1px solid var(--hardware-edge) }
.play:hover { background:var(--hardware-edge) }
.play.big { width:56px; height:56px; font-size:18px }
.row .play { width:34px; height:34px; font-size:11px; background:var(--hardware) }
.row .play::after { content:""; position:absolute; inset:-5px }
.play[disabled] { color:var(--hardware-muted); cursor:not-allowed }

.wave { display:inline-flex; align-items:center; gap:3px; height:26px; color:var(--signal) }
.wave i { display:block; width:3px; height:8px; border-radius:3px; background:currentColor; opacity:.9; transform-origin:center }
.wave i:nth-child(2n) { height:18px } .wave i:nth-child(3n) { height:12px } .wave i:nth-child(4n) { height:24px }
/* Animation runs only while capturing or playing. */
.playing .wave i, .capsule[data-state=live] .wave i, .wave.live i { animation:bar .9s ease-in-out infinite alternate; color:var(--signal-live) }
.wave i:nth-child(2) { animation-delay:.15s } .wave i:nth-child(3) { animation-delay:.3s } .wave i:nth-child(4) { animation-delay:.45s } .wave i:nth-child(5) { animation-delay:.6s }
.wave i:nth-child(6) { animation-delay:.2s } .wave i:nth-child(7) { animation-delay:.35s } .wave i:nth-child(8) { animation-delay:.5s } .wave i:nth-child(9) { animation-delay:.1s }
@keyframes bar { from { transform:scaleY(.35) } to { transform:scaleY(1.1) } }
@media (prefers-reduced-motion:reduce) { .wave i, .skel::after { animation:none !important } }

/* Catch-up deck */
.deck { display:flex; align-items:center; gap:18px; border-radius:var(--r-panel); padding:16px 22px 16px 16px; margin-bottom:var(--s4) }
.deck-body { flex:1; min-width:0 }
.deck-eyebrow { font-size:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--hardware-muted); font-weight:700 }
.deck-title { font:400 22px/1.25 var(--font-display); margin:2px 0 }
.deck-sub { font-size:var(--text-label); color:var(--hardware-muted) }

/* Playback deck + scrubber */
.player { border-radius:16px; padding:12px; display:flex; align-items:center; gap:var(--s3) }
.scrub { flex:1; height:4px; background:var(--hardware-edge); border-radius:4px; position:relative }
.scrub i { position:absolute; inset:0 auto 0 0; width:38%; background:var(--signal); border-radius:4px }
.player .t { font:var(--text-label) var(--font-mono); color:var(--hardware-muted); white-space:nowrap }
.scrubber { -webkit-appearance:none; appearance:none; flex:1; min-width:60px; height:var(--target-min); background:transparent; margin:0; cursor:pointer }
.scrubber::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:linear-gradient(to right, var(--signal) var(--p,0%), var(--hardware-edge) var(--p,0%)) }
.scrubber::-moz-range-track { height:4px; border-radius:4px; background:var(--hardware-edge) }
.scrubber::-moz-range-progress { height:4px; border-radius:4px; background:var(--signal) }
.scrubber::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; margin-top:-6px; border-radius:50%; background:var(--signal-live); border:0 }
.scrubber::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--signal-live); border:0 }
.speed { min-height:36px; padding:0 var(--s2); border-radius:var(--r-badge); background:var(--hardware-raised); color:var(--hardware-ink); font:600 var(--text-label) var(--font-mono); border:1px solid var(--hardware-edge) }
.speed:hover { background:var(--hardware-edge) }

/* Talk capsule: ready / live / review / disabled */
.capsule-dock { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:5 }
.capsule { display:inline-flex; align-items:center; gap:14px; border-radius:20px; padding:7px 16px 7px 7px; min-height:58px; max-width:100%; flex-wrap:wrap }
.talk { display:flex; align-items:center; gap:12px; background:var(--hardware-raised); color:var(--signal); border-radius:14px; border:1px solid var(--hardware-edge); padding:9px 16px; min-height:var(--target-min); user-select:none; touch-action:none; -webkit-user-select:none }
.talk:hover { background:var(--hardware-edge) }
.talk-label { color:var(--hardware-ink); font-weight:600; font-size:var(--text-small); min-width:86px; text-align:left }
.capsule[data-state=live] .talk { background:var(--hardware-raised); box-shadow:inset 0 0 0 2px var(--signal-live); border-color:transparent }
.capsule[data-state=live] .talk-label { color:var(--signal-live) }
.capsule[data-state=review] .talk { box-shadow:inset 0 0 0 1px var(--hardware-muted) }
.capsule[data-state=disabled] .talk { background:var(--hardware); color:var(--hardware-muted); cursor:not-allowed; border-style:dashed }
.capsule[data-state=disabled] .talk-label { color:var(--hardware-muted) }
.capsule[data-state=disabled] .wave { color:var(--hardware-muted) }
.target { font-size:var(--text-small); color:var(--hardware-ink); border:1px solid var(--hardware-edge); padding:4px 10px; border-radius:var(--r-pill) }
.target b { color:var(--signal) }
.mode { font-size:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; font-weight:700; color:var(--hardware-ink); background:var(--hardware-raised); border-radius:var(--r-badge); padding:3px 7px }
.cap-status { font-size:11px; color:var(--hardware-muted); min-width:84px }
.cap-actions { display:flex; gap:var(--s2) }
.hbtn { min-height:36px; padding:0 var(--s3); border-radius:var(--r-control); background:var(--hardware-raised); color:var(--hardware-ink); border:1px solid var(--hardware-edge); font-weight:600; font-size:var(--text-label) }
.hbtn:hover { background:var(--hardware-edge) }
.hbtn.primary { background:var(--hardware-ink); color:var(--hardware); border-color:transparent }
.hbtn.primary:hover { background:var(--hardware-ink); opacity:.9 }
@media (pointer:coarse) { .hbtn { min-height:var(--target-min) } }

/* Approval bezel: hardware outer edge, paper inner */
.bezel { border:1px solid var(--hardware); border-radius:16px; padding:3px; margin-top:10px }
.bezel-inner { border:1px solid var(--line); border-radius:13px; padding:14px; background:var(--paper-raised) }
.decide { display:flex; gap:var(--s2); margin-top:12px; flex-wrap:wrap }
.cand { text-align:left; border:1px solid var(--line-strong); border-radius:12px; padding:10px 12px; background:var(--paper-raised); min-height:var(--target-min); width:100%; display:block }
.cand:hover { background:var(--select) }
.cand small { display:block; color:var(--ink-muted) }
.candidates { display:grid; gap:6px; margin-top:10px }

/* Delivery ladder */
.ladder { list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); font-size:var(--text-small) }
.ladder li { display:flex; gap:10px; align-items:center; color:var(--ink-muted) }
.ladder .k { width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:10px; flex-shrink:0 }
.ladder .done .k { background:var(--success-bg); color:var(--success) }
.ladder .fail .k { background:var(--danger-bg); color:var(--danger) }
.ladder .fail { color:var(--danger) }
.ladder .open .k { border:1.5px dashed var(--ink-faint) }
.ladder .open { color:var(--ink-muted) }

/* ── States: empty / loading / banners ────────────────────────────────── */
.empty { text-align:center; padding:var(--s6) var(--s4); display:grid; justify-items:center; gap:var(--s2); border:1px dashed var(--line-strong); border-radius:var(--r-card); background:var(--paper) }
.empty .glyph { width:48px; height:48px; border-radius:50%; background:var(--select); color:var(--select-ink); display:grid; place-items:center; font-size:20px; margin-bottom:var(--s1) }
.empty p { max-width:42ch; color:var(--ink-muted) }
.empty .title { color:var(--ink) }

.skel { position:relative; overflow:hidden; background:var(--line); border-radius:var(--r-badge); height:12px }
.skel.circle { border-radius:50%; width:30px; height:30px }
.skel.block { height:56px; border-radius:var(--r-card) }
.skel::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, var(--paper-raised), transparent); opacity:.6; transform:translateX(-100%); animation:shimmer 1.4s var(--ease) infinite }
@keyframes shimmer { to { transform:translateX(100%) } }
.skel-row { display:grid; grid-template-columns:30px 1fr; gap:14px; padding:14px 12px; align-items:center }
.skel-lines { display:grid; gap:var(--s2) }

.banner { display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s3) var(--s4); border-radius:var(--r-card); border:1px solid; font-size:var(--text-small) }
.banner .gl { font-size:16px; line-height:1.4; flex-shrink:0 }
.banner-body { flex:1; min-width:0 }
.banner b { display:block; font-weight:650 }
.banner p { color:var(--ink) }
.banner .btn { flex-shrink:0 }
.banner.held { background:var(--warning-bg); border-color:var(--warning); color:var(--warning) }
.banner.blocked { background:var(--danger-bg); border-color:var(--danger); color:var(--danger) }
.banner.offline { background:var(--neutral-bg); border-color:var(--ink-muted); color:var(--neutral) }
.banner.info { background:var(--info-bg); border-color:var(--info); color:var(--info) }
@media (max-width:560px) { .banner { flex-wrap:wrap } }

/* ── Overlays ─────────────────────────────────────────────────────────── */
.toast { position:fixed; top:18px; left:50%; transform:translateX(-50%) translateY(-80px); background:var(--hardware); color:var(--hardware-ink); padding:10px 16px; border-radius:12px; font-size:var(--text-small); transition:transform var(--dur) var(--ease); z-index:20; max-width:calc(100vw - 32px) }
.toast.show { transform:translateX(-50%) translateY(0) }
.toast.inline { position:static; transform:none; display:inline-flex; align-items:center; gap:var(--s3); box-shadow:var(--shadow-hardware); border:1px solid var(--hardware-edge) }
.toast .gl { color:var(--signal) }

.modal { border:1px solid var(--line-strong); border-radius:var(--r-panel); background:var(--paper-raised); color:var(--ink); padding:0; width:min(480px, calc(100vw - 32px)); box-shadow:var(--shadow) }
.modal::backdrop { background:var(--hardware); opacity:.6 }
.modal-head { padding:var(--s5) var(--s5) var(--s2) }
.modal-body { padding:0 var(--s5) var(--s4); color:var(--ink-muted) }
.modal-foot { display:flex; gap:var(--s2); justify-content:flex-end; padding:var(--s4) var(--s5); border-top:1px solid var(--line); flex-wrap:wrap }
.modal.static { display:block; position:static; width:100%; max-width:480px; margin:0 }

.pop-anchor { position:relative; display:inline-block }
.menu { min-width:220px; background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:var(--r-card); box-shadow:var(--shadow); padding:var(--s1); display:grid; gap:2px }
.pop-anchor > .menu { position:absolute; top:calc(100% + 6px); left:0; z-index:15 }
.menu-item { display:flex; align-items:center; gap:10px; min-height:40px; padding:0 var(--s3); border-radius:var(--r-control); color:var(--ink); font-size:var(--text-small); text-align:left; width:100% }
.menu-item:hover, .menu-item:focus-visible { background:var(--select); color:var(--select-ink) }
.menu-item[aria-disabled=true] { color:var(--ink-faint); cursor:not-allowed }
.menu-item[aria-disabled=true]:hover { background:transparent; color:var(--ink-faint) }
.menu-sep { height:1px; background:var(--line); margin:var(--s1) 0 }
@media (pointer:coarse) { .menu-item { min-height:var(--target-min) } }

/* ── Floating surfaces (static renders and future overlays) ───────────── */
.fpanel { width:100%; max-width:360px; border-radius:var(--r-panel); overflow:hidden; display:flex; flex-direction:column }
.fpanel-head { display:flex; align-items:center; gap:var(--s2); padding:var(--s3) var(--s4); border-bottom:1px solid var(--hardware-edge) }
.fpanel-head b { font-weight:650; letter-spacing:-.2px }
.fpanel-presence { font-size:11px; color:var(--hardware-muted); display:inline-flex; align-items:center; gap:5px; margin-left:var(--s1) }
.fpanel-presence i { width:7px; height:7px; border-radius:50%; background:var(--signal) }
.fpanel-head .hbtn { margin-left:auto; width:36px; padding:0 }
.fpanel-body { padding:var(--s2); display:grid; gap:2px }
.fthread { display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:var(--s3); align-items:center; padding:var(--s2) var(--s3); border-radius:var(--r-control); text-align:left; width:100%; min-height:var(--target-min) }
.fthread:hover, .fthread[aria-current=true] { background:var(--hardware-raised) }
.fthread .t1 { font-size:var(--text-small); font-weight:600; color:var(--hardware-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fthread .t2 { font-size:var(--text-label); color:var(--hardware-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fthread .count { background:var(--signal); color:var(--hardware) }
.fmsg { margin:var(--s2); padding:var(--s3); border-radius:var(--r-card); background:var(--hardware-raised); font-size:var(--text-small); color:var(--hardware-ink) }
.fmsg small { display:block; color:var(--hardware-muted); margin-bottom:2px }
.fpanel-foot { display:flex; justify-content:space-between; padding:var(--s2) var(--s4); border-top:1px solid var(--hardware-edge); font-size:11px; color:var(--hardware-muted) }
.fcap { display:inline-flex; align-items:center; gap:var(--s3); border-radius:var(--r-pill); padding:6px 16px 6px 6px; min-height:48px }
.fcap .talk { border-radius:var(--r-pill); padding:0 var(--s3); min-height:36px }
.fcap .cap-status { min-width:0; font-size:var(--text-label); color:var(--hardware-ink) }

/* ═══ Round 4 (desktop core): additive ═══════════════════════════════════════
   Scrollbars: thin, rounded, token-coloured, both themes. Chromium/Safari use the pseudo-elements; Firefox the standard properties.
   (Chromium 121+ honours scrollbar-color and then ignores ::-webkit-scrollbar, so the standard properties are gated to Firefox only.) */
::-webkit-scrollbar { width:10px; height:10px; background:transparent }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background:transparent }
::-webkit-scrollbar-thumb { background-color:var(--line-strong); border-radius:var(--r-pill); border:3px solid transparent; background-clip:content-box; min-height:36px; min-width:36px }
::-webkit-scrollbar-thumb:hover { background-color:var(--ink-faint) }
::-webkit-scrollbar-thumb:active { background-color:var(--ink-muted) }
@supports (-moz-appearance:none) { * { scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent } *:hover { scrollbar-color:var(--ink-faint) transparent } }
.hardware ::-webkit-scrollbar-thumb { background-color:var(--hardware-edge) }