/* =====================================================================
   Trailhead5 2.1 — "High-Vis Basecamp + Interface Refinement"
   One coherent design system for a live stream-operations console.
   - Charcoal-olive ground, hi-vis lime action color, sage neutrals.
   - Solid surfaces + 1px lines; blur reserved for sticky chrome.
   - Pill controls, generously rounded cards, photo-forward heroes.
   - Command tiles are solid color blocks — field equipment, not glass.
   - Mono telemetry labels give the console its broadcast voice.
   The Field Producer visual foundation is preserved while live workflows, settings, and BELABOX monitoring are refined.
   ===================================================================== */

:root {
  --text-scale: 1;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --bg: #121411;
  --surface-0: #171a16;
  --surface-1: #1c1f1a;
  --surface-2: #232722;
  --surface-3: #2c312b;
  --surface-4: #373d36;
  --text: #f2f4ec;
  --muted: #a3ab99;
  --faint: #737b6c;
  --line: rgba(242,246,232,.09);
  --line-strong: rgba(242,246,232,.18);

  --accent: #d7f24b;            /* hi-vis lime: primary action */
  --accent-rgb: 215,242,75;
  --on-accent: #171b06;
  --signal: #4ce09a;            /* live, healthy, connected */
  --signal-rgb: 76,224,154;
  --emerald: #4ce09a;
  --cyan: #6fd6ff;              /* info, comms */
  --blue: #6fd6ff;
  --violet: #cabdff;            /* team, collaboration */
  --purple: #cabdff;
  --amber: #ffc46b;             /* running, countdown */
  --coral: #ff8a70;             /* moderation attention */
  --danger: #ff5d6e;
  --danger-bg: rgba(255,93,110,.11);

  --shadow: 0 26px 64px rgba(0,0,0,.44);
  --shadow-soft: 0 10px 26px rgba(0,0,0,.2);
  --radius-xs: 10px;
  --radius-s: 14px;
  --radius-m: 18px;
  --radius-l: 22px;
  --radius-xl: 28px;
  --pill: 999px;
  --action-radius: 14px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-premium: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.18,.89,.32,1.18);
  --motion-fast: 140ms;
  --motion-base: 260ms;
  --motion-slow: 520ms;

  --hero-image: url("assets/trailhead5-basecamp.svg");
  --topographic: url("assets/topographic.svg");
  --page-gutter: clamp(18px, 3vw, 44px);
  --section-gap: clamp(18px, 2.2vw, 28px);
  --cr-left: 42%;
  --cr-preview: 56%;
  color-scheme: dark;
}

/* Themes — the accent is also set at runtime per workspace, so themes
   differentiate mainly through ground, signal color, and scenery. */
body[data-theme="summit"] {
  --bg:#101413; --surface-0:#151a18; --surface-1:#1a201d; --surface-2:#212824;
  --surface-3:#2a322d; --surface-4:#353f38;
  --accent:#4ce09a; --accent-rgb:76,224,154; --on-accent:#072014;
  --signal:#d7f24b; --signal-rgb:215,242,75;
  --hero-image: url("assets/trailhead5-summit.svg");
}
body[data-theme="aurora"] {
  --bg:#0f131a; --surface-0:#141922; --surface-1:#191f2a; --surface-2:#202734;
  --surface-3:#293141; --surface-4:#343e51;
  --accent:#6fd6ff; --accent-rgb:111,214,255; --on-accent:#062029;
  --signal:#7ce9b6; --signal-rgb:124,233,182;
  --hero-image: url("assets/trailhead5-aurora.svg");
}
body[data-theme="studio"] {
  --bg:#131313; --surface-0:#181818; --surface-1:#1d1d1c; --surface-2:#242423;
  --surface-3:#2d2d2c; --surface-4:#383837;
  --accent:#ffc46b; --accent-rgb:255,196,107; --on-accent:#231604;
  --signal:#c9f052; --signal-rgb:201,240,82;
  --hero-image: url("assets/trailhead5-basecamp.svg");
}
body[data-theme="midnight"] {
  --bg:#121017; --surface-0:#17141d; --surface-1:#1c1924; --surface-2:#24202e;
  --surface-3:#2e293b; --surface-4:#3a344a;
  --accent:#cabdff; --accent-rgb:202,189,255; --on-accent:#171030;
  --signal:#6ee8c6; --signal-rgb:110,232,198;
  --hero-image: url("assets/trailhead5-aurora.svg");
}
body[data-theme="trail-light"] {
  --bg:#e9ebe2; --surface-0:#ffffff; --surface-1:#f8f9f3; --surface-2:#eef0e7;
  --surface-3:#e2e5d9; --surface-4:#d3d7c9;
  --text:#1a1f16; --muted:#616a58; --faint:#868e7c;
  --line:rgba(26,32,20,.11); --line-strong:rgba(26,32,20,.22);
  --accent:#5c7a14; --accent-rgb:92,122,20; --on-accent:#ffffff;
  --signal:#2c9e63; --signal-rgb:44,158,99;
  --emerald:#1c8f57; --danger:#cf3549; --danger-bg:rgba(207,53,73,.09);
  --shadow:0 22px 56px rgba(35,44,28,.16); --shadow-soft:0 8px 22px rgba(35,44,28,.09);
  --hero-image: url("assets/trailhead5-daybreak.svg");
  color-scheme: light;
}

/* Scenic treatment */
body[data-scenic="minimal"] { --hero-image: none; --topographic: none; }
body[data-scenic="topographic"] { --hero-image: none; }

/* ---------------------------------------------------------------------
   Reset & foundations
   --------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 460;
  line-height: 1.5;
  font-size: calc(14px * var(--text-scale));
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; border: 0; background: none; padding: 0; }
button, a, select, input[type="checkbox"], input[type="color"] { touch-action: manipulation; }
a { color: var(--accent); }
body[data-theme="trail-light"] a { color: #4b6410; }
[hidden] { display: none !important; }
::selection { background: rgba(var(--accent-rgb), .32); }

h1, h2, h3, h4 { font-weight: 760; font-stretch: 110%; letter-spacing: -.018em; line-height: 1.12; }
:is(h1,h2,h3,.tile-title,.side-brand strong,.welcome-brand strong) { text-wrap: balance; }

.ms {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: calc(20px * var(--text-scale));
  line-height: 1;
  display: inline-block;
  max-width: 1.35em;
  overflow: hidden;
  flex: 0 0 auto;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 460, "GRAD" 0, "opsz" 24;
}

button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
button:disabled { opacity: .38; cursor: not-allowed !important; }

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;left:16px;top:12px;z-index:1000;padding:12px 18px;border-radius:var(--pill);background:var(--accent);color:var(--on-accent);font-weight:720;text-decoration:none;transform:translateY(-150%);transition:transform .16s var(--ease)}
.skip-link:focus{transform:translateY(0)}

/* Session restore: while we re-check auth after a refresh, keep the
   welcome screen hidden and show a quiet brand veil instead of a
   signed-out flash. The <head> script adds .restoring only when this
   browser was signed in last time; boot() removes it either way. */
html.restoring .welcome-screen { visibility: hidden; }
html.restoring body::after {
  content: "5";
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  background: var(--bg);
  color: var(--accent);
  font-family: var(--font); font-size: 44px; font-weight: 820; font-stretch: 116%;
  animation: restore-pulse 1.1s ease-in-out infinite;
}
@keyframes restore-pulse { 50% { opacity: .45; } }

/* ---------------------------------------------------------------------
   Shared controls — pills for actions, squircles for icons
   --------------------------------------------------------------------- */
.primary-btn, .ghost-btn, .soft-btn, .danger-btn, .text-button, .icon-button, .primary-icon, .link-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--pill);
  cursor: pointer;
  font-weight: 640;
  font-size: calc(13px * var(--text-scale));
  line-height: 1;
  text-decoration: none;
  transition: transform .13s var(--ease), background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.primary-btn { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.primary-btn:hover { box-shadow: 0 8px 24px rgba(var(--accent-rgb), .28); filter: brightness(1.03); }
.ghost-btn { border: 1px solid var(--line-strong); background: transparent; color: var(--text); }
.ghost-btn:hover { background: var(--surface-2); }
.soft-btn { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.soft-btn:hover { background: var(--surface-3); border-color: var(--line-strong); }
.danger-btn { border: 1px solid rgba(255,93,110,.32); background: var(--danger-bg); color: #ff97a3; }
body[data-theme="trail-light"] .danger-btn { color: #ab2436; }
.danger-btn:hover { border-color: rgba(255,93,110,.5); }
.text-button { min-height: 34px; padding: 6px 10px; color: var(--accent); font-weight: 680; }
body[data-theme="trail-light"] .text-button { color: #4b6410; }
.text-button:hover { background: rgba(var(--accent-rgb), .1); }
.text-link { color: var(--muted); font-size: calc(11.5px * var(--text-scale)); font-weight: 620; text-decoration: none; }
.text-link:hover { color: var(--text); }
.icon-button, .primary-icon { width: 44px; height: 44px; padding: 0; flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-1); color: var(--text); }
.icon-button:hover { background: var(--surface-3); }
.primary-icon { border-color: transparent; background: var(--accent); color: var(--on-accent); }
.primary-btn:active, .ghost-btn:active, .soft-btn:active, .danger-btn:active, .icon-button:active, .primary-icon:active { transform: scale(.97); }
.big { min-height: 54px; padding-inline: 24px; font-size: calc(14px * var(--text-scale)); }
.wide { width: 100%; }

/* Mono telemetry labels — the console voice */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: calc(10px * var(--text-scale));
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 16px; height: 6px; border-radius: 3px; background: var(--accent); flex: 0 0 auto; }
.dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--faint); flex: 0 0 auto; }
.dot.live { background: var(--signal); box-shadow: 0 0 10px rgba(var(--signal-rgb), .6); }
.dot.offline { background: var(--faint); }
.dot.warning { background: var(--amber); }

.state-pill {
  min-height: 27px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  border: 1px solid var(--line-strong); border-radius: var(--pill); background: var(--surface-0);
  color: var(--muted);
  font-family: var(--mono); font-size: calc(9.5px * var(--text-scale)); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.state-pill.live { border-color: transparent; background: var(--signal); color: #08281a; font-weight: 600; }
.state-pill.alert { border-color: rgba(255,93,110,.35); background: var(--danger-bg); color: #ff97a3; }
body[data-theme="trail-light"] .state-pill.alert { color: #ab2436; }

/* Fields */
.field { display: grid; gap: 7px; min-width: 0; }
.field > span, .field-heading {
  color: var(--muted); font-family: var(--mono);
  font-size: calc(10px * var(--text-scale)); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
}
.field small { color: var(--faint); font-family: var(--font); font-weight: 500; letter-spacing: 0; text-transform: none; }
.field input, .field select, textarea, .search-field input, .quick-send input, .chat-composer input, .copy-field input, .setting-row select, .compact-input {
  width: 100%; min-height: 46px; padding: 10px 15px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s); outline: none;
  background: var(--surface-0); color: var(--text);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.field input:focus, .field select:focus, textarea:focus, .search-field input:focus, .quick-send input:focus, .chat-composer input:focus, .compact-input:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }
input[type="color"] { width: 52px; height: 36px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface-2); }
.range-control { width: min(170px, 42vw); accent-color: var(--accent); }
.compact-input { max-width: min(360px, 48vw); }
.compact-select { display: grid; gap: 6px; }
.compact-select > span { color: var(--muted); font-family: var(--mono); font-size: calc(9px * var(--text-scale)); letter-spacing: .13em; text-transform: uppercase; }
.compact-select select { min-height: 44px; padding: 8px 32px 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-1); color: var(--text); font-weight: 620; }

/* Brand — a trail marker post */
.brand-mark {
  position: relative; width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  color: var(--accent); overflow: hidden;
}
.brand-mark::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 6px; height: 4px; border-radius: 2px; background: var(--accent); }
.brand-mark .ms { display: none; }
.brand-mark.large { width: 52px; height: 52px; border-radius: var(--radius-m); }
.brand-mark.large::after { left: 10px; right: 10px; bottom: 8px; height: 5px; }
.brand-five { position: relative; z-index: 2; margin-top: -5px; font-size: calc(21px * var(--text-scale)); font-weight: 820; font-stretch: 116%; line-height: 1; }
.brand-mark.large .brand-five { font-size: calc(26px * var(--text-scale)); }
.mini-logo { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-xs); background: var(--accent); color: var(--on-accent); font-weight: 820; }

/* ---------------------------------------------------------------------
   Welcome — dark scenery, big type, one lime action
   --------------------------------------------------------------------- */
.welcome-screen {
  position: fixed; inset: 0; z-index: 200; overflow-y: auto;
  background-color: #121411;
  background-image:
    linear-gradient(90deg, rgba(13,15,12,.95) 0%, rgba(13,15,12,.85) 42%, rgba(13,15,12,.42) 78%, rgba(13,15,12,.22) 100%),
    var(--hero-image);
  background-size: cover; background-position: center;
  color: #f2f4ec;
}
body[data-scenic="minimal"] .welcome-screen { background-image: linear-gradient(180deg, #171a16, #101210); }
body[data-scenic="topographic"] .welcome-screen { background-image: linear-gradient(140deg, rgba(var(--accent-rgb), .06), transparent 46%), var(--topographic), linear-gradient(180deg, #171a16, #101210); background-size: auto, 560px, auto; }
.welcome-screen::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: var(--topographic); background-size: 560px; opacity: .5; mask-image: linear-gradient(105deg, #000 0 32%, transparent 60%); }
.welcome-glow { position: fixed; pointer-events: none; border-radius: 50%; }
.glow-a { width: 46vw; height: 46vw; left: -20vw; bottom: -24vw; background: radial-gradient(circle, rgba(var(--accent-rgb), .1), transparent 66%); }
.glow-b { display: none; }
.welcome-shell { min-height: 100dvh; position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; padding: max(26px, env(safe-area-inset-top)) clamp(20px, 5vw, 72px) max(22px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.welcome-brand { display: flex; align-items: center; gap: 13px; }
.welcome-brand > div { display: grid; gap: 2px; }
.welcome-brand strong { font-size: calc(17px * var(--text-scale)); font-stretch: 108%; }
.welcome-brand small { color: #9aa392; font-family: var(--mono); font-size: calc(9.5px * var(--text-scale)); letter-spacing: .18em; text-transform: uppercase; }
.welcome-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(400px, .98fr); gap: clamp(40px, 7vw, 110px); align-items: center; padding: clamp(50px, 8vh, 104px) 0; }
.welcome-copy { max-width: 680px; }
.welcome-copy .eyebrow { color: #bcc5b2; }
.welcome-copy h1 {
  margin: 20px 0 24px;
  font-size: clamp(46px, 6.2vw, 92px);
  font-weight: 790; font-stretch: 116%;
  line-height: .95; letter-spacing: -.028em;
}
.welcome-copy h1 em { font-style: normal; color: var(--accent); }
.welcome-copy > p { max-width: 560px; margin: 0; color: #bec7b5; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.66; }
.welcome-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 32px; }
.welcome-actions .ghost-btn { border-color: rgba(255,255,255,.3); }
.twitch-glyph { font-size: calc(18px * var(--text-scale)); transform: rotate(90deg); }
.welcome-fine { margin-top: 18px !important; max-width: 520px !important; color: #8b9483 !important; font-size: calc(12px * var(--text-scale)) !important; line-height: 1.6 !important; }
.welcome-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); color: #8b9483; font-family: var(--mono); font-size: calc(9.5px * var(--text-scale)); letter-spacing: .1em; text-transform: uppercase; }

/* The preview is a flat glass card over the scenery — like a camp sign */
.welcome-preview { display: grid; place-items: center; }
.preview-window {
  width: min(620px, 100%); aspect-ratio: 1.24; display: grid; grid-template-columns: 58px 1fr;
  padding: 10px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-xl);
  background: rgba(20,24,18,.62);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 34px 90px rgba(0,0,0,.5);
}
.preview-rail { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 12px 0; border-right: 1px solid rgba(255,255,255,.09); }
.preview-rail i { width: 18px; height: 18px; border-radius: 6px; background: #333a30; }
.preview-rail i:nth-child(2) { background: var(--accent); }
.preview-dashboard { padding: 16px; display: grid; grid-template-rows: auto auto auto 1fr; gap: 12px; }
.preview-top { display: flex; gap: 10px; align-items: center; }
.preview-top b { margin-right: auto; font-size: clamp(12px, 1.4vw, 16px); color: #f2f4ec; }
.preview-top span { width: 26px; height: 26px; border-radius: 9px; background: #2d332a; }
.preview-hero { min-height: 130px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--radius-m); background-image: linear-gradient(100deg, rgba(13,16,12,.78), rgba(13,16,12,.1)), var(--hero-image); background-size: cover; background-position: center; }
.preview-hero small { color: var(--accent); font-family: var(--mono); font-size: calc(8.5px * var(--text-scale)); letter-spacing: .18em; }
.preview-hero strong { margin-top: 6px; font-size: clamp(15px, 1.9vw, 24px); font-stretch: 112%; color: #f7f9f2; max-width: 300px; line-height: 1.05; }
.preview-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.preview-cards span { height: 78px; border: 0; border-radius: var(--radius-s); background: #232821; }
.preview-cards span:nth-child(2) { background: var(--accent); }
.preview-cards span:nth-child(3) { background: #3b4237; }
.preview-chart { min-height: 96px; display: flex; align-items: flex-end; gap: 7px; padding: 16px; border: 0; border-radius: var(--radius-s); background: #1d211c; }
.preview-chart i { flex: 1; height: 30%; border-radius: 4px 4px 0 0; background: #343b31; }
.preview-chart i:nth-child(2){height:48%}.preview-chart i:nth-child(3){height:38%}.preview-chart i:nth-child(4){height:68%}
.preview-chart i:nth-child(5){height:55%;background:var(--accent)}
.preview-chart i:nth-child(6){height:78%}.preview-chart i:nth-child(7){height:43%}

/* ---------------------------------------------------------------------
   App shell
   --------------------------------------------------------------------- */
.app-shell { min-height: 100dvh; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 50; width: 244px;
  display: flex; flex-direction: column; padding: 22px 16px max(18px, env(safe-area-inset-bottom));
  border-right: 1px solid var(--line);
  background: var(--surface-0);
}
.side-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 26px; }
.side-brand > div { display: grid; gap: 2px; }
.side-brand strong { font-size: calc(15px * var(--text-scale)); font-stretch: 108%; }
.side-brand small { color: var(--faint); font-family: var(--mono); font-size: calc(8.5px * var(--text-scale)); letter-spacing: .16em; text-transform: uppercase; }
.side-nav { display: grid; gap: 5px; }
.side-bottom { margin-top: auto; display: grid; gap: 6px; }
.nav-button, .side-help {
  position: relative; min-height: 48px; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px;
  border-radius: var(--pill); background: transparent; color: var(--muted); cursor: pointer; text-align: left;
  font-size: calc(13px * var(--text-scale)); font-weight: 620;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav-button .ms, .side-help .ms { font-size: calc(20px * var(--text-scale)); color: var(--faint); transition: color .15s var(--ease); }
.nav-button:hover, .side-help:hover { background: var(--surface-2); color: var(--text); }
.nav-button:hover .ms { color: var(--muted); }
.nav-button.active { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.nav-button.active .ms { color: var(--on-accent); }
.nav-button.active::before { content: none; }
.side-help { border: 1px solid var(--line); }

.app-main { grid-column: 2; min-width: 0; min-height: 100dvh; }
.app-topbar {
  position: sticky; top: 0; z-index: 40; min-height: 78px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: max(14px, env(safe-area-inset-top)) var(--page-gutter) 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(18px) saturate(120%);
}
.topbar-copy { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-copy small { display: block; margin-bottom: 3px; color: var(--faint); font-family: var(--mono); font-size: calc(9px * var(--text-scale)); letter-spacing: .18em; }
.topbar-copy h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(21px * var(--text-scale)); font-stretch: 110%; letter-spacing: -.018em; }
.mobile-logo { display: none; width: 40px; height: 40px; place-items: center; border-radius: var(--radius-s); background: var(--accent); color: var(--on-accent); font-size: calc(11px * var(--text-scale)); font-weight: 820; font-stretch: 112%; letter-spacing: 0; white-space: nowrap; overflow: hidden; }
.topbar-tools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.space-picker-wrap { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface-1); }
.space-picker-wrap .ms { color: var(--accent); font-size: calc(17px * var(--text-scale)); }
.space-picker-wrap { min-width: 0; overflow: hidden; }
.space-picker-wrap select { max-width: 220px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; outline: 0; background: transparent; color: var(--text); font-size: calc(12px * var(--text-scale)); font-weight: 620; }
.space-picker-wrap.single select { appearance: none; -webkit-appearance: none; padding-right: 2px; pointer-events: none; }
.account-chip { min-height: 44px; max-width: 200px; display: flex; align-items: center; gap: 9px; padding: 4px 12px 4px 5px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface-1); cursor: pointer; font-size: calc(12px * var(--text-scale)); font-weight: 620; }
.account-chip > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caret { color: var(--muted); font-size: calc(16px * var(--text-scale)); }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-3); color: var(--accent); font-size: calc(11px * var(--text-scale)); font-weight: 780; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.small { width: 30px; height: 30px; margin-left: -8px; }
.avatar.small:first-child { margin-left: 0; }

/* Status strip — a real telemetry line */
.status-strip {
  min-height: 42px; display: flex; align-items: center; gap: 20px;
  padding: 7px var(--page-gutter);
  border-bottom: 1px solid var(--line);
  background: var(--surface-0);
  font-family: var(--mono);
}
.status-item { display: inline-flex; align-items: center; gap: 8px; color: var(--faint); font-size: calc(10px * var(--text-scale)); letter-spacing: .06em; text-transform: uppercase; }
.status-item .ms { font-size: calc(14px * var(--text-scale)); color: var(--faint); }
.status-item b { color: var(--text); font-weight: 600; }
.status-spacer { flex: 1; }
.status-action { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: transparent; color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: calc(10px * var(--text-scale)); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; border-radius: var(--pill); }
.status-action:hover { color: var(--text); background: var(--surface-2); }
.status-action .ms { font-size: calc(14px * var(--text-scale)); }
.status-action.on-air-toggle { min-height: 30px; padding: 5px 13px; border: 1px solid var(--line-strong); background: var(--surface-1); }
.status-action.on-air-toggle .dot { background: var(--faint); }
body.on-air .status-action.on-air-toggle { border-color: rgba(255,93,110,.45); background: var(--danger-bg); color: #ff97a3; }
body.on-air .status-action.on-air-toggle .dot { background: var(--danger); box-shadow: 0 0 12px rgba(255,93,110,.7); }

.view-stack { width: 100%; max-width: 1600px; margin: 0 auto; padding: 30px var(--page-gutter) 76px; }
.app-view { display: none; animation: view-in .22s var(--ease); }
.app-view.active { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } }
.mobile-nav { display: none; }

/* ---------------------------------------------------------------------
   Home
   --------------------------------------------------------------------- */
.hero-card {
  position: relative; min-height: 330px; overflow: hidden;
  display: grid; grid-template-columns: 1fr; align-items: end;
  margin-bottom: var(--section-gap);
  padding: clamp(28px, 3.6vw, 52px);
  border: 1px solid var(--line-strong); border-radius: var(--radius-xl);
  background-color: var(--surface-1);
  background-image: linear-gradient(94deg, rgba(13,16,12,.9) 0%, rgba(13,16,12,.66) 52%, rgba(13,16,12,.12) 100%), var(--custom-hero, var(--hero-image));
  background-size: cover; background-position: center 42%;
  box-shadow: var(--shadow-soft);
  color: #f2f4ec;
}
body[data-scenic="minimal"] .hero-card { background-image: none; color: var(--text); }
body[data-scenic="topographic"] .hero-card { background-image: linear-gradient(130deg, rgba(var(--accent-rgb), .08), transparent 52%), var(--topographic); background-size: auto, 560px; color: var(--text); }
.hero-copy { position: relative; z-index: 2; max-width: 760px; }
.hero-copy .eyebrow { color: #c9d2bf; }
body[data-scenic="minimal"] .hero-copy .eyebrow, body[data-scenic="topographic"] .hero-copy .eyebrow { color: var(--muted); }
.hero-copy h2 { margin: 16px 0 14px; font-size: clamp(36px, 4.4vw, 62px); font-weight: 780; font-stretch: 114%; line-height: .97; letter-spacing: -.026em; }
.hero-copy p { max-width: 620px; margin: 0; color: #c6cfbc; font-size: clamp(14px, 1.25vw, 17px); line-height: 1.62; }
body[data-scenic="minimal"] .hero-copy p, body[data-scenic="topographic"] .hero-copy p { color: var(--muted); }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.hero-actions .ghost-btn { border-color: rgba(255,255,255,.32); }
body[data-scenic="minimal"] .hero-actions .ghost-btn, body[data-scenic="topographic"] .hero-actions .ghost-btn { border-color: var(--line-strong); }
.creator-signature { display: inline-flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; margin-top: 20px; padding: 8px 16px 8px 8px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--pill); background: rgba(15,18,13,.52); backdrop-filter: blur(10px); }
body[data-scenic="minimal"] .creator-signature, body[data-scenic="topographic"] .creator-signature { border-color: var(--line-strong); background: var(--surface-0); }
.creator-signature .signature-avatar { width: 34px; height: 34px; }
.creator-signature span:last-child { display: grid; min-width: 0; }
.creator-signature small { color: #a5af9b; font-family: var(--mono); font-size: calc(8.5px * var(--text-scale)); letter-spacing: .14em; }
body[data-scenic="minimal"] .creator-signature small, body[data-scenic="topographic"] .creator-signature small { color: var(--faint); }
.creator-signature b { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12px * var(--text-scale)); }
.hero-orbit { display: none; }

.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dash-card, .panel-card {
  min-width: 0; padding: 22px;
  border: 1px solid var(--line); border-radius: var(--radius-l);
  background: var(--surface-1);
}
.dash-card.span-2, .panel-card.span-2 { grid-column: span 2; }
.show-progress-track { height: 6px; margin-top: 6px; border-radius: var(--pill); background: var(--surface-3); overflow: hidden; }
.show-progress-fill { height: 100%; border-radius: var(--pill); background: var(--accent); transition: width .3s var(--ease); }
.show-progress-fill.hype { background: linear-gradient(90deg, var(--amber, #f1c40f), var(--accent)); }
.show-progress-fill.goal { background: var(--accent); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-head > div { min-width: 0; }
.card-head small { display: block; margin-bottom: 5px; color: var(--faint); font-family: var(--mono); font-size: calc(9px * var(--text-scale)); font-weight: 500; letter-spacing: .16em; }
.card-head h3 { margin: 0; font-size: calc(17px * var(--text-scale)); font-stretch: 106%; letter-spacing: -.014em; }
.card-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius-s); background: rgba(var(--accent-rgb), .12); color: var(--accent); }
body[data-theme="trail-light"] .card-icon { color: #4b6410; }
.accent-card { border-color: rgba(var(--accent-rgb), .3); background: linear-gradient(160deg, rgba(var(--accent-rgb), .1), var(--surface-1) 62%); }

.stream-overview { display: grid; grid-template-columns: minmax(130px, .72fr) minmax(0, 1.28fr); gap: 15px; align-items: stretch; }
.stream-thumbnail { min-height: 130px; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-m); background-image: linear-gradient(rgba(13,16,12,.28), rgba(13,16,12,.52)), var(--hero-image); background-size: cover; background-position: center; color: #d3dbc9; }
body[data-scenic="minimal"] .stream-thumbnail { background-image: none; background-color: var(--surface-3); color: var(--faint); }
.stream-thumbnail img, .stream-thumbnail iframe { width: 100%; height: 100%; min-height: 130px; object-fit: cover; border: 0; }
.stream-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.stream-copy > strong { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: calc(17px * var(--text-scale)); font-weight: 700; font-stretch: 105%; line-height: 1.25; }
.stream-copy > span { margin-top: 7px; color: var(--muted); font-size: calc(12px * var(--text-scale)); }
.metric-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; color: var(--muted); font-family: var(--mono); font-size: calc(9.5px * var(--text-scale)); letter-spacing: .06em; text-transform: uppercase; }
.metric-row span { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface-0); }
.metric-row b { color: var(--text); font-size: calc(15px * var(--text-scale)); font-weight: 640; font-variant-numeric: tabular-nums; }
.card-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.quick-send { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.quick-send input { min-width: 0; border-radius: var(--pill); padding-inline: 17px; }
.mini-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mini-action { min-height: 34px; padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface-2); color: var(--muted); cursor: pointer; font-size: calc(11px * var(--text-scale)); font-weight: 620; }
.mini-action:hover { color: var(--text); border-color: var(--line-strong); }
.collab-stack { display: flex; margin: 2px 0 14px; padding-left: 8px; }
.accent-card > strong { font-size: calc(19px * var(--text-scale)); font-stretch: 108%; }
.accent-card > p { color: var(--muted); font-size: calc(12px * var(--text-scale)); line-height: 1.6; }
.activity-list { display: grid; }
.activity-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.activity-item:last-child { border-bottom: 0; }
.activity-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--accent); }
body[data-theme="trail-light"] .activity-icon { color: #4b6410; }
.activity-copy { min-width: 0; }
.activity-copy b, .activity-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-copy b { font-size: calc(12px * var(--text-scale)); font-weight: 640; }
.activity-copy small { margin-top: 2px; color: var(--muted); font-size: calc(10.5px * var(--text-scale)); }
.activity-time { color: var(--faint); font-family: var(--mono); font-size: calc(9px * var(--text-scale)); white-space: nowrap; }
.empty-inline { color: var(--muted); font-size: calc(12px * var(--text-scale)); line-height: 1.55; }
.health-mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.health-mini span { padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-0); }
.health-mini small, .health-mini b { display: block; }
.health-mini small { color: var(--faint); font-family: var(--mono); font-size: calc(8.5px * var(--text-scale)); letter-spacing: .12em; text-transform: uppercase; }
.health-mini b { margin-top: 5px; font-size: calc(14px * var(--text-scale)); font-weight: 640; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------------
   Section headers
   --------------------------------------------------------------------- */
.section-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-toolbar h2 { margin: 12px 0 8px; font-size: clamp(28px, 3.4vw, 46px); font-weight: 780; font-stretch: 112%; line-height: 1.02; letter-spacing: -.024em; }
.section-toolbar p { max-width: 780px; margin: 0; color: var(--muted); font-size: calc(13px * var(--text-scale)); line-height: 1.6; }
.toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.section-intro { margin: -4px 0 14px; color: var(--muted); font-size: calc(12.5px * var(--text-scale)); line-height: 1.55; }

.profile-row { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.profile-tabs { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab, .profile-add { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface-1); color: var(--muted); cursor: pointer; font-size: calc(12px * var(--text-scale)); font-weight: 640; }
.profile-tab.active { border-color: transparent; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.profile-tab .ms, .profile-add .ms { font-size: calc(16px * var(--text-scale)); }
.deck-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; color: var(--faint); font-family: var(--mono); font-size: calc(9.5px * var(--text-scale)); letter-spacing: .08em; text-transform: uppercase; }
.deck-meta > span:last-child { flex: 0 0 auto; white-space: nowrap; }

/* ---------------------------------------------------------------------
   Command deck — solid color-block tiles, like field equipment
   --------------------------------------------------------------------- */
.command-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.command-tile {
  --tile-bg: var(--surface-2);
  --tile-fg: var(--text);
  --tile-accent: var(--accent);
  position: relative; grid-column: span 6; min-height: 150px; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  padding: 16px 17px 17px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--tile-bg);
  color: var(--tile-fg); cursor: pointer; user-select: none; text-align: left;
  transition: transform .14s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease), opacity .16s var(--ease);
}
.command-tile:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.28); }
.command-tile:active { transform: translateY(0) scale(.988); }
.command-tile.size-quarter { grid-column: span 3; min-height: 144px; }
.command-tile.size-third { grid-column: span 4; }
.command-tile.size-half { grid-column: span 6; }
.command-tile.size-full { grid-column: span 12; min-height: 128px; }

/* Solid styles: the action color IS the tile */
.command-tile.style-accent, .command-tile[data-style="accent"] { --tile-bg: var(--accent); --tile-fg: var(--on-accent); --tile-accent: var(--on-accent); border-color: transparent; }
.command-tile.style-signal, .command-tile[data-style="signal"] { --tile-bg: var(--emerald); --tile-fg: #08281a; --tile-accent: #08281a; border-color: transparent; }
.command-tile.style-purple, .command-tile[data-style="purple"] { --tile-bg: var(--violet); --tile-fg: #1c1433; --tile-accent: #1c1433; border-color: transparent; }
.command-tile.style-gold, .command-tile[data-style="gold"] { --tile-bg: var(--amber); --tile-fg: #2a1a04; --tile-accent: #2a1a04; border-color: transparent; }
.command-tile.style-surface, .command-tile[data-style="surface"] { --tile-bg: var(--surface-2); --tile-fg: var(--text); --tile-accent: var(--cyan); }
.command-tile.style-danger, .command-tile[data-style="danger"] { --tile-bg: color-mix(in srgb, var(--danger) 9%, var(--surface-1)); --tile-fg: #ffb1ab; --tile-accent: var(--coral); border-color: rgba(255,93,110,.32); }
body[data-theme="trail-light"] .command-tile.style-danger, body[data-theme="trail-light"] .command-tile[data-style="danger"] { --tile-fg: #98212f; }

.tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 40px; }
.tile-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--radius-s); background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
.tile-icon .ms { font-size: calc(21px * var(--text-scale)); }
.tile-menu { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; opacity: 0; pointer-events: none; }
.tile-controls { display: flex; align-items: center; gap: 5px; margin: -2px -3px 0 0; }
.tile-control { width: 35px; height: 35px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; cursor: pointer; opacity: .85; transition: opacity .14s var(--ease), transform .14s var(--ease), background .14s var(--ease); }
.tile-control:hover, .tile-control:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 22%, transparent); }
.tile-control:active { transform: scale(.94); }
.tile-control .ms { font-size: calc(17px * var(--text-scale)); }
.tile-content { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-width: 0; margin-top: auto; min-height: 74px; }
.tile-type { order: 3; display: inline-flex; align-items: center; margin: 10px 0 0; padding: 4px 10px; border: 0; border-radius: var(--pill); background: color-mix(in srgb, currentColor 12%, transparent); color: color-mix(in srgb, currentColor 84%, transparent); font-family: var(--mono); font-size: calc(8.5px * var(--text-scale)); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.tile-title { order: 1; display: block; max-width: 100%; margin: 0; font-size: clamp(calc(17px * var(--text-scale)), 1.8vw, calc(21px * var(--text-scale))); font-weight: 740; font-stretch: 108%; line-height: 1.06; letter-spacing: -.016em; overflow-wrap: anywhere; text-wrap: balance; }
.tile-sub { order: 2; display: block; max-width: 100%; margin-top: 6px; color: color-mix(in srgb, currentColor 68%, transparent); font-size: calc(11.5px * var(--text-scale)); font-weight: 500; line-height: 1.42; white-space: normal; overflow-wrap: anywhere; }
.tile-status { position: absolute; right: 15px; bottom: 14px; min-width: 0; min-height: 0; display: grid; place-items: center; padding: 4px 10px; border-radius: var(--pill); background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; font-family: var(--mono); font-size: calc(9px * var(--text-scale)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: 0; }
.command-tile.running .tile-status, .command-tile.success .tile-status, .command-tile.failed .tile-status, .command-tile.cooldown .tile-status { opacity: 1; }
.command-tile.running { box-shadow: 0 0 0 2px var(--amber), 0 16px 32px rgba(0,0,0,.24); }
.command-tile.success { box-shadow: 0 0 0 2px var(--emerald), 0 16px 32px rgba(0,0,0,.24); }
.command-tile.failed { box-shadow: 0 0 0 2px var(--danger), 0 16px 32px rgba(0,0,0,.24); }
.command-tile.cooldown { filter: saturate(.4) brightness(.8); cursor: not-allowed; }
.command-tile.dragging { opacity: .5; transform: scale(.985); box-shadow: 0 26px 60px rgba(0,0,0,.4); }
.hold-progress { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, currentColor 18%, transparent) var(--hold, 0%), transparent var(--hold, 0%)); opacity: 0; }
.command-tile.holding .hold-progress { opacity: 1; }
body.arrange-mode .command-tile { outline: 2px dashed color-mix(in srgb, currentColor 40%, transparent); outline-offset: -6px; cursor: grab; touch-action: none; }
body.arrange-mode .tile-menu { opacity: 1; pointer-events: auto; }
body.arrange-mode .tile-control { opacity: 1; }
body.arrange-mode .command-tile:hover { transform: none; }
body.drag-active { cursor: grabbing; user-select: none; }
.arrange-exit-float { position: fixed; white-space: nowrap; left: 50%; bottom: max(22px, calc(14px + env(safe-area-inset-bottom))); z-index: 90; transform: translateX(-50%); min-height: 52px; padding-inline: 26px; box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.2); animation: float-in .2s var(--ease); }
.arrange-exit-float:active { transform: translateX(-50%) scale(.97); }
@keyframes float-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }
body[data-edit-buttons="arrange"]:not(.arrange-mode) .tile-edit { display: none; }
body[data-drag-handles="hidden"] .tile-drag { display: none; }
body[data-density="compact"] .command-grid { gap: 8px; }
body[data-density="compact"] .command-tile { min-height: 118px; gap: 10px; padding: 12px 13px; }
body[data-density="compact"] .tile-icon { width: 34px; height: 34px; }
body[data-density="compact"] .tile-content { min-height: 58px; }
.command-tile.size-full .tile-content { max-width: min(760px, 80%); }

.empty-state { min-height: 280px; display: grid; place-items: center; text-align: center; align-content: center; padding: 30px; border: 1px dashed var(--line-strong); border-radius: var(--radius-l); background: var(--surface-1); }
.empty-state.compact { min-height: 250px; border: 0; background: transparent; }
.empty-state > .ms { font-size: calc(36px * var(--text-scale)); color: var(--accent); }
body[data-theme="trail-light"] .empty-state > .ms { color: #4b6410; }
.empty-state h3 { margin: 12px 0 4px; }
.empty-state p { max-width: 420px; margin: 0 0 17px; color: var(--muted); font-size: calc(12px * var(--text-scale)); line-height: 1.6; }

/* ---------------------------------------------------------------------
   Moderation
   --------------------------------------------------------------------- */
.permission-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-1); }
.permission-banner > .ms { width: 36px; height: 36px; display: grid; place-items: center; max-width: none; border-radius: 50%; background: rgba(255,196,107,.14); color: var(--amber); }
.permission-banner > div { min-width: 0; flex: 1; }
.permission-banner strong, .permission-banner small { display: block; }
.permission-banner strong { font-size: calc(12.5px * var(--text-scale)); font-weight: 660; }
.permission-banner small { margin-top: 2px; color: var(--muted); font-size: calc(11px * var(--text-scale)); }
.permission-banner.good > .ms { background: rgba(var(--signal-rgb), .14); color: var(--emerald); }
.permission-banner.bad > .ms { background: var(--danger-bg); color: var(--danger); }

.moderation-layout { display: grid; grid-template-columns: minmax(420px, 1.18fr) minmax(340px, .82fr); gap: 16px; align-items: start; }
.chat-embed-card { position: sticky; top: 140px; }
.chat-embed { min-height: 620px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: #0e0e10; }
.chat-embed iframe { display: block; width: 100%; height: 620px; border: 0; border-radius: inherit; }
.embed-placeholder { min-height: 620px; display: grid; place-items: center; align-content: center; color: var(--muted); text-align: center; }
.embed-placeholder .ms { font-size: calc(40px * var(--text-scale)); color: var(--accent); }
.embed-placeholder p { max-width: 300px; font-size: calc(12px * var(--text-scale)); line-height: 1.6; }
.chat-composer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 10px; }
.chat-composer input { border-radius: var(--pill); padding-inline: 17px; }
.mod-tools { display: grid; gap: 16px; }
.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.action-grid button { min-height: 50px; }
.large-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.toggle-list { display: grid; }
.toggle-list label { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.toggle-list label:last-child { border-bottom: 0; }
.toggle-list label > span { display: grid; gap: 2px; }
.toggle-list b { font-size: calc(12px * var(--text-scale)); font-weight: 640; }
.toggle-list small { color: var(--muted); font-size: calc(10.5px * var(--text-scale)); }
.toggle-list .sub-setting { padding-left: 16px; border-left: 3px solid var(--line-strong); background: transparent; }
.toggle-list select { min-height: 36px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface-2); color: var(--text); font-size: calc(11px * var(--text-scale)); }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.inline-form select { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-0); color: var(--text); }
.chatter-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow-y: auto; }
.chatter-chip { padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface-2); font-family: var(--mono); font-size: calc(10px * var(--text-scale)); cursor: pointer; }
.chatter-chip:hover { border-color: var(--accent); color: var(--accent); }
body[data-theme="trail-light"] .chatter-chip:hover { color: #4b6410; }

/* ---------------------------------------------------------------------
   Raid center
   --------------------------------------------------------------------- */
.raid-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 16px; align-items: start; }
.search-field { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 5px 5px 5px 14px; border: 1px solid var(--line-strong); border-radius: var(--pill); background: var(--surface-0); }
.search-field .ms { color: var(--muted); }
.search-field input { border: 0; background: transparent; min-height: 40px; }
.search-field button { min-height: 40px; padding: 8px 17px; border-radius: var(--pill); background: var(--accent); color: var(--on-accent); cursor: pointer; font-size: calc(12px * var(--text-scale)); font-weight: 700; }
.raid-result { margin-top: 16px; }
.raid-channel { display: grid; grid-template-columns: 116px 1fr; gap: 15px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-0); }
.raid-avatar { width: 116px; aspect-ratio: 1; border-radius: var(--radius-s); overflow: hidden; background: var(--surface-3); }
.raid-avatar img { width: 100%; height: 100%; object-fit: cover; }
.raid-copy { min-width: 0; }
.raid-copy h3 { margin: 4px 0; font-size: calc(20px * var(--text-scale)); font-stretch: 108%; }
.raid-copy p { margin: 8px 0; color: var(--muted); font-size: calc(11.5px * var(--text-scale)); line-height: 1.55; }
.raid-stats { display: flex; gap: 14px; color: var(--muted); font-family: var(--mono); font-size: calc(9.5px * var(--text-scale)); letter-spacing: .06em; text-transform: uppercase; }
.raid-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.countdown-card { text-align: center; padding: 32px 26px; }
.countdown-card > small { color: var(--faint); font-family: var(--mono); font-size: calc(9px * var(--text-scale)); letter-spacing: .2em; }
.countdown-number { margin: 16px 0 4px; font-size: clamp(76px, 10vw, 128px); font-weight: 820; font-stretch: 118%; line-height: .9; letter-spacing: -.035em; color: var(--accent); font-variant-numeric: tabular-nums; }
body[data-theme="trail-light"] .countdown-number { color: #4b6410; }
.countdown-card h3 { margin: 14px 0 6px; }
.countdown-card p { color: var(--muted); font-size: calc(11.5px * var(--text-scale)); line-height: 1.6; }
.countdown-card .large-actions { justify-content: center; margin-top: 18px; }

/* ---------------------------------------------------------------------
   Team
   --------------------------------------------------------------------- */
.role-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 16px; }
.role-guide span { padding: 9px 15px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface-1); color: var(--muted); font-size: calc(11px * var(--text-scale)); }
.role-guide b { color: var(--text); font-weight: 680; }
.team-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 16px; align-items: start; }
.team-organized-grid .team-people-card { grid-column: 1 / -1; }
.team-role-card, .my-spaces-card { min-width: 0; }
.team-card-icon { color: var(--accent); font-size: 26px; }
.team-access-admin { margin-top: 24px; }
.caravan-segnav { display: flex; gap: 8px; margin: 2px 0 14px; }
.caravan-segnav button { display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface-1); color: var(--muted); font: inherit; font-size: calc(12.5px * var(--text-scale)); cursor: pointer; }
.caravan-segnav button.active { background: var(--accent); color: var(--on-accent, #08131f); border-color: transparent; font-weight: 600; }
.caravan-segnav .ms { font-size: 17px; }
.caravan-roster { display: grid; gap: 9px; }
.roster-head { display: flex; align-items: center; gap: 10px; }
.roster-states { display: flex; gap: 5px; margin-top: 9px; }
.roster-states button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-0); color: var(--muted); font: inherit; font-size: calc(11px * var(--text-scale)); cursor: pointer; min-width: 0; }
.roster-states button .ms { font-size: 17px; }
.roster-states button.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-0)); }
.roster-acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.roster-acts button { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: calc(11px * var(--text-scale)); cursor: pointer; }
.roster-acts button:hover { color: var(--text); border-color: var(--line-strong, var(--line)); }
.roster-acts .ms { font-size: 14px; }
.home-partner-list { display: flex; gap: 14px; flex-wrap: wrap; }
.home-partner { display: flex; align-items: center; gap: 7px; }
.home-partner small { color: var(--muted); }
@media (min-width: 900px) { .caravan-roster { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); } }
.roster-row { display: block; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-1); }
.roster-row.selected { border-color: var(--accent); }
.roster-id { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; padding: 2px; }
.roster-id small { display: block; color: var(--muted); }
.roster-quick { display: flex; gap: 4px; }
.roster-quick .icon-button.active { color: var(--accent); border-color: var(--accent); }
.roster-hint { margin-top: 12px; }
@media (max-width: 620px) { .roster-row { flex-wrap: wrap; } .roster-quick { order: 3; width: 100%; justify-content: flex-start; } }
.camp-cards { display: grid; gap: 8px; margin-top: 10px; }
.camp-card-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-1); }
.camp-card-row small { display: block; color: var(--muted); }
.camp-card-editor { display: grid; gap: 8px; padding: 11px; border: 1px dashed var(--line-strong, var(--line)); border-radius: var(--radius-s); }
.camp-card-editor .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.camp-card-editor input, .camp-card-editor select { background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 10px; color: var(--text); font: inherit; }
.camp-card-editor input[data-ce="title"], .camp-card-editor input[data-ce="message"] { flex: 1; min-width: 140px; width: 100%; }
.team-quick-add { display: flex; align-items: center; gap: 10px; padding: 11px 13px; margin-bottom: 14px; border: 1px dashed var(--line-strong, var(--line)); border-radius: var(--radius-m); background: var(--surface-1); flex-wrap: wrap; }
.team-quick-add .quick-add-icon { color: var(--muted); }
.team-quick-add input { flex: 1; min-width: 160px; background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; color: var(--text); font: inherit; }
.role-select { appearance: none; -webkit-appearance: none; background: var(--surface-0) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 9px 30px 9px 12px; color: var(--text); font: inherit; font-size: calc(12px * var(--text-scale)); cursor: pointer; }
.role-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.member-list { display: grid; gap: 9px; }
.member-actions { display: flex; align-items: center; gap: 8px; }
.member-row.pending { opacity: .82; background: var(--surface-1); border-style: dashed; }
.avatar.pending { display: grid; place-items: center; background: var(--surface-3); color: var(--muted); }
.team-pending-head { margin: 16px 0 9px; }
.team-pending-head small { color: var(--muted); letter-spacing: .12em; font-size: calc(10px * var(--text-scale)); }
.assist-edit { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; margin: 14px 0 4px; padding: 13px; border: 1px dashed var(--line-strong, var(--line)); border-radius: var(--radius-m); background: var(--surface-1); }
.assist-edit > small { grid-column: 1 / -1; color: var(--muted); letter-spacing: .1em; font-size: calc(10px * var(--text-scale)); }
.assist-edit .field input { width: 100%; background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; color: var(--text); font: inherit; }
@media (max-width: 620px) { .assist-edit { grid-template-columns: 1fr; align-items: stretch; } }
.irl-watch-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.irl-watch-strip .irl-watch-list { display: flex; gap: 18px; flex-wrap: wrap; }
#view-belabox .panel-card, #caravanRoot .panel-card { min-width: 0; }
/* Anti-squeeze sledgehammer: on phones, no container on the IRL or Caravan
   pages may place two cards side by side. Whatever layout state the page
   ends up in (grid, flex, or anything a future feature introduces), every
   card claims the full row. */
@media (max-width: 760px) {
  #view-belabox .belabox-page-grid, #caravanRoot { display: grid !important; grid-template-columns: 1fr !important; }
  #view-belabox .panel-card, #caravanRoot .panel-card { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; grid-column: 1 / -1 !important; }
}
.raid-live-toggle .ms { font-size: 16px; vertical-align: -3px; margin-right: 5px; color: var(--accent); }
.raid-filter-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.raid-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.raid-filter-bar button { padding: 9px 15px; font-size: calc(12px * var(--text-scale)); border-radius: var(--pill); }
.member-list, .invite-list { display: grid; gap: 7px; }
.member-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-0); }
.member-copy { min-width: 0; }
.member-copy b, .member-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-copy b { font-size: calc(12.5px * var(--text-scale)); font-weight: 660; }
.member-copy small { margin-top: 3px; color: var(--muted); font-size: calc(10.5px * var(--text-scale)); }
.member-actions { display: flex; gap: 6px; align-items: center; }
.member-actions select { min-height: 36px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface-2); color: var(--text); font-size: calc(11px * var(--text-scale)); }
.member-remove { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255,93,110,.25); border-radius: 50%; background: var(--danger-bg); color: var(--danger); cursor: pointer; }
.invite-row { padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-0); }
.invite-row header { display: flex; justify-content: space-between; gap: 10px; }
.invite-row b { font-size: calc(12px * var(--text-scale)); font-weight: 660; }
.invite-row small { color: var(--muted); font-size: calc(10px * var(--text-scale)); }
.invite-row footer { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; }
.invite-status { font-family: var(--mono); font-size: calc(8.5px * var(--text-scale)); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
body[data-theme="trail-light"] .invite-status { color: #4b6410; }

/* ---------------------------------------------------------------------
   Settings
   --------------------------------------------------------------------- */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.settings-section { scroll-margin-top: 112px; }
.settings-section > h3 { margin: 0 0 14px; font-size: calc(18px * var(--text-scale)); font-stretch: 108%; }
.settings-section > h3::after { content: ""; display: block; width: 34px; height: 5px; margin-top: 10px; border-radius: 3px; background: var(--accent); }
.setting-row { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }
.setting-row > span, .setting-row > div { min-width: 0; }
.setting-row b, .setting-row small { display: block; }
.setting-row b { font-size: calc(13px * var(--text-scale)); font-weight: 650; line-height: 1.3; }
.setting-row small { margin-top: 4px; color: var(--muted); font-size: calc(11px * var(--text-scale)); line-height: 1.5; }
.setting-row.stacked { align-items: end; }
.setting-row .grow { flex: 1; }
.setting-row select, .setting-row .compact-input { max-width: 250px; }
/* Touch-friendly toggle target, every viewport — not just the <=820px
   block below. A 20x20 native checkbox is too small to hit reliably on
   any touchscreen, tablet or desktop-with-touch alike. */
.setting-row input[type="checkbox"] { width: 48px; height: 28px; margin: 0; }
.account-summary { display: flex; align-items: center; gap: 11px; min-width: 0; }
.legal-note { margin: 16px 0 0; padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-0); color: var(--muted); font-size: calc(11px * var(--text-scale)); line-height: 1.65; }
.settings-subgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.accessibility-settings { grid-column: 1 / -1; }
.settings-mobile-nav { display: none; }
.viewer-count-sensitive[hidden] { display: none !important; }
body[data-viewer-count="hidden"] .viewer-count-sensitive { display: none !important; }

/* ---------------------------------------------------------------------
   Dialogs & sheets
   --------------------------------------------------------------------- */
dialog { padding: 0; border: 0; background: transparent; color: var(--text); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(9,11,8,.74); backdrop-filter: blur(6px); }
.popover-dialog { position: fixed; inset: 74px 20px auto auto; margin: 0; width: min(310px, calc(100vw - 40px)); }
.account-popover { padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-l); background: var(--surface-1); box-shadow: var(--shadow); display: grid; gap: 8px; }
.account-popover .account-summary { margin-bottom: 5px; }

.setup-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 30px); overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--surface-1); box-shadow: var(--shadow); }
.setup-dialog form { padding: clamp(22px, 4vw, 42px); }
.setup-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 30px; }
.setup-progress span { height: 5px; border-radius: 3px; background: var(--surface-4); }
.setup-progress span.active { background: var(--accent); }
.setup-step { display: none; }
.setup-step.active { display: block; animation: view-in .2s var(--ease); }
.setup-step > small, .mini-shell > small, .sheet-head small { color: var(--faint); font-family: var(--mono); font-size: calc(9px * var(--text-scale)); letter-spacing: .18em; text-transform: uppercase; }
.setup-step h2, .mini-shell h2 { margin: 12px 0 8px; font-size: clamp(24px, 3.6vw, 34px); font-stretch: 110%; letter-spacing: -.02em; }
.setup-step > p, .mini-shell > p { margin: 0 0 22px; color: var(--muted); font-size: calc(12.5px * var(--text-scale)); line-height: 1.65; }
.setup-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 15px; border: 0; border-radius: 50%; background: rgba(var(--accent-rgb), .14); color: var(--accent); }
body[data-theme="trail-light"] .setup-icon { color: #4b6410; }
.setup-icon.success { background: rgba(var(--signal-rgb), .14); color: var(--emerald); }
.setup-icon.warning { background: var(--danger-bg); color: var(--danger); }
.setup-icon .ms { font-size: calc(25px * var(--text-scale)); }
.setup-actions { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.choice-grid, .pack-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice-card, .pack-card { position: relative; display: grid; gap: 6px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-0); cursor: pointer; }
.choice-card input, .pack-card input { position: absolute; right: 13px; top: 13px; }
.choice-card > .ms, .pack-card > .ms { color: var(--accent); font-size: calc(24px * var(--text-scale)); }
body[data-theme="trail-light"] .choice-card > .ms, body[data-theme="trail-light"] .pack-card > .ms { color: #4b6410; }
.choice-card b, .pack-card b { font-size: calc(13px * var(--text-scale)); font-weight: 680; }
.choice-card small, .pack-card small { color: var(--muted); font-size: calc(10.5px * var(--text-scale)); line-height: 1.5; }
.choice-card:has(input:checked), .pack-card:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-0)); }
.accent-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.accent-options button { min-height: 74px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-0); cursor: pointer; color: var(--muted); font-size: calc(10px * var(--text-scale)); font-weight: 620; }
.accent-options button::before { content: ""; width: 26px; height: 14px; border-radius: var(--pill); background: var(--swatch); }
.accent-options button.active { border-color: var(--swatch); color: var(--text); box-shadow: inset 0 0 0 1px var(--swatch); }
.setup-finish { display: flex; align-items: center; gap: 11px; margin-top: 20px; padding: 15px; border: 1px solid rgba(var(--signal-rgb), .26); border-radius: var(--radius-s); background: rgba(var(--signal-rgb), .07); }
.setup-finish > .ms { color: var(--emerald); }
.setup-finish b, .setup-finish small { display: block; }
.setup-finish b { font-size: calc(12px * var(--text-scale)); font-weight: 660; }
.setup-finish small { margin-top: 2px; color: var(--muted); font-size: calc(10.5px * var(--text-scale)); }

.sheet-dialog { width: min(920px, calc(100vw - 24px)); max-height: calc(100dvh - 22px); overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--surface-1); box-shadow: var(--shadow); }
.sheet-shell { padding: clamp(18px, 3vw, 30px); }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.sheet-head h2 { margin: 8px 0 0; font-size: calc(25px * var(--text-scale)); font-stretch: 110%; letter-spacing: -.02em; }
.sheet-footer { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: calc(11px * var(--text-scale)); }
.filter-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-chip { min-height: 36px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface-0); color: var(--muted); cursor: pointer; font-size: calc(11px * var(--text-scale)); font-weight: 640; }
.filter-chip.active { border-color: transparent; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.starter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.starter-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-0); cursor: pointer; }
.starter-card input { position: absolute; right: 10px; top: 10px; }
.starter-card.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-0)); }
.starter-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--accent); }
body[data-theme="trail-light"] .starter-icon { color: #4b6410; }
.starter-copy { min-width: 0; padding-right: 18px; }
.starter-copy b, .starter-copy small { display: block; }
.starter-copy b { font-size: calc(12px * var(--text-scale)); font-weight: 660; }
.starter-copy small { margin-top: 3px; color: var(--muted); font-size: calc(10px * var(--text-scale)); line-height: 1.45; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid .span-2 { grid-column: span 2; }
.type-panel { margin: 14px 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-0); }
.field-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.check-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-0); }
.check-row b, .check-row small { display: block; }
.check-row b { font-size: calc(11.5px * var(--text-scale)); font-weight: 650; }
.check-row small { margin-top: 2px; color: var(--muted); font-size: calc(10px * var(--text-scale)); }
.sequence-list { display: grid; gap: 7px; }
.sequence-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 7px; }
.sequence-row select, .sequence-row input { min-height: 42px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface-2); color: var(--text); font-size: calc(11.5px * var(--text-scale)); }
.sequence-remove { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--danger); cursor: pointer; }
.profile-manager { display: grid; gap: 7px; }
.profile-manager-row { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-0); }
.profile-manager-row > .ms { color: var(--accent); }
body[data-theme="trail-light"] .profile-manager-row > .ms { color: #4b6410; }
.profile-manager-row input { min-height: 40px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface-2); color: var(--text); }
.profile-manager-actions { display: flex; gap: 5px; }
.profile-manager-actions button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); cursor: pointer; }
.profile-manager-actions button.danger { color: var(--danger); }
.mini-dialog { width: min(500px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--surface-1); box-shadow: var(--shadow); }
.mini-shell { padding: clamp(21px, 4vw, 34px); }
.mini-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.mini-actions > span { flex: 1; }
.copy-field { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.copy-field input { font-family: var(--mono); font-size: calc(12px * var(--text-scale)); }
.copy-field button { width: 46px; border-radius: var(--radius-s); background: var(--accent); color: var(--on-accent); cursor: pointer; }
.whats-new-list { display: grid; gap: 8px; margin-top: 18px; }
.whats-new-item { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-0); font-size: calc(11.5px * var(--text-scale)); line-height: 1.5; }
.whats-new-item .ms { color: var(--emerald); font-size: calc(16px * var(--text-scale)); }

/* Guided setup helpers */
.feature-setting { align-items: flex-start; }
.feature-setting .primary-btn { flex: 0 0 auto; margin-top: 2px; }
.setup-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.setup-mode-card { min-height: 164px; align-content: start; }
.setup-mode-card em { align-self: end; margin-top: 8px; color: var(--accent); font-family: var(--mono); font-size: calc(8px * var(--text-scale)); font-style: normal; letter-spacing: .1em; }
.setup-pack-panel { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface-0); }
.setup-inline-head { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.setup-inline-head b, .setup-inline-head small { display: block; }
.setup-inline-head b { font-size: calc(12.5px * var(--text-scale)); }
.setup-inline-head small { margin-top: 3px; color: var(--muted); font-size: calc(10px * var(--text-scale)); }
.setup-comfort-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.setup-comfort-grid .setup-wide { grid-column: 1 / -1; }

@media (max-width: 820px) {
  .setup-mode-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
  .setup-mode-grid, .setup-comfort-grid { grid-template-columns: 1fr; }
  .setup-comfort-grid .setup-wide { grid-column: auto; }
  .setup-mode-card { min-height: 0; }
}

/* Legal */
.legal-dialog { width: min(920px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--surface-1); color: var(--text); box-shadow: var(--shadow); }
.legal-dialog::backdrop { background: rgba(8,10,7,.84); backdrop-filter: blur(10px); }
.legal-shell { padding: clamp(22px, 4vw, 42px); }
.legal-head { display: flex; align-items: center; gap: 14px; }
.legal-head h2 { margin: 6px 0 0; font-size: clamp(26px, 3.8vw, 38px); font-stretch: 110%; line-height: 1.04; letter-spacing: -.022em; }
.legal-head small { color: var(--accent); font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; }
body[data-theme="trail-light"] .legal-head small { color: #4b6410; }
.legal-lead { max-width: 760px; margin: 22px 0; color: var(--muted); font-size: calc(13.5px * var(--text-scale)); line-height: 1.65; }
.legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.legal-grid section { padding: 17px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-0); }
.legal-grid h3 { margin: 0 0 8px; font-size: calc(14px * var(--text-scale)); }
.legal-grid ul { margin: 0; padding-left: 19px; color: var(--muted); font-size: calc(12px * var(--text-scale)); line-height: 1.65; }
.legal-grid li + li { margin-top: 5px; }
.legal-consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 16px; border: 1px solid rgba(var(--accent-rgb), .4); border-radius: var(--radius-s); background: rgba(var(--accent-rgb), .07); }
.legal-consent b, .legal-consent small { display: block; }
.legal-consent b { font-size: calc(13px * var(--text-scale)); font-weight: 660; }
.legal-consent small { margin-top: 4px; color: var(--muted); font-size: calc(11px * var(--text-scale)); line-height: 1.5; }
.legal-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.legal-actions > span { color: var(--faint); font-family: var(--mono); font-size: calc(9.5px * var(--text-scale)); letter-spacing: .12em; text-transform: uppercase; }

/* Tutorial */
.tutorial-dialog { position: fixed; z-index: 250; inset: auto 22px 22px auto; width: min(420px, calc(100vw - 28px)); margin: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-l); background: var(--surface-1); color: var(--text); box-shadow: 0 24px 80px rgba(0,0,0,.55); }
.tutorial-card { padding: 22px; }
.tutorial-progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 18px; }
.tutorial-progress span { height: 5px; border-radius: 3px; background: var(--surface-4); }
.tutorial-progress span.active { background: var(--accent); }
.tutorial-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 50%; background: rgba(var(--accent-rgb), .14); color: var(--accent); }
body[data-theme="trail-light"] .tutorial-icon { color: #4b6410; }
.tutorial-dialog small { color: var(--faint); font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; font-size: calc(9px * var(--text-scale)); }
.tutorial-dialog h2 { margin: 8px 0 8px; font-size: calc(22px * var(--text-scale)); font-stretch: 108%; line-height: 1.1; letter-spacing: -.02em; }
.tutorial-dialog p { margin: 0; color: var(--muted); font-size: calc(12.5px * var(--text-scale)); line-height: 1.6; }
.tutorial-actions { display: grid; grid-template-columns: auto 1fr auto auto; gap: 7px; align-items: center; margin-top: 18px; }
.tutorial-focus { position: relative !important; z-index: 225 !important; outline: 3px solid var(--accent) !important; outline-offset: 6px !important; box-shadow: 0 0 0 9999px rgba(8,10,7,.68), var(--shadow) !important; }

/* Toast */
.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 300; width: min(360px, calc(100vw - 36px)); display: grid; gap: 8px; pointer-events: none; }
.toast { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: color-mix(in srgb, var(--surface-2) 96%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(14px); animation: toast-in .2s var(--ease); pointer-events: auto; }
.toast > .ms { width: 32px; height: 32px; display: grid; place-items: center; max-width: none; border-radius: 50%; background: rgba(var(--accent-rgb), .14); color: var(--accent); font-size: calc(17px * var(--text-scale)); }
body[data-theme="trail-light"] .toast > .ms { color: #4b6410; }
.toast b, .toast small { display: block; }
.toast b { font-size: calc(12px * var(--text-scale)); font-weight: 660; }
.toast small { margin-top: 3px; color: var(--muted); font-size: calc(10.5px * var(--text-scale)); line-height: 1.45; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------------------------------------------------------------------
   Control Room
   --------------------------------------------------------------------- */

.panel-status { display: flex; align-items: center; gap: 8px; }
.panel-status b { font-size: calc(13px * var(--text-scale)); font-weight: 680; }
.panel-status .ms { font-size: calc(17px * var(--text-scale)); color: var(--accent); }
body[data-theme="trail-light"] .panel-status .ms { color: #4b6410; }
.panel-actions { display: flex; gap: 5px; }
.panel-icon { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-1); cursor: pointer; }
.panel-icon:hover { background: var(--surface-3); }
.panel-icon .ms { font-size: calc(16px * var(--text-scale)); }

.scenic-placeholder { background-image: linear-gradient(rgba(8,10,7,.5), rgba(8,10,7,.72)), var(--hero-image); background-size: cover; background-position: center; }

.tool-head { border-radius: 0; }

@keyframes signalPulse { 50% { opacity: .45; transform: scale(.76); } }

/* Field Producer */
.producer-block { margin-top: 16px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-0); }
.producer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.producer-head small { color: var(--faint); font-family: var(--mono); font-size: calc(9px * var(--text-scale)); letter-spacing: .16em; text-transform: uppercase; }
.producer-head h4 { margin: 4px 0 0; font-size: calc(16px * var(--text-scale)); font-stretch: 108%; }
#producerArm.armed { background: var(--surface-3); color: var(--text); }
.producer-status { display: flex; align-items: baseline; gap: 9px; margin: 13px 0 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-1); }
.producer-status .dot { align-self: center; }
.producer-status b { font-size: calc(12.5px * var(--text-scale)); font-weight: 680; white-space: nowrap; }
.producer-status small { color: var(--muted); font-size: calc(10.5px * var(--text-scale)); }
.producer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.producer-grid .prod-span-2 { grid-column: span 2; }
.producer-tools { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.producer-note { flex: 1; min-width: 200px; color: var(--faint); font-size: calc(10.5px * var(--text-scale)); line-height: 1.5; }
.producer-log { display: grid; gap: 5px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.producer-log-row { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; }
.producer-log-row .ms { font-size: calc(15px * var(--text-scale)); color: var(--accent); }
body[data-theme="trail-light"] .producer-log-row .ms { color: #4b6410; }
.producer-log-row b, .producer-log-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.producer-log-row b { font-size: calc(11px * var(--text-scale)); font-weight: 650; }
.producer-log-row small { color: var(--muted); font-size: calc(9.5px * var(--text-scale)); }
.producer-log-row em { color: var(--faint); font-family: var(--mono); font-style: normal; font-size: calc(8.5px * var(--text-scale)); }
.producer-strip .ms { color: var(--accent); }
.producer-strip.alert b { color: var(--amber); }
.producer-strip.alert .ms { color: var(--amber); animation: signalPulse 1s ease-in-out infinite; }
body[data-motion="reduced"] .producer-strip.alert .ms, body[data-motion="none"] .producer-strip.alert .ms { animation: none; }

/* On Air — chrome falls away, controls stay */
body.on-air .sidebar { transform: translateX(-100%); opacity: 0; pointer-events: none; }
body.on-air .app-shell { grid-template-columns: 1fr; }
body.on-air .app-main { grid-column: 1; }
body.on-air .app-topbar { min-height: 62px; }
body.on-air .view-stack { max-width: none; padding: 14px 16px 34px; }

body.on-air .status-strip { position: sticky; top: 62px; z-index: 39; }

/* Creator avatar wash on non-scenic hero (subtle) */
body.has-creator-avatar[data-scenic="minimal"] .hero-card::after {
  content: ""; position: absolute; right: -60px; bottom: -110px; width: 360px; height: 360px; border-radius: 50%;
  background-image: linear-gradient(135deg, rgba(var(--accent-rgb), .2), rgba(0,0,0,.8)), var(--creator-avatar);
  background-position: center; background-size: cover; opacity: .13; pointer-events: none;
  mask-image: radial-gradient(circle, black 0 42%, transparent 72%);
}

/* ---------------------------------------------------------------------
   Accessibility modes
   --------------------------------------------------------------------- */
body[data-font="system"] { --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body[data-font="atkinson"] { --font: "Atkinson Hyperlegible", system-ui, sans-serif; }
body[data-font="system"] :is(h1,h2,h3,h4,.tile-title,.countdown-number,.brand-five,.section-toolbar h2,.hero-copy h2,.welcome-copy h1),
body[data-font="atkinson"] :is(h1,h2,h3,h4,.tile-title,.countdown-number,.brand-five,.section-toolbar h2,.hero-copy h2,.welcome-copy h1) { font-stretch: normal; }
body[data-contrast="high"] { --muted: #cbd0c5; --faint: #abb1a5; --line: rgba(255,255,255,.24); --line-strong: rgba(255,255,255,.44); }
body[data-theme="trail-light"][data-contrast="high"] { --muted: #363d30; --faint: #555c50; --line: rgba(0,0,0,.26); --line-strong: rgba(0,0,0,.48); }
body[data-contrast="high"] .state-pill, body[data-contrast="high"] .tile-type { font-weight: 700; }

body[data-focus="enhanced"] :is(button, input, textarea, select, a, [role="button"]):focus-visible { outline: 4px solid var(--accent) !important; outline-offset: 4px !important; box-shadow: 0 0 0 7px rgba(var(--accent-rgb), .22) !important; }
.command-tile:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; }
body[data-controls="large"] :is(.primary-btn, .ghost-btn, .soft-btn, .danger-btn, .text-button, .icon-button, .primary-icon, .link-btn, .nav-button) { min-height: 52px; }
body[data-controls="large"] :is(.icon-button, .primary-icon, .tile-control) { width: 52px; height: 52px; }
body[data-controls="large"] input[type="checkbox"] { width: 26px; height: 26px; }
body[data-motion="reduced"] * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
body[data-motion="none"] * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* Large text reflow */
body[data-large-text="true"] .dashboard-grid, body[data-large-text="true"] .settings-grid, body[data-large-text="true"] .team-grid, body[data-large-text="true"] .moderation-layout, body[data-large-text="true"] .raid-layout { grid-template-columns: 1fr !important; }
body[data-large-text="true"] :is(.dash-card.span-2, .panel-card.span-2, .accessibility-settings) { grid-column: auto !important; }
body[data-large-text="true"] .settings-subgrid, body[data-large-text="true"] .legal-grid { grid-template-columns: 1fr; }
body[data-large-text="true"] .setting-row { align-items: flex-start; flex-direction: column; }
body[data-large-text="true"] .setting-row :is(select, input[type="range"], .soft-btn, .ghost-btn, .primary-btn, .danger-btn) { width: 100%; max-width: none; }
body[data-large-text="true"] .command-tile.size-quarter, body[data-large-text="true"] .command-tile.size-third, body[data-large-text="true"] .command-tile.size-half, body[data-large-text="true"] .command-tile.size-full { grid-column: span 12; }
body[data-large-text="true"] .command-tile { min-height: 184px; }
body[data-large-text="true"] .hero-card { grid-template-columns: 1fr; }

/* Defensive reflow */
.app-shell, .app-main, .view-stack, .app-view, .dashboard-grid, .dash-card, .panel-card, .hero-card, .topbar-copy, .quick-send { min-width: 0; max-width: 100%; }
:is(h1, h2, h3, h4, p, b, small, span, label) { overflow-wrap: anywhere; }
.icon-button, .primary-icon, .avatar, .mobile-logo { overflow: hidden; }
.status-strip { max-width: 100vw; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .app-shell { grid-template-columns: 212px minmax(0, 1fr); }
  .sidebar { width: 212px; }
  .side-brand small { display: none; }
  /* .dashboard-grid column count is owned by the container queries in the
     design-system block — a viewport rule here forced 2 columns on every
     screen under 1280px regardless of how much room .app-main actually
     had, which left a permanently empty third column on wide displays. */
  .dash-card.span-2 { grid-column: span 2; }
  .moderation-layout { grid-template-columns: 1fr; }
  .chat-embed-card { position: static; }
  .chat-embed, .chat-embed iframe, .embed-placeholder { min-height: 520px; height: 520px; }
  .team-grid { grid-template-columns: 1fr; }
  .team-grid .span-2 { grid-column: auto; }
  .settings-grid { grid-template-columns: 1fr; }
  .raid-layout { grid-template-columns: 1fr; }
  
  
  
  
  
}

@media (max-width: 920px) {
  
  
  
  
  
  
  
  
  
  
  .compact-select { min-width: 170px; }
  .compact-select select { width: 100%; }
  
}

@media (max-width: 820px) {
  :root { --page-gutter: 14px; }

  /* Welcome */
  .welcome-grid { grid-template-columns: 1fr; padding: 46px 0 36px; gap: 44px; }
  .welcome-copy { max-width: 680px; }
  .welcome-copy h1 { font-size: clamp(44px, 12vw, 70px); }
  .welcome-preview { display: none; }

  /* Shell */
  .app-shell { display: block; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .sidebar { display: none; }
  .app-main { grid-column: auto; }
  .mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-0) 94%, transparent); backdrop-filter: blur(18px); overflow: hidden; }
  .mobile-nav .nav-button { min-height: 58px; min-width: 0; max-width: 100%; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 4px; padding: 5px 1px; border-radius: var(--radius-s); text-align: center; font-size: calc(8.5px * var(--text-scale)); font-weight: 640; }
  .mobile-nav .nav-button .ms { font-size: calc(20px * var(--text-scale)); max-width: 1.2em; }
  .mobile-nav .nav-button.active { background: var(--accent); color: var(--on-accent); }
  .mobile-nav .nav-button.active::before { content: none; }
  .app-topbar { min-height: 70px; padding: calc(10px + env(safe-area-inset-top)) 14px 9px; gap: 10px; }
  .mobile-logo { display: grid; }
  .topbar-copy { flex: 1; min-width: 0; overflow: hidden; }
  .topbar-copy small { display: none; }
  .topbar-copy h1 { font-size: calc(17px * var(--text-scale)); max-width: 100%; }
  .space-picker-wrap { max-width: 172px; }
  .space-picker-wrap select { max-width: 120px; }
  .account-chip { width: 44px; padding: 4px; }
  .account-chip > span:not(.avatar) { display: none; }
  .topbar-tools > .icon-button { display: none; }
  .status-strip { gap: 14px; padding: 7px 14px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .status-strip::-webkit-scrollbar { display: none; }
  .status-action { display: none; }
  .view-stack { padding: 20px 14px 40px; }

  /* Home */
  .hero-card { grid-template-columns: 1fr; min-height: 340px; padding: 26px 20px; border-radius: var(--radius-l); background-position: 68% center; }
  .hero-copy h2 { font-size: clamp(calc(34px * var(--text-scale)), 11vw, calc(48px * var(--text-scale))); }
  .hero-copy p { font-size: calc(13.5px * var(--text-scale)); }
  .creator-signature { width: 100%; border-radius: var(--radius-l); }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .hero-actions > * { width: 100%; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 12px; }
  .dash-card.span-2 { grid-column: auto; }
  .stream-overview { grid-template-columns: 110px 1fr; }

  /* Sections */
  .section-toolbar { align-items: flex-start; flex-direction: column; margin-bottom: 20px; }
  .section-toolbar h2 { font-size: calc(32px * var(--text-scale)); }
  .toolbar-actions { display: flex; width: 100%; gap: 7px; }
  .toolbar-actions > * { flex: 1; min-width: 0; padding-inline: 8px; overflow: hidden; white-space: nowrap; font-size: calc(11.5px * var(--text-scale)); }
  .toolbar-actions > * .ms { font-size: calc(17px * var(--text-scale)); }
  .arrange-exit-float { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .profile-row { align-items: stretch; }
  .profile-add { padding-inline: 12px; }
  .profile-add span:not(.ms) { display: none; }

  /* Deck */
  .command-grid { gap: 10px; }
  .command-tile { min-height: 138px; padding: 14px 15px 15px; }
  .command-tile.size-quarter, .command-tile.size-third, .command-tile.size-half { grid-column: span 6; }
  .command-tile.size-full { grid-column: span 12; }
  .tile-title { font-size: calc(18px * var(--text-scale)); }
  .tile-control { width: 36px; height: 36px; }
  .tile-drag { display: none; }
  .tile-controls { gap: 4px; }

  /* Moderation / raid / team */
  .chat-embed, .chat-embed iframe, .embed-placeholder { min-height: 0; height: min(62dvh, 520px); }
  .action-grid { grid-template-columns: repeat(2, 1fr); }
  .starter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toast-stack { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .popover-dialog { inset: 70px 10px auto auto; }
  .settings-subgrid, .legal-grid { grid-template-columns: 1fr; }
  .tutorial-dialog { left: 14px; right: 14px; bottom: calc(88px + env(safe-area-inset-bottom)); width: auto; }
  body.on-air .mobile-nav { display: none; }
  body.on-air .app-shell { padding-bottom: 0; }
  
  

  /* Mobile settings: one readable stream */
  #view-settings .section-toolbar { margin-bottom: 12px; }
  .settings-mobile-nav { position: sticky; top: calc(70px + env(safe-area-inset-top)); z-index: 24; display: flex; gap: 7px; margin: 0 -14px 14px; padding: 9px 14px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; background: color-mix(in srgb, var(--surface-0) 94%, transparent); border-block: 1px solid var(--line); backdrop-filter: blur(16px); }
  .settings-mobile-nav::-webkit-scrollbar { display: none; }
  .settings-mobile-nav a { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface-1); color: var(--muted); font-size: calc(10.5px * var(--text-scale)); font-weight: 640; text-decoration: none; white-space: nowrap; }
  .settings-mobile-nav a:active, .settings-mobile-nav a:focus-visible { border-color: var(--accent); color: var(--text); }
  .settings-mobile-nav .ms { font-size: calc(16px * var(--text-scale)); color: var(--accent); }
  body[data-theme="trail-light"] .settings-mobile-nav .ms { color: #4b6410; }
  .settings-grid { display: block; }
  .settings-section, .accessibility-settings { grid-column: auto !important; margin-bottom: 12px; padding: 20px 17px 16px; }
  .settings-section > h3 { margin-bottom: 10px; font-size: calc(19px * var(--text-scale)); }
  .settings-subgrid { display: block; }
  .setting-row, .setting-row.stacked { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; justify-items: stretch; gap: 11px; min-height: 0; padding: 15px 0; }
  .setting-row > span, .setting-row > div, .setting-row > .field { width: 100%; max-width: none; }
  .setting-row b { font-size: calc(14px * var(--text-scale)); }
  .setting-row small { font-size: calc(11px * var(--text-scale)); }
  .setting-row select, .setting-row input:not([type="checkbox"]):not([type="color"]), .setting-row .compact-input, .setting-row .soft-btn, .setting-row .ghost-btn, .setting-row .primary-btn, .setting-row .danger-btn, .setting-row .link-btn { width: 100%; max-width: none; min-height: 48px; }
  .setting-row :is(.soft-btn, .ghost-btn, .primary-btn, .danger-btn, .link-btn) { justify-content: center; }
  .setting-row input[type="color"] { width: 100%; max-width: none; height: 48px; }
  .setting-row input[type="checkbox"] { justify-self: start; width: 48px; height: 28px; margin: 0; }
  .setting-row .account-summary { width: 100%; padding: 2px 0; }
  .setting-row .account-summary + .soft-btn { width: 100%; }
  .settings-section > .wide { width: 100%; justify-content: center; margin-top: 10px; }
  .accessibility-settings .card-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .accessibility-settings .card-actions > * { width: 100%; justify-content: center; }
  .legal-note { font-size: calc(11px * var(--text-scale)); }
}

@media (max-width: 540px) {
  .welcome-shell { padding-inline: 18px; }
  .welcome-actions { display: grid; }
  .welcome-actions > * { width: 100%; }
  .welcome-footer { align-items: flex-start; flex-direction: column; gap: 5px; }
  .welcome-brand strong { font-size: calc(15px * var(--text-scale)); }

  .space-picker-wrap { max-width: 150px; }
  .space-picker-wrap .ms { display: none; }
  .space-picker-wrap select { max-width: 132px; }
  .status-item:nth-of-type(2) { display: none; }
  .hero-card { min-height: 380px; padding: 24px 18px; background-position: 72% center; }
  .hero-copy h2 { font-size: calc(36px * var(--text-scale)); }
  .stream-overview { grid-template-columns: 1fr; }
  .stream-thumbnail { min-height: 160px; }
  .metric-row { margin-top: 10px; }
  .card-actions { flex-wrap: wrap; }
  .command-tile.size-quarter, .command-tile.size-third, .command-tile.size-half { grid-column: span 6; }
  .command-tile.size-full { grid-column: span 12; }
  .command-grid { gap: 9px; }
  .command-tile { min-height: 128px; gap: 10px; padding: 12px 13px 13px; }
  .tile-icon { width: 34px; height: 34px; }
  .tile-icon .ms { font-size: calc(18px * var(--text-scale)); }
  .tile-control { width: 32px; height: 32px; }
  .tile-content { min-height: 54px; }
  .tile-title { font-size: calc(15px * var(--text-scale)); }
  .tile-sub { font-size: calc(10.5px * var(--text-scale)); }
  .tile-type { padding: 3px 8px; }
  .tile-status { right: 11px; bottom: 11px; }
  .command-tile.size-full .tile-title { font-size: calc(18px * var(--text-scale)); }
  .space-picker-wrap.single { display: none; }
  .section-toolbar h2 { font-size: calc(29px * var(--text-scale)); }
  .toolbar-actions > * { font-size: calc(11px * var(--text-scale)); gap: 5px; }
  .chat-embed, .chat-embed iframe, .embed-placeholder { min-height: 0; height: min(58dvh, 460px); }
  .large-actions > * { flex: 1; }
  .raid-channel { grid-template-columns: 82px 1fr; }
  .raid-avatar { width: 82px; }
  .role-guide { display: grid; grid-template-columns: repeat(2, 1fr); }
  .role-guide span { border-radius: var(--radius-s); }
  .member-row { grid-template-columns: auto 1fr; }
  .member-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .choice-grid, .pack-grid { grid-template-columns: 1fr; }
  .accent-options { grid-template-columns: repeat(3, 1fr); }
  .starter-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .sequence-row { grid-template-columns: 1fr; }
  .sequence-remove { width: 100%; height: 38px; border-radius: var(--pill); }
  .sheet-footer { grid-template-columns: 1fr 1fr; }
  .sheet-footer > span { display: none; }
  .sheet-footer .danger-btn { grid-column: 1 / -1; }
  .setup-dialog, .sheet-dialog, .mini-dialog { width: 100%; max-height: 94dvh; margin: auto 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .setup-dialog form, .sheet-shell, .mini-shell { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .legal-dialog { width: 100%; max-height: 96dvh; margin: auto 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .legal-shell { padding: 22px 18px calc(24px + env(safe-area-inset-bottom)); }
  .legal-actions { align-items: stretch; flex-direction: column; }
  .legal-actions .primary-btn { width: 100%; }
  .tutorial-actions { grid-template-columns: 1fr 1fr; }
  .tutorial-actions > span { display: none; }
  .tutorial-actions .text-button { grid-column: 1 / -1; justify-self: start; }
  .mobile-nav .nav-button span:last-child { font-size: calc(8px * var(--text-scale)); }
  .quick-send { grid-template-columns: minmax(0, 1fr) auto; }
  .settings-mobile-nav { top: calc(70px + env(safe-area-inset-top)); }
  
  
  
  
  
  
  
  
  
  
  
  
  
  .producer-grid { grid-template-columns: 1fr; }
  .producer-grid .prod-span-2 { grid-column: auto; }
  .producer-head { align-items: flex-start; flex-direction: column; }
  .producer-head .primary-btn { width: 100%; }
  
  
}

/* =====================================================================
   Trailhead5 1.4 — Wayfinder foundation
   Session restore, focused startup choices, adaptive mobile navigation,
   richer searchable Settings, reliable hero imagery, and an On Air dock.
   ===================================================================== */

/* Auth/session veil --------------------------------------------------- */
.auth-veil {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 15px;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), .12), transparent 34%),
    color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(22px) saturate(120%);
  color: var(--text);
  text-align: center;
}
.auth-veil[hidden] { display: none !important; }
html.auth-checking .welcome-screen,
html.returning-user .welcome-screen { visibility: hidden; }
.auth-pack { width: 88px; height: 88px; display: grid; place-items: center; }
.auth-pack svg { width: 100%; height: 100%; overflow: visible; animation: pack-breathe 1.7s var(--ease) infinite; }
.pack-body { fill: var(--surface-3); stroke: var(--line-strong); stroke-width: 2; }
.pack-flap { fill: var(--accent); opacity: .96; }
.pack-pocket { fill: var(--surface-1); stroke: rgba(var(--accent-rgb), .45); stroke-width: 1.5; }
.pack-roll { fill: var(--surface-4); stroke: var(--line-strong); stroke-width: 1.5; transform-origin: 60px 98px; animation: pack-roll 1.7s var(--ease) infinite; }
.pack-strap { fill: none; stroke: var(--muted); stroke-width: 5; stroke-linecap: round; transform-origin: center; }
.strap-left { animation: strap-left 1.7s var(--ease) infinite; }
.strap-right { animation: strap-right 1.7s var(--ease) infinite; }
.pack-route { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 5 5; animation: route-march 1.2s linear infinite; }
.pack-dot { fill: var(--accent); }
.dot-one { animation: waypoint-pulse 1.7s .05s ease-in-out infinite; }
.dot-two { animation: waypoint-pulse 1.7s .45s ease-in-out infinite; }
.auth-veil-copy { display: grid; gap: 4px; }
.auth-veil-copy b { font-size: calc(18px * var(--text-scale)); font-weight: 760; }
.auth-veil-copy small { max-width: 360px; color: var(--muted); font-size: calc(12px * var(--text-scale)); }
html.auth-error .auth-pack svg { animation-play-state: paused; }
html.auth-error .pack-flap { fill: var(--coral); }
@keyframes pack-breathe { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
@keyframes pack-roll { 0%,100% { transform: rotate(-1deg); } 50% { transform: rotate(2deg); } }
@keyframes strap-left { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg); } }
@keyframes strap-right { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(3deg); } }
@keyframes route-march { to { stroke-dashoffset: -20; } }
@keyframes waypoint-pulse { 0%,100% { opacity: .45; transform: scale(.8); transform-origin: center; } 50% { opacity: 1; transform: scale(1.35); } }

/* Custom hero reliability ------------------------------------------- */
body.has-custom-hero .hero-card {
  background-image: linear-gradient(94deg, rgba(13,16,12,.92) 0%, rgba(13,16,12,.68) 52%, rgba(13,16,12,.15) 100%), var(--custom-hero) !important;
  background-size: cover !important;
  background-position: center !important;
  color: #f2f4ec;
}
.stream-thumbnail,
.scenic-placeholder,
.preview-hero { background-image: linear-gradient(rgba(10,12,9,.38), rgba(10,12,9,.66)), var(--custom-hero, var(--hero-image)); }

/* Settings command center ------------------------------------------- */
.settings-toolbar { margin-bottom: 14px; }
.settings-toolbar p { max-width: 620px; margin: 8px 0 0; color: var(--muted); }
.settings-command-center {
  position: sticky;
  top: 82px;
  z-index: 26;
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--surface-0) 92%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
}
.settings-search {
  min-height: 52px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface-1);
}
.settings-search .ms { color: var(--accent); }
.settings-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: calc(14px * var(--text-scale)); }
.settings-search input::placeholder { color: var(--faint); }
.settings-search kbd { padding: 3px 8px; border: 1px solid var(--line); border-bottom-color: var(--line-strong); border-radius: 7px; background: var(--surface-2); color: var(--faint); font-family: var(--mono); font-size: calc(9px * var(--text-scale)); }
.settings-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12); }
.settings-search-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; color: var(--faint); font-size: calc(10.5px * var(--text-scale)); }
.settings-grid { align-items: start; }
.settings-section {
  overflow: clip;
  padding: 0 !important;
  scroll-margin-top: 170px;
}
.settings-section > summary {
  min-height: 82px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 17px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.settings-section > summary::-webkit-details-marker { display: none; }
.settings-section > summary:hover { background: var(--surface-2); }
.settings-summary-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-s); background: rgba(var(--accent-rgb), .11); color: var(--accent); }
.settings-summary-icon .ms { font-size: calc(23px * var(--text-scale)); }
.settings-section > summary > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.settings-section > summary b { font-size: calc(16px * var(--text-scale)); }
.settings-section > summary small { color: var(--muted); font-size: calc(11px * var(--text-scale)); line-height: 1.45; }
.settings-chevron { color: var(--faint); transition: transform .18s var(--ease); }
.settings-section[open] .settings-chevron { transform: rotate(180deg); }
.settings-section[open] > summary { border-bottom: 1px solid var(--line); }
.settings-section-body { padding: 5px 18px 18px; }
.settings-section:not([open]) .settings-section-body { display: none; }
.setting-row.search-match { position: relative; }
.setting-row.search-match::before { content: ""; position: absolute; left: -18px; top: 12px; bottom: 12px; width: 3px; border-radius: 4px; background: var(--accent); }
.settings-no-results { min-height: 260px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); text-align: center; }
.settings-no-results .ms { font-size: 42px; color: var(--faint); }
.settings-no-results b { color: var(--text); font-size: calc(18px * var(--text-scale)); }

/* Rich visual explainers -------------------------------------------- */
.settings-visual {
  min-height: 190px;
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(260px, 1.1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  margin: 12px 0 8px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .055), transparent 55%), var(--surface-1);
}
.settings-visual > div:last-child { display: grid; gap: 7px; }
.settings-visual > div:last-child > small { color: var(--accent); font-family: var(--mono); font-size: calc(9px * var(--text-scale)); letter-spacing: .14em; }
.settings-visual > div:last-child > b { font-size: calc(20px * var(--text-scale)); line-height: 1.15; }
.settings-visual > div:last-child > p { margin: 0; color: var(--muted); font-size: calc(12px * var(--text-scale)); line-height: 1.6; }
.preview-device { width: min(250px, 100%); margin-inline: auto; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--surface-0); box-shadow: var(--shadow-soft); }
.preview-page { min-height: 112px; display: grid; align-content: end; gap: 8px; padding: 16px; border-radius: 19px 19px 9px 9px; background: linear-gradient(135deg, rgba(var(--accent-rgb), .25), transparent 60%), var(--surface-2); }
.preview-page-label { font-weight: 760; font-size: calc(17px * var(--text-scale)); }
.preview-page i { width: 72%; height: 7px; border-radius: var(--pill); background: var(--surface-4); }
.preview-page i:last-child { width: 46%; }
.preview-dock { display: grid; grid-template-columns: repeat(var(--preview-count, 6), minmax(0, 1fr)); gap: 4px; padding-top: 8px; }
.preview-dock > span { min-height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--faint); background: var(--surface-1); }
.preview-dock > span.active { color: var(--on-accent); background: var(--accent); }
.preview-dock .ms { font-size: 17px; }
.appearance-preview { --settings-hero: var(--custom-hero, var(--hero-image)); }
.appearance-preview-card { min-height: 160px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; padding: 20px; border-radius: var(--radius-l); background-image: linear-gradient(95deg, rgba(9,11,8,.88), rgba(9,11,8,.24)), var(--settings-hero); background-size: cover; background-position: center; color: #f5f7ef; box-shadow: var(--shadow-soft); }
.appearance-preview-card .eyebrow { color: var(--accent); }
.appearance-preview-card b { max-width: 260px; font-size: clamp(21px, 3vw, 30px); line-height: 1; }
.appearance-preview-card i { width: 54%; height: 6px; border-radius: var(--pill); background: rgba(255,255,255,.28); }
.appearance-preview-card i:last-child { width: 34%; }
.type-preview-sample { min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 20px; border: 1px solid rgba(var(--accent-rgb), .28); border-radius: var(--radius-l); background: linear-gradient(145deg, rgba(var(--accent-rgb), .16), transparent 70%), var(--surface-2); }
.type-preview-sample small { color: var(--accent); font-family: var(--mono); letter-spacing: .13em; }
.type-preview-sample b { font-size: 24px; line-height: 1.05; }
.type-preview-sample span { color: var(--muted); }
.on-air-preview-screen { min-height: 165px; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 15px; border: 1px solid var(--line-strong); border-radius: var(--radius-l); background: #10120f; box-shadow: var(--shadow-soft); }
.on-air-preview-screen > span { width: max-content; padding: 5px 10px; border-radius: var(--pill); background: var(--danger); color: white; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; }
.on-air-preview-screen > div { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8px; }
.on-air-preview-screen i { border-radius: var(--radius-xs); background: linear-gradient(140deg, rgba(var(--accent-rgb), .25), transparent), #262a24; }
.on-air-preview-screen nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.on-air-preview-screen nav b { display: grid; place-items: center; min-height: 30px; border-radius: 9px; background: #252922; color: #aab1a1; font-size: 8px; }
.on-air-preview-screen nav b:first-child { background: var(--accent); color: var(--on-accent); }

/* Navigation choices ------------------------------------------------ */
.setting-row-block { align-items: flex-start; flex-direction: column; }
.setting-row-block > span { width: 100%; }
.module-choice-grid { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.module-choice-grid label { min-height: 74px; position: relative; display: grid; place-items: center; align-content: center; gap: 7px; padding: 10px 6px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-1); color: var(--muted); cursor: pointer; text-align: center; font-size: calc(10px * var(--text-scale)); font-weight: 650; }
.module-choice-grid label:has(input:checked) { border-color: rgba(var(--accent-rgb), .48); background: rgba(var(--accent-rgb), .11); color: var(--text); }
.module-choice-grid input { position: absolute; opacity: 0; pointer-events: none; }
.module-choice-grid .ms { color: var(--accent); font-size: calc(21px * var(--text-scale)); }
.hero-image-controls { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.hero-image-controls .text-button { grid-column: 1 / -1; justify-self: start; }
.upload-button { cursor: pointer; }
.setting-status { width: 100%; color: var(--faint); }

/* Dynamic mobile dock and module drawer ----------------------------- */
@media (max-width: 820px) {
  .mobile-nav { grid-template-columns: repeat(var(--mobile-nav-columns, 6), minmax(0, 1fr)) !important; }
}
.module-drawer { width: min(760px, calc(100vw - 22px)); }
.module-drawer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.module-drawer-grid button { min-height: 130px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 5px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); color: var(--text); cursor: pointer; text-align: left; }
.module-drawer-grid button:hover { border-color: rgba(var(--accent-rgb), .42); background: rgba(var(--accent-rgb), .08); }
.module-drawer-grid .ms { margin-bottom: auto; color: var(--accent); font-size: 28px; }
.module-drawer-grid b { font-size: calc(15px * var(--text-scale)); }
.module-drawer-grid small { color: var(--muted); }

/* On Air: always-visible escape and quick access -------------------- */
.on-air-dock {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 180;
  width: min(720px, calc(100vw - 28px));
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--surface-0) 94%, transparent);
  backdrop-filter: blur(20px) saturate(130%);
  box-shadow: 0 16px 44px rgba(0,0,0,.38);
  transform: translateX(-50%);
}
.on-air-dock[hidden] { display: none !important; }
.on-air-beacon { min-height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: var(--pill); color: var(--text); font-family: var(--mono); font-size: calc(9px * var(--text-scale)); letter-spacing: .12em; white-space: nowrap; }
.on-air-exit { min-height: 44px; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--pill); background: var(--danger); color: white; cursor: pointer; font-weight: 740; white-space: nowrap; }
body.on-air .view-stack { padding-bottom: 108px; }
body.on-air .mobile-nav { display: none; }

/* Mobile Settings + On Air ------------------------------------------ */
@media (max-width: 820px) {
  .settings-command-center { top: calc(70px + env(safe-area-inset-top)); margin-inline: -2px; padding: 9px; border-radius: var(--radius-m); }
  .settings-search { min-height: 48px; }
  .settings-search kbd { display: none; }
  .settings-mobile-nav { top: calc(145px + env(safe-area-inset-top)); margin-top: 0; }
  .settings-section { margin-bottom: 10px; border-radius: var(--radius-m); }
  .settings-section > summary { min-height: 74px; padding: 14px; gap: 11px; }
  .settings-summary-icon { width: 40px; height: 40px; }
  .settings-section-body { padding: 2px 15px 16px; }
  .settings-visual { grid-template-columns: 1fr; min-height: 0; gap: 18px; padding: 16px; }
  .settings-visual > div:last-child { order: -1; }
  .module-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-image-controls { grid-template-columns: 1fr; }
  .hero-image-controls .text-button { grid-column: auto; justify-self: stretch; }
  .module-drawer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-drawer-grid button { min-height: 112px; padding: 15px; }
  body.on-air .mobile-nav { display: grid !important; padding-block: 5px calc(5px + env(safe-area-inset-bottom)); }
  body.on-air .mobile-nav .nav-button { min-height: 48px; }
  body.on-air .mobile-nav .nav-button span:last-child { display: none; }
  body.on-air .app-shell { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.on-air .view-stack { padding-bottom: 146px; }
  .on-air-dock { bottom: calc(64px + env(safe-area-inset-bottom)); width: calc(100vw - 18px); padding: 6px; border-radius: var(--radius-m); overflow-x: auto; scrollbar-width: none; }
  .on-air-dock::-webkit-scrollbar { display: none; }
  .on-air-dock .soft-btn { min-width: 44px; padding-inline: 11px; }
  .on-air-beacon { padding-inline: 9px; }
  .on-air-exit { min-width: max-content; padding-inline: 14px; }
}

@media (max-width: 480px) {
  .settings-mobile-nav { top: calc(143px + env(safe-area-inset-top)); }
  .settings-search-meta span { max-width: 74%; }
  .module-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-drawer-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .module-drawer-grid button { min-height: 102px; }
  .on-air-dock .soft-btn span:not(.ms), .on-air-beacon b { display: none; }
  .on-air-beacon { min-width: 42px; justify-content: center; }
}

/* Respect reduced motion even for the auth micro-animation. */
body[data-motion="reduced"] .auth-pack svg,
body[data-motion="reduced"] .pack-roll,
body[data-motion="reduced"] .pack-strap,
body[data-motion="reduced"] .pack-route,
body[data-motion="reduced"] .pack-dot,
body[data-motion="none"] .auth-pack svg,
body[data-motion="none"] .pack-roll,
body[data-motion="none"] .pack-strap,
body[data-motion="none"] .pack-route,
body[data-motion="none"] .pack-dot { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .auth-pack svg, .pack-roll, .pack-strap, .pack-route, .pack-dot { animation: none !important; }
}

/* =============================================================
   Trailhead5 2.0 — Live Operations refinement layer
   ============================================================= */
:root { --hero-darkness: .55; --motion-spring: cubic-bezier(.2,.85,.25,1); }

/* Cinematic but restrained motion */
.app-view.active { animation: th5-page-in .34s var(--motion-spring) both; }

.nav-button.active .ms, .settings-category-button.active .ms:last-child { animation: th5-waypoint .42s var(--motion-spring); }
.state-pill.live, .status-orb.live { animation: th5-signal-pulse 2.4s ease-in-out infinite; }
.command-tile.running { animation: th5-running 1.1s ease-in-out infinite; }
.command-tile.success::after { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 50% 50%, rgba(61,220,151,.28), transparent 62%); animation:th5-success .7s ease-out both; pointer-events:none; }
@keyframes th5-page-in { from { opacity:0; transform:translateY(10px) scale(.995); } to { opacity:1; transform:none; } }
@keyframes th5-waypoint { 0%{transform:scale(.82)} 60%{transform:scale(1.16)} 100%{transform:scale(1)} }
@keyframes th5-signal-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)} 45%{box-shadow:0 0 0 7px rgba(var(--accent-rgb),.08)} }
@keyframes th5-running { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.1)} }
@keyframes th5-success { from{opacity:1;transform:scale(.9)} to{opacity:0;transform:scale(1.12)} }
body[data-motion="reduced"] .app-view.active { animation-duration:.12s; transform:none; }
body[data-motion="none"] .app-view.active, body[data-motion="none"] .state-pill.live, body[data-motion="none"] .status-orb.live, body[data-motion="none"] .command-tile.running { animation:none !important; }
@media (prefers-reduced-motion: reduce) { .app-view.active, .state-pill.live, .status-orb.live, .command-tile.running { animation:none !important; } * { scroll-behavior:auto !important; } }

/* Full-edge Home image protection: image and overlay share one clipped radius */
.hero-card, body.has-custom-hero .hero-card { isolation:isolate; overflow:hidden; background-image:none !important; }
.hero-card > * { position:relative; z-index:2; }
.hero-card::before { content:""; position:absolute; inset:-4px; z-index:0; border-radius:inherit; background-image:var(--custom-hero, var(--hero-image)); background-size:cover; background-position:center; transform:scale(1.02); pointer-events:none; }
.hero-card::after { content:""; position:absolute; inset:-5px; z-index:1; border-radius:inherit; pointer-events:none; background:
  linear-gradient(90deg, rgba(7,10,8,calc(var(--hero-darkness) + .18)) 0%, rgba(7,10,8,calc(var(--hero-darkness) * .72)) 44%, rgba(7,10,8,calc(var(--hero-darkness) * .45)) 72%, rgba(7,10,8,calc(var(--hero-darkness) + .08)) 100%),
  linear-gradient(180deg, rgba(7,10,8,calc(var(--hero-darkness) * .72)) 0%, transparent 34%, rgba(7,10,8,calc(var(--hero-darkness) + .22)) 100%),
  radial-gradient(ellipse at center, transparent 35%, rgba(5,8,6,calc(var(--hero-darkness) * .7)) 100%); }
body[data-theme="trail-light"] .hero-card::after { background:linear-gradient(90deg, rgba(19,25,18,.78), rgba(19,25,18,.35) 66%, rgba(19,25,18,.56)),linear-gradient(180deg,rgba(10,14,10,.35),transparent 40%,rgba(10,14,10,.66)); }
body[data-scenic="minimal"] .hero-card::before { display:none; }

/* Live command deck */
.deck-live-bar { min-height:64px; display:flex; align-items:center; gap:14px; margin-bottom:12px; padding:10px 14px; border:1px solid rgba(255,93,110,.28); border-radius:var(--radius-m); background:linear-gradient(100deg,rgba(255,93,110,.10),var(--surface-1)); box-shadow:var(--shadow-soft); }
.deck-live-bar[hidden] { display:none !important; }
.deck-live-bar > span:nth-child(2) { min-width:0; display:grid; gap:2px; }
.deck-live-bar small { color:var(--muted); font-family:var(--mono); font-size:calc(9px * var(--text-scale)); letter-spacing:.11em; }
.deck-live-bar b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.deck-live-count { margin-left:auto; color:var(--muted); white-space:nowrap; }
.deck-utility-row { display:flex; align-items:center; gap:10px; margin:10px 0 13px; }
.deck-search { min-height:44px; flex:1; display:flex; align-items:center; gap:9px; padding:0 13px; border:1px solid var(--line); border-radius:var(--pill); background:var(--surface-1); }
.deck-search input { width:100%; border:0; outline:0; background:transparent; color:var(--text); }
.deck-utility-row select { min-height:44px; max-width:190px; }
body.stream-live[data-live-deck-header="compact"] #view-deck > .section-toolbar { display:none; }
body.stream-live[data-live-deck-header="hidden"] #view-deck > .section-toolbar, body.stream-live[data-live-deck-header="hidden"] #deckLiveBar { display:none !important; }
body.stream-live[data-live-deck-header="full"] #deckLiveBar { display:none !important; }
body.stream-live #view-deck .profile-row { margin-top:0; }
body.on-air #view-deck .deck-meta { display:none; }

/* Mobile deck column choices */
@media (max-width: 720px) {
  #view-deck { padding-bottom:24px; }
  #view-deck .profile-row { position:sticky; top:calc(70px + env(safe-area-inset-top)); z-index:23; padding:7px 0; background:color-mix(in srgb,var(--surface-0) 92%,transparent); backdrop-filter:blur(16px); }
  #view-deck .command-grid { grid-template-columns:repeat(var(--deck-mobile-columns, 2),minmax(0,1fr)); gap:9px; }
  body[data-deck-columns="2"] #view-deck .command-grid { --deck-mobile-columns:2; }
  body[data-deck-columns="3"] #view-deck .command-grid { --deck-mobile-columns:3; gap:7px; }
  #view-deck .command-tile { grid-column:auto !important; min-height:132px; padding:12px; }
  #view-deck .command-tile.size-full { grid-column:1 / -1 !important; }
  body[data-deck-columns="3"] #view-deck .command-tile { min-height:116px; padding:10px; border-radius:15px; }
  body[data-deck-columns="3"] #view-deck .tile-title { font-size:calc(14px * var(--text-scale)); line-height:1.08; }
  body[data-deck-columns="3"] #view-deck .tile-icon { width:34px; height:34px; }
  body[data-deck-columns="3"] #view-deck .tile-sub { font-size:calc(9px * var(--text-scale)); -webkit-line-clamp:1; }
  body[data-deck-columns="3"] #view-deck .tile-type { font-size:calc(8px * var(--text-scale)); }
  body[data-tile-detail="status"] #view-deck .tile-type, body[data-tile-detail="status"] #view-deck .tile-sub { display:none; }
  body[data-tile-detail="title"] #view-deck .tile-type, body[data-tile-detail="title"] #view-deck .tile-sub, body[data-tile-detail="title"] #view-deck .tile-status { display:none; }
  .deck-utility-row { flex-wrap:wrap; }
  .deck-utility-row select { flex:1 1 140px; max-width:none; }
}

/* Settings: Android-inspired hierarchy rather than an endless form */
.settings-grid.settings-paged { grid-template-columns:minmax(260px, .72fr) minmax(0, 1.55fr); gap:18px; }
.settings-category-rail { position:sticky; top:90px; display:grid; gap:8px; align-self:start; }
.settings-rail-intro { padding:18px 16px 12px; }
.settings-rail-intro small { color:var(--accent); font-family:var(--mono); letter-spacing:.12em; }
.settings-rail-intro b { display:block; margin-top:5px; font-size:calc(20px * var(--text-scale)); }
.settings-rail-intro p { margin:6px 0 0; color:var(--muted); font-size:calc(11px * var(--text-scale)); }
.settings-category-button { width:100%; min-height:72px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px; border:1px solid transparent; border-radius:var(--radius-m); background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.settings-category-button:hover { background:var(--surface-1); }
.settings-category-button.active { border-color:rgba(var(--accent-rgb),.32); background:color-mix(in srgb,var(--accent) 9%,var(--surface-1)); }
.settings-category-button > span:nth-child(2) { min-width:0; display:grid; gap:3px; }
.settings-category-button b { font-size:calc(14px * var(--text-scale)); }
.settings-category-button small { color:var(--muted); font-size:calc(10px * var(--text-scale)); line-height:1.35; }
.settings-category-button[hidden] { display:none !important; }
.settings-detail-empty { min-height:340px; display:grid; place-items:center; align-content:center; gap:9px; padding:40px; border:1px dashed var(--line-strong); border-radius:var(--radius-l); color:var(--muted); text-align:center; }
.settings-detail-empty .ms { font-size:48px; color:var(--accent); }
.settings-detail-empty h3,.settings-detail-empty p { margin:0; }
.settings-paged .settings-section { display:none; grid-column:2; margin:0; }
.settings-paged .settings-section.settings-page-active { display:block; animation:th5-settings-page .3s var(--motion-spring) both; }
.settings-paged .settings-section > summary { cursor:default; }
.settings-paged .settings-section > summary .settings-chevron { display:none; }
.settings-page-back { display:none; align-items:center; gap:7px; margin:10px 12px 0; padding:8px 10px; border:0; background:transparent; color:var(--accent); cursor:pointer; }
.settings-flow-launch { display:flex; align-items:center; gap:18px; margin:14px 0 8px; padding:16px; border:1px solid rgba(var(--accent-rgb),.25); border-radius:var(--radius-m); background:linear-gradient(120deg,rgba(var(--accent-rgb),.10),transparent),var(--surface-1); }
.settings-flow-launch > span { min-width:0; flex:1; display:grid; gap:4px; }
.settings-flow-launch small { color:var(--accent); font-family:var(--mono); letter-spacing:.1em; }
@keyframes th5-settings-page { from{opacity:0;transform:translateX(12px)} to{opacity:1;transform:none} }

/* Full-page guided settings flows */
.settings-flow-dialog { width:min(760px,calc(100vw - 24px)); max-width:760px; height:min(800px,calc(100dvh - 30px)); padding:0; border:1px solid var(--line-strong); border-radius:var(--radius-xl); background:var(--surface-0); color:var(--text); box-shadow:0 34px 100px rgba(0,0,0,.55); overflow:hidden; }
.settings-flow-dialog::backdrop { background:rgba(4,6,5,.72); backdrop-filter:blur(10px); }
.settings-flow-shell { height:100%; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; }
.settings-flow-head { min-height:82px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line); }
.settings-flow-head > span:nth-child(2) { display:grid; gap:3px; }
.settings-flow-head small { color:var(--accent); font-family:var(--mono); letter-spacing:.11em; }
.settings-flow-head h2 { margin:0; font-size:calc(21px * var(--text-scale)); }
.settings-flow-count { color:var(--muted); font-family:var(--mono); font-size:calc(10px * var(--text-scale)); }
.settings-flow-progress { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:10px 18px 0; }
.settings-flow-progress span { height:4px; border-radius:4px; background:var(--surface-3); transition:background .2s,transform .2s; }
.settings-flow-progress span.active { background:var(--accent); transform:scaleY(1.2); }
.settings-flow-content { min-height:0; overflow:auto; padding:26px clamp(18px,5vw,52px) 30px; }
.settings-flow-content h3 { margin:7px 0 8px; font-size:calc(28px * var(--text-scale)); line-height:1.08; }
.settings-flow-content > small { color:var(--accent); font-family:var(--mono); letter-spacing:.12em; }
.settings-flow-content > p { max-width:620px; color:var(--muted); }
.settings-flow-actions { min-height:76px; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:color-mix(in srgb,var(--surface-0) 94%,transparent); backdrop-filter:blur(16px); }
.flow-illustration { position:relative; width:150px; height:112px; display:grid; place-items:center; margin:2px auto 22px; border-radius:36px; background:linear-gradient(145deg,rgba(var(--accent-rgb),.18),transparent),var(--surface-2); overflow:hidden; }
.flow-illustration > .ms { position:relative; z-index:2; font-size:52px; color:var(--accent); }
.flow-illustration i { position:absolute; width:80px; height:80px; border:1px solid rgba(var(--accent-rgb),.28); border-radius:50%; animation:th5-orbit 4s linear infinite; }
.flow-illustration i:nth-child(3){width:118px;height:118px;animation-direction:reverse;animation-duration:6s}
@keyframes th5-orbit{to{transform:rotate(360deg)}}
.flow-choice-list,.flow-toggle-list { display:grid; gap:9px; margin-top:20px; }
.flow-choice-list label,.flow-toggle-list label { min-height:68px; display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface-1); cursor:pointer; }
.flow-choice-list input { accent-color:var(--accent); }
.flow-choice-list label:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface-1)); }
.flow-choice-list label > span:last-child { display:grid; gap:3px; }
.flow-choice-list small,.flow-toggle-list small { color:var(--muted); }
.flow-module-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:20px; }
.flow-module-grid label { min-height:112px; display:grid; place-items:center; align-content:center; gap:7px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface-1); text-align:center; cursor:pointer; }
.flow-module-grid label:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface-1))}
.flow-module-grid input{position:absolute;opacity:0}.flow-module-grid .ms{font-size:28px;color:var(--accent)}
.flow-phone-preview { width:min(360px,100%); margin:24px auto 0; padding:10px; border:8px solid #090b09; border-radius:30px; background:var(--surface-2); box-shadow:var(--shadow); }
.flow-phone-preview > div { min-height:250px; display:grid; align-content:start; gap:14px; padding:20px; border-radius:17px; background:linear-gradient(145deg,rgba(var(--accent-rgb),.12),transparent),var(--surface-0); }
.flow-phone-preview i { height:52px; border-radius:var(--radius-s); background:var(--surface-2); }
.flow-phone-preview nav { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; padding-top:8px; }
.flow-phone-preview nav b { display:grid; place-items:center; gap:2px; font-size:8px; color:var(--muted); }
.flow-deck-choice { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:20px; }
.flow-deck-choice label { display:grid; gap:8px; padding:16px; border:1px solid var(--line); border-radius:var(--radius-l); background:var(--surface-1); cursor:pointer; }
.flow-deck-choice label:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.12)}
.mini-deck { display:grid; gap:6px; min-height:170px; padding:10px; border-radius:15px; background:#111510; }.mini-deck.two{grid-template-columns:repeat(2,1fr)}.mini-deck.three{grid-template-columns:repeat(3,1fr)}.mini-deck i{border-radius:var(--radius-xs);background:linear-gradient(145deg,rgba(var(--accent-rgb),.34),transparent),#2b3028}
.flow-exit-preview { display:flex; align-items:center; gap:10px; margin-top:24px; padding:10px; border:1px solid var(--line); border-radius:var(--pill); background:var(--surface-1); }.flow-exit-preview>span{display:flex;align-items:center;gap:8px}.flow-exit-preview button{margin-left:auto;padding:10px 14px;border:0;border-radius:var(--pill);background:var(--danger);color:white}
.flow-callout { display:flex; gap:12px; margin:18px 0; padding:14px; border:1px solid rgba(var(--accent-rgb),.22); border-radius:var(--radius-m); background:rgba(var(--accent-rgb),.06); }.flow-callout>span:last-child{display:grid;gap:4px}.flow-callout small{color:var(--muted)}
.flow-link-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.setup-checklist.large { font-size:calc(14px * var(--text-scale)); line-height:1.65; }
.belabox-setup-step { display:none; }.belabox-setup-step.active { display:block; animation:th5-page-in .3s var(--motion-spring); }
.belabox-test-preview { display:grid; gap:8px; margin-top:20px; }.belabox-test-preview span{display:flex;justify-content:space-between;gap:20px;padding:13px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-1)}

/* BELABOX monitor */
.belabox-readonly-banner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; margin-bottom:16px; padding:14px 16px; border:1px solid rgba(111,214,255,.24); border-radius:var(--radius-m); background:linear-gradient(100deg,rgba(111,214,255,.08),transparent),var(--surface-1); }
.belabox-readonly-banner>.ms{font-size:28px;color:var(--cyan)}.belabox-readonly-banner>div{display:grid;gap:3px}.belabox-readonly-banner small{color:var(--muted)}
.belabox-status-hero { display:grid; grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr); gap:16px; margin-bottom:16px; padding:20px; border:1px solid var(--line-strong); border-radius:var(--radius-l); background:linear-gradient(120deg,rgba(111,214,255,.09),transparent 48%),var(--surface-1); box-shadow:var(--shadow-soft); }
.belabox-status-main { display:flex; align-items:center; gap:16px; }.belabox-status-main>span:last-child{display:grid;gap:4px}.belabox-status-main h3,.belabox-status-main p{margin:0}.belabox-status-main p{color:var(--muted)}
.status-orb { width:68px;height:68px;display:grid;place-items:center;border-radius:24px;background:var(--surface-3);color:var(--muted);font-size:30px}.status-orb.live{background:rgba(61,220,151,.14);color:var(--emerald)}
.belabox-metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.belabox-metric-grid>span,.belabox-producer-summary>span{display:grid;gap:5px;padding:13px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-2)}.belabox-metric-grid small,.belabox-producer-summary small{color:var(--muted);font-family:var(--mono);font-size:9px;letter-spacing:.08em}.belabox-metric-grid b{font-size:calc(16px * var(--text-scale))}
.belabox-page-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:16px}.belabox-page-grid .span-2{grid-column:1/-1}.panel-copy{color:var(--muted);line-height:1.55}
.belabox-link-list { display:grid;gap:8px}.belabox-link-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-1)}.belabox-link-row>span:nth-child(2),.belabox-link-row>span:nth-child(3){display:grid;gap:2px}.belabox-link-row>span:nth-child(3){text-align:right}.belabox-link-row small{color:var(--muted)}.link-state{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-s);background:var(--surface-3);color:var(--muted)}.link-state.connected{background:rgba(61,220,151,.12);color:var(--emerald)}
.belabox-producer-summary { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:14px}.belabox-readonly-inline{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:11px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-1)}.belabox-readonly-inline>span:nth-child(2){display:grid}.belabox-readonly-inline small{color:var(--muted)}
.belabox-settings-preview .belabox-preview-orb{width:84px;height:84px;display:grid;place-items:center;border-radius:var(--radius-xl);background:rgba(111,214,255,.11);color:var(--cyan)}.belabox-settings-preview .ms{font-size:42px}
.inline-actions{display:flex;gap:8px;flex-wrap:wrap}
.disabled[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* On Air keeps navigation available unless explicitly hidden */
@media (max-width: 920px) { body.on-air[data-on-air-nav="visible"] .mobile-nav { display:grid !important; } body.on-air[data-on-air-nav="hidden"] .mobile-nav { display:none !important; } }
body.on-air[data-on-air-nav="hidden"] .app-shell { padding-bottom:0; }

/* Mobile full-page settings and dialogs */
@media (max-width: 760px) {
  .settings-grid.settings-paged { display:block; }
  .settings-category-rail { position:static; display:grid; }
  .settings-paged.has-active-page .settings-category-rail { display:none; }
  .settings-paged .settings-section { display:none; width:100%; border-radius:0; border-inline:0; box-shadow:none; }
  .settings-paged .settings-section.settings-page-active { display:block; }
  .settings-page-back { display:inline-flex; }
  .settings-paged .settings-section > summary { min-height:76px; padding-top:8px; }
  .settings-detail-empty { display:none !important; }
  .settings-flow-launch { align-items:stretch; flex-direction:column; }
  .settings-flow-dialog { width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; border:0; border-radius:0; }
  .settings-flow-head { padding-top:calc(12px + env(safe-area-inset-top)); }
  .settings-flow-content { padding:22px 17px 28px; }
  .settings-flow-content h3 { font-size:calc(25px * var(--text-scale)); }
  .flow-module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .flow-deck-choice { grid-template-columns:1fr; }
  .settings-flow-actions { grid-template-columns:auto 1fr auto auto; }
  .belabox-readonly-banner { grid-template-columns:auto minmax(0,1fr); }.belabox-readonly-banner>a{grid-column:1/-1;width:max-content}
  .belabox-status-hero { grid-template-columns:1fr;padding:15px}.belabox-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .belabox-page-grid{grid-template-columns:1fr}.belabox-page-grid .span-2{grid-column:auto}.belabox-producer-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .belabox-readonly-inline{grid-template-columns:auto minmax(0,1fr)}.belabox-readonly-inline .soft-btn,.belabox-readonly-inline .text-link{grid-column:1/-1}
  .deck-live-bar{position:sticky;top:calc(70px + env(safe-area-inset-top));z-index:25;gap:9px}.deck-live-bar .deck-live-count{display:none}.deck-live-bar .soft-btn{min-width:44px;padding-inline:10px}.deck-live-bar .soft-btn span:last-child{display:none}
}

/* Trailhead5 2.0 final polish -------------------------------------- */
.dialog-open, dialog[open] { animation: th5-dialog-in .24s var(--motion-spring) both; }
@keyframes th5-dialog-in { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:none; } }
.on-air-dock:not([hidden]) { animation: th5-dock-in .34s var(--motion-spring) both; }
@keyframes th5-dock-in { from { opacity:0; transform:translate(-50%, 18px) scale(.96); } to { opacity:1; transform:translate(-50%, 0) scale(1); } }
.belabox-link-row { animation: th5-row-in .28s var(--motion-spring) both; }
.belabox-link-row:nth-child(2) { animation-delay:.035s; }.belabox-link-row:nth-child(3) { animation-delay:.07s; }.belabox-link-row:nth-child(4) { animation-delay:.105s; }
@keyframes th5-row-in { from { opacity:0; transform:translateX(8px); } to { opacity:1; transform:none; } }
.settings-category-button.active { box-shadow: inset 3px 0 0 var(--accent); }
.settings-category-button:active, .nav-button:active, .command-tile:active { transform:scale(.985); }
.belabox-editor-notice, .editor-safety-banner { display:flex; align-items:flex-start; gap:12px; margin:12px 0; padding:13px 14px; border:1px solid rgba(var(--accent-rgb),.23); border-radius:var(--radius-m); background:linear-gradient(110deg,rgba(var(--accent-rgb),.08),transparent),var(--surface-1); }
.belabox-editor-notice > span:last-child, .editor-safety-banner > span:last-child { display:grid; gap:3px; }
.belabox-editor-notice small, .editor-safety-banner small { color:var(--muted); line-height:1.45; }
.belabox-editor-notice > .ms, .editor-safety-banner > .ms { color:var(--accent); font-size:24px; }
.editor-safety-banner[data-level="high-risk"] { border-color:rgba(255,93,110,.34); background:rgba(255,93,110,.07); }.editor-safety-banner[data-level="high-risk"] > .ms { color:var(--danger); }
.editor-advanced { margin-top:12px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface-1); overflow:hidden; }
.editor-advanced > summary { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; cursor:pointer; list-style:none; }
.editor-advanced > summary::-webkit-details-marker { display:none; }.editor-advanced > summary > span:first-child { display:grid; gap:3px; }.editor-advanced > summary small { color:var(--muted); }.editor-advanced > summary > .ms { transition:transform .2s var(--motion-spring); }.editor-advanced[open] > summary > .ms { transform:rotate(180deg); }.editor-advanced > .form-grid { padding:0 14px 14px; }

body[data-motion="reduced"] :is(dialog[open], .on-air-dock:not([hidden]), .belabox-link-row),
body[data-motion="none"] :is(dialog[open], .on-air-dock:not([hidden]), .belabox-link-row) { animation:none !important; }
@media (prefers-reduced-motion: reduce) { dialog[open], .on-air-dock:not([hidden]), .belabox-link-row { animation:none !important; } }

@media (max-width:760px) {
  #buttonDialog { width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; border-radius:0; border:0; }
  #buttonDialog .sheet-shell { height:100%; max-height:none; border-radius:0; }
  #buttonDialog .sheet-head { padding-top:calc(14px + env(safe-area-inset-top)); }
  #buttonDialog .sheet-footer { padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   Trailhead5 2.1 — Interface Refinement
   Dark theme expansion, quieter mobile chrome, focused Settings pages,
   a richer account hub, and consistent pill filtering.
   ===================================================================== */

/* Brand asset system */
.brand-mark { padding:0; overflow:hidden; background:transparent; box-shadow:none; }
.brand-mark::after { display:none; }
.brand-mark img, .mobile-logo img, .mini-logo img, .orbit-core img { width:100%; height:100%; display:block; object-fit:contain; }
.brand-mark.large { width:54px; height:54px; }
.mobile-logo { padding:0; background:transparent; }
.mini-logo { overflow:hidden; padding:0; background:transparent; }
.orbit-core { overflow:hidden; background:color-mix(in srgb,var(--surface-2) 78%,transparent); }
.orbit-core img { width:72%; height:72%; margin:auto; }

/* Additional dark themes */
body[data-theme="charcoal"] {
  --bg:#0d0f10; --surface-0:#121415; --surface-1:#181a1b; --surface-2:#1f2223;
  --surface-3:#292c2e; --surface-4:#34383a;
  --text:#f4f5f2; --muted:#a7ada8; --faint:#737a76;
  --line:rgba(244,245,242,.085); --line-strong:rgba(244,245,242,.17);
  --accent:#d7f24b; --accent-rgb:215,242,75; --on-accent:#171b06;
  --signal:#55dfa0; --signal-rgb:85,223,160;
  --hero-image:url("assets/trailhead5-basecamp.svg");
  color-scheme:dark;
}
body[data-theme="midnight"] {
  --bg:#070b14; --surface-0:#0c1220; --surface-1:#111a2a; --surface-2:#172238;
  --surface-3:#202d48; --surface-4:#2b3a59;
  --text:#f3f6ff; --muted:#9caac3; --faint:#65728b;
  --line:rgba(214,225,255,.085); --line-strong:rgba(214,225,255,.18);
  --accent:#84b8ff; --accent-rgb:132,184,255; --on-accent:#07111f;
  --signal:#63e4bd; --signal-rgb:99,228,189;
  --violet:#b9a7ff; --cyan:#78d9ff; --amber:#ffc874;
  --shadow:0 28px 70px rgba(0,0,0,.54); --shadow-soft:0 12px 30px rgba(0,0,0,.3);
  --hero-image:url("assets/trailhead5-aurora.svg");
  color-scheme:dark;
}
body[data-theme="midnight"] .app-topbar,
body[data-theme="midnight"] .mobile-nav { background:color-mix(in srgb,#0b1120 92%,transparent); }
body[data-theme="midnight"] .hero-card { box-shadow:inset 0 0 100px rgba(86,124,255,.08),var(--shadow-soft); }

/* Visual theme chooser */
.theme-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:4px 0 18px; }
.theme-choice-grid button { min-width:0; display:grid; gap:7px; text-align:left; padding:10px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface-1); color:var(--text); cursor:pointer; transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.theme-choice-grid button:hover { transform:translateY(-2px); border-color:var(--line-strong); }
.theme-choice-grid button.active { border-color:var(--accent); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.13); }
.theme-choice-grid button b { font-size:calc(13px * var(--text-scale)); }
.theme-choice-grid button small { color:var(--muted); font-size:calc(9.5px * var(--text-scale)); }
.theme-mini { position:relative; min-height:72px; overflow:hidden; display:grid; grid-template-columns:30% 1fr; gap:5px; padding:7px; border-radius:13px; background:#121411; }
.theme-mini::before { content:""; border-radius:8px; background:#232722; }
.theme-mini i { grid-column:2; display:block; border-radius:7px; background:#2c312b; }
.theme-mini i:first-of-type { background:#d7f24b; }
.theme-mini.charcoal { background:#0d0f10; }.theme-mini.charcoal::before{background:#181a1b}.theme-mini.charcoal i{background:#292c2e}.theme-mini.charcoal i:first-of-type{background:#d7f24b}
.theme-mini.midnight { background:#070b14; }.theme-mini.midnight::before{background:#111a2a}.theme-mini.midnight i{background:#202d48}.theme-mini.midnight i:first-of-type{background:#84b8ff}
.theme-mini.summit { background:#101413; }.theme-mini.summit::before{background:#1a201d}.theme-mini.summit i{background:#2a322d}.theme-mini.summit i:first-of-type{background:#4ce09a}
.theme-mini.aurora { background:#0f131a; }.theme-mini.aurora::before{background:#191f2a}.theme-mini.aurora i{background:#293141}.theme-mini.aurora i:first-of-type{background:#6fd6ff}
.theme-mini.light { background:#e9ebe2; }.theme-mini.light::before{background:#fff}.theme-mini.light i{background:#dfe3d6}.theme-mini.light i:first-of-type{background:#5c7a14}

/* Deck search and action filter */
.deck-utility-row { position:relative; }
.deck-search-toggle, .deck-info-button { display:none; flex:0 0 auto; }
.deck-search-close { display:none; width:34px; height:34px; place-items:center; padding:0; border:0; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; }
.select-pill { min-height:44px; display:inline-flex; align-items:center; gap:7px; padding:0 12px; border:1px solid var(--line); border-radius:var(--pill); background:var(--surface-1); color:var(--muted); }
.select-pill > .ms:first-child { font-size:19px; color:var(--accent); }
.select-pill select { min-height:42px !important; max-width:160px; padding:0 2px !important; border:0 !important; outline:0; appearance:none; background:transparent !important; color:var(--text); cursor:pointer; }
.select-pill .select-chevron { font-size:18px; pointer-events:none; }
.deck-filter-pill:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12); }

/* Bottom information sheet */
.sheet-dialog { width:min(620px,calc(100vw - 24px)); max-height:min(82dvh,720px); padding:0; border:1px solid var(--line-strong); border-radius:var(--radius-xl); background:var(--surface-0); color:var(--text); box-shadow:var(--shadow); overflow:hidden; }
.sheet-dialog::backdrop { background:rgba(3,5,5,.68); backdrop-filter:blur(5px); }
.sheet-shell { display:grid; max-height:inherit; }
.sheet-handle { display:none; width:42px; height:5px; margin:9px auto 0; border-radius:var(--pill); background:var(--surface-4); }
.sheet-shell > header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px 14px; border-bottom:1px solid var(--line); }
.sheet-shell > header span:first-child { display:grid; gap:3px; }.sheet-shell h2{margin:0;font-size:calc(22px * var(--text-scale))}.sheet-shell header small{color:var(--accent);font-family:var(--mono);letter-spacing:.12em}
.sheet-content { padding:18px 20px 22px; overflow:auto; }
.info-list { display:grid; gap:10px; margin-bottom:18px; }
.info-list > span { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; padding:13px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface-1); }
.info-list > span > .ms { color:var(--accent); font-size:24px; }.info-list > span > span:last-child{display:grid;gap:3px}.info-list small{color:var(--muted)}

/* Cleaner Settings search */
.settings-search { position:relative; }
.settings-search-clear { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:var(--surface-3); color:var(--muted); cursor:pointer; }
.settings-search-clear[hidden] { display:none; }
.settings-search-meta { display:none !important; }

/* Rich Account hub */
.account-settings-hub { display:grid; gap:16px; }
.account-identity-hero { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:15px; padding:18px; border:1px solid var(--line-strong); border-radius:var(--radius-l); background:linear-gradient(115deg,rgba(var(--accent-rgb),.09),transparent 52%),var(--surface-1); }
.account-hero-avatar { width:64px; height:64px; border-radius:var(--radius-l); }.account-identity-hero>span:nth-child(2){display:grid;gap:2px}.account-identity-hero small{color:var(--accent);font-family:var(--mono);letter-spacing:.11em}.account-identity-hero h3,.account-identity-hero p{margin:0}.account-identity-hero p{color:var(--muted)}
.account-hub-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.account-hub-card { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:12px; padding:15px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface-1); }
.account-hub-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:var(--radius-s); background:rgba(var(--accent-rgb),.09); color:var(--accent); }
.account-hub-card > div:nth-child(2) { display:grid; gap:3px; min-width:0; }.account-hub-card small{color:var(--muted);font-family:var(--mono);font-size:9px;letter-spacing:.08em}.account-hub-card p{margin:0;color:var(--muted);font-size:calc(11px * var(--text-scale));line-height:1.48}.account-hub-card b{font-size:calc(14px * var(--text-scale))}
.account-hub-actions, .account-hub-card > button { grid-column:1/-1; }.account-hub-actions{display:flex;gap:8px;flex-wrap:wrap}.account-hub-card.danger-zone{border-color:rgba(255,93,110,.2)}.account-hub-card.danger-zone .account-hub-icon{background:rgba(255,93,110,.09);color:var(--danger)}

@media (max-width: 720px) {
  /* Mobile Deck: compact default chrome, expandable search */
  #view-deck > .section-toolbar { align-items:flex-start; }
  #view-deck > .section-toolbar p, #view-deck .deck-meta { display:none; }
  #view-deck > .section-toolbar .toolbar-actions { margin-top:4px; }
  .deck-search-toggle, .deck-info-button { display:grid; }
  .deck-utility-row { min-height:46px; gap:8px; }
  .deck-utility-row .deck-search { display:none; }
  .deck-utility-row.search-active .deck-search { position:absolute; inset:0; z-index:5; display:flex; min-width:100%; background:var(--surface-0); border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12),0 12px 30px rgba(0,0,0,.28); }
  .deck-utility-row.search-active .deck-search-close { display:grid; }
  .deck-utility-row.search-active > :not(.deck-search) { visibility:hidden; pointer-events:none; }
  .deck-filter-pill { min-width:0; flex:1 1 auto; justify-content:center; }
  .deck-filter-pill select { max-width:112px; width:auto; }
  .deck-info-button { margin-left:auto; }
  .deck-search-toggle, .deck-info-button { min-width:44px; min-height:44px; }
  .deck-info-dialog { width:100vw; max-width:none; max-height:86dvh; margin:auto 0 0; border-radius:var(--radius-xl) var(--radius-xl) 0 0; border-inline:0; border-bottom:0; }
  .sheet-handle { display:block; }

  /* Settings category pages use the full mobile content canvas. */
  #view-settings.settings-detail-open > .settings-toolbar,
  #view-settings.settings-detail-open > .settings-command-center,
  #view-settings.settings-detail-open > .settings-mobile-nav { display:none; }
  #view-settings.settings-detail-open { margin-inline:calc(var(--page-gutter) * -1); }
  #view-settings.settings-detail-open .settings-grid { width:100%; }
  #view-settings.settings-detail-open .settings-section { min-height:calc(100dvh - 70px - env(safe-area-inset-top) - 76px); padding-inline:var(--page-gutter); background:var(--bg); }
  #view-settings.settings-detail-open .settings-section-body { padding-inline:0; }
  #view-settings.settings-detail-open .settings-page-back { position:sticky; top:calc(70px + env(safe-area-inset-top)); z-index:20; width:max-content; margin:0 0 8px; background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(14px); }
  .settings-command-center { margin-bottom:14px; }
  .settings-search kbd { display:none; }
  .theme-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .account-hub-grid { grid-template-columns:1fr; }
  .account-identity-hero { grid-template-columns:auto minmax(0,1fr); }.account-identity-hero>.state-pill{grid-column:1/-1;width:max-content}
}

@media (min-width:721px) {
  .deck-info-button { display:none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-choice-grid button:hover { transform:none; }
}
body[data-motion="none"] .theme-choice-grid button,
body[data-motion="none"] .deck-utility-row.search-active .deck-search { transition:none !important; animation:none !important; }

/* =====================================================================
   Trailhead5 2.2 — Moderator Command Center
   ===================================================================== */

/* Restore the original Trailhead5 trail-marker logo system. */
.brand-mark { position:relative !important; width:42px !important; height:42px !important; display:grid !important; place-items:center !important; padding:0 !important; flex:0 0 auto; border:1px solid var(--line-strong) !important; border-radius:var(--radius-s) !important; background:var(--surface-2) !important; color:var(--accent) !important; box-shadow:none !important; overflow:hidden; }
.brand-mark::after { display:block !important; content:""; position:absolute; left:8px; right:8px; bottom:6px; height:4px; border-radius:2px; background:var(--accent); }
.brand-mark .ms { display:none; }
.brand-mark.large { width:52px !important; height:52px !important; border-radius:var(--radius-m) !important; }
.brand-mark.large::after { left:10px; right:10px; bottom:8px; height:5px; }
.brand-five { position:relative; z-index:2; margin-top:-5px; font-size:calc(21px * var(--text-scale)); font-weight:820; font-stretch:116%; line-height:1; }
.brand-mark.large .brand-five { font-size:calc(26px * var(--text-scale)); }
.mini-logo { width:32px !important; height:32px !important; display:grid !important; place-items:center !important; padding:0 !important; border-radius:var(--radius-xs) !important; background:var(--accent) !important; color:var(--on-accent) !important; font-weight:820; overflow:hidden; }
.mobile-logo { display:none; width:40px !important; height:40px !important; place-items:center; padding:0 !important; border-radius:var(--radius-s) !important; background:var(--accent) !important; color:var(--on-accent) !important; font-size:calc(11px * var(--text-scale)); font-weight:820; font-stretch:112%; white-space:nowrap; overflow:hidden; }
.orbit-core { display:grid; place-items:center; color:var(--accent); font-size:28px; font-weight:850; }

.mode-picker-wrap { min-height:44px; display:inline-flex; align-items:center; gap:7px; padding:0 11px; border:1px solid var(--line); border-radius:var(--pill); background:var(--surface-1); color:var(--muted); }
.mode-picker-wrap > .ms { color:var(--accent); font-size:19px; }
.mode-picker-wrap select { min-height:42px; max-width:150px; padding:0 4px; border:0; outline:0; background:transparent; color:var(--text); font-weight:680; cursor:pointer; }
.mode-picker-wrap:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12); }

.mod-center-toolbar { margin-bottom:14px; }
.mod-mode-banner, .mod-live-banner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; margin-bottom:12px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface-1); }
.mod-mode-banner { border-color:rgba(var(--accent-rgb),.28); background:linear-gradient(115deg,rgba(var(--accent-rgb),.09),transparent 55%),var(--surface-1); }
.mod-mode-signal { width:44px; height:44px; display:grid; place-items:center; border-radius:15px; background:var(--accent); color:var(--on-accent); }
.mod-mode-banner > div, .mod-live-banner > div { min-width:0; display:grid; gap:3px; }
.mod-mode-banner small { color:var(--accent); font-family:var(--mono); font-size:9px; letter-spacing:.12em; }
.mod-mode-banner span:not(.ms), .mod-live-banner small { color:var(--muted); }
.mod-mode-banner:not(.active) #modModeExit { display:none; }
.mod-live-banner > .ms { width:42px; height:42px; display:grid; place-items:center; border-radius:var(--radius-s); background:var(--surface-3); color:var(--muted); }
.mod-live-banner.good { border-color:rgba(61,220,151,.28); background:linear-gradient(110deg,rgba(61,220,151,.08),transparent),var(--surface-1); }
.mod-live-banner.good > .ms { background:rgba(61,220,151,.13); color:var(--emerald); }
.mod-live-banner.bad { border-color:rgba(255,93,110,.25); }

.mod-center-tabs { position:sticky; top:70px; z-index:24; display:flex; gap:7px; margin:0 0 14px; padding:7px; border:1px solid var(--line); border-radius:var(--pill); background:color-mix(in srgb,var(--surface-0) 92%,transparent); backdrop-filter:blur(16px); overflow-x:auto; scrollbar-width:none; }
.mod-center-tabs::-webkit-scrollbar { display:none; }
.mod-center-tabs button { position:relative; min-height:42px; flex:1 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 14px; border-radius:var(--pill); color:var(--muted); cursor:pointer; transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease); }
.mod-center-tabs button:hover { color:var(--text); background:var(--surface-2); }
.mod-center-tabs button.active { background:var(--accent); color:var(--on-accent); box-shadow:0 8px 22px rgba(var(--accent-rgb),.18); }
.mod-center-tabs .tab-count { min-width:20px; height:20px; display:grid; place-items:center; padding:0 5px; border-radius:var(--pill); background:rgba(255,255,255,.12); font-size:10px; font-weight:800; }
.mod-center-tabs .tab-count.alert:not(:empty) { background:var(--danger); color:white; }
.mod-center-stage { min-height:520px; }
.mod-tab-panel { display:none; }
.mod-tab-panel.active { display:block; animation:th5-mod-panel-in .28s var(--motion-spring) both; }
@keyframes th5-mod-panel-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.mod-chat-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr); gap:14px; align-items:start; }
.mod-chat-grid .chat-embed-card { min-height:660px; }
.mod-chat-grid .chat-embed { min-height:520px; }
.mod-session-chat { min-height:520px; max-height:65vh; overflow:auto; display:flex; flex-direction:column-reverse; gap:6px; padding:10px; background:var(--surface-0); }
.mod-chat-message { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:9px; padding:9px 10px; border-radius:12px; }
.mod-chat-message:hover { background:var(--surface-2); }
.mod-chat-message button { min-width:0; display:grid; gap:2px; text-align:left; cursor:pointer; }
.mod-chat-message b { font-size:calc(11px * var(--text-scale)); color:var(--accent); }
.mod-chat-message p { margin:0; color:var(--text); font-size:calc(12px * var(--text-scale)); line-height:1.45; overflow-wrap:anywhere; }
.mod-chat-message time { color:var(--faint); font-size:9px; }
.mod-chat-message.deleted p { color:var(--faint); text-decoration:line-through; }
.mod-badge-dot { width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--surface-4); }

.mod-inspector-card { position:sticky; top:134px; max-height:calc(100vh - 152px); overflow:auto; }
.mod-inspector-empty { min-height:320px; display:grid; place-content:center; justify-items:center; gap:7px; color:var(--muted); text-align:center; }
.mod-inspector-empty .ms { font-size:44px; color:var(--faint); }
.mod-inspector { display:grid; gap:14px; }
.mod-person-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; }
.mod-person-head > span:nth-child(2) { min-width:0; display:grid; gap:2px; }
.mod-person-head small { color:var(--muted); }
.mod-context-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.mod-context-grid > span { display:grid; gap:3px; padding:10px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface-1); }
.mod-context-grid small { color:var(--muted); font-family:var(--mono); font-size:8px; letter-spacing:.06em; }
.mod-quick-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.mod-inspector-section { border-top:1px solid var(--line); padding-top:10px; }
.mod-inspector-section summary { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; font-weight:720; cursor:pointer; }
.mod-inspector-section summary::-webkit-details-marker { display:none; }
.mod-inspector-section[open] summary .ms { transform:rotate(180deg); }
.mod-message-history, .mod-history-list, .mod-note-list { display:grid; gap:7px; margin:8px 0 12px; }
.mod-history-item, .mod-note-item, .mod-message-item { display:grid; gap:3px; padding:10px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface-1); }
.mod-history-item small, .mod-note-item small, .mod-message-item small { color:var(--muted); }
.mod-user-search { margin-top:14px; }

.mod-activity-card { min-height:520px; }
.mod-activity-feed { display:grid; gap:7px; }
.mod-activity-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface-1); }
.mod-activity-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:var(--radius-s); background:rgba(var(--accent-rgb),.09); color:var(--accent); }
.mod-activity-row > span:nth-child(2) { min-width:0; display:grid; gap:3px; }
.mod-activity-row small, .mod-activity-row time { color:var(--muted); }

.mod-queue-grid, .mod-controls-grid, .mod-irl-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.mod-queue-grid .span-2, .mod-controls-grid .span-2, .mod-irl-grid .span-2 { grid-column:span 2; }
.mod-queue-list { display:grid; gap:8px; }
.mod-queue-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:13px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface-1); }
.mod-queue-item > div:first-child { min-width:0; display:grid; gap:4px; }
.mod-queue-item p { margin:0; color:var(--muted); line-height:1.48; overflow-wrap:anywhere; }
.mod-queue-item small { color:var(--faint); }
.mod-queue-actions { display:flex; align-items:flex-start; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.mod-queue-item.resolved { opacity:.64; }

body[data-workspace-mode="moderator"] .mod-mode-banner { border-color:var(--accent); }

body[data-workspace-mode="moderator"] .mod-center-toolbar h2 { color:var(--text); }
body[data-space-role="moderator"] .sidebar .nav-button[data-view]:not([data-view="moderation"]):not([data-view="settings"]) { display:none; }
body[data-space-role="moderator"] .mobile-nav .nav-button[data-view]:not([data-view="moderation"]) { display:none !important; }
body[data-irl-enabled="false"] [data-view="belabox"],
body[data-irl-enabled="false"] [data-mobile-module="belabox"],
body[data-irl-enabled="false"] #modIrlTab,
body[data-irl-enabled="false"] [data-mod-panel="irl"] { display:none !important; }

/* Fix mobile Settings detail pages so they are truly centered on the viewport. */
@media (max-width:720px) {
  .mobile-logo { display:grid; }
  .mode-picker-wrap { min-width:44px; width:44px; padding:0; justify-content:center; }
  .mode-picker-wrap select { position:absolute; width:44px; opacity:0; }
  .mode-picker-wrap > .ms { pointer-events:none; }
  #view-settings.settings-detail-open { position:relative; width:100vw; max-width:none; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right)); }
  #view-settings.settings-detail-open .settings-grid { width:100%; max-width:760px; margin-inline:auto; }
  #view-settings.settings-detail-open .settings-section { width:100%; max-width:760px; margin-inline:auto; padding-inline:0; border-radius:0; }
  #view-settings.settings-detail-open .settings-section > summary,
  #view-settings.settings-detail-open .settings-section-body { width:100%; margin-inline:auto; padding-inline:0; }
  #view-settings.settings-detail-open .settings-page-back { left:0; margin-left:0; }

  .mod-center-toolbar { gap:10px; }
  .mod-center-toolbar .toolbar-actions { width:100%; display:grid; grid-template-columns:1fr auto; }
  .mod-mode-banner, .mod-live-banner { grid-template-columns:auto minmax(0,1fr); padding:12px; }
  .mod-mode-banner > button, .mod-live-banner > button { grid-column:1/-1; width:100%; justify-content:center; }
  .mod-center-tabs { top:calc(70px + env(safe-area-inset-top)); margin-inline:-2px; padding:5px; border-radius:var(--radius-m); }
  .mod-center-tabs button { min-width:86px; padding-inline:10px; }
  .mod-center-tabs button span:nth-child(2) { font-size:calc(10px * var(--text-scale)); }
  .mod-chat-grid, .mod-queue-grid, .mod-controls-grid, .mod-irl-grid { grid-template-columns:1fr; }
  .mod-queue-grid .span-2, .mod-controls-grid .span-2, .mod-irl-grid .span-2 { grid-column:auto; }
  .mod-chat-grid .chat-embed-card { min-height:540px; }
  .mod-chat-grid .chat-embed, .mod-session-chat { min-height:410px; max-height:58dvh; }
  .mod-inspector-card { position:static; max-height:none; }
  .mod-context-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mod-quick-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-space-role="moderator"] .mobile-nav { --mobile-nav-columns:2 !important; }
}

@media (max-width:440px) {
  .mod-context-grid { grid-template-columns:1fr; }
  .mod-center-tabs button { min-width:72px; }
  .mod-center-tabs .ms { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .mod-tab-panel.active, .mod-center-tabs button { animation:none !important; transition:none !important; }
}
body[data-motion="none"] .mod-tab-panel.active,
body[data-motion="none"] .mod-center-tabs button { animation:none !important; transition:none !important; }

/* v2.2 role-aware refinements */
body[data-irl-enabled="false"] .irl-module,
body[data-irl-enabled="false"] #crTool-irl,
body[data-irl-enabled="false"] [data-cr-tab="irl"],
body[data-irl-enabled="false"] #producerStrip,
body[data-mod-irl-visible="false"] #modIrlTab,
body[data-mod-irl-visible="false"] [data-mod-panel="irl"] { display:none !important; }

body[data-workspace-mode="moderator"] .status-strip { border-color:rgba(var(--accent-rgb),.25); }
body[data-workspace-mode="moderator"] #topEyebrow::after { content:" · MOD MODE"; color:var(--accent); }
.mode-picker-wrap.single { opacity:.72; }
.mod-mode-banner:not(.active) { opacity:.78; }
.mod-mode-banner.active { box-shadow:0 12px 36px rgba(var(--accent-rgb),.10); }
.mod-note-item .text-button { justify-self:start; padding:3px 0; }
.mod-live-banner .primary-btn { white-space:nowrap; }

@media (max-width:720px) {
  #view-settings.settings-detail-open {
    box-sizing:border-box;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    min-height:calc(100dvh - var(--mobile-nav-h,72px));
  }
  #view-settings.settings-detail-open .settings-section.settings-page-active {
    box-sizing:border-box;
    padding:0 max(0px,env(safe-area-inset-right)) 24px max(0px,env(safe-area-inset-left));
  }
  #view-settings.settings-detail-open .settings-section.settings-page-active > summary {
    padding:14px 0 12px;
  }
  #view-settings.settings-detail-open .settings-section.settings-page-active .settings-section-body {
    padding:0;
  }
  #view-settings.settings-detail-open .settings-page-back {
    position:sticky;
    top:0;
    z-index:8;
    width:max-content;
    margin:0 0 8px;
    padding:12px 0;
    background:color-mix(in srgb,var(--surface-0) 94%,transparent);
    backdrop-filter:blur(14px);
  }
  body[data-space-role="moderator"] .app-topbar .mode-picker-wrap { display:none; }
}

/* =====================================================================
   Trailhead5 2.3 — Spaces, notifications, and denser Mod Center
   ===================================================================== */
.topbar-hub-button,.notification-button{position:relative;flex:0 0 auto}
.topbar-icon-badge{position:absolute;right:-3px;top:-4px;min-width:19px;height:19px;display:grid;place-items:center;padding:0 5px;border:2px solid var(--bg);border-radius:var(--pill);background:var(--accent);color:var(--on-accent);font:800 9px/1 var(--mono)}
.topbar-icon-badge.alert{background:var(--danger);color:#fff}
.demo-exit-top{min-height:44px;white-space:nowrap}
.demo-ribbon{position:fixed;left:calc(var(--sidebar-w,88px) + 18px);right:18px;bottom:18px;z-index:260;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid rgba(var(--accent-rgb),.42);border-radius:var(--radius-m);background:color-mix(in srgb,var(--surface-2) 94%,transparent);box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.demo-ribbon>span,.demo-ribbon>div{display:flex;align-items:center;gap:9px}.demo-ribbon>span{min-width:0}.demo-ribbon small{color:var(--muted)}.demo-ribbon .ms{color:var(--accent)}

.hub-dialog,.notification-dialog{width:min(720px,calc(100vw - 28px));max-width:none}
.hub-popover,.notification-popover{display:grid;max-height:min(820px,calc(100dvh - 32px));overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--radius-l);background:var(--surface-1);box-shadow:var(--shadow)}
.hub-popover>header,.notification-popover>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 18px 10px}.hub-popover>header span,.notification-popover>header span{display:grid;gap:3px}.hub-popover>header small,.notification-popover>header small{color:var(--accent);font:700 9px/1 var(--mono);letter-spacing:.12em}.hub-popover h2,.notification-popover h2{margin:0;font-size:calc(22px * var(--text-scale))}.hub-popover>p{margin:0;padding:0 18px 14px;color:var(--muted);line-height:1.5}
.hub-filter-row{display:flex;gap:6px;padding:0 18px 12px;overflow:auto}.hub-filter-row button{min-height:36px;padding:7px 12px;border:1px solid var(--line);border-radius:var(--pill);color:var(--muted);white-space:nowrap}.hub-filter-row button.active{border-color:var(--accent);background:rgba(var(--accent-rgb),.12);color:var(--text)}
.space-hub-list{display:grid;gap:8px;padding:0 12px 14px;overflow:auto}.space-hub-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface-0)}.space-hub-item.active{border-color:rgba(var(--accent-rgb),.55);background:linear-gradient(110deg,rgba(var(--accent-rgb),.09),transparent 55%),var(--surface-0)}.space-hub-avatar{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:var(--surface-3);color:var(--accent);font-weight:820}.space-hub-copy{min-width:0;display:grid;gap:3px}.space-hub-copy b,.space-hub-copy small,.space-hub-copy em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.space-hub-copy small{color:var(--muted)}.space-hub-copy em{color:var(--faint);font:700 9px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase}.space-hub-actions{display:flex;gap:7px;align-items:center}.space-hub-actions .primary-btn,.space-hub-actions .ghost-btn{min-height:38px;padding:8px 11px}
.hub-popover>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-top:1px solid var(--line);color:var(--muted)}

.notification-toolbar{display:flex;justify-content:flex-end;gap:12px;padding:0 18px 8px}.notification-settings{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(260px,1.2fr);gap:12px;padding:0 18px 14px}.notification-settings details{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-0)}.notification-settings summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:680}.notification-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}.notification-category-grid label{display:flex;align-items:center;gap:8px;color:var(--muted)}
.notification-list{display:grid;overflow:auto;border-top:1px solid var(--line)}.notification-item{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:11px;padding:13px 18px;border-bottom:1px solid var(--line);text-align:left;cursor:pointer}.notification-item:hover{background:var(--surface-2)}.notification-item.unread{background:linear-gradient(90deg,rgba(var(--accent-rgb),.09),transparent 48%)}.notification-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-s);background:var(--surface-3);color:var(--accent)}.notification-item>span:nth-child(2){min-width:0;display:grid;gap:3px}.notification-item small,.notification-item time{color:var(--muted);line-height:1.4}.notification-item time{font:600 9px/1.3 var(--mono)}.notification-dot{width:8px;height:8px;margin-top:5px;border-radius:50%;background:transparent}.notification-item.unread .notification-dot{background:var(--accent)}.notification-popover>footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;border-top:1px solid var(--line)}.notification-popover>footer small{max-width:420px;color:var(--muted);text-align:right;line-height:1.4}

.my-spaces-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.my-space-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;padding:13px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface-0);text-align:left}.my-space-card:hover,.my-space-card.active{border-color:rgba(var(--accent-rgb),.46);background:rgba(var(--accent-rgb),.06)}.my-space-card>.ms{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:var(--surface-3);color:var(--accent)}.my-space-card>span:nth-child(2){min-width:0;display:grid;gap:3px}.my-space-card b,.my-space-card small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.my-space-card small{color:var(--muted)}.my-space-card em{grid-column:2;color:var(--faint);font:700 9px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}

.mod-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}.mod-status-grid>.mod-mode-banner,.mod-status-grid>.permission-banner,.mod-status-grid>.mod-live-banner{min-height:108px;margin:0;padding:12px;grid-template-columns:auto minmax(0,1fr)}.mod-status-grid>.mod-mode-banner>button,.mod-status-grid>.permission-banner>button,.mod-status-grid>.mod-live-banner>button{grid-column:1/-1;width:max-content;justify-self:start;padding:5px 0;min-height:auto}.mod-status-grid>.mod-live-banner .primary-btn{padding:8px 11px;min-height:36px}.mod-status-grid .mod-mode-signal,.mod-status-grid>.mod-live-banner>.ms,.mod-status-grid>.permission-banner>.ms{width:38px;height:38px;border-radius:12px}.mod-status-grid small{line-height:1.35}
body[data-mod-show-status="false"] .mod-status-grid{display:none}
body[data-mod-compact-header="true"] #view-moderation .mod-center-toolbar{align-items:center;margin-bottom:10px}body[data-mod-compact-header="true"] #view-moderation .mod-center-toolbar>div:first-child p{display:none}body[data-mod-compact-header="true"] #view-moderation .mod-center-toolbar h2{font-size:calc(22px * var(--text-scale));margin-top:3px}
#view-moderation{width:100%}.mod-center-stage{min-height:calc(100dvh - 245px)}.mod-chat-grid{grid-template-columns:minmax(0,1fr) minmax(300px,var(--mod-inspector-width,360px));gap:10px}.mod-chat-grid .chat-embed-card{min-height:calc(100dvh - 250px)}.mod-chat-grid .chat-embed,.mod-session-chat{min-height:calc(100dvh - 390px)}.mod-inspector-card{top:128px;max-height:calc(100dvh - 148px)}
body[data-mod-layout="chat"] .mod-chat-grid{grid-template-columns:minmax(0,1.9fr) minmax(300px,var(--mod-inspector-width,400px))}body[data-mod-layout="chat"] .mod-status-grid{grid-template-columns:1fr 1fr}body[data-mod-layout="chat"] #modModeBanner{display:none}
body[data-mod-layout="compact"] .mod-center-tabs{margin-bottom:8px;padding:4px}body[data-mod-layout="compact"] .mod-center-tabs button{min-height:36px;padding:6px 10px}body[data-mod-layout="compact"] .mod-status-grid{display:none}body[data-mod-layout="compact"] .mod-chat-grid{grid-template-columns:minmax(0,1fr) minmax(280px,var(--mod-inspector-width,320px));gap:8px}body[data-mod-layout="compact"] .panel-card{padding:12px}
.mod-activity-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.5fr);gap:10px;align-items:start}.mod-pulse-card{position:sticky;top:130px}.mod-pulse-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mod-pulse-grid>span{display:grid;gap:4px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-0)}.mod-pulse-grid small,.mod-pulse-space small{color:var(--muted)}.mod-pulse-grid b{font-size:calc(22px * var(--text-scale))}.mod-pulse-space{display:grid;gap:5px;margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-m);background:linear-gradient(115deg,rgba(var(--accent-rgb),.07),transparent),var(--surface-0)}.mod-pulse-space span{color:var(--muted)}.mod-pulse-space button{margin-top:8px}
@media (min-width:1180px){.mod-queue-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mod-controls-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mod-controls-grid>.span-2{grid-column:span 3}.mod-center-tabs{max-width:760px}}

.mod-layout-dialog{width:min(760px,calc(100vw - 28px))}.mod-layout-options{display:grid;gap:16px;padding:4px 0 12px}.layout-preset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.layout-preset-grid button{display:grid;justify-items:start;gap:6px;padding:15px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface-0);text-align:left}.layout-preset-grid button.active{border-color:var(--accent);background:rgba(var(--accent-rgb),.09)}.layout-preset-grid .ms{font-size:25px;color:var(--accent)}.layout-preset-grid small{color:var(--muted);line-height:1.4}.mod-layout-options output{color:var(--accent);font-family:var(--mono)}

@media (max-width:960px){.mod-status-grid{grid-template-columns:1fr}.mod-status-grid>.mod-mode-banner,.mod-status-grid>.permission-banner,.mod-status-grid>.mod-live-banner{min-height:auto}.mod-activity-layout{grid-template-columns:1fr}.mod-pulse-card{position:static}.my-spaces-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-ribbon{left:14px;right:14px;bottom:calc(84px + env(safe-area-inset-bottom))}}
@media (max-width:720px){.topbar-tools>.topbar-hub-button,.topbar-tools>.notification-button{display:grid!important}.topbar-tools>.sync-button{display:none!important}.demo-exit-top span:last-child{display:none}.demo-exit-top{width:44px;padding:0;justify-content:center}.space-picker-wrap.single{display:flex}.hub-dialog,.notification-dialog{width:100vw;max-width:none;margin:auto 0 0}.hub-popover,.notification-popover{max-height:88dvh;border-radius:var(--radius-xl) var(--radius-xl) 0 0;border-inline:0;border-bottom:0}.space-hub-item{grid-template-columns:auto minmax(0,1fr)}.space-hub-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.notification-settings{grid-template-columns:1fr}.notification-popover>footer{align-items:flex-start;flex-direction:column}.notification-popover>footer small{text-align:left}.my-spaces-grid{grid-template-columns:1fr}.layout-preset-grid{grid-template-columns:1fr}.demo-ribbon{align-items:flex-start;flex-direction:column}.demo-ribbon>div{width:100%;display:grid;grid-template-columns:1fr 1fr}.mod-chat-grid .chat-embed-card{min-height:540px}.mod-chat-grid .chat-embed,.mod-session-chat{min-height:410px}.mod-status-grid{display:grid}.mod-pulse-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.space-picker-wrap{max-width:112px}.space-picker-wrap select{max-width:92px}.topbar-hub-button{display:none!important}.notification-category-grid{grid-template-columns:1fr}.mod-pulse-grid{grid-template-columns:1fr}.demo-ribbon small{display:none}}

/* =============================================================
   v2.4.0 — Responsive navigation, alert controls, mobile mod polish
   ============================================================= */
.deck-actions-wrap{display:none;position:relative}.deck-actions-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:110;width:min(330px,calc(100vw - 28px));padding:8px;border:1px solid var(--line-strong);border-radius:var(--radius-l);background:var(--surface-0);box-shadow:0 24px 70px rgba(0,0,0,.42)}.deck-actions-menu>button{width:100%;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:11px;padding:12px;border-radius:var(--radius-m);text-align:left;color:var(--text)}.deck-actions-menu>button:hover,.deck-actions-menu>button:focus-visible{background:var(--surface-2)}.deck-actions-menu>button>.ms{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:rgba(var(--accent-rgb),.12);color:var(--accent)}.deck-actions-menu b,.deck-actions-menu small{display:block}.deck-actions-menu small{margin-top:2px;color:var(--muted)}
.arrange-done-dock{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:35;display:flex;align-items:center;justify-content:center;gap:12px;width:min(620px,calc(100% - 20px));margin:18px auto 4px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--pill);background:color-mix(in srgb,var(--surface-0) 94%,transparent);backdrop-filter:blur(18px);box-shadow:0 16px 45px rgba(0,0,0,.24)}.arrange-done-dock[hidden]{display:none}.arrange-done-dock small{color:var(--muted)}.arrange-exit-float{position:static!important;transform:none!important;min-height:44px;box-shadow:none;animation:none}.arrange-exit-float:active{transform:scale(.98)!important}
.command-grid{position:relative}.command-tile{transition:transform .22s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),opacity .2s var(--ease)}.command-tile.drag-placeholder{opacity:.22;outline:2px dashed var(--accent);outline-offset:-4px}.drag-ghost{position:fixed!important;z-index:260!important;margin:0!important;pointer-events:none!important;opacity:.94;transform:scale(1.025) rotate(.35deg)!important;box-shadow:0 24px 70px rgba(0,0,0,.5)!important;cursor:grabbing}.drag-active{overscroll-behavior:none;user-select:none}.drag-active .command-grid::after{content:"Move to a new position";position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));z-index:80;transform:translateX(-50%);padding:8px 13px;border-radius:var(--pill);background:var(--text);color:var(--surface-0);font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}.tile-shift{display:none}body.arrange-mode .tile-shift{display:grid}.tile-controls{max-width:100%;flex-wrap:wrap}
.notification-toolbar{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:8px}.notification-delivery-toggles{display:flex;gap:5px}.notification-delivery-toggles .active{background:var(--accent);color:var(--on-accent);border-color:transparent}.icon-button.small{width:36px;height:36px;min-width:36px}.danger-quiet{color:var(--danger)}.notification-list{position:relative}.notification-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;border-bottom:1px solid var(--line);transition:background .16s var(--ease),transform .16s var(--ease)}.notification-item:last-child{border-bottom:0}.notification-item:hover,.notification-item:focus-within{background:var(--surface-2)}.notification-main{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:start;padding:13px 8px 13px 12px;text-align:left;color:inherit}.notification-item-actions{display:flex;align-items:center;gap:3px;padding:8px}.notification-item-actions button{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--muted)}.notification-item-actions button:hover,.notification-item-actions button:focus-visible{background:var(--surface-3);color:var(--text)}.notification-item.holding-thank::after{content:"Hold to thank";position:absolute;inset:auto 12px 5px 12px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent) 0 75%,var(--surface-4) 75%);animation:thank-hold .65s linear forwards;transform-origin:left}@keyframes thank-hold{from{transform:scaleX(0)}to{transform:scaleX(1)}}.notification-thank-setting{height:100%;align-items:flex-start}.notification-preview-art{width:116px;height:84px;display:grid;place-items:center;position:relative;border-radius:20px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.16),var(--surface-2));color:var(--accent)}.notification-preview-art>.ms{font-size:34px}.notification-preview-art i{position:absolute;width:44px;height:8px;border-radius:var(--pill);background:var(--surface-4);right:12px}.notification-preview-art i:nth-child(2){top:20px}.notification-preview-art i:nth-child(3){top:34px;width:30px}.notification-category-settings{display:grid;grid-template-columns:minmax(180px,.7fr) 1.6fr;gap:18px;padding:16px 0;border-block:1px solid var(--line)}
.thank-recipient{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:16px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface-2)}.thank-recipient>.ms{width:42px;height:42px;display:grid;place-items:center;border-radius:var(--radius-s);background:rgba(var(--accent-rgb),.13);color:var(--accent)}.thank-recipient small,.thank-recipient b{display:block}.thank-dialog .sheet-shell{max-width:620px}
.undo-stack{position:fixed;left:50%;bottom:max(22px,calc(16px + env(safe-area-inset-bottom)));z-index:180;transform:translateX(-50%);width:min(520px,calc(100vw - 28px));display:grid;gap:8px;pointer-events:none}.undo-toast{pointer-events:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px 13px;border:1px solid var(--line-strong);border-radius:var(--radius-l);background:var(--surface-0);box-shadow:0 18px 58px rgba(0,0,0,.42)}.undo-toast>.ms{color:var(--accent)}.undo-toast b,.undo-toast small{display:block}.undo-toast small{color:var(--muted)}.undo-toast button{min-height:36px;padding:7px 11px;border-radius:var(--pill);background:var(--accent);color:var(--on-accent);font-weight:800}
.hub-active-space{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;margin:0 12px 12px;padding:13px;border:1px solid rgba(var(--accent-rgb),.35);border-radius:var(--radius-l);background:linear-gradient(120deg,rgba(var(--accent-rgb),.1),transparent 60%),var(--surface-1)}.hub-active-space small,.hub-active-space b,.hub-active-space em{display:block}.hub-active-space em{color:var(--muted);font-style:normal}.hub-primary-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 12px 14px}.hub-primary-nav button{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:var(--radius-l);background:var(--surface-1);text-align:left;color:var(--text)}.hub-primary-nav button>.ms{width:42px;height:42px;display:grid;place-items:center;border-radius:var(--radius-s);background:rgba(var(--accent-rgb),.11);color:var(--accent)}.hub-primary-nav b,.hub-primary-nav small{display:block}.hub-primary-nav small{margin-top:2px;color:var(--muted)}.hub-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:12px;border-top:1px solid var(--line)}.hub-section-head small,.hub-section-head b{display:block}.hub-section-head small{color:var(--muted)}.hub-popover>footer>div{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mod-context-strip{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}.mod-context-strip>div{min-height:0!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 11px!important;border:1px solid var(--line)!important;border-radius:var(--radius-m)!important;background:var(--surface-1)!important}.mod-context-strip small{font-size:8px}.mod-context-strip b,.mod-context-strip strong{font-size:12px}.mod-context-strip span:not(.ms):not(.mod-mode-signal),.mod-context-strip small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mod-context-strip .primary-btn,.mod-context-strip .text-button{min-height:34px;padding:6px 9px;font-size:10px}.mod-mode-signal{width:34px;height:34px}.mod-mobile-toolbar{flex-wrap:nowrap!important}.mod-mobile-toolbar>*{min-width:0}
.tutorial-progress{display:flex!important;flex-wrap:nowrap!important;gap:4px;overflow:hidden}.tutorial-progress span{flex:1 1 0;min-width:0}.tutorial-card{overflow:hidden}
@media (max-width:920px){.deck-desktop-actions{display:none!important}.deck-actions-wrap{display:block}.deck-actions-menu{position:fixed;left:12px;right:12px;top:auto;bottom:calc(86px + env(safe-area-inset-bottom));width:auto;max-height:70dvh;overflow:auto;border-radius:var(--radius-xl)}.arrange-done-dock{bottom:calc(82px + env(safe-area-inset-bottom));width:calc(100% - 12px);border-radius:var(--radius-l)}.arrange-done-dock small{display:none}.undo-stack{bottom:calc(86px + env(safe-area-inset-bottom))}}
@media (max-width:720px){
  .topbar-tools>.space-picker-wrap,.topbar-tools>.mode-picker-wrap,.topbar-tools>.topbar-hub-button,.topbar-tools>.sync-button,.topbar-tools>.demo-exit-top{display:none!important}.topbar-tools{gap:7px}.account-chip{width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:50%}.account-chip>span:not(.avatar){display:none}.account-chip .avatar{width:44px;height:44px}.notification-button{width:44px;height:44px}.app-topbar{padding-inline:14px}.topbar-copy h1{font-size:calc(18px * var(--text-scale))}
  .hub-dialog{inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;margin:0!important}.hub-popover{width:100%;height:100dvh;max-height:none!important;border:0!important;border-radius:0!important;padding-top:env(safe-area-inset-top);display:flex;flex-direction:column}.hub-popover>header{position:sticky;top:0;z-index:5;background:var(--surface-0)}.space-hub-list{flex:1;min-height:0}.hub-primary-nav{grid-template-columns:1fr}.hub-section-head{align-items:flex-start;flex-direction:column}.hub-filter-row{width:100%;overflow-x:auto;flex-wrap:nowrap}.hub-popover>footer{padding-bottom:calc(14px + env(safe-area-inset-bottom));align-items:flex-start;flex-direction:column}.hub-popover>footer>div{width:100%;justify-content:space-between}
  .notification-dialog{inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;margin:0!important}.notification-popover{height:100dvh;max-height:none!important;border:0!important;border-radius:0!important;padding-top:env(safe-area-inset-top)}.notification-popover>header{position:sticky;top:0;background:var(--surface-0);z-index:4}.notification-toolbar{position:sticky;top:67px;z-index:3;background:var(--surface-0);padding-inline:10px}.notification-main{padding-left:10px}.notification-item-actions{padding-inline:5px}.notification-item-actions button{width:38px;height:38px}.notification-popover>footer{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .toast-stack{left:50%!important;right:auto!important;width:min(92vw,430px)!important;transform:translateX(-50%)!important;align-items:stretch!important}.toast{width:100%!important;margin-inline:auto!important}.undo-stack{left:50%;right:auto;width:calc(100vw - 20px);transform:translateX(-50%)}
  .mod-center-toolbar{display:grid!important;grid-template-columns:1fr;gap:10px}.mod-center-toolbar .mod-mobile-toolbar{width:100%!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px}.mod-mobile-toolbar>*{width:100%;padding:8px 6px!important;justify-content:center}.mod-mobile-toolbar .ms{font-size:17px}.mod-context-strip{display:flex!important;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px}.mod-context-strip>div{flex:0 0 min(82vw,330px);scroll-snap-align:start}.mod-center-tabs{position:sticky;top:calc(70px + env(safe-area-inset-top));overflow-x:auto;justify-content:flex-start}.mod-center-tabs button{flex:0 0 auto!important;min-width:88px!important}.mod-chat-grid{display:grid!important;grid-template-columns:1fr!important}.mod-chat-grid .chat-embed-card{min-height:520px!important}.mod-chat-grid .chat-embed,.mod-session-chat{min-height:360px!important}.mod-inspector-card{position:static!important;max-height:none!important}.mod-activity-layout,.mod-queue-grid,.mod-controls-grid,.mod-irl-grid{grid-template-columns:1fr!important}.mod-controls-grid>.span-2,.mod-irl-grid>.span-2{grid-column:auto!important}.mod-quick-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important}.mod-queue-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}.mod-queue-actions>*{width:100%}.mod-center-stage{min-height:0!important}.panel-card{min-width:0}
  .notification-category-settings{grid-template-columns:1fr}.notification-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.notification-preview{grid-template-columns:1fr!important}.notification-preview-art{width:100%;height:96px}.thank-dialog .sheet-shell{height:auto;max-height:92dvh;border-radius:var(--radius-xl) var(--radius-xl) 0 0;margin-top:auto;padding-bottom:env(safe-area-inset-bottom)}
  .tutorial-card{width:calc(100vw - 24px);max-width:none}.tutorial-progress{gap:3px}.tutorial-progress span{height:4px}.tutorial-actions{grid-template-columns:auto 1fr auto auto;gap:5px}.tutorial-actions button{padding-inline:10px;white-space:nowrap}
}
@media (max-width:420px){.mod-mobile-toolbar>* span:last-child{font-size:10px}.notification-category-grid{grid-template-columns:1fr}.notification-toolbar{grid-template-columns:auto 1fr auto auto}.notification-toolbar .text-button{font-size:10px;padding-inline:5px}.hub-primary-nav button{padding:11px}.space-hub-actions{grid-template-columns:1fr}.tutorial-actions{grid-template-columns:1fr 1fr}.tutorial-actions>span{display:none}.tutorial-actions button{width:100%}}
@media (prefers-reduced-motion:reduce){.command-tile,.notification-item,.deck-actions-menu{transition:none!important}.notification-item.holding-thank::after{animation-duration:.01ms!important}}
body[data-motion="none"] .command-tile,body[data-motion="none"] .notification-item,body[data-motion="none"] .deck-actions-menu{transition:none!important}

/* =============================================================
   v2.4.1 — Calm mobile wayfinding and activity inbox
   These surfaces are navigation layers, not miniature dashboards.
   ============================================================= */
.hub-dialog{width:min(520px,calc(100vw - 28px))}
.hub-popover{max-height:min(760px,calc(100dvh - 32px));display:flex;flex-direction:column;background:var(--surface-0)}
.hub-simple-header,.notification-simple-header{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--surface-0)}
.hub-simple-header>span,.notification-simple-header>span:first-child{min-width:0;display:grid;gap:3px}
.hub-simple-header h2,.notification-simple-header h2{margin:0;font-size:calc(21px * var(--text-scale));line-height:1.1}
.hub-simple-header small,.notification-simple-header small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font:600 calc(10px * var(--text-scale))/1.3 var(--mono);letter-spacing:0}
.hub-scroll{min-height:0;overflow:auto;padding:8px 0 16px}
.hub-simple-section{padding:8px 12px}
.hub-simple-section+.hub-simple-section{border-top:1px solid var(--line)}
.hub-section-label{display:block;padding:6px 8px 8px;color:var(--faint);font:700 calc(9px * var(--text-scale))/1 var(--mono);letter-spacing:.11em;text-transform:uppercase}
.hub-mode-picker,.hub-simple-nav button,.hub-utility-nav button{width:100%;min-height:58px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 8px;border:0;border-radius:var(--radius-s);background:transparent;color:var(--text);text-align:left}
.hub-mode-picker:hover,.hub-simple-nav button:hover,.hub-utility-nav button:hover,.hub-simple-nav button:focus-visible,.hub-utility-nav button:focus-visible{background:var(--surface-2)}
.hub-row-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:rgba(var(--accent-rgb),.10);color:var(--accent)}
.hub-row-copy{min-width:0;display:grid;gap:2px}
.hub-row-copy b,.hub-row-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-row-copy small{color:var(--muted);font-size:calc(10px * var(--text-scale))}
.hub-mode-picker select{max-width:118px;min-height:38px;padding:0 28px 0 10px;border:1px solid var(--line);border-radius:var(--pill);background:var(--surface-1);color:var(--text);font-weight:680}
.hub-chevron{color:var(--faint)}
.hub-section-heading{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 8px}
.hub-section-heading b,.hub-section-heading small{display:block}
.hub-section-heading small{margin-top:2px;color:var(--muted);font-size:calc(10px * var(--text-scale))}
.space-hub-list{display:grid;gap:2px;padding:0;overflow:visible}
.space-hub-item{width:100%;min-height:62px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px;border:0;border-radius:var(--radius-s);background:transparent;color:var(--text);text-align:left}
.space-hub-item:hover,.space-hub-item:focus-visible{background:var(--surface-2)}
.space-hub-item.active{border:0;background:rgba(var(--accent-rgb),.09)}
.space-hub-avatar{width:42px;height:42px;border-radius:13px;background:var(--surface-3)}
.space-hub-copy{gap:2px}.space-hub-copy em{display:none}.space-hub-copy small{font-size:calc(10px * var(--text-scale))}
.space-hub-state{display:grid;place-items:center;color:var(--faint)}
.space-hub-item.active .space-hub-state{color:var(--accent)}
.hub-utility-nav{padding-top:10px}.hub-exit-row{color:var(--danger)!important}.hub-exit-row .hub-row-icon{background:rgba(255,93,110,.10);color:var(--danger)}
.hub-active-space,.hub-primary-nav,.hub-filter-row,.hub-popover>footer{display:none!important}

.notification-dialog{width:min(500px,calc(100vw - 28px))}
.notification-popover{max-height:min(720px,calc(100dvh - 32px));display:flex;flex-direction:column;background:var(--surface-0)}
.notification-header-actions{display:flex;align-items:center;gap:5px}
.notification-header-actions .danger-quiet:disabled{opacity:.28}
.notification-list{min-height:160px;display:block;overflow:auto;border:0}
.notification-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;border-bottom:1px solid var(--line);background:transparent}
.notification-item:last-child{border-bottom:0}
.notification-item:hover,.notification-item:focus-within{background:var(--surface-2)}
.notification-item.unread{background:linear-gradient(90deg,rgba(var(--accent-rgb),.07),transparent 52%)}
.notification-main{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:11px;padding:13px 6px 13px 14px;text-align:left;color:inherit}
.notification-icon{width:38px;height:38px;border-radius:12px;background:var(--surface-3)}
.notification-copy{min-width:0;display:grid;gap:3px}
.notification-title-line{min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.notification-title-line b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notification-title-line time{flex:0 0 auto;color:var(--faint);font:600 calc(8px * var(--text-scale))/1.2 var(--mono);white-space:nowrap}
.notification-copy>small{display:-webkit-box;overflow:hidden;color:var(--muted);line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.notification-copy>em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--faint);font:600 calc(8px * var(--text-scale))/1.2 var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em}
.notification-dot{width:7px;height:7px;margin-top:6px;border-radius:50%;background:transparent}
.notification-item.unread .notification-dot{background:var(--accent)}
.notification-dismiss{width:38px;min-width:38px;height:38px;align-self:center;display:grid;place-items:center;margin-right:6px;border-radius:50%;color:var(--muted);opacity:0;transition:opacity .15s var(--ease),background .15s var(--ease)}
.notification-item:hover .notification-dismiss,.notification-item:focus-within .notification-dismiss{opacity:1}
.notification-dismiss:hover,.notification-dismiss:focus-visible{background:var(--surface-3);color:var(--text)}
.notification-simple-footer{display:flex;align-items:center;justify-content:center;padding:9px 12px calc(9px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.notification-simple-footer .text-button{min-height:38px;display:inline-flex;align-items:center;gap:7px;color:var(--muted)}
.notification-toolbar,.notification-delivery-toggles,.notification-item-actions{display:none!important}

@media (max-width:720px){
  .topbar-tools>.topbar-hub-button{display:none!important}
  .hub-dialog,.notification-dialog{inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;margin:0!important}
  .hub-popover,.notification-popover{width:100%;height:100dvh;max-height:none!important;border:0!important;border-radius:0!important;padding-top:env(safe-area-inset-top)}
  .hub-simple-header,.notification-simple-header{position:sticky;top:0;z-index:5;min-height:68px;padding:12px 14px;background:color-mix(in srgb,var(--surface-0) 94%,transparent);backdrop-filter:blur(18px)}
  .hub-scroll{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .hub-simple-section{padding-inline:10px}
  .hub-mode-picker,.hub-simple-nav button,.hub-utility-nav button{min-height:62px;padding-inline:8px}
  .hub-mode-picker select{max-width:104px}
  .space-hub-item{min-height:62px;grid-template-columns:auto minmax(0,1fr) auto;padding-inline:8px}
  .notification-list{flex:1;min-height:0}
  .notification-main{padding:14px 4px 14px 12px}
  .notification-dismiss{opacity:1;margin-right:4px}
  .notification-simple-footer{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}
@media (max-width:380px){
  .hub-row-copy small{max-width:190px}
  .hub-mode-picker{grid-template-columns:auto minmax(0,1fr)}
  .hub-mode-picker select{grid-column:2;width:100%;max-width:none;margin-top:3px}
  .notification-title-line{display:grid;grid-template-columns:minmax(0,1fr) auto}
}

/* =====================================================================
   v2.5 — coherent mobile hierarchy + full-screen Live Deck
   ===================================================================== */

/* Keep the everyday app readable: one clear mobile status, one primary action,
   and shorter page introductions rather than desktop copy squeezed into a phone. */
@media (max-width:820px){
  .status-strip{min-height:48px;gap:8px;padding:6px 12px;overflow:visible}
  .status-strip .status-item:not(:first-child),.status-strip .producer-strip,#permissionsBtn{display:none!important}
  .status-strip .status-spacer{display:block;flex:1}
  #onAirToggle{display:inline-flex!important;min-height:36px;padding:7px 11px;margin-left:auto;border-radius:var(--pill);font-size:calc(10px * var(--text-scale))}
  .section-toolbar{gap:9px;margin-bottom:14px}
  .section-toolbar>div:first-child>p{display:none!important}
  .section-toolbar h2{font-size:clamp(calc(25px * var(--text-scale)),7.5vw,calc(31px * var(--text-scale)));line-height:1.04}
  .section-toolbar .eyebrow{font-size:calc(8.5px * var(--text-scale))}
  .toolbar-actions{margin-top:0}
}

/* Live Mode is a performance surface, not the normal app with a red badge.
   Chrome returns automatically whenever another view is opened or Live Mode exits. */
body.on-air[data-current-view="deck"]{overflow:hidden;background:var(--surface-0)}
body.on-air[data-current-view="deck"] .sidebar,
body.on-air[data-current-view="deck"] .app-topbar,
body.on-air[data-current-view="deck"] .status-strip,
body.on-air[data-current-view="deck"] .mobile-nav,
body.on-air[data-current-view="deck"] .demo-ribbon{display:none!important}
body.on-air[data-current-view="deck"] .app-shell{display:block!important;min-height:100dvh;padding:0!important}
body.on-air[data-current-view="deck"] .app-main{grid-column:auto!important;min-height:100dvh}
body.on-air[data-current-view="deck"] .view-stack{width:100%;max-width:none;height:100dvh;margin:0;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(76px,calc(68px + env(safe-area-inset-bottom))) max(8px,env(safe-area-inset-left));overflow:hidden}
body.on-air[data-current-view="deck"] #view-deck{height:100%;min-height:0;padding:0!important}
body.on-air[data-current-view="deck"] #view-deck>.section-toolbar,
body.on-air[data-current-view="deck"] #deckLiveBar,
body.on-air[data-current-view="deck"] #view-deck .profile-row,
body.on-air[data-current-view="deck"] #deckUtilityRow,
body.on-air[data-current-view="deck"] #view-deck .deck-meta,
body.on-air[data-current-view="deck"] #arrangeDoneDock{display:none!important}
body.on-air[data-current-view="deck"] #commandGrid{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;align-content:stretch;grid-auto-rows:minmax(132px,1fr);padding:0 1px 2px;scrollbar-width:thin}
body.on-air[data-current-view="deck"] #view-deck .command-tile{min-height:132px;height:auto;box-shadow:none}
body.on-air[data-current-view="deck"] #view-deck .tile-controls{display:none!important}
body.on-air[data-current-view="deck"] #view-deck .command-tile:hover{transform:none;box-shadow:none}
body.on-air[data-current-view="deck"] #view-deck .command-tile:active{transform:scale(.985)}
body.on-air[data-current-view="deck"] .on-air-dock{left:50%!important;right:auto!important;top:auto!important;bottom:max(9px,env(safe-area-inset-bottom))!important;width:auto!important;max-width:calc(100vw - 18px);min-height:50px;justify-content:center;gap:5px;padding:5px!important;border-radius:var(--pill)!important;transform:translateX(-50%)!important}
body.on-air[data-current-view="deck"] .on-air-dock .soft-btn{display:none!important}
body.on-air[data-current-view="deck"] .on-air-beacon{min-height:40px;padding:0 10px}
body.on-air[data-current-view="deck"] .on-air-exit{min-height:42px;margin:0;padding:9px 15px}
body.on-air[data-current-view="deck"] .toast-stack{bottom:calc(68px + env(safe-area-inset-bottom))}
body.on-air[data-current-view="deck"] .undo-stack{bottom:calc(68px + env(safe-area-inset-bottom))}

@media (min-width:821px){
  body.on-air[data-current-view="deck"] #commandGrid{grid-auto-rows:minmax(150px,1fr);gap:12px}
  body.on-air[data-current-view="deck"] #view-deck .command-tile{min-height:150px}
}
@media (max-width:720px){
  body.on-air[data-current-view="deck"] .view-stack{padding:max(7px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(70px,calc(64px + env(safe-area-inset-bottom))) max(7px,env(safe-area-inset-left))}
  body.on-air[data-current-view="deck"] #view-deck .command-grid{height:100%;gap:8px;grid-auto-rows:minmax(118px,1fr)}
  body.on-air[data-current-view="deck"] #view-deck .command-tile{min-height:118px;padding:12px;border-radius:15px}
  body.on-air[data-current-view="deck"] #view-deck .tile-title{font-size:clamp(calc(15px * var(--text-scale)),4.8vw,calc(19px * var(--text-scale)))}
  body.on-air[data-current-view="deck"] #view-deck .tile-sub{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  body.on-air[data-current-view="deck"] .on-air-beacon b{display:inline!important}
  body.on-air[data-current-view="deck"] .on-air-exit span:last-child{display:inline!important}
}
@media (max-width:390px){
  body.on-air[data-current-view="deck"] .on-air-beacon b{display:none!important}
  body.on-air[data-current-view="deck"] .on-air-exit span:last-child{font-size:calc(10px * var(--text-scale))}
}

/* =====================================================================
   v2.6.0 — Modular Moderator Workspace
   ===================================================================== */
#view-moderation{--mod-gap:10px}
#view-moderation .panel-card{border-color:color-mix(in srgb,var(--line) 72%,transparent)}
.mod-center-toolbar{margin-bottom:10px}.mod-center-toolbar>div:first-child{max-width:760px}.mod-center-toolbar h2{letter-spacing:-.035em}.mod-center-toolbar p{max-width:650px}
.mod-context-strip{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:8px}.mod-context-strip>div{border:0!important;background:var(--surface-1)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 64%,transparent)}
.mod-center-tabs{top:66px;margin-bottom:10px;padding:4px;border:0;background:color-mix(in srgb,var(--surface-0) 90%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 72%,transparent)}.mod-center-tabs button{min-height:38px;padding:7px 12px}.mobile-tab-label{display:none}
.mod-dashboard-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px;padding:0 2px}.mod-dashboard-toolbar>div:first-child{display:grid;gap:2px}.mod-dashboard-toolbar small{color:var(--muted)}
.mod-dashboard-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row dense;gap:var(--mod-gap);align-items:stretch}
.mod-module{min-width:0;display:flex;flex-direction:column;grid-column:span 4;min-height:210px;padding:14px;border:0;border-radius:var(--radius-l);background:linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 88%,transparent),var(--surface-1));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 66%,transparent);overflow:hidden;transition:transform .22s var(--ease),box-shadow .22s var(--ease),opacity .2s var(--ease)}
.mod-module[data-size="compact"]{grid-column:span 3;min-height:190px}.mod-module[data-size="standard"]{grid-column:span 4}.mod-module[data-size="wide"]{grid-column:span 6}.mod-module[data-size="tall"]{grid-column:span 4;grid-row:span 2;min-height:430px}.mod-module[data-size="full"]{grid-column:1/-1;min-height:250px}
.mod-module[hidden]{display:none!important}.mod-module.dragging{opacity:.34;transform:scale(.985);box-shadow:inset 0 0 0 2px var(--accent)}
.mod-module-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}.mod-module-head>div:first-child{min-width:0;display:flex;align-items:center;gap:10px}.mod-module-head>div:first-child>.ms{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:rgba(var(--accent-rgb),.1);color:var(--accent)}.mod-module-head small,.mod-module-head h3{display:block}.mod-module-head small{color:var(--muted);font:700 8px/1.1 var(--mono);letter-spacing:.1em}.mod-module-head h3{margin-top:3px;font-size:calc(15px * var(--text-scale))}
.mod-module-controls{display:none;align-items:center;gap:3px;color:var(--muted)}.mod-module-controls button,.module-drag-handle{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-xs)}.mod-module-controls button:hover{background:var(--surface-3);color:var(--text)}.module-drag-handle{cursor:grab}.mod-layout-editing .mod-module-controls{display:flex}.mod-layout-editing .mod-module{outline:1px dashed rgba(var(--accent-rgb),.52);outline-offset:-3px;cursor:grab}.mod-layout-editing .mod-module:active{cursor:grabbing}
.module-link{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:11px;color:var(--accent);font-size:calc(10px * var(--text-scale));font-weight:780}.module-link .ms{font-size:17px}
.mod-overview-queue,.mod-overview-chat,.mod-overview-activity{min-height:0;display:grid;align-content:start;gap:3px;overflow:auto;scrollbar-width:thin}.mod-overview-queue,.mod-overview-chat{max-height:310px}.mod-overview-activity{max-height:260px}
.mod-overview-row{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 7px;border-radius:11px;text-align:left;color:var(--text)}.mod-overview-row:hover{background:var(--surface-3)}.mod-overview-row>span:nth-child(2){min-width:0;display:grid;gap:2px}.mod-overview-row b,.mod-overview-row small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mod-overview-row small,.mod-overview-row time{color:var(--muted);font-size:calc(9px * var(--text-scale))}.mod-priority-dot{width:7px;height:28px;border-radius:8px;background:var(--amber)}.mod-priority-dot.automod{background:var(--danger)}.mod-priority-dot.suspicious{background:var(--amber)}.mod-priority-dot.unban{background:var(--cyan)}
.mod-overview-chat-row{min-width:0;display:grid;grid-template-columns:minmax(86px,.35fr) minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:7px;border-radius:var(--radius-xs);text-align:left;color:var(--text)}.mod-overview-chat-row:hover{background:var(--surface-3)}.mod-overview-chat-row b{color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mod-overview-chat-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mod-overview-chat-row time{color:var(--faint);font-size:9px}
.mod-overview-event{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:center;padding:8px 6px}.mod-overview-event>.ms{width:30px;height:30px;display:grid;place-items:center;border-radius:var(--radius-xs);background:var(--surface-3);color:var(--accent);font-size:17px}.mod-overview-event>span:last-child{min-width:0;display:grid;gap:2px}.mod-overview-event b,.mod-overview-event small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mod-overview-event small{color:var(--muted)}
.mod-dashboard-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.mod-dashboard-actions button{min-width:0;min-height:76px;display:grid;place-items:center;align-content:center;gap:5px;padding:9px;border-radius:var(--radius-s);background:var(--surface-3);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 65%,transparent)}.mod-dashboard-actions button:hover{background:rgba(var(--accent-rgb),.11);color:var(--accent)}.mod-dashboard-actions .ms{font-size:23px}.mod-dashboard-actions b{font-size:calc(9px * var(--text-scale));white-space:nowrap}
.mod-stream-viewer-module{padding-bottom:10px}.mod-stream-viewer{position:relative;min-height:220px;flex:1;border-radius:var(--radius-s);background:#050608;overflow:hidden}.mod-stream-viewer iframe{width:100%;height:100%;min-height:220px;border:0}.mod-stream-viewer .embed-placeholder{height:100%;min-height:220px}.mod-viewer-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 2px 0;color:var(--muted)}.mod-viewer-footer>span{display:flex;align-items:center;gap:7px}.mod-viewer-footer a{color:var(--accent)}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 15%,transparent)}
.mod-health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.mod-health-grid>span{display:grid;gap:3px;padding:12px;border-radius:13px;background:var(--surface-3)}.mod-health-grid small{color:var(--muted)}.mod-health-grid b{font-size:calc(20px * var(--text-scale))}.mod-health-note{margin-top:9px;padding:10px;border-radius:12px;background:rgba(var(--accent-rgb),.07);color:var(--muted);line-height:1.4}
.mod-team-mini{display:grid;gap:5px}.mod-team-person{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:7px}.mod-team-person>span:nth-child(2){min-width:0;display:grid;gap:2px}.mod-team-person b,.mod-team-person small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mod-team-person small{color:var(--muted)}.mod-team-person i{width:7px;height:7px;border-radius:50%;background:var(--signal)}
.mod-automod-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.mod-automod-mini>span{display:grid;gap:4px;padding:12px 8px;border-radius:13px;background:var(--surface-3);text-align:center}.mod-automod-mini small{color:var(--muted)}.mod-automod-mini b{font-size:calc(22px * var(--text-scale))}
.mod-customize-dock{position:sticky;bottom:12px;z-index:40;width:min(720px,calc(100% - 20px));display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin:14px auto 0;padding:10px 12px;border-radius:var(--pill);background:color-mix(in srgb,var(--surface-0) 94%,transparent);box-shadow:0 20px 60px rgba(0,0,0,.34),inset 0 0 0 1px var(--line-strong);backdrop-filter:blur(16px)}.mod-customize-dock[hidden]{display:none}.mod-customize-dock span{min-width:0}.mod-customize-dock b,.mod-customize-dock small{display:block}.mod-customize-dock small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod-layout-dialog{width:min(880px,calc(100vw - 28px))}.mod-layout-dialog .sheet-shell{max-height:min(90dvh,900px)}.mod-layout-start-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mod-module-editor-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:5px}.mod-module-editor-head>span{display:grid;gap:2px}.mod-module-editor-head small{color:var(--muted)}.mod-module-manager{display:grid;gap:6px}.mod-module-manager-row{display:grid;grid-template-columns:minmax(0,1fr) 122px auto;align-items:center;gap:9px;padding:8px;border-radius:var(--radius-s);background:var(--surface-1);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 65%,transparent);opacity:.68}.mod-module-manager-row.enabled{opacity:1}.mod-module-manager-row>label{min-width:0;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:9px}.mod-module-manager-row>label>.ms{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:rgba(var(--accent-rgb),.09);color:var(--accent)}.mod-module-manager-row>label>span:last-child{min-width:0;display:grid;gap:2px}.mod-module-manager-row b,.mod-module-manager-row small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mod-module-manager-row small{color:var(--muted)}.module-order-buttons{display:flex;gap:3px}.module-order-buttons button{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-xs);background:var(--surface-3)}.module-order-buttons button:disabled{opacity:.28}

@media (max-width:1100px){.mod-dashboard-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.mod-module[data-size="compact"]{grid-column:span 2}.mod-module[data-size="standard"]{grid-column:span 4}.mod-module[data-size="wide"]{grid-column:span 4}.mod-module[data-size="tall"]{grid-column:span 4}.mod-module[data-size="full"]{grid-column:1/-1}}
@media (max-width:820px){.mod-context-strip{grid-template-columns:1fr}.mod-context-strip>div{min-height:46px!important}.mod-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mod-module,.mod-module[data-size="compact"],.mod-module[data-size="standard"],.mod-module[data-size="wide"],.mod-module[data-size="tall"]{grid-column:span 1}.mod-module[data-size="full"]{grid-column:1/-1}.mod-dashboard-toolbar small{display:none}.mod-layout-start-grid{grid-template-columns:1fr}}
@media (max-width:720px){
  body[data-current-view="moderation"] .mobile-nav{display:none!important}
  #view-moderation{padding-bottom:78px}.mod-center-toolbar{margin-bottom:8px}.mod-center-toolbar>div:first-child{display:none}.mod-mobile-toolbar{width:100%;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.mod-mobile-toolbar>*{width:100%;min-height:42px;padding:7px 6px;justify-content:center}.mod-mobile-toolbar .ms{font-size:18px}.mod-mobile-toolbar span:last-child{font-size:calc(9px * var(--text-scale));white-space:nowrap}
  .mod-context-strip{display:none!important}
  .mod-center-tabs{position:fixed;z-index:95;left:8px;right:8px;top:auto;bottom:max(8px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:0;padding:5px;border-radius:20px;background:color-mix(in srgb,var(--surface-0) 96%,transparent);box-shadow:0 20px 60px rgba(0,0,0,.48),inset 0 0 0 1px var(--line-strong);backdrop-filter:blur(20px);overflow:visible}
  .mod-center-tabs button{min-width:0;min-height:54px;display:grid;place-items:center;align-content:center;gap:3px;padding:5px 2px;border-radius:15px}.mod-center-tabs button .ms{font-size:21px}.mod-center-tabs button>span:not(.ms):not(.tab-count){font-size:calc(8px * var(--text-scale));line-height:1}.mod-center-tabs button[data-mod-tab="queues"]{order:1}.mod-center-tabs button[data-mod-tab="chat"]{order:2}.mod-center-tabs button[data-mod-tab="controls"]{order:3}.mod-center-tabs button[data-mod-tab="activity"]{order:4}.mod-center-tabs button[data-mod-tab="overview"]{order:5}.mod-center-tabs button[data-mod-tab="irl"]{display:none!important}.mod-center-tabs .tab-count{position:absolute;top:4px;right:calc(50% - 24px);min-width:17px;height:17px;font-size:8px}.desktop-tab-label{display:none}.mobile-tab-label{display:inline}
  .mod-center-stage{min-height:0}.mod-tab-panel.active{animation:none}
  .mod-dashboard-toolbar{align-items:center}.mod-dashboard-toolbar>div:first-child small{display:none}.mod-dashboard-toolbar .inline-actions{gap:2px}.mod-dashboard-toolbar .text-button{padding:6px}
  .mod-dashboard-grid{display:block}.mod-module,.mod-module[data-size]{min-height:0;margin-bottom:8px;padding:12px;border-radius:16px}.mod-module[data-mod-module="viewer"]{min-height:330px}.mod-module-controls{display:none!important}.mod-overview-queue,.mod-overview-chat{max-height:none}.mod-stream-viewer,.mod-stream-viewer iframe,.mod-stream-viewer .embed-placeholder{min-height:230px}
  .mod-queue-grid,.mod-controls-grid,.mod-irl-grid{display:block}.mod-queue-grid>.panel-card,.mod-controls-grid>.panel-card,.mod-irl-grid>.panel-card{margin-bottom:8px;border:0;border-radius:16px;background:var(--surface-1);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 62%,transparent)}
  .mod-chat-grid{display:block}.mod-chat-grid .chat-embed-card{min-height:calc(100dvh - 176px);margin-bottom:8px;border:0}.mod-chat-grid .chat-embed,.mod-session-chat{min-height:calc(100dvh - 330px)}.mod-inspector-card{position:static;max-height:none;border:0}
  .mod-activity-layout{display:block}.mod-activity-card{min-height:0;border:0}.mod-pulse-card{position:static;margin-top:8px;border:0}
  .mod-customize-dock{bottom:78px;border-radius:var(--radius-m)}.mod-customize-dock small{display:none}
  .mod-layout-dialog{width:100vw;max-width:none;margin:auto 0 0}.mod-layout-dialog .sheet-shell{max-height:92dvh;border-radius:var(--radius-xl) var(--radius-xl) 0 0}.mod-module-manager-row{grid-template-columns:minmax(0,1fr) 102px}.module-order-buttons{grid-column:1/-1;justify-content:flex-end}.mod-module-manager-row>label small{display:none}
}
@media (max-width:460px){.mod-dashboard-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.mod-overview-chat-row{grid-template-columns:minmax(72px,.35fr) minmax(0,1fr)}.mod-overview-chat-row time{display:none}.mod-module-manager-row{grid-template-columns:1fr}.mod-module-manager-row>select{width:100%}.module-order-buttons{grid-column:auto}}

/* =====================================================================
   v2.7.0 — Space-efficient workspaces + docked Moderator Stream page
   ===================================================================== */

/* Shared spatial discipline: surfaces separate regions; borders no longer frame every layer. */

.app-view:not(#view-home) .card-head{margin-bottom:10px}
@media (min-width:721px){
  .app-view>.section-toolbar{margin-bottom:9px}
  
}

/* Scroll audit: every settings/dialog surface has a real, visible overflow path. */
:where(.sheet-shell,.settings-flow-shell,.hub-popover,.notification-popover,.account-popover,.mini-shell,.legal-shell,.tutorial-card,#onboardingDialog>form){min-height:0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 34%,var(--surface-3)) transparent}
:where(.sheet-dialog[open] .sheet-shell,.mini-dialog[open] .mini-shell,.legal-dialog[open] .legal-shell,.tutorial-dialog[open] .tutorial-card,.setup-dialog[open]>form){max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.sheet-dialog .sheet-head{position:sticky;top:0;z-index:8;background:color-mix(in srgb,var(--surface-0) 96%,transparent);backdrop-filter:blur(16px)}
.sheet-dialog .sheet-footer{position:sticky;bottom:0;z-index:8;background:color-mix(in srgb,var(--surface-0) 96%,transparent);backdrop-filter:blur(16px)}
:where(.hub-scroll,.notification-list,.settings-flow-content,.mod-layout-options,.sheet-content,.starter-grid,.profile-manager,.form-grid,.whats-new-list){min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable}
:where(.sheet-shell,.settings-flow-content,.hub-scroll,.notification-list,.mod-layout-options,.settings-section.settings-page-active)::-webkit-scrollbar{width:10px;height:10px}
:where(.sheet-shell,.settings-flow-content,.hub-scroll,.notification-list,.mod-layout-options,.settings-section.settings-page-active)::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:var(--pill);background:color-mix(in srgb,var(--accent) 32%,var(--surface-3));background-clip:padding-box}
.settings-paged .settings-section.settings-page-active{max-height:calc(100dvh - 118px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}

/* Headline -> core tabs -> work. Secondary connection confirmations move to the bottom. */
#view-moderation{--mod-gap:8px}
.mod-center-toolbar{margin-bottom:5px}
.mod-center-tabs{position:sticky;top:66px;z-index:38;margin:0 0 9px;padding:0;border:0;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:0;background:color-mix(in srgb,var(--surface-0) 94%,transparent);box-shadow:none;backdrop-filter:blur(18px)}
.mod-center-tabs button{min-height:43px;border-radius:10px 10px 0 0;padding:8px 13px}
.mod-center-tabs button.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);box-shadow:inset 0 -2px 0 var(--accent)}
.mod-center-tabs button.active .ms{color:var(--accent)}
.mod-center-stage{min-height:360px}
.mod-status-utility-rail{position:sticky;bottom:7px;z-index:34;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:10px 0 0;border:1px solid color-mix(in srgb,var(--line) 66%,transparent);border-radius:var(--radius-s);background:color-mix(in srgb,var(--surface-0) 95%,transparent);box-shadow:0 14px 40px rgba(0,0,0,.22);backdrop-filter:blur(18px);overflow:hidden}
.mod-status-utility-rail>div{min-width:0;min-height:48px;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 10px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.mod-status-utility-rail>div+div{border-left:1px solid color-mix(in srgb,var(--line) 58%,transparent)!important}
.mod-status-utility-rail :is(.mod-mode-signal,>div>.ms){width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:rgba(var(--accent-rgb),.08);color:var(--accent)}
.mod-status-utility-rail>div>div{min-width:0;display:block}
.mod-status-utility-rail :is(small,span){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod-status-utility-rail>div>div>small:first-child{display:none}
.mod-status-utility-rail>div>div>span,.mod-status-utility-rail>div>div>small{display:block;color:var(--muted);font-size:calc(8px * var(--text-scale))}
.mod-status-utility-rail :is(.text-button,.primary-btn){min-height:30px;padding:5px 8px;font-size:calc(8px * var(--text-scale));white-space:nowrap}
body[data-mod-show-status="false"] .mod-status-utility-rail{display:none!important}

/* Essential metrics are one rail, not four nested cards. */
.mod-overview-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-bottom:8px;border-radius:13px;background:color-mix(in srgb,var(--line) 58%,transparent);overflow:hidden}
.mod-overview-summary button{min-width:0;min-height:56px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;padding:9px 12px;background:var(--surface-1);text-align:left;color:var(--text)}
.mod-overview-summary button:hover{background:color-mix(in srgb,var(--accent) 7%,var(--surface-1))}
.mod-overview-summary .ms{color:var(--accent);font-size:20px}
.mod-overview-summary button>span:last-child{min-width:0;display:grid;gap:2px}
.mod-overview-summary small{color:var(--muted);font:700 8px/1 var(--mono);letter-spacing:.08em}
.mod-overview-summary b{font-size:calc(17px * var(--text-scale));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Flatter modular dashboard. Editing chrome appears only when requested. */
.mod-dashboard-grid{gap:8px}
.mod-module{min-height:190px;padding:12px;border:0;border-radius:var(--radius-s);background:var(--surface-1);box-shadow:none}
.mod-module::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 48%,transparent)}
.mod-module{position:relative}
.mod-module-head{margin-bottom:7px}
.mod-module-head>div:first-child>.ms{width:30px;height:30px;border-radius:9px;background:rgba(var(--accent-rgb),.07)}
.mod-module-head small{font-size:7.5px}.mod-module-head h3{font-size:calc(14px * var(--text-scale))}
.mod-overview-row,.mod-overview-chat-row,.mod-overview-event{border-radius:8px;padding-block:7px}
.mod-dashboard-actions{gap:1px;border-radius:11px;background:color-mix(in srgb,var(--line) 55%,transparent);overflow:hidden}
.mod-dashboard-actions button{min-height:66px;border-radius:0;background:var(--surface-2);box-shadow:none}
.mod-health-grid,.mod-automod-mini{gap:1px;border-radius:11px;background:color-mix(in srgb,var(--line) 55%,transparent);overflow:hidden}
.mod-health-grid>span,.mod-automod-mini>span{border-radius:0;background:var(--surface-2)}
.mod-health-note{border-radius:9px}
.module-link{padding-top:8px}

/* Full Stream page: preview and chat remain together in portrait and landscape. */
.mod-stream-panel.active{display:block}
.mod-stream-workspace{height:min(760px,calc(100dvh - 210px));min-height:500px;display:grid;grid-template-columns:minmax(320px,var(--mod-stream-landscape,52%)) 10px minmax(340px,1fr);grid-template-rows:minmax(0,1fr);gap:0;border-radius:15px;background:color-mix(in srgb,var(--line) 58%,transparent);overflow:hidden}
.mod-stream-preview-region,.mod-stream-chat-region{min-width:0;min-height:0;display:grid;background:var(--surface-1)}
.mod-stream-preview-region{grid-template-rows:auto minmax(0,1fr) auto}
.mod-stream-chat-region{grid-template-rows:auto minmax(0,1fr) auto auto}
.mod-region-head{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border-bottom:1px solid color-mix(in srgb,var(--line) 56%,transparent)}
.mod-region-head>span:first-child{min-width:0;display:grid;gap:2px}.mod-region-head small{color:var(--accent);font:700 8px/1 var(--mono);letter-spacing:.1em}.mod-region-head b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod-stream-page-viewer{min-width:0;min-height:0;background:#050607;overflow:hidden}.mod-stream-page-viewer iframe{width:100%;height:100%;min-height:260px;border:0}.mod-stream-page-viewer .embed-placeholder{height:100%;min-height:260px}
.mod-stream-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:color-mix(in srgb,var(--line) 55%,transparent)}
.mod-stream-metrics>span{min-width:0;display:grid;gap:2px;padding:8px 10px;background:var(--surface-2)}.mod-stream-metrics small{color:var(--muted);font-size:calc(8px * var(--text-scale))}.mod-stream-metrics b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod-stream-page-chat{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px 6px}.mod-stream-page-chat .mod-chat-message{border-bottom-color:color-mix(in srgb,var(--line) 42%,transparent)}
.mod-stream-composer{margin:0;padding:8px;border-top:1px solid color-mix(in srgb,var(--line) 58%,transparent);border-radius:0;background:var(--surface-1)}
.mod-stream-quickbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:color-mix(in srgb,var(--line) 55%,transparent)}
.mod-stream-quickbar button{min-width:0;min-height:48px;display:grid;place-items:center;align-content:center;gap:2px;padding:5px 3px;background:var(--surface-2);color:var(--text)}.mod-stream-quickbar button:hover{background:rgba(var(--accent-rgb),.09);color:var(--accent)}.mod-stream-quickbar .ms{font-size:18px}.mod-stream-quickbar button>span:last-child{font-size:calc(8px * var(--text-scale))}
.mod-stream-divider{position:relative;display:grid;place-items:center;padding:0;background:var(--surface-0);cursor:col-resize;touch-action:none}.mod-stream-divider span{width:3px;height:44px;border-radius:var(--pill);background:color-mix(in srgb,var(--accent) 32%,var(--surface-3))}.mod-stream-divider:hover span,.mod-stream-resizing .mod-stream-divider span{background:var(--accent)}
body.mod-stream-resizing{user-select:none;cursor:col-resize}

/* Deep pages use continuous work regions instead of card mosaics. */
.mod-queue-grid,.mod-controls-grid,.mod-activity-layout,.mod-irl-grid,.mod-chat-grid{gap:1px;border-radius:var(--radius-s);background:color-mix(in srgb,var(--line) 55%,transparent);overflow:hidden}
#view-moderation :is(.mod-queue-grid,.mod-controls-grid,.mod-activity-layout,.mod-irl-grid,.mod-chat-grid)>.panel-card{border:0;border-radius:0;background:var(--surface-1);box-shadow:none}
.mod-chat-grid{grid-template-columns:minmax(0,1.65fr) minmax(300px,var(--mod-inspector-width,360px))}
.mod-chat-grid .chat-embed-card,.mod-inspector-card{min-height:620px}
.mod-inspector-card{max-height:calc(100dvh - 190px);overflow:auto;scrollbar-width:thin}
.mod-queue-list,.mod-activity-feed,.chatter-list{scrollbar-width:thin}

/* Preset cards remain compact and become a real six-choice system. */
.layout-preset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.layout-preset-grid button{min-height:112px;align-content:start;text-align:left}
.mod-stream-split-settings{display:grid;grid-template-columns:minmax(190px,.9fr) repeat(2,minmax(220px,1fr));align-items:end;gap:10px;padding:12px;border-radius:var(--radius-s);background:var(--surface-1);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 56%,transparent)}
.mod-stream-split-settings>div{align-self:center}.mod-stream-split-settings>div small{display:block;color:var(--accent);font:700 8px/1 var(--mono);letter-spacing:.1em}.mod-stream-split-settings>div b{display:block;margin-top:5px}

.mod-mobile-more-hub{display:none}

@media (max-width:1100px) and (min-width:721px){
  .mod-center-tabs{top:62px;overflow-x:auto;scrollbar-width:none}.mod-center-tabs::-webkit-scrollbar{display:none}
  .mod-center-tabs button{flex:1 0 auto;padding-inline:10px}
  .mod-status-utility-rail{grid-template-columns:1fr}
  .mod-status-utility-rail>div+div{border-left:0!important;border-top:1px solid color-mix(in srgb,var(--line) 58%,transparent)!important}
  .mod-dashboard-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
  .mod-module[data-size="compact"]{grid-column:span 2}.mod-module[data-size="standard"],.mod-module[data-size="wide"],.mod-module[data-size="tall"]{grid-column:span 4}.mod-module[data-size="full"]{grid-column:1/-1}
  .mod-overview-summary{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mod-stream-workspace{height:min(700px,calc(100dvh - 230px));grid-template-columns:minmax(280px,var(--mod-stream-landscape,52%)) 9px minmax(300px,1fr)}
  .mod-stream-split-settings{grid-template-columns:1fr 1fr}.mod-stream-split-settings>div{grid-column:1/-1}
}

/* Phone portrait: a docked app bar, not a floating pill. */
@media (max-width:720px){
  body[data-current-view="moderation"] .mobile-nav{display:none!important}
  #view-moderation{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .mod-center-toolbar{margin-bottom:6px}.mod-center-toolbar>div:first-child{display:none}
  .mod-mobile-toolbar{width:100%;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border-radius:11px;background:color-mix(in srgb,var(--line) 55%,transparent);overflow:hidden}
  .mod-mobile-toolbar>*{width:100%;min-height:42px;padding:7px 4px;border:0!important;border-radius:0!important;background:var(--surface-1)!important;justify-content:center}.mod-mobile-toolbar .ms{font-size:18px}.mod-mobile-toolbar span:last-child{font-size:calc(8px * var(--text-scale));white-space:nowrap}
  .mod-center-tabs{position:fixed;z-index:95;left:0;right:0;top:auto;bottom:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0;padding:4px max(4px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));border:0;border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent);border-radius:0;background:color-mix(in srgb,var(--surface-0) 97%,transparent);box-shadow:0 -12px 32px rgba(0,0,0,.26);backdrop-filter:blur(20px);overflow:visible}
  .mod-center-tabs button{position:relative;min-width:0;min-height:57px;display:grid;place-items:center;align-content:center;gap:3px;padding:5px 2px;border-radius:var(--radius-xs);background:transparent;box-shadow:none!important}.mod-center-tabs button.active{background:rgba(var(--accent-rgb),.09)}.mod-center-tabs button .ms{font-size:21px}.mod-center-tabs button>span:not(.ms):not(.tab-count){font-size:calc(8px * var(--text-scale));line-height:1}.mod-center-tabs button[data-mod-tab="stream"]{display:grid;order:1}.mod-center-tabs button[data-mod-tab="queues"]{order:2}.mod-center-tabs button[data-mod-tab="chat"]{order:3}.mod-center-tabs button[data-mod-tab="controls"]{order:4}.mod-center-tabs button[data-mod-tab="overview"]{order:5}.mod-center-tabs button[data-mod-tab="activity"],.mod-center-tabs button[data-mod-tab="irl"]{display:none!important}.mod-center-tabs .tab-count{position:absolute;top:4px;right:calc(50% - 24px);min-width:17px;height:17px;font-size:8px}.desktop-tab-label{display:none}.mobile-tab-label{display:inline}
  .mod-center-stage{min-height:0}.mod-tab-panel.active{animation:none}
  .mod-status-utility-rail{display:none;position:static;margin:8px 0 0;border-radius:12px;box-shadow:none}
  body[data-mod-active-tab="overview"][data-mod-show-status="true"] .mod-status-utility-rail{display:grid;grid-template-columns:1fr}
  .mod-status-utility-rail>div+div{border-left:0!important;border-top:1px solid color-mix(in srgb,var(--line) 58%,transparent)!important}
  .mod-stream-workspace{height:calc(100dvh - 151px - env(safe-area-inset-bottom));min-height:520px;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(170px,var(--mod-stream-portrait,38%)) 9px minmax(250px,1fr);border-radius:12px}
  .mod-stream-divider{cursor:row-resize}.mod-stream-divider span{width:44px;height:3px}body.mod-stream-resizing{cursor:row-resize}
  .mod-region-head{min-height:42px;padding:6px 9px}.mod-region-head .inline-actions{gap:4px}.mod-region-head .state-pill{font-size:8px}.mod-region-head .text-link{font-size:9px}
  .mod-stream-page-viewer iframe,.mod-stream-page-viewer .embed-placeholder{min-height:170px}.mod-stream-metrics>span{padding:6px 8px}
  .mod-stream-quickbar button{min-height:43px}.mod-stream-page-chat{padding-inline:3px}
  .mod-mobile-more-hub{display:block}.mod-mobile-more-hub header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 3px 10px}.mod-mobile-more-hub header small{color:var(--accent);font:700 8px/1 var(--mono);letter-spacing:.1em}.mod-mobile-more-hub h3{margin:4px 0 0;font-size:calc(18px * var(--text-scale))}
  .mod-more-list{display:grid;gap:1px;border-radius:13px;background:color-mix(in srgb,var(--line) 55%,transparent);overflow:hidden}.mod-more-list>button{min-width:0;min-height:64px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:10px 12px;background:var(--surface-1);text-align:left;color:var(--text)}.mod-more-list>button>.ms:first-child{width:35px;height:35px;display:grid;place-items:center;border-radius:var(--radius-xs);background:rgba(var(--accent-rgb),.08);color:var(--accent)}.mod-more-list>button>span:nth-child(2){min-width:0;display:grid;gap:3px}.mod-more-list small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mod-more-list>button>.ms:last-child{color:var(--muted)}
  [data-mod-panel="overview"]>.mod-dashboard-toolbar,[data-mod-panel="overview"]>.mod-overview-summary,[data-mod-panel="overview"]>#modDashboardGrid,[data-mod-panel="overview"]>.mod-customize-dock{display:none!important}
  .mod-queue-grid,.mod-controls-grid,.mod-irl-grid,.mod-activity-layout,.mod-chat-grid{display:block;border-radius:12px;background:transparent;overflow:visible}
  #view-moderation :is(.mod-queue-grid,.mod-controls-grid,.mod-irl-grid,.mod-activity-layout,.mod-chat-grid)>.panel-card{margin-bottom:1px;border-radius:0}.mod-queue-grid>.panel-card:first-child,.mod-controls-grid>.panel-card:first-child,.mod-irl-grid>.panel-card:first-child,.mod-activity-layout>.panel-card:first-child,.mod-chat-grid>.panel-card:first-child{border-radius:12px 12px 0 0}.mod-queue-grid>.panel-card:last-child,.mod-controls-grid>.panel-card:last-child,.mod-irl-grid>.panel-card:last-child,.mod-activity-layout>.panel-card:last-child,.mod-chat-grid>.panel-card:last-child{border-radius:0 0 12px 12px}
  .mod-chat-grid .chat-embed-card{min-height:calc(100dvh - 151px - env(safe-area-inset-bottom))}.mod-chat-grid .chat-embed,.mod-session-chat{min-height:calc(100dvh - 320px)}.mod-inspector-card{position:static;max-height:none;min-height:0}
  .layout-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mod-stream-split-settings{grid-template-columns:1fr}.mod-stream-split-settings>div{grid-column:auto}
  .mod-layout-dialog{width:100vw;max-width:none;margin:auto 0 0}.mod-layout-dialog .sheet-shell{max-height:94dvh;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
  .settings-paged .settings-section.settings-page-active{max-height:none;overflow:visible}
}

/* Small landscape phones: dock becomes a side rail and Stream uses a true split view. */
@media (orientation:landscape) and (max-width:960px) and (max-height:620px){
  body[data-current-view="moderation"] .mobile-nav{display:none!important}
  #view-moderation{padding:0 0 0 calc(69px + env(safe-area-inset-left))}
  .mod-center-toolbar{margin:0 6px 5px}.mod-mobile-toolbar{max-width:420px}
  .mod-center-tabs{left:0;right:auto;top:0;bottom:0;width:calc(67px + env(safe-area-inset-left));grid-template-columns:1fr;grid-template-rows:repeat(5,minmax(0,1fr));padding:max(4px,env(safe-area-inset-top)) 4px max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));border-top:0;border-right:1px solid color-mix(in srgb,var(--line) 72%,transparent);box-shadow:12px 0 32px rgba(0,0,0,.22)}
  .mod-center-tabs button{min-height:0;height:100%;border-radius:9px}.mod-center-tabs button[data-mod-tab="stream"]{order:1}.mod-center-tabs button[data-mod-tab="queues"]{order:2}.mod-center-tabs button[data-mod-tab="chat"]{order:3}.mod-center-tabs button[data-mod-tab="controls"]{order:4}.mod-center-tabs button[data-mod-tab="overview"]{order:5}
  .mod-stream-workspace{height:calc(100dvh - 53px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:300px;grid-template-columns:minmax(270px,var(--mod-stream-landscape,52%)) 9px minmax(300px,1fr);grid-template-rows:minmax(0,1fr);border-radius:var(--radius-xs)}
  .mod-stream-divider{cursor:col-resize}.mod-stream-divider span{width:3px;height:42px}body.mod-stream-resizing{cursor:col-resize}
  .mod-stream-metrics>span{padding:5px 7px}.mod-stream-quickbar button{min-height:38px}.mod-stream-composer{padding:5px}.mod-stream-page-viewer iframe,.mod-stream-page-viewer .embed-placeholder{min-height:200px}
  .mod-chat-grid .chat-embed-card{min-height:calc(100dvh - 58px)}
}

@media (max-width:460px){
  .mod-overview-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mod-stream-metrics small{font-size:7px}.mod-stream-metrics b{font-size:calc(11px * var(--text-scale))}
  .mod-stream-quickbar button>span:last-child{display:none}.mod-stream-quickbar button{min-height:40px}
  .layout-preset-grid{grid-template-columns:1fr}
}

/* v2.7.0 verification fixes: fixed docks must use the viewport, including landscape phones. */
#view-moderation.active{animation:none!important;transform:none!important}
@media (max-width:720px){
  .mod-center-tabs{left:0!important;right:0!important;width:auto!important}
}
@media (orientation:landscape) and (max-width:960px) and (max-height:620px){
  body[data-current-view="moderation"] .sidebar,
  body[data-current-view="moderation"] .status-strip,
  body[data-current-view="moderation"] .mobile-nav{display:none!important}
  body[data-current-view="moderation"] .app-shell{display:block!important;min-height:100dvh;padding:0!important}
  body[data-current-view="moderation"] .app-main{grid-column:auto!important;min-height:100dvh}
  body[data-current-view="moderation"] .view-stack{width:100%;max-width:none;margin:0;padding:max(5px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) calc(73px + env(safe-area-inset-left))}
  #view-moderation{padding:0!important}
  .mod-center-tabs{position:fixed!important;left:0!important;right:auto!important;top:0!important;bottom:0!important;width:calc(67px + env(safe-area-inset-left))!important;height:100dvh;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:repeat(5,minmax(0,1fr))!important;gap:0!important;margin:0!important;padding:max(4px,env(safe-area-inset-top)) 4px max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))!important;border:0!important;border-right:1px solid color-mix(in srgb,var(--line) 72%,transparent)!important;border-radius:0!important;background:color-mix(in srgb,var(--surface-0) 97%,transparent)!important;box-shadow:12px 0 32px rgba(0,0,0,.22)!important;overflow:visible!important}
  .mod-center-tabs button{min-height:0!important;height:100%!important;display:grid!important;place-items:center!important;align-content:center!important;gap:2px!important;padding:3px 2px!important;border-radius:9px!important}
  .mod-center-tabs button .ms{font-size:20px}.mod-center-tabs button>span:not(.ms):not(.tab-count){display:block;font-size:calc(7px * var(--text-scale));line-height:1}
  .mod-center-tabs button[data-mod-tab="stream"]{order:1!important}.mod-center-tabs button[data-mod-tab="queues"]{order:2!important}.mod-center-tabs button[data-mod-tab="chat"]{order:3!important}.mod-center-tabs button[data-mod-tab="controls"]{order:4!important}.mod-center-tabs button[data-mod-tab="overview"]{order:5!important}.mod-center-tabs button[data-mod-tab="activity"],.mod-center-tabs button[data-mod-tab="irl"]{display:none!important}
  .desktop-tab-label{display:none!important}.mobile-tab-label{display:inline!important}
  .mod-center-toolbar{margin:0 0 5px!important}.mod-center-toolbar>div:first-child{display:none!important}.mod-mobile-toolbar{width:min(430px,100%);display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px}
  .mod-mobile-toolbar>*{min-height:38px!important;padding:5px 4px!important}.mod-mobile-toolbar .ms{font-size:17px}.mod-mobile-toolbar span:last-child{font-size:calc(7px * var(--text-scale));white-space:nowrap}
  .mod-stream-workspace{height:calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;min-height:280px!important}
}

/* v2.7.0 finishing pass — keep secondary connection states truly secondary. */
@media (min-width:721px){
  .mod-status-utility-rail{
    position:sticky;
    bottom:max(7px,env(safe-area-inset-bottom));
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    min-height:42px;
    margin-top:8px;
    border-radius:11px;
  }
  .mod-status-utility-rail>div{
    min-height:42px!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:7px!important;
    padding:5px 8px!important;
  }
  .mod-status-utility-rail :is(.mod-mode-signal,>div>.ms){width:24px;height:24px;border-radius:8px;font-size:15px}
  .mod-status-utility-rail>div>div{display:block!important}
  .mod-status-utility-rail :is(#modModeSummary,#modLiveCopy,.permission-banner small){display:none!important}
  .mod-status-utility-rail :is(#modModeHelping,#modLiveStatus,.permission-banner strong){display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(9px * var(--text-scale));line-height:1.15}
  .mod-status-utility-rail :is(.text-button,.primary-btn){min-height:26px;padding:3px 6px;font-size:calc(7.5px * var(--text-scale))}
  .mod-status-utility-rail .primary-btn .ms{font-size:14px}
  /* Reserve the utility rail rather than making it compete with the work surface. */
  .mod-stream-workspace{height:min(720px,calc(100dvh - 260px))}
}

/* Mobile status details belong in More, not on top of the stream workspace. */
@media (orientation:landscape) and (max-width:960px) and (max-height:620px){
  body[data-current-view="moderation"] .topbar,
  body[data-current-view="moderation"] .demo-ribbon,
  .mod-status-utility-rail{display:none!important}
  body[data-current-view="moderation"] .view-stack{padding-top:max(4px,env(safe-area-inset-top))}
  .mod-stream-workspace{height:calc(100dvh - 47px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important}
}

/* The demo ribbon should never cover operational mobile UI. Exit remains in the header/menu. */
@media (max-width:720px){
  body[data-current-view="moderation"] .demo-ribbon{display:none!important}
}

/* Keep the moderation workspace clear: Demo exit is already available in the top bar/profile menu. */
body[data-current-view="moderation"] .demo-ribbon{display:none!important}
@media (min-width:721px){
  .mod-stream-workspace{height:min(700px,calc(100dvh - 330px));min-height:420px}
}
@media (orientation:landscape) and (max-width:960px) and (max-height:620px){
  body[data-current-view="moderation"] .app-topbar{display:none!important}
}
@media (max-width:720px){
  .mod-stream-workspace{height:calc(100dvh - 257px - env(safe-area-inset-bottom));min-height:500px}
}
@media (orientation:landscape) and (max-width:960px) and (max-height:620px){
  .mod-stream-workspace{height:calc(100dvh - 47px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;min-height:280px!important}
}
@media (max-width:720px){
  body[data-mod-active-tab="overview"][data-mod-show-status="true"] .mod-status-utility-rail{display:grid!important}
}

/* v2.7.1 — Keep the guided-tour card unobstructed.
   The tour card (z 250) shares the bottom-right corner with the toast stack
   (z 300) and the demo ribbon (z 260), which could cover its Skip/Back/Next
   controls. While the tour is open, toasts relocate to the top edge and the
   passive demo ribbon fades out; both return as soon as the tour closes. */
body:has(.tutorial-dialog[open]) .toast-stack{top:calc(74px + env(safe-area-inset-top));bottom:auto!important}
.demo-ribbon{transition:opacity .2s ease}
body:has(.tutorial-dialog[open]) .demo-ribbon{opacity:0;pointer-events:none}

/* v2.7.1 — Demo ribbon vs. sidebar overlap.
   The ribbon positioned itself with var(--sidebar-w), which was never
   defined (falling back to 88px while the real sidebar is 244px, or 212px
   below 1281px), and its <=960px rule went full-width while the sidebar is
   still visible down to 821px. Both cases let the ribbon cover the sidebar's
   Settings and Install buttons. Define the true sidebar width per breakpoint
   and keep the ribbon clear of the sidebar wherever it exists. */
/* --sidebar-w is now defined by the v6.33 breakpoint system (see the
   DESIGN SYSTEM PASS block) so the rail, laptop and desktop widths
   stay in one place. The old three-line definition lived here. */
@media (min-width:821px) and (max-width:960px){.demo-ribbon{left:calc(var(--sidebar-w) + 14px);bottom:18px}}

/* v2.7.2 — Design refinement pass (within the High-Vis Basecamp system).
   1) Tabular figures on live-updating stat numbers so counters don't
      jitter horizontally as digits change during a stream. */
.mod-health-grid b,
.mod-pulse-grid b,
.mod-automod-mini b,
.mod-overview-summary b,
.mod-stream-metrics b,
.belabox-metric-grid b{font-variant-numeric:tabular-nums}

/* 2) Slightly stronger keyboard/focus affordance on text fields: the
      existing accent border gains a soft accent halo, matching the
      focus language used elsewhere in the system. */
.field input:focus-visible, .field select:focus-visible, textarea:focus-visible,
.search-field input:focus-visible, .quick-send input:focus-visible,
.chat-composer input:focus-visible, .compact-input:focus-visible{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16);
}

/* 3) Control Room mini-deck tiles: the title and subtitle rendered
      inline against each other ("Welcome InChat message"). Stack the
      tile's text block like the full Command Deck tiles do. */

/* 4) One scrollbar language everywhere. Overlays already use the thin
      accent-tinted treatment; the document and the always-scrolling work
      regions (queues, chats, activity feeds, module areas) now match, so
      desktop chrome reads as one piece of equipment. */
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 26%,var(--surface-3)) transparent}
:where(.mod-queue-list,.mod-session-chat,.mod-activity-feed,.chat-embed){scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 26%,var(--surface-3)) transparent}
body::-webkit-scrollbar{width:10px;height:10px}
body::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:var(--pill);background:color-mix(in srgb,var(--accent) 26%,var(--surface-3));background-clip:padding-box}
body::-webkit-scrollbar-track{background:transparent}

/* 5) Toasts no longer land on top of the demo ribbon: while the ribbon
      is visible, the stack rises above it, so transient messages and the
      persistent demo controls each keep their own space. */
body:has(.demo-ribbon:not([hidden])) .toast-stack{bottom:calc(96px + env(safe-area-inset-bottom))}
@media (max-width:960px){
  body:has(.demo-ribbon:not([hidden])) .toast-stack{bottom:calc(206px + env(safe-area-inset-bottom))}
}

/* 6) Orphan control on introductory copy: section and card paragraphs
      avoid single-word last lines where the browser supports it. */
:where(.section-toolbar p,.card-head p,.settings-toolbar p,.welcome-copy p){text-wrap:pretty}

/* =====================================================================
   v2.8.0 — Moderator Center refinement
   ===================================================================== */

/* Queue entries: the two-column item grid crushed usernames to one
   character per line once the deep-dive pages went three-up, because the
   inline action row claimed nearly the full track. Entries now stack —
   full-width context on top, a wrapping action row beneath — so the
   message text is always readable and every action stays a large target. */
.mod-queue-item{grid-template-columns:minmax(0,1fr)}
.mod-queue-actions{justify-content:flex-start;padding-top:2px}
.mod-queue-actions>button{flex:0 1 auto}

/* Native form controls join the system: checkboxes, radios, range sliders,
   and progress bars pick up the workspace accent instead of browser grey. */
input[type="checkbox"],input[type="radio"],input[type="range"],progress{accent-color:var(--accent)}

/* Chat-tab user inspector: the lookup field now leads the card, so a
   moderator can act on a name immediately; the empty state fills the
   remaining space beneath it instead of pushing the tool below the fold. */
.mod-user-search{margin-top:0;margin-bottom:6px}
.mod-inspector-empty{min-height:240px}

/* Stream page: the sticky utility rail overlapped the workspace's bottom
   metrics strip because the Stream workspace is viewport-height. The rail
   (secondary confirmations) steps aside on Stream — mirroring the mobile
   pattern where it appears only on Overview — so the preview, chat,
   composer, and metrics strip own the full height. */
body[data-mod-active-tab="stream"] .mod-status-utility-rail{display:none!important}

/* =====================================================================
   v2.9.0 — Broadcast-style moderator dashboard
   ===================================================================== */

/* Hero module size: the stream viewer anchors the dashboard like a
   broadcast console — two-thirds width, two rows tall — with the live
   chat rail standing beside it. */
.mod-module[data-size="hero"]{grid-column:span 8;grid-row:span 2;min-height:430px}
@media (max-width:1100px){.mod-module[data-size="hero"]{grid-column:span 8}}
@media (max-width:820px){.mod-module[data-size="hero"]{grid-column:span 2}}

/* Condensed modules: only the head remains, one row tall; the chevron
   flips to show state. Every module can be condensed and re-expanded. */
.mod-module [data-module-collapse] .ms{transition:transform .18s var(--ease)}
.mod-module[data-collapsed="true"]{grid-row:span 1;min-height:0}
.mod-module[data-collapsed="true"]>*:not(.mod-module-head){display:none!important}
.mod-module[data-collapsed="true"] [data-module-collapse] .ms{transform:rotate(180deg)}
.mod-module[data-collapsed="true"] .mod-module-head{margin-bottom:0}

/* Chat rows accept horizontal swipe (vertical scroll is preserved);
   while swiping, the row slides with the finger over an accent hint. */
.mod-chat-message{touch-action:pan-y;position:relative}
.mod-chat-message.swiping{transition:none;background:rgba(var(--accent-rgb),.07);border-radius:var(--radius-xs)}
.mod-chat-message:not(.swiping){transition:transform .18s var(--ease)}

/* Moderation action sheet: centered card on desktop, bottom sheet on
   phones, actions as a two-column grid of large targets. */
.mod-message-sheet{position:fixed;inset:0;margin:auto;width:min(430px,calc(100vw - 32px));border:1px solid var(--line);border-radius:var(--radius-l);background:var(--surface-1);color:var(--text);padding:0}
.mod-message-sheet::backdrop{background:rgba(8,10,7,.55);backdrop-filter:blur(6px)}
.mod-sheet-inner{display:grid;gap:12px;padding:16px}
.mod-sheet-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.mod-sheet-head>span:nth-child(2){min-width:0;display:grid;gap:2px}
.mod-sheet-head b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mod-sheet-head small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mod-sheet-message{margin:0;padding:10px 12px;border-radius:var(--radius-xs);background:var(--surface-2);color:var(--muted);font-size:calc(12px * var(--text-scale));line-height:1.5;max-height:88px;overflow:auto}
.mod-sheet-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mod-sheet-actions>button{justify-content:flex-start;min-height:46px}
@media (max-width:640px){
  .mod-message-sheet{inset:auto 0 0 0;margin:0;width:100vw;max-width:none;border-radius:var(--radius-l) var(--radius-l) 0 0;border-bottom:0}
  .mod-sheet-inner{padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
}

/* Notification shade: the header action cluster inherited a stacked grid
   from a broader header rule, putting Clear all directly above Close.
   Pin it to a horizontal row. */
.notification-header-actions{display:flex!important;flex-direction:row;align-items:center}

/* v2.9.1 — Between 721 and 820px wide, the fixed mobile navigation covers
   the bottom of the viewport while the moderator utility rail still stuck
   7px above the viewport edge, so the two bars sat on top of each other
   (the rail bleeding through the nav's translucent blur). Lift the rail
   clear of the nav in exactly that band; every other breakpoint already
   pairs the bars correctly. */
@media (min-width:721px) and (max-width:820px){
  .mod-status-utility-rail{bottom:calc(86px + env(safe-area-inset-bottom))}
}

/* =====================================================================
   v2.10.0 — Redundant moderator spaces removed, surfaces unified
   ===================================================================== */

/* The broadcast dashboard (hero Stream Viewer + tall Live Chat rail) made
   the separate desktop Stream page a duplicate of the Overview. On desktop
   and tablet the dashboard is now the single home for video + chat, and
   the Stream tab appears only where it is genuinely its own surface: the
   phone dock and compact landscape, where the resizable full-screen
   video/chat split is the right tool. */
@media (min-width:721px){
  #modCenterTabs [data-mod-tab="stream"]{display:none}
}
@media (orientation:landscape) and (max-width:960px) and (max-height:620px){
  #modCenterTabs [data-mod-tab="stream"]{display:inline-flex}
}

/* The inverse holds on phones: the dock's dedicated Stream tab already
   provides full-screen video + chat, so the dashboard's Stream Viewer
   module is a duplicate there and steps aside. It remains available on
   desktop and tablet where it anchors the dashboard. */
@media (max-width:720px){
  .mod-module[data-mod-module="viewer"]{display:none!important}
}

/* =====================================================================
   v3.0.0 — Moderation Center rebuilt: one bar, then content
   ===================================================================== */

/* The Center's chrome collapses to a single bar: pages on the left, three
   icon actions on the right. The headline block, the dashboard's own
   toolbar row, and the four-cell metrics strip are gone — tab badges and
   the Session Health module already carry that information. */
.mod-center-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mod-center-bar .mod-center-tabs{flex:1;min-width:0;margin-bottom:0}
.mod-header-actions{display:flex;gap:6px;flex:0 0 auto}
.mod-header-actions .icon-button{width:auto;min-height:40px;padding:0 12px;display:inline-flex;align-items:center;gap:7px;border-radius:var(--pill)}
.mod-header-actions .mod-action-label{font-size:calc(11px * var(--text-scale));font-weight:640;white-space:nowrap}
.mod-header-actions #modModeToggle.mode-active{background:rgba(var(--accent-rgb),.16);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5)}

/* The status rail is alerts-only: it appears when Twitch access or live
   monitoring needs attention and stays out of the way when nominal. */
#modStatusGrid[data-alerts="none"]{display:none!important}
.mod-status-utility-rail{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Module chrome quiets down: condense/resize/remove/drag controls appear
   on hover or keyboard focus on pointer devices, and stay visible on touch. */
@media (hover:hover){
  .mod-module .mod-module-controls{opacity:0;transition:opacity .15s var(--ease)}
  .mod-module:hover .mod-module-controls,
  .mod-module:focus-within .mod-module-controls,
  body.mod-layout-editing .mod-module-controls{opacity:1}
}

/* Phone: the three header actions compress to icon-only cells. */
@media (max-width:720px){
  .mod-center-bar{display:block;margin-bottom:8px}
  .mod-header-actions .mod-action-label{display:none}
  .mod-header-actions .icon-button{justify-content:center}
}

/* =====================================================================
   v3.0.1 — Mobile Moderator Center feels like a phone app
   ===================================================================== */
@media (max-width:720px){
  /* One less chrome bar: the header action row disappears; Mod Mode,
     Refresh, and Customize live as rows on the More page instead. */
  #view-moderation .mod-header-actions{display:none!important}
  .mod-center-bar{margin-bottom:0}

  /* More is a short, purposeful hub: the stacked module dashboard is
     removed on phones because every module there duplicates a dock tab
     or a More row that is one tap away. Modules remain the desktop and
     tablet dashboard; on phones the dock is the dashboard. */
  #modDashboardGrid{display:none!important}
  .mod-mobile-more-hub header{min-height:0;margin-bottom:10px}
  .mod-mobile-more-hub header h3{margin:0;font-size:calc(17px * var(--text-scale))}

  /* Arranging modules by drag has no surface on phones; the Customize
     manager (toggle, size, precise ordering) is the mobile tool. */
  #modArrangeFromDialog{display:none!important}

  /* Content pages breathe: card headers compress to one tight line. */
  #view-moderation .panel-card>.card-head{min-height:0;margin-bottom:8px}
  #view-moderation .panel-card>.card-head h3{font-size:calc(15px * var(--text-scale))}
  #view-moderation .panel-card>.card-head small{font-size:calc(8px * var(--text-scale))}
}

/* =====================================================================
   v3.0.3 — Media surfaces run edge-to-edge, fully themed
   ===================================================================== */

/* The Stream Viewer and Live Chat previously sat as inset dark boxes
   inside padded cards. They now ARE their modules: a slim flush header,
   media bleeding to the card edges, and a full-width footer bar — the
   same language the Stream page's regions already speak. Placeholder
   surfaces use theme tokens instead of hard-coded near-black, so light
   and alternate themes render them natively. */

/* Dashboard: Stream Viewer module */
.mod-module[data-mod-module="viewer"]{padding:0}
.mod-module[data-mod-module="viewer"] .mod-module-head{padding:11px 14px;margin-bottom:0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.mod-stream-viewer{border-radius:0;background:color-mix(in srgb,var(--surface-0) 94%,var(--accent) 6%)}
.mod-stream-viewer .embed-placeholder{background:radial-gradient(120% 90% at 78% 18%,rgba(var(--accent-rgb),.1),transparent 55%),var(--surface-0)}
.mod-viewer-footer{margin:0;padding:10px 14px;border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.mod-module[data-mod-module="viewer"][data-collapsed="true"] .mod-module-head{border-bottom:0}

/* Dashboard: Live Chat module */
.mod-module[data-mod-module="chat"]{padding:0}
.mod-module[data-mod-module="chat"] .mod-module-head{padding:11px 14px;margin-bottom:0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.mod-module[data-mod-module="chat"] .mod-overview-chat{flex:1;padding:6px 8px;background:color-mix(in srgb,var(--surface-0) 55%,transparent)}
.mod-module[data-mod-module="chat"] .module-link{margin-top:0;padding:11px 14px;border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.mod-module[data-mod-module="chat"][data-collapsed="true"] .mod-module-head{border-bottom:0}

/* Chat page: the embed card is the chat */
.mod-chat-grid .chat-embed-card{padding:0;overflow:hidden}
.mod-chat-grid .chat-embed-card>.card-head{min-height:0;margin-bottom:0;padding:11px 14px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.mod-chat-grid .chat-embed{border:0;border-radius:0;background:color-mix(in srgb,var(--surface-0) 94%,var(--accent) 6%)}
.mod-chat-grid .chat-embed .embed-placeholder{background:radial-gradient(120% 90% at 78% 18%,rgba(var(--accent-rgb),.08),transparent 55%),var(--surface-0)}
.mod-chat-grid .mod-session-chat{padding:8px 10px}

/* v3.0.4 — Count badges overhang their buttons by design (ringed with the
   background color); the generic icon-button overflow clip was cutting
   them off. These two buttons render their badges in full. */
.topbar-hub-button,.notification-button{overflow:visible}

/* Tutorial track chooser */
.tutorial-chooser{display:grid;justify-items:center;gap:10px;text-align:center}
.tutorial-chooser[hidden]{display:none}
.tutorial-choice-grid{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:6px 0 2px}
.tutorial-choice{display:grid;justify-items:center;gap:6px;padding:16px 12px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface-2);text-align:center}
.tutorial-choice:hover{background:var(--surface-3);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.tutorial-choice .ms{font-size:26px;color:var(--accent)}
.tutorial-choice b{font-size:calc(14px * var(--text-scale))}
.tutorial-choice small{color:var(--muted);line-height:1.45}
.tutorial-step-body[hidden]{display:none}
@media (max-width:520px){.tutorial-choice-grid{grid-template-columns:1fr}}

/* =====================================================================
   v3.0.5 — Default layout, top-row Arrange, and a fixed Customize dialog
   ===================================================================== */

/* Arrange lives in the header row on pointer devices; phones keep the
   Customize manager as their arranging tool. */
@media (max-width:720px){#modArrangeTop{display:none!important}}
body.mod-layout-editing #modArrangeTop{background:rgba(var(--accent-rgb),.16);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5)}

/* Customize dialog scrolling, repaired:
   1) One scroll container. The module list previously scrolled inside the
      already-scrolling sheet, trapping the wheel and splitting the
      scrollbar in two. The inner region now flows and only the sheet
      scrolls.
   2) The header no longer follows you. It scrolls away with the content
      instead of hovering translucently over it.
   3) The scrollbar is easier to grab: wider track, larger thumb. */
.mod-layout-dialog .mod-layout-options{overflow:visible;max-height:none}
.mod-layout-dialog .sheet-head{position:static;background:transparent;backdrop-filter:none}
.mod-layout-dialog .sheet-shell{scrollbar-width:auto}
.mod-layout-dialog .sheet-shell::-webkit-scrollbar{width:14px}
.mod-layout-dialog .sheet-shell::-webkit-scrollbar-thumb{border:4px solid transparent;border-radius:var(--pill);background:color-mix(in srgb,var(--accent) 36%,var(--surface-4));background-clip:padding-box;min-height:48px}
.mod-layout-dialog .sheet-shell::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--accent) 52%,var(--surface-4));background-clip:padding-box}
.mod-layout-dialog .sheet-shell::-webkit-scrollbar-track{background:transparent}

/* =====================================================================
   v3.1.0 — Native dashboard chat & scroll-container audit
   ===================================================================== */

/* The dashboard Live Chat is a full chat surface: messages oldest to
   newest, pinned to the latest like Twitch, with a composer and a
   focused-chat shortcut as the bottom bar. Message rows accept the same
   moderation actions as everywhere else: click on desktop, long-press
   or swipe on touch, opening the action sheet. */
.mod-module[data-mod-module="chat"] .mod-overview-chat{flex:1 1 auto;min-height:0;overscroll-behavior:contain;max-height:300px}
.mod-module[data-mod-module="chat"][data-size="tall"] .mod-overview-chat,
.mod-module[data-mod-module="chat"][data-size="hero"] .mod-overview-chat{max-height:470px}
.mod-module[data-mod-module="chat"][data-size="full"] .mod-overview-chat{max-height:380px}
/* Long or unbroken messages wrap inside the box instead of widening it. */
.mod-chat-message{min-width:0}
.mod-chat-message p,.mod-chat-message b,.mod-chat-message span:not(.ms){min-width:0;overflow-wrap:anywhere}
.mod-overview-composer{display:flex;align-items:center;gap:7px;margin:0;padding:9px 10px;border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.mod-overview-composer input{flex:1;min-width:0;min-height:38px;padding:8px 13px;border:1px solid var(--line);border-radius:var(--pill);background:var(--surface-0);color:var(--text)}
.mod-overview-composer .primary-icon,.mod-overview-composer .icon-button{width:38px;height:38px;min-height:38px}
#modOverviewChat .mod-chat-message{cursor:pointer}

/* Scroll-container audit: one scroller per surface. Shells that contain a
   dedicated scrolling region no longer scroll themselves, eliminating the
   latent wheel-trap that surfaced in the Customize dialog: at small data
   volumes only one container ever scrolled, but with real data both did,
   capturing the wheel and splitting the scrollbar. Headers on these
   surfaces stay fixed while their lists scroll. */
.hub-popover:has(.hub-scroll){overflow:hidden}
.notification-popover:has(.notification-list){overflow:hidden}
.settings-flow-shell:has(.settings-flow-content){overflow:hidden}
.mini-dialog[open] .mini-shell:has(.whats-new-list){overflow:hidden}
.sheet-dialog[open] .sheet-shell:has(> .sheet-content){overflow:hidden}
#buttonForm .form-grid{overflow:visible}

/* =====================================================================
   v3.2.0 — Recommended raid targets
   ===================================================================== */
.raid-suggest-list{display:grid;gap:6px}
.raid-suggest-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface-1);text-align:left}
.raid-suggest-row:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--accent) 38%,var(--line))}
.raid-suggest-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:var(--surface-3);color:var(--muted)}
.raid-suggest-avatar img{width:100%;height:100%;object-fit:cover}
.raid-suggest-main{min-width:0;display:grid;gap:4px}
.raid-suggest-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(13px * var(--text-scale))}
.raid-suggest-chips{display:flex;flex-wrap:wrap;gap:4px}
.raid-chip{padding:2px 7px;border-radius:var(--pill);font:700 8px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--surface-3);color:var(--muted)}
.raid-chip.crew{background:rgba(var(--accent-rgb),.14);color:var(--accent)}
.raid-chip.team{background:color-mix(in srgb,var(--cyan) 16%,transparent);color:var(--cyan)}
.raid-chip.raider{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)}
.raid-suggest-live{display:grid;justify-items:end;gap:3px}
.raid-suggest-live .state-pill.live{background:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger);font-weight:800}
.raid-suggest-live small{color:var(--muted);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:720px){.raid-suggest-live small{display:none}}

/* v3.3.0 — discovery chip for similar-size category matches */
.raid-chip.similar{background:color-mix(in srgb,var(--signal) 16%,transparent);color:var(--signal)}

/* =====================================================================
   v3.4.0 — Quick Commands module
   ===================================================================== */
.mod-quick-commands{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:7px;align-content:start}
.mod-command-tile-wrap{position:relative;display:grid;min-width:0}
.mod-command-tile{display:grid;justify-items:center;align-content:center;gap:5px;min-height:74px;padding:10px 8px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface-2);text-align:center}
.mod-command-tile:hover{background:var(--surface-3);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.mod-command-tile .ms{color:var(--accent);font-size:20px}
.mod-command-tile b{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(11px * var(--text-scale))}
.mod-command-tile.add{border-style:dashed;background:transparent;color:var(--muted)}
.mod-command-tile.add:hover{color:var(--text);background:var(--surface-2)}
.mod-command-remove{position:absolute;top:-6px;right:-6px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--surface-4);color:var(--muted);opacity:0;transition:opacity .15s var(--ease)}
.mod-command-remove .ms{font-size:13px}
.mod-command-remove:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.mod-command-tile-wrap:hover .mod-command-remove,.mod-command-tile-wrap:focus-within .mod-command-remove{opacity:1}
@media (hover:none){.mod-command-remove{opacity:1}}
.mod-command-dialog .field{display:grid;gap:5px;margin-bottom:11px}
.mod-command-dialog .field span{color:var(--muted);font-size:calc(10px * var(--text-scale));font-weight:700}
.mod-command-dialog .field input{min-height:42px;padding:9px 13px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-0);color:var(--text)}

/* =====================================================================
   v4.0.0 — IRL Toolkit & mobile edge-to-edge
   ===================================================================== */

/* Safety Kit: a deliberately oversized hold target with a fill that
   answers "is it working" during the 1.2s hold. */
.safety-kit-card{border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
.safety-kit-copy{margin:0 0 12px;color:var(--muted);line-height:1.55;font-size:calc(12px * var(--text-scale))}
.safety-kit-button{position:relative;overflow:hidden;width:100%;min-height:96px;display:grid;justify-items:center;align-content:center;gap:4px;border:1px solid color-mix(in srgb,var(--danger) 55%,var(--line));border-radius:var(--radius-m);background:color-mix(in srgb,var(--danger) 10%,var(--surface-1));color:var(--text);touch-action:none}
.safety-kit-button .ms{font-size:26px;color:var(--danger);position:relative;z-index:1}
.safety-kit-button b{letter-spacing:.09em;font-size:calc(13px * var(--text-scale));position:relative;z-index:1}
.safety-kit-button small{color:var(--muted);position:relative;z-index:1}
.safety-kit-ring{position:absolute;inset:0;background:color-mix(in srgb,var(--danger) 30%,transparent);transform:scaleX(0);transform-origin:left;z-index:0}
.safety-kit-button.holding .safety-kit-ring{transform:scaleX(1);transition:transform 1.2s linear}
.safety-kit-button.holding{border-color:var(--danger)}

.stream-quick-row{display:flex;justify-content:flex-end;padding:8px 10px 0}
.setting-row-tools{display:inline-flex;align-items:center;gap:10px}
.soft-btn.small{min-height:34px;padding:6px 12px;font-size:calc(11px * var(--text-scale))}

/* ---------------------------------------------------------------------
   Phone Moderator Center: edge-to-edge. Cards stop floating in padding
   and become full-bleed sections separated by hairlines; every pixel of
   width belongs to content. Desktop and tablet are untouched.
   --------------------------------------------------------------------- */
@media (max-width:720px){
  /* the app main column supplies side padding; the mod view opts out */
  body[data-current-view="moderation"] .app-main,body[data-current-view="moderation"] main{padding-inline:0!important}
  body[data-current-view="moderation"] .view-stack{padding-inline:0!important}
  #view-moderation .mod-tab-panel{padding:0!important}
  #view-moderation .panel-card{border-radius:0;border-left:0;border-right:0;margin:0;border-top:0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
  #view-moderation .panel-card+.panel-card{margin-top:0}
  #view-moderation .panel-card>.card-head{padding-inline:14px}
  #view-moderation .panel-card>*:not(.card-head){margin-inline:0}
  /* grids of cards inside pages collapse to a flush stack */
  #view-moderation .mod-queue-grid,#view-moderation .mod-context-grid,#view-moderation .mod-chat-grid,#view-moderation .mod-controls-grid,#view-moderation .mod-pulse-grid,#view-moderation .mod-health-grid,#view-moderation .mod-irl-grid{gap:0!important}
  /* the stream page already runs flush; align its stats strip */
  #view-moderation .mod-stream-metrics{border-radius:0;margin:0}
  /* slimmer status strip: one compact line */
  .status-strip{min-height:40px;padding-block:4px}
  /* the More hub keeps its inset card look — it's a menu, not content */
  #view-moderation .mod-mobile-more-hub{margin:10px 12px;border:1px solid var(--line);border-radius:var(--radius-m)}
  /* safety kit stays comfortable on phones */
  .safety-kit-card{border-left:0;border-right:0}
  .safety-kit-copy{padding-inline:0}
}

/* =====================================================================
   v4.1.0 — Mobile Native Feel
   ===================================================================== */

/* Quick-timeout swipe affordance: a timer label surfaces behind the row
   at the first threshold; the second threshold arms the full sheet. */
.mod-chat-message{position:relative}
.mod-chat-message.quick-armed::after,.mod-chat-message.sheet-armed::after{position:absolute;top:50%;transform:translateY(-50%);font:800 9px/1 var(--mono);letter-spacing:.08em;padding:5px 9px;border-radius:var(--pill);white-space:nowrap;pointer-events:none}
.mod-chat-message.quick-armed::after{content:"10M TIMEOUT";background:color-mix(in srgb,var(--amber) 24%,var(--surface-0));color:var(--amber)}
.mod-chat-message.sheet-armed::after{content:"ALL ACTIONS";background:color-mix(in srgb,var(--accent) 22%,var(--surface-0));color:var(--accent)}
.mod-chat-message[style*="translateX(-"].quick-armed::after,.mod-chat-message[style*="translateX(-"].sheet-armed::after{left:calc(100% + 10px)}
.mod-chat-message:not([style*="translateX(-"]).quick-armed::after,.mod-chat-message:not([style*="translateX(-"]).sheet-armed::after{right:calc(100% + 10px)}

/* Undo toast */
.toast.undoable{display:flex;align-items:center;gap:10px}
.toast.undoable .toast-undo{margin-left:auto;min-height:34px;padding:6px 14px;border:1px solid rgba(var(--accent-rgb),.6);border-radius:var(--pill);background:rgba(var(--accent-rgb),.14);color:var(--accent);font-weight:800}

/* Pull-to-refresh indicator */
.pull-refresh-indicator{position:fixed;top:calc(env(safe-area-inset-top, 0px) + 8px);left:50%;transform:translateX(-50%);z-index:210;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);opacity:0;pointer-events:none;transition:opacity .12s linear}
.pull-refresh-indicator.armed{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}

/* Profile-card meta strip in the message sheet */
.mod-sheet-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px;padding:10px 4px;border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.mod-sheet-meta span{display:grid;justify-items:center;gap:3px;text-align:center}
.mod-sheet-meta b{font-size:calc(14px * var(--text-scale))}
.mod-sheet-meta small{color:var(--muted);font-size:calc(8.5px * var(--text-scale));letter-spacing:.06em;text-transform:uppercase}

/* Live HUD chips */
.hud-chips{gap:5px!important}
.hud-chips .ms{font-size:14px;color:var(--muted)}
.hud-chips b{font-variant-numeric:tabular-nums}
.hud-chips.hud-warn b,.hud-chips.hud-warn .ms{color:var(--amber)}
@media (max-width:520px){#statusStrip .status-item:nth-child(n+3):not(.hud-chips){display:none}}

/* Customize as a true bottom sheet on phones: drag handle at the top,
   Done in the thumb zone, sheet pinned to the bottom edge. */
.sheet-grab{display:none}
.sheet-bottom-bar{display:none}
@media (max-width:720px){
  .mod-layout-dialog{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;border-radius:18px 18px 0 0;border-bottom:0}
  .mod-layout-dialog .sheet-shell{max-height:86dvh;border-radius:18px 18px 0 0;padding-bottom:0}
  .mod-layout-dialog .sheet-grab{display:block;width:44px;height:5px;margin:8px auto 2px;border-radius:var(--pill);background:color-mix(in srgb,var(--text) 25%,transparent)}
  .mod-layout-dialog .sheet-bottom-bar{display:block;position:sticky;bottom:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));background:color-mix(in srgb,var(--surface-1) 92%,transparent);backdrop-filter:blur(8px);border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
  .mod-layout-dialog .sheet-bottom-bar .primary-btn{width:100%}
  .mod-layout-dialog .sheet-head .icon-button{display:none}
}

/* =====================================================================
   v4.2.0 — Entitlements & Access panel
   ===================================================================== */
.access-panel{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.access-copy{max-width:920px;color:var(--muted);line-height:1.55}
.access-grant-form{display:grid;grid-template-columns:1.2fr .75fr .65fr 1.4fr auto;gap:10px;align-items:end;margin:16px 0}
.access-grant-form .field{display:grid;gap:5px;min-width:0}
.access-grant-form .field span{color:var(--muted);font-size:calc(9.5px * var(--text-scale));font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.access-grant-form .field input,.access-grant-form .field select{min-height:42px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-0);color:var(--text);min-width:0;width:100%}
.access-grant-list{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;background:var(--surface-1)}
.access-grant-head,.access-grant-row{display:grid;grid-template-columns:minmax(170px,1.35fr) minmax(92px,.5fr) minmax(125px,.75fr) minmax(150px,1fr) minmax(190px,auto);gap:12px;align-items:center}
.access-grant-head{padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);color:var(--muted);font:700 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.access-grant-row{padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-0)}
.access-grant-row:last-of-type{border-bottom:0}
.access-grant-who{display:grid;min-width:0}
.access-grant-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.access-grant-who small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.access-grant-tier{justify-self:start;font:800 9.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:5px 10px;border-radius:var(--pill)}
.access-grant-tier.tier-summit{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.access-grant-tier.tier-basecamp{color:var(--signal);background:color-mix(in srgb,var(--signal) 14%,transparent)}
.access-grant-tier.tier-trailhead{color:var(--muted);background:var(--surface-3)}
.access-grant-src,.access-grant-exp{min-width:0;color:var(--muted);font-size:calc(10.5px * var(--text-scale));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.access-grant-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.access-tier-switch{min-width:118px;max-width:145px;padding:8px 28px 8px 10px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-1);color:var(--text);font:inherit;font-size:calc(10.5px * var(--text-scale))}
.access-empty{display:flex;align-items:center;gap:11px;padding:18px;color:var(--muted)}.access-empty>.ms{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--surface-3);color:var(--accent)}.access-empty span:last-child{display:grid;gap:3px}.access-empty b{color:var(--text)}.access-empty small{display:block}
.access-history{margin:0!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;background:var(--surface-1)!important}.access-history>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px!important;border:0!important;list-style:none;cursor:pointer}.access-history>summary>span:first-child{display:flex;align-items:center;gap:8px;min-width:0}.access-history>summary small{color:var(--muted);font-weight:500}.access-history>summary>.ms{color:var(--muted);transition:transform .16s var(--ease)}.access-history[open]>summary>.ms{transform:rotate(180deg)}
.access-history-list{display:grid!important;margin:0!important;border-top:1px solid var(--line)}.access-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);opacity:.72}.access-history-row:last-child{border-bottom:0}.access-history-row>span:first-child{display:grid;min-width:0}.access-history-row b,.access-history-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.access-history-row small,.access-history-row time{color:var(--muted);font-size:calc(9.5px * var(--text-scale))}
@media (max-width:980px){.access-grant-form{grid-template-columns:1fr 1fr}.access-grant-form .field.grow,.access-grant-form .primary-btn{grid-column:1 / -1}.access-grant-head{display:none}.access-grant-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who tier" "exp source" "actions actions";gap:7px 10px;padding:12px}.access-grant-who{grid-area:who}.access-grant-tier{grid-area:tier}.access-grant-exp{grid-area:exp}.access-grant-src{grid-area:source;text-align:right}.access-grant-actions{grid-area:actions;justify-content:flex-start;padding-top:4px}.access-tier-switch{max-width:none;flex:1}.team-grid{grid-template-columns:1fr}.team-organized-grid .team-people-card{grid-column:auto}}
@media (max-width:620px){.role-guide{grid-template-columns:1fr}.access-grant-form{grid-template-columns:1fr}.access-grant-form .field.grow,.access-grant-form .primary-btn{grid-column:auto}.access-grant-row{grid-template-areas:"who tier" "exp exp" "source source" "actions actions"}.access-grant-src{text-align:left}.access-grant-actions{display:grid;grid-template-columns:1fr auto}.access-history-row{grid-template-columns:minmax(0,1fr) auto}.access-history-row time{grid-column:1 / -1}}

/* =====================================================================
   v5.0.0 — Signature: live-reactive theming, moments, palette, tablet
   ===================================================================== */

/* --- Live-reactive theming: the app breathes while live --- */
body.channel-live .status-strip{border-bottom:1px solid transparent;background:linear-gradient(var(--surface-1),var(--surface-1)) padding-box,linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.55),transparent) border-box;background-size:100% 100%,220% 100%;animation:liveShimmer 6s linear infinite}
@keyframes liveShimmer{from{background-position:0 0,-120% 0}to{background-position:0 0,120% 0}}
body.channel-live #streamDot{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6);animation:livePulse 2.2s ease-out infinite}
@keyframes livePulse{70%{box-shadow:0 0 0 9px rgba(var(--accent-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}
body.channel-live .panel-card,body.channel-live .mod-module{border-color:color-mix(in srgb,var(--accent) 14%,var(--line))}
body.channel-live .topbar-title h1{text-shadow:0 0 22px rgba(var(--accent-rgb),.25)}
@media (prefers-reduced-motion:reduce){body.channel-live .status-strip,body.channel-live #streamDot{animation:none}}

/* --- Signature sweeps --- */
.moment-sweep{position:fixed;inset:0;z-index:400;pointer-events:none;opacity:0}
.moment-sweep.air{background:linear-gradient(105deg,transparent 30%,rgba(var(--accent-rgb),.32) 50%,transparent 70%);animation:sweepAcross 1.1s var(--ease) forwards}
.moment-sweep.safety{background:radial-gradient(120% 120% at 50% 50%,transparent 40%,color-mix(in srgb,var(--danger) 45%,transparent) 100%);animation:safetyFlash 1.2s ease-out forwards}
@keyframes sweepAcross{0%{opacity:1;transform:translateX(-100%)}100%{opacity:1;transform:translateX(100%)}}
@keyframes safetyFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

/* --- Raid cinematic --- */
.raid-cinematic{position:fixed;inset:0;z-index:390;display:grid;place-items:center;background:color-mix(in srgb,var(--surface-0) 82%,transparent);backdrop-filter:blur(6px)}
.raid-cinematic[hidden]{display:none}
.raid-cinematic-inner{display:grid;justify-items:center;gap:6px;text-align:center}
.raid-cinematic-inner small{font:800 11px/1 var(--mono);letter-spacing:.35em;color:var(--muted)}
.raid-cinematic-inner b{font-size:clamp(120px,32vw,240px);line-height:.9;color:var(--accent);text-shadow:0 0 60px rgba(var(--accent-rgb),.5);font-variant-numeric:tabular-nums}
.raid-cinematic-inner b.tick{animation:cineTick .5s var(--ease)}
@keyframes cineTick{0%{transform:scale(1.18);opacity:.4}100%{transform:scale(1);opacity:1}}
.raid-cinematic-inner span{font:800 14px/1 var(--mono);letter-spacing:.22em;color:var(--text)}

/* --- Command palette --- */
.cmd-palette{border:0;padding:0;background:transparent;width:min(620px,92vw);margin:10vh auto auto}
.cmd-palette::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.cmd-palette-inner{border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:var(--radius-l);background:var(--surface-1);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.cmd-palette-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cmd-palette-head .ms{color:var(--muted)}
.cmd-palette-head input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font-size:calc(15px * var(--text-scale));outline:none}
.cmd-palette-head kbd{font:700 10px/1 var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:4px 7px}
.cmd-palette-results{max-height:min(430px,55vh);overflow:auto;padding:6px}
.cmd-palette-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:var(--radius-s);text-align:left;color:var(--text)}
.cmd-palette-row .ms{color:var(--muted);font-size:18px}
.cmd-palette-row small{font:700 9px/1 var(--mono);letter-spacing:.08em;color:var(--muted)}
.cmd-palette-row:hover,.cmd-palette-row.selected{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.cmd-palette-row.selected .ms,.cmd-palette-row.selected b{color:var(--accent)}
.cmd-palette-empty{margin:14px;color:var(--muted)}

/* --- Queue swipe-to-resolve affordances (phones) --- */
.mod-queue-item{position:relative}
.mod-queue-item.allow-armed::after,.mod-queue-item.deny-armed::after{position:absolute;top:50%;transform:translateY(-50%);font:800 9px/1 var(--mono);letter-spacing:.08em;padding:5px 9px;border-radius:var(--pill);white-space:nowrap;pointer-events:none}
.mod-queue-item.allow-armed::after{content:"ALLOW";right:calc(100% + 10px);background:color-mix(in srgb,var(--ok,#3ddc84) 22%,var(--surface-0));color:var(--ok,#3ddc84)}
.mod-queue-item.deny-armed::after{content:"DENY";left:calc(100% + 10px);background:color-mix(in srgb,var(--danger) 24%,var(--surface-0));color:var(--danger)}
.mod-queue-item.swiping{transition:none}

/* --- Tablet two-pane Moderator Center (chat docked) --- */
@media (min-width:721px) and (max-width:1100px){
  body[data-current-view="moderation"]:not([data-mod-active-tab="chat"]) .mod-center-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:14px;align-items:start}
  body[data-current-view="moderation"]:not([data-mod-active-tab="chat"]) .mod-tab-panel[data-mod-panel="chat"]{display:block;grid-column:2;grid-row:1;position:sticky;top:64px;max-height:calc(100dvh - 80px);overflow:auto}
  body[data-current-view="moderation"]:not([data-mod-active-tab="chat"]) .mod-tab-panel.active{grid-column:1;grid-row:1}
}

/* ===== v5.1.0 — Field Ready ===== */
.mission-clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:var(--radius-m);background:color-mix(in srgb,var(--accent) 7%,var(--surface-1))}
.mc-item{display:grid;gap:3px;text-align:center}
.mc-item small{font:800 8.5px/1 var(--mono);letter-spacing:.14em;color:var(--muted)}
.mc-item b{font-size:clamp(18px,3.4vw,26px);font-variant-numeric:tabular-nums;color:var(--accent)}
#feedbackDialog textarea{border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-0);color:var(--text);padding:10px 12px;resize:vertical}
#feedbackDialog select{min-height:42px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-0);color:var(--text);padding:8px 12px}
#feedbackDialog .field{display:grid;gap:5px;margin-bottom:11px}
#feedbackDialog .field span{color:var(--muted);font-size:calc(10px * var(--text-scale));font-weight:700}

/* -------------------------------------------------------------------
   v5.2.0 — Streamlining audit
   Home on-air console, docked desktop chat, IRL Hub toolkit
-------------------------------------------------------------------- */

/* Home on-air console */
.onair-card { border-color: rgba(var(--signal-rgb), .45); }
.onair-card .field { margin-top: 4px; }
.onair-mod-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.onair-mod-actions button { min-height: 42px; }
.onair-safety-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.onair-safety-row .primary-btn, .onair-safety-row .danger-btn, .onair-safety-row .soft-btn { flex: 1; min-width: 140px; justify-content: center; }
@media (max-width: 720px) { .onair-mod-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Docked desktop chat */
.chat-dock-toggle { display: none; }
.chat-dock { display: none; }
@media (min-width: 1200px) {
  .chat-dock-toggle { display: grid; }
  .chat-dock-toggle.active { border-color: var(--accent); color: var(--accent); }
  body.chat-docked .app-shell { grid-template-columns: 244px minmax(0, 1fr) 344px; }
  .chat-dock {
    display: flex; flex-direction: column; grid-column: 3;
    position: sticky; top: 0; height: 100dvh; min-width: 0;
    border-left: 1px solid var(--line); background: var(--bg);
  }
  .chat-dock[hidden] { display: none; }
  .chat-dock-head { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-0); }
  .chat-dock-head small { display: block; color: var(--faint); font-family: var(--mono); font-size: calc(9px * var(--text-scale)); letter-spacing: .14em; text-transform: uppercase; }
  .chat-dock-head b { font-size: calc(13px * var(--text-scale)); font-weight: 680; }
  .chat-dock-tools { display: flex; gap: 5px; }
  .chat-dock-embed { flex: 1; min-height: 0; background: var(--surface-0); }
  .chat-dock-embed iframe { width: 100%; height: 100%; border: 0; }
  .chat-dock-embed .embed-placeholder { height: 100%; }
  .chat-dock-composer { border-top: 1px solid var(--line); padding: 10px; margin: 0; }
}
.chat-docked-note { gap: 12px; }
.chat-docked-note .soft-btn { margin-top: 4px; }

/* IRL Hub toolkit */
.irl-toolkit-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-bottom: 16px; }
.irl-toolkit-row > .panel-card { min-width: 0; }
.irl-toolkit-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 10px; }
.irl-toolkit-actions .primary-btn, .irl-toolkit-actions .soft-btn { flex: 1; min-width: 160px; justify-content: center; }
.irl-watch-list { display: grid; gap: 10px; margin-bottom: 6px; }
.irl-watch-list span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-1); }
.irl-watch-list small { color: var(--faint); font-family: var(--mono); font-size: calc(9px * var(--text-scale)); letter-spacing: .14em; text-transform: uppercase; }
.irl-watch-list b { font-size: calc(12.5px * var(--text-scale)); font-weight: 680; }
.irl-watch-list b.live { color: var(--accent); }

/* -------------------------------------------------------------------
   v5.4.0 — Field Kit: Field Mode + overlay generator
-------------------------------------------------------------------- */
.field-mode-shell {
  position: fixed; inset: 0; z-index: 300;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: var(--surface-0); color: var(--ink);
}
.field-mode-shell[hidden] { display: none; }
body.field-mode { overflow: hidden; }
.field-top { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-1); }
.field-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: calc(11px * var(--text-scale)); letter-spacing: .12em; }
.field-live .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.field-live .dot.live { background: var(--danger, #ff5d5d); box-shadow: 0 0 0 4px rgba(255, 93, 93, .18); }
.field-stat { display: grid; line-height: 1.15; }
.field-stat small { color: var(--faint); font-family: var(--mono); font-size: calc(8.5px * var(--text-scale)); letter-spacing: .14em; }
.field-stat b { font-size: calc(14px * var(--text-scale)); font-variant-numeric: tabular-nums; }
.field-top .icon-button { margin-left: auto; }
.field-chat { overflow-y: auto; padding: 10px 12px; display: grid; gap: 6px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.field-chat::before { content: ""; margin-top: auto; }
.field-composer { border-top: 1px solid var(--line); padding: 8px 10px; margin: 0; }
.field-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface-1); }
.field-btn {
  display: grid; place-items: center; gap: 3px; min-height: 62px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2, var(--surface-1)); color: var(--ink);
  font-size: calc(11px * var(--text-scale)); font-weight: 650; cursor: pointer;
}
.field-btn .ms { font-size: calc(22px * var(--text-scale)); }
.field-btn:active { transform: scale(.97); }
.field-btn.active { border-color: var(--accent); color: var(--accent); }
@media (max-width: 420px) { .field-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .field-btn span:last-child { font-size: calc(9.5px * var(--text-scale)); } }
#previewOverlay.disabled { opacity: .5; pointer-events: none; }

/* -------------------------------------------------------------------
   v5.5.0 — Phone Mod Center: viewer modes, docked quick bar,
   full-height stream workspace, and mode transitions
-------------------------------------------------------------------- */

/* Viewer mode segmented control */
.viewer-mode-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.viewer-mode-toggle button { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 4px 10px; background: var(--surface-1); color: var(--muted); font-size: calc(10.5px * var(--text-scale)); font-weight: 650; }
.viewer-mode-toggle button + button { border-left: 1px solid var(--line); }
.viewer-mode-toggle button .ms { font-size: 15px; }
.viewer-mode-toggle button.active { background: rgba(var(--accent-rgb), .14); color: var(--accent); }
@media (max-width: 480px) { .viewer-mode-toggle button > span:last-child { display: none; } .viewer-mode-toggle button { padding: 4px 9px; } }

/* Audio-focus and off states for the Stream page viewer */
.mod-stream-page-viewer { position: relative; }
.mod-stream-page-viewer[data-viewer-mode="audio"] { min-height: 0 !important; }
.mod-stream-page-viewer[data-viewer-mode="audio"] iframe { min-height: 58px !important; height: 58px !important; }
.viewer-audio-tag { position: absolute; top: 6px; right: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: var(--accent); font: 700 9px/1 var(--mono); letter-spacing: .14em; pointer-events: none; }
.viewer-audio-tag .ms { font-size: 13px; }
.mod-stream-page-viewer[data-viewer-mode="off"] { min-height: 0 !important; }
.viewer-off-note { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; color: var(--faint); font-size: calc(11.5px * var(--text-scale)); }
.viewer-off-note .ms { font-size: 17px; }

/* Phone: quick bar becomes a docked tier directly above the mobile dock */
@media (max-width: 720px) {
  .mod-stream-quickbar {
    position: fixed; left: 0; right: 0; z-index: 58;
    bottom: var(--mobile-dock-h, 74px); /* dock measurement already includes safe-area */
    gap: 0; border-top: 1px solid rgba(var(--accent-rgb), .35); border-bottom: 1px solid var(--line);
    background: var(--surface-1); border-radius: 0;
  }
  .mod-stream-quickbar button { background: var(--surface-1); min-height: 46px; }
  .mod-stream-quickbar button:active { background: rgba(var(--accent-rgb), .12); }
  .mod-stream-workspace { min-height: 0; border-radius: 13px 13px 0 0; }
  [data-mod-panel="stream"] { padding-bottom: 0 !important; }
}

/* Mode transition veil */
.mode-transition { position: fixed; inset: 0; z-index: 420; display: grid; place-items: center; background: var(--surface-0); pointer-events: none; animation: modeVeil .64s ease forwards; }
.mode-transition .mode-badge { display: grid; place-items: center; gap: 7px; animation: modeBadgeIn .64s ease; }
.mode-transition .mode-badge .ms { font-size: 46px; color: var(--accent); }
.mode-transition small { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; color: var(--faint); }
.mode-transition b { font-size: calc(18px * var(--text-scale)); font-weight: 700; }
.mode-badge-exit .ms { color: var(--muted); }
@keyframes modeVeil { 0% { opacity: 0; } 14% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: 0; } }
@keyframes modeBadgeIn { 0% { transform: translateY(16px) scale(.94); opacity: 0; } 24% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mode-transition { display: none; } }


/* Phone Stream tab = Field Mode with a viewer: locked viewport, no page scroll,
   status strip reclaimed, viewer capped to 16:9. */
@media (max-width: 720px) {
  body[data-current-view="moderation"][data-mod-active-tab="stream"] { overflow: hidden; }
  html.mod-stream-lock { overflow: hidden; height: 100%; }
  html.mod-stream-lock body { overflow: hidden; }
  html.mod-stream-lock .app-shell { min-height: 0 !important; padding-bottom: 0 !important; }
  body[data-current-view="moderation"][data-mod-active-tab="stream"] .status-strip { display: none; }
  body[data-current-view="moderation"][data-mod-active-tab="stream"] #view-moderation { padding-bottom: 0 !important; }
  .mod-stream-page-viewer { aspect-ratio: 16 / 9; max-height: 232px; overflow: hidden; }
  .mod-stream-page-viewer iframe, .mod-stream-page-viewer .embed-placeholder { min-height: 0 !important; height: 100% !important; }
  .mod-stream-page-viewer[data-viewer-mode="audio"] { aspect-ratio: auto; max-height: 58px; }
  .mod-stream-page-viewer[data-viewer-mode="off"] { aspect-ratio: auto; max-height: 46px; }
}

/* v5.5.3 — BELABOX relay / NOALBS monitoring */
.belabox-status-hero .belabox-metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.belabox-setup-dialog textarea { min-height:170px; font-family:var(--mono); font-size:12px; white-space:pre; }
.flow-or { display:flex; align-items:center; gap:12px; margin:18px 0 14px; color:var(--muted); font-family:var(--mono); font-size:9px; letter-spacing:.1em; }
.flow-or::before,.flow-or::after { content:""; height:1px; flex:1; background:var(--line); }
.field-help { margin:9px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
@media (max-width: 980px) {
  .belabox-status-hero .belabox-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .belabox-status-hero .belabox-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .belabox-status-hero .belabox-metric-grid>span { min-width:0; padding:11px; }
  .belabox-status-hero .belabox-metric-grid b { overflow-wrap:anywhere; }
}

/* =====================================================================
   v5.6.0 — Raid Sidecar & sequence handoff
   ===================================================================== */
.raid-sidecar{
  position:fixed;z-index:88;top:0;right:0;bottom:0;width:min(620px,48vw);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  border-left:1px solid var(--line);background:var(--bg);
  border-radius:var(--radius-l) 0 0 var(--radius-l);overflow:hidden;
  animation:raid-sidecar-in .22s var(--ease) both;
}
.raid-sidecar[hidden]{display:none!important}
@keyframes raid-sidecar-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.raid-sidecar-head{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(12px,env(safe-area-inset-top)) 14px 12px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface-1) 94%,transparent);backdrop-filter:blur(16px)}
.raid-sidecar-title,.raid-sidecar-tools,.raid-sidecar-title>span:last-child{display:flex;align-items:center;gap:10px;min-width:0}
.raid-sidecar-title>span:last-child{display:grid;gap:3px}.raid-sidecar-title small{color:var(--accent);font:700 8px/1 var(--mono);letter-spacing:.12em}.raid-sidecar-title b{font-size:calc(13px * var(--text-scale));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.raid-sidecar-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.raid-sidecar-tools{justify-content:flex-end}.raid-sidecar-tools .small{min-height:38px;padding:8px 11px}.raid-sidecar-tools .ms{font-size:17px}
.raid-sidecar-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:14px;scrollbar-gutter:stable}
.raid-sidecar-body>#view-raid{display:block!important;max-width:none;animation:none!important}
.raid-sidecar-body>#view-raid>.section-toolbar{display:none}
.raid-sidecar-body .raid-layout{grid-template-columns:1fr;gap:10px}
.raid-sidecar-body .panel-card{padding:14px;border-radius:var(--radius-m)}
.raid-sidecar-body .raid-suggest-card{order:1}.raid-sidecar-body .raid-search-card{order:2}.raid-sidecar-body .raid-countdown-card{order:3}
.raid-sidecar-body .raid-suggest-list{max-height:250px;overflow:auto;padding-right:2px}
.raid-sidecar-body .raid-channel{grid-template-columns:72px minmax(0,1fr);padding:10px}.raid-sidecar-body .raid-avatar{width:72px}
.raid-sidecar-body .raid-copy p{margin-block:6px}.raid-sidecar-body .raid-stats{flex-wrap:wrap;gap:7px 12px}
.raid-sidecar-sequence{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line-strong);background:color-mix(in srgb,var(--accent) 10%,var(--surface-1))}
.raid-sidecar-sequence>span{display:flex;align-items:center;gap:9px;min-width:0}.raid-sidecar-sequence>span:first-child>.ms{color:var(--accent)}.raid-sidecar-sequence>span:first-child>span{display:grid;gap:3px}.raid-sidecar-sequence b{font-size:calc(11.5px * var(--text-scale))}.raid-sidecar-sequence small{color:var(--muted);font-size:calc(9.5px * var(--text-scale));line-height:1.35}.raid-sidecar-sequence button{white-space:nowrap}
body.raid-sidecar-open .chat-dock{display:none!important}
body.raid-sidecar-open .toast-stack{z-index:96}

.raid-sidecar-preview{align-items:center}.raid-preview-device{width:min(330px,42%);aspect-ratio:16/9;display:grid;grid-template-columns:1fr .78fr;gap:5px;padding:7px;border:5px solid color-mix(in srgb,var(--text) 85%,#000);border-radius:18px;background:var(--surface-3);box-shadow:var(--shadow)}
.raid-preview-main,.raid-preview-pane{display:grid;align-content:start;gap:6px;padding:8px;border-radius:9px;background:var(--surface-0)}.raid-preview-main i{height:20px;border-radius:6px;background:var(--surface-2)}.raid-preview-main i:first-child{height:45px}.raid-preview-pane{background:color-mix(in srgb,var(--accent) 8%,var(--surface-1))}.raid-preview-pane>.ms{color:var(--accent);font-size:18px}.raid-preview-pane i{height:24px;border-radius:6px;background:var(--surface-2)}

@media (min-width:821px){
  /* No upper bound: previously this only shrank content up to 1280px wide,
     so on any larger monitor the sidecar sat over the page with nothing
     pushed aside \u2014 exactly the "floating over" feeling being fixed here.
     The sidecar's own min(...,48vw) width already caps how wide it gets. */
  body.raid-sidecar-open .app-main{margin-right:calc(min(620px,48vw) + 12px);transition:margin-right .2s var(--ease)}
}
@media (max-width:920px) and (orientation:portrait),(max-width:820px){
  .raid-sidecar-head{min-height:58px;padding:8px 10px}.raid-sidecar-icon{width:34px;height:34px}.raid-sidecar-tools .soft-btn span:not(.ms){display:none}.raid-sidecar-tools .soft-btn{width:38px;padding:0;justify-content:center}
  .raid-sidecar-body{padding:9px}.raid-sidecar-body .raid-suggest-list{max-height:180px}
  .raid-sidecar-sequence{align-items:stretch;flex-direction:column;padding:9px 10px max(9px,env(safe-area-inset-bottom))}.raid-sidecar-sequence>span:last-child{display:grid;grid-template-columns:1fr 1fr}.raid-sidecar-sequence button{width:100%;justify-content:center}
}
@media (max-width:540px){
  .raid-sidecar-body .raid-channel{grid-template-columns:58px minmax(0,1fr)}.raid-sidecar-body .raid-avatar{width:58px}
  .raid-sidecar-body .raid-suggest-row{padding:7px 8px;gap:8px}.raid-sidecar-body .raid-suggest-live small{display:none}
  .raid-preview-device{width:100%;max-width:300px;aspect-ratio:16/8.5}
}
body[data-motion="reduced"] .raid-sidecar,body[data-motion="none"] .raid-sidecar{animation:none}
.raid-sidecar-body .countdown-card{order:3;padding:20px 16px}.raid-sidecar-body .countdown-number{margin:10px 0 2px;font-size:clamp(54px,10vw,76px)}


/* =====================================================================
   v5.7.0 — Live Assist workflows
   ===================================================================== */
.live-assist-sidecar{position:fixed;z-index:90;top:0;right:0;bottom:0;width:min(560px,46vw);display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-left:1px solid var(--line);background:var(--bg);border-radius:var(--radius-l) 0 0 var(--radius-l);overflow:hidden;animation:raid-sidecar-in .22s var(--ease) both}.live-assist-sidecar[hidden]{display:none!important}.live-assist-head{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(12px,env(safe-area-inset-top)) 14px 12px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface-1) 95%,transparent);backdrop-filter:blur(16px)}.live-assist-title,.live-assist-title>span:last-child{display:flex;align-items:center;gap:10px;min-width:0}.live-assist-title>span:last-child{display:grid;gap:3px}.live-assist-title small{color:var(--accent);font:700 8px/1 var(--mono);letter-spacing:.12em}.live-assist-title b{font-size:calc(13px * var(--text-scale));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-assist-icon{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,var(--surface-2));color:var(--accent)}.live-assist-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px;scrollbar-gutter:stable;display:grid;align-content:start;gap:14px}.live-assist-footer{display:flex;justify-content:flex-end;gap:9px;padding:12px 14px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line-strong);background:color-mix(in srgb,var(--surface-1) 96%,transparent)}body.live-assist-open .chat-dock,body.live-assist-open .demo-ribbon{display:none!important}body.live-assist-open .toast-stack{z-index:98}
.assist-intro,.assist-raid-hero,.assist-connection-hero{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-m);background:linear-gradient(125deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 58%),var(--surface-1)}.assist-intro h3,.assist-intro p,.assist-raid-hero h3,.assist-raid-hero p,.assist-connection-hero h3,.assist-connection-hero p{margin:0}.assist-intro>div,.assist-raid-hero>div,.assist-connection-hero>div{display:grid;gap:5px}.assist-intro small,.assist-raid-hero small,.assist-connection-hero small{color:var(--accent);font:700 8px/1 var(--mono);letter-spacing:.12em}.assist-intro p,.assist-raid-hero p,.assist-connection-hero p{color:var(--muted);line-height:1.45}.assist-orb{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,var(--surface-2));color:var(--accent)}.assist-orb .ms{font-size:28px}.assist-orb.raid{background:rgba(165,111,255,.14);color:#cbb3ff}.assist-orb.warning{background:rgba(255,183,77,.14);color:#ffbf69}
.assist-status-list{display:grid;gap:8px}.assist-status-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-1)}.assist-status-row>span:nth-child(2){display:grid;gap:3px}.assist-status-row small{color:var(--muted);line-height:1.4}.assist-status-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--surface-3);color:var(--muted)}.assist-status-row.good .assist-status-icon{background:rgba(61,220,151,.12);color:var(--emerald)}.assist-status-row.needs .assist-status-icon{background:rgba(255,183,77,.12);color:#ffbf69}.assist-manual{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.assist-manual>small{grid-column:1/-1;color:var(--muted);font:700 8px/1 var(--mono);letter-spacing:.12em}.assist-manual label{display:flex;align-items:center;gap:8px;padding:11px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-1);line-height:1.35}.assist-manual input,.assist-option-grid input{accent-color:var(--accent)}.assist-safety-note{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:var(--radius-s);background:color-mix(in srgb,var(--accent) 7%,var(--surface-1))}.assist-safety-note>.ms{color:var(--accent)}.assist-safety-note>span:last-child{display:grid;gap:3px}.assist-safety-note small{color:var(--muted);line-height:1.4}.assist-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.assist-option-grid label{display:flex;align-items:flex-start;gap:9px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-1)}.assist-option-grid label>span{display:grid;gap:3px}.assist-option-grid small{color:var(--muted);line-height:1.4}.assist-actions-inline{display:flex;flex-wrap:wrap;gap:8px}.assist-recovery-list{display:grid;gap:8px;margin:0;padding:0;list-style:none;counter-reset:none}.assist-recovery-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-1)}.assist-recovery-list li>.ms{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--surface-3);color:var(--accent)}.assist-recovery-list li>span:last-child{display:grid;gap:3px}.assist-recovery-list small{color:var(--muted);line-height:1.4}.live-assist-settings-preview{align-items:center}.live-assist-preview-art{width:min(330px,42%);aspect-ratio:16/9;position:relative;display:grid;place-items:center;padding:12px;border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 14%,var(--surface-2)),var(--surface-3));overflow:hidden}.live-assist-preview-art>.ms{font-size:42px;color:var(--accent);z-index:2}.live-assist-preview-art i{position:absolute;height:10px;border-radius:99px;background:color-mix(in srgb,var(--text) 15%,transparent)}.live-assist-preview-art i:nth-child(2){left:14px;right:45%;bottom:18px}.live-assist-preview-art i:nth-child(3){left:30%;right:14px;bottom:34px}.live-assist-preview-art i:nth-child(4){left:14px;right:25%;top:18px}
@media (min-width:821px){body.live-assist-open .app-main{margin-right:calc(min(560px,46vw) + 12px);transition:margin-right .2s var(--ease)}}
@media (max-width:920px) and (orientation:portrait),(max-width:820px){.live-assist-head{min-height:58px;padding:8px 10px}.live-assist-icon{width:34px;height:34px}.live-assist-body{padding:10px}.live-assist-footer{display:grid;grid-template-columns:1fr 1fr;padding:9px 10px max(9px,env(safe-area-inset-bottom))}.live-assist-footer button{width:100%;justify-content:center}.assist-manual{grid-template-columns:1fr}.assist-option-grid{grid-template-columns:1fr}}
@media (max-width:540px){.assist-intro,.assist-raid-hero,.assist-connection-hero{padding:12px}.assist-orb{width:44px;height:44px}.assist-orb .ms{font-size:23px}.assist-status-row{grid-template-columns:auto minmax(0,1fr)}.assist-status-row>button,.assist-status-row>.state-pill{grid-column:1/-1;width:100%;justify-content:center}.live-assist-preview-art{width:100%;max-width:300px}}
body[data-motion="reduced"] .live-assist-sidecar,body[data-motion="none"] .live-assist-sidecar{animation:none}

/* -------------------------------------------------------------------
   v6.0.0 — Moderator Command Center
-------------------------------------------------------------------- */

/* §3 Desktop/tablet: the Moderator Center fills the viewport; feeds
   scroll internally. Chain: view (fixed height) → stage (flex, min-height 0)
   → active panel → dashboard grid (internal scroll). */
@media (min-width: 821px) {
  html.mod-fill { overflow: hidden; }
  html.mod-fill #view-moderation {
    display: flex; flex-direction: column; min-height: 0;
    height: calc(100dvh - var(--mod-view-top, 150px));
    overflow: hidden; padding-bottom: 10px;
  }
  /* The tab strip now lives in the main sidebar as a sub-nav under
     "Moderation" (see .side-mod-subnav) — this in-content copy is only
     needed below this breakpoint, where the sidebar itself is hidden. */
  html.mod-fill #view-moderation .mod-center-tabs { display: none; }
  html.mod-fill #view-moderation .mod-center-bar { flex: none; }
  html.mod-fill #view-moderation .mod-center-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  html.mod-fill #view-moderation .mod-tab-panel.active { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  html.mod-fill #view-moderation .mod-dashboard-grid { flex: 1; min-height: 0; overflow-y: auto; align-content: start; padding-bottom: 6px; }
  html.mod-fill #view-moderation .mod-stream-workspace { flex: 1; min-height: 0; }
}
@supports not (height: 100dvh) {
  @media (min-width: 821px) { html.mod-fill #view-moderation { height: calc(100vh - var(--mod-view-top, 150px)); } }
}

/* Sidebar sub-nav: Overview/Queue/Chat/Tools/Activity/IRL, nested under the
   "Moderation" button, indented with a divider — reclaims the sidebar's
   otherwise-empty space instead of a separate rail inside the content. */
.side-mod-subnav {
  display: none; flex-direction: column; gap: 1px;
  margin: 2px 0 6px 14px; padding-top: 6px;
  border-top: 1px solid var(--line);
}
body.mod-sidebar-nav .side-mod-subnav { display: flex; }
.side-mod-subnav button {
  display: flex; align-items: center; gap: 11px; width: 100%;
  min-height: 42px; padding: 8px 12px; border-radius: var(--radius-s);
  justify-content: flex-start; text-align: left; background: transparent;
  color: var(--muted); position: relative;
}
.side-mod-subnav button:hover { background: var(--surface-2); color: var(--text); }
.side-mod-subnav button.active { background: rgba(var(--accent-rgb), .13); color: var(--accent); }
.side-mod-subnav button .ms { font-size: 19px; flex: none; }
.side-mod-subnav button > span:not(.ms):not(.tab-count) { font-size: calc(12.5px * var(--text-scale)); font-weight: 610; }
.side-mod-subnav .tab-count { position: static; margin-left: auto; flex: none; }

/* §9 Streamer Field Deck: bottom sheet over Field Mode */
.field-deck-sheet { position: absolute; inset: 0; z-index: 40; background: rgba(0, 0, 0, .44); opacity: 0; transition: opacity .22s var(--ease, ease); }
.field-deck-sheet.open { opacity: 1; }
.field-deck-sheet[hidden] { display: none; }
.field-deck-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 56dvh;
  display: flex; flex-direction: column;
  background: var(--surface-1); border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0; padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
  transform: translateY(24px); transition: transform .22s var(--ease, ease);
}
.field-deck-sheet.open .field-deck-panel { transform: none; }
.field-deck-panel header { display: flex; align-items: center; gap: 10px; padding: 4px 2px 10px; }
.field-deck-panel header b { font-size: calc(14px * var(--text-scale)); }
.field-deck-panel .drag-nub { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 42px; height: 4px; border-radius: 999px; background: var(--line); }
.field-deck-bela { margin-left: auto; font: 700 9.5px/1 var(--mono); letter-spacing: .08em; color: var(--faint); }
.field-deck-bela.live { color: var(--accent); }
.field-deck-list { overflow-y: auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-bottom: 4px; }
.field-deck-btn {
  display: grid; place-items: center; gap: 3px; min-height: 68px; padding: 8px 6px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2, var(--surface-1)); color: var(--ink, var(--text));
  font-size: calc(11px * var(--text-scale)); font-weight: 700;
}
.field-deck-btn .ms { font-size: 22px; color: var(--accent); }
.field-deck-btn small { color: var(--faint); font-size: 8.5px; letter-spacing: .06em; }
.field-deck-btn:active { transform: scale(.97); }

/* -------------------------------------------------------------------
   v6.1.0 — Live Signal: activity diagnostics + richer event cards
-------------------------------------------------------------------- */
.mod-signal-card { grid-column: 1 / -1; margin-bottom: 0; padding: 10px 12px; border-radius: var(--radius-m); background: var(--surface-1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 66%, transparent); }
.mod-signal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mod-signal-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); font-size: calc(11px * var(--text-scale)); }
.mod-signal-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok, #6bcf7f); }
.mod-signal-pill[data-tone="warn"] .dot { background: var(--warn, #e8b23f); }
.mod-signal-pill[data-tone="bad"] .dot { background: var(--danger, #e2574f); }
.mod-signal-pill[data-tone="bad"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger, #e2574f) 45%, transparent); }
.mod-signal-head > small { color: var(--faint); font-size: calc(10.5px * var(--text-scale)); }
.mod-signal-head .soft-btn { margin-left: auto; min-height: 34px; }
.mod-signal-issues { display: grid; gap: 6px; margin-top: 10px; }
.signal-issue { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border-radius: var(--radius-s); background: var(--surface-2); font-size: calc(11px * var(--text-scale)); line-height: 1.45; }
.signal-issue .ms { font-size: 16px; flex: none; margin-top: 1px; }
.signal-issue.bad .ms { color: var(--danger, #e2574f); }
.signal-issue.warn .ms { color: var(--warn, #e8b23f); }
.signal-issue.note .ms { color: var(--muted); }
.mod-activity-icon.typed .ms { color: var(--accent); }
.mod-activity-actions { display: inline-flex; gap: 6px; margin-left: auto; padding-right: 8px; }
.mod-activity-actions .tiny { min-height: 28px; padding: 3px 9px; font-size: calc(9.5px * var(--text-scale)); }
.mod-activity-row { align-items: center; }
.gift-recipients { display: block; margin-top: 2px; color: var(--accent); font-size: calc(10px * var(--text-scale)); }
#authRepair { margin-top: 8px; }

/* -------------------------------------------------------------------
   v6.2.0 — Yours to Shape: mini player + toggles
-------------------------------------------------------------------- */
#keepAudioToggle.active { background: rgba(var(--accent-rgb), .16); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .4); }
#miniPlayerDock {
  position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 260;
  width: min(320px, calc(100vw - 28px));
  border-radius: var(--radius-m); overflow: hidden;
  background: var(--surface-1); box-shadow: 0 12px 34px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--line);
}
#miniPlayerDock header { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; }
#miniPlayerDock header .ms:first-child { color: var(--accent); font-size: 17px; }
#miniPlayerDock header b { font-size: calc(12px * var(--text-scale)); }
#miniPlayerDock .mini-grow { flex: 1; }
#miniPlayerDock header .icon-button { width: 32px; height: 32px; }
#miniPlayerDock iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
@media (max-width: 720px) { #miniPlayerDock { bottom: calc(var(--mobile-dock-h, 74px) + 12px + env(safe-area-inset-bottom)); } }
.danger-text { color: var(--danger, #e2574f); }

/* -------------------------------------------------------------------
   v6.3-in-progress — static offline viewer card (kills the Twitch
   offline-embed self-refresh flicker)
-------------------------------------------------------------------- */
.viewer-offline-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 140px; background: radial-gradient(circle at 50% 15%, color-mix(in srgb, var(--accent) 10%, transparent), var(--surface-0) 70%); }
.viewer-offline-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px color-mix(in srgb, var(--line) 70%, transparent); }
.viewer-offline-card .ms { font-size: 40px; color: var(--faint); }
.viewer-offline-card b { font-size: calc(13px * var(--text-scale)); }
.viewer-offline-card small { color: var(--faint); font-size: calc(10.5px * var(--text-scale)); letter-spacing: .04em; text-transform: uppercase; }

/* Raid Center: source filter chips */
.raid-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.raid-filter-bar[hidden] { display: none; }
.raid-filter-chip { padding: 5px 11px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: calc(10.5px * var(--text-scale)); font-weight: 650; box-shadow: inset 0 0 0 1px transparent; }
.raid-filter-chip.active { background: rgba(var(--accent-rgb), .16); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .4); }
.raid-chip.chatter { background: rgba(120, 170, 255, .16); color: #8fb4ff; }

/* -------------------------------------------------------------------
   Raid Center: filter refinement (mute, hide-offline, new sources)
-------------------------------------------------------------------- */
.raid-filter-chip-wrap { display: inline-flex; align-items: stretch; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px transparent; }
.raid-filter-chip-wrap:has(.raid-filter-chip.active) { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .4); }
.raid-filter-chip-wrap .raid-filter-chip { background: transparent; box-shadow: none; border-radius: 999px 0 0 999px; }
.raid-filter-chip-wrap:not(:has(.raid-filter-hide)) .raid-filter-chip { border-radius: 999px; }
.raid-filter-hide { display: grid; place-items: center; width: 24px; border-radius: 0 999px 999px 0; color: var(--faint); }
.raid-filter-hide .ms { font-size: 13px; }
.raid-filter-hide:hover { color: var(--danger, #e2574f); background: rgba(226, 87, 79, .12); }

.raid-filter-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 8px; flex-wrap: wrap; }
.check-row.inline { min-height: auto; padding: 4px 0; border: 0; background: transparent; gap: 8px; }
.check-row.inline span { font-size: calc(11px * var(--text-scale)); color: var(--muted); }
.text-link.small { font-size: calc(10.5px * var(--text-scale)); }

.raid-hidden-manager { margin: 0 16px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-1); display: flex; flex-wrap: wrap; gap: 7px; }
.raid-hidden-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 5px 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: calc(10.5px * var(--text-scale)); }
.raid-hidden-chip button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--faint); }
.raid-hidden-chip button:hover { color: var(--danger, #e2574f); background: rgba(226, 87, 79, .14); }
.raid-hidden-chip .ms { font-size: 12px; }

.raid-suggest-row { display: flex; align-items: stretch; gap: 4px; }
.raid-suggest-select { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; border-radius: var(--radius-s); background: var(--surface-1); min-width: 0; }
.raid-suggest-select:hover { background: var(--surface-2); }
.raid-suggest-hide { display: grid; place-items: center; width: 34px; flex: none; border-radius: var(--radius-s); color: var(--faint); }
.raid-suggest-hide:hover { color: var(--danger, #e2574f); background: rgba(226, 87, 79, .1); }
.raid-suggest-hide .ms { font-size: 16px; }

.raid-chip.raided-by-me { background: rgba(165, 111, 255, .16); color: #cbb3ff; }
.raid-chip.follows-you { background: rgba(61, 220, 151, .14); color: var(--emerald, #3ddc97); }
.raid-chip.you-follow { background: rgba(255, 183, 77, .14); color: #ffbf69; }
#raidFollowScopeHint { margin: 0 16px 10px; }

/* Notifications: per-category delivery grid (replaces the old on/off checkbox grid) */
.notification-delivery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.notification-delivery-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-0)}
.notification-delivery-row span{color:var(--muted);font-size:calc(11.5px * var(--text-scale))}
.notification-delivery-row select{max-width:150px;font-size:calc(10.5px * var(--text-scale))}
@media (max-width:520px){.notification-delivery-grid{grid-template-columns:1fr}.notification-delivery-row select{max-width:none}}

/* Owner-only: Moderator dashboard defaults card */
.mod-team-default-card{margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface-0);display:grid;gap:10px}
.mod-team-default-card[hidden]{display:none}
.mod-team-default-card>div>small{display:block;margin-top:4px;color:var(--muted);line-height:1.4}
.mod-team-default-status{margin:0;padding:8px 10px;border-radius:var(--radius-s);background:var(--surface-1);color:var(--muted);font-size:calc(11px * var(--text-scale))}
.layout-preset-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.layout-preset-grid.compact button{padding:9px;gap:4px}
.layout-preset-grid.compact .ms{font-size:18px}
.layout-preset-grid.compact b{font-size:calc(10px * var(--text-scale))}
@media (max-width:640px){.layout-preset-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Raid Center: dedicated "recently raided you" card + clarified filters */
.raid-recent-raiders-card{margin-bottom:14px}
.raid-recent-raiders-card[hidden]{display:none}
.raid-recent-raiders-card .raid-suggest-select{background:color-mix(in srgb, var(--accent) 6%, var(--surface-1))}
.raid-filter-explainer{padding:0 16px 4px}
.raid-filter-show>small{display:block;margin-bottom:6px;color:var(--faint);font:700 9px/1 var(--mono);letter-spacing:.1em}
.raid-hide-categories-panel{margin:0 16px 10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-1)}
.raid-hide-categories-panel[hidden]{display:none}
.raid-hide-categories-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:6px}
@media (max-width:520px){.raid-hide-categories-grid{grid-template-columns:1fr}}

/* While a sidecar is open, the content column shrinks — the long "Demo
   Creator Console" space picker and "Creator mode" workspace picker in the
   topbar don't have room and just wrap/clip awkwardly. Hide them; the
   sidecar itself already shows which space/context you're acting in. */
body.raid-sidecar-open .space-picker-wrap,
body.raid-sidecar-open .mode-picker-wrap,
body.live-assist-open .space-picker-wrap,
body.live-assist-open .mode-picker-wrap {
  display: none !important;
}

/* =====================================================================
   v6.28.0 — reliable notifications, acknowledgement alerts, setup handoff
   ===================================================================== */
.urgent-header-btn{border-color:rgba(255,154,77,.42);background:rgba(255,134,65,.08);color:#ffb06b}
.urgent-header-btn:hover{background:rgba(255,134,65,.16)}
.setup-share-dialog .sheet-shell{width:min(720px,calc(100vw - 28px))}
.urgent-preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 16px}
.urgent-preset{min-height:76px;display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface-1);text-align:left;cursor:pointer;transition:.15s var(--ease)}
.urgent-preset:hover{transform:translateY(-1px);border-color:var(--line-strong);background:var(--surface-2)}
.urgent-preset>.ms{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:rgba(255,166,86,.12);color:#ffb46f;font-size:23px}
.urgent-preset.critical{border-color:rgba(255,93,110,.26)}
.urgent-preset.critical>.ms{background:rgba(255,93,110,.13);color:#ff8c9a}
.urgent-preset span:last-child{min-width:0;display:grid;gap:3px}.urgent-preset b{font-size:14px}.urgent-preset small{color:var(--muted);font-size:11px}
.urgent-alert-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.72fr);gap:12px 18px;align-items:center;padding:18px;border:1px solid rgba(255,154,77,.24);border-radius:var(--radius-m);background:linear-gradient(135deg,rgba(255,144,69,.08),rgba(var(--accent-rgb),.035))}
.urgent-alert-settings>div:first-child{grid-row:1/span 3}.urgent-alert-settings h3{margin:4px 0 6px}.urgent-alert-settings p{margin:0;color:var(--muted);font-size:12px}.urgent-alert-settings .check-row{margin:0}.urgent-alert-settings>button{justify-self:start}
.urgent-attention{position:fixed;inset:0;z-index:500;display:grid;place-items:start center;padding:max(22px,env(safe-area-inset-top)) 18px 18px;background:rgba(4,5,5,.56);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .18s var(--ease)}
.urgent-attention.open{opacity:1;pointer-events:auto}
.urgent-attention-card{width:min(760px,100%);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:18px;border:1px solid rgba(255,170,92,.5);border-radius:var(--radius-l);background:linear-gradient(135deg,#261c14,#17191a 62%);box-shadow:0 28px 90px rgba(0,0,0,.52),0 0 0 1px rgba(255,182,104,.08);transform:translateY(-18px) scale(.985);transition:transform .2s var(--ease)}
.urgent-attention.open .urgent-attention-card{transform:none}
.urgent-attention[data-severity="critical"] .urgent-attention-card{border-color:rgba(255,91,108,.7);background:linear-gradient(135deg,#2a1218,#171719 64%)}
.urgent-attention-beacon{width:62px;height:62px;display:grid;place-items:center;border-radius:50%;background:rgba(255,154,77,.15);color:#ffb06b;box-shadow:0 0 0 0 rgba(255,154,77,.35);animation:urgent-beacon 1.35s ease-out infinite}
.urgent-attention[data-severity="critical"] .urgent-attention-beacon{background:rgba(255,91,108,.16);color:#ff8796;animation-duration:.95s}
.urgent-attention-beacon .ms{font-size:31px}.urgent-attention-copy{min-width:0}.urgent-attention-copy small{font:700 9px/1.2 var(--mono);letter-spacing:.14em;color:#ffb06b}.urgent-attention[data-severity="critical"] .urgent-attention-copy small{color:#ff8796}.urgent-attention-copy h2{margin:6px 0 4px;font-size:clamp(20px,3vw,30px)}.urgent-attention-copy p{margin:0 0 5px;color:var(--text);font-size:14px}.urgent-attention-copy em{color:var(--muted);font-style:normal;font-size:11px}
@keyframes urgent-beacon{70%{box-shadow:0 0 0 18px rgba(255,154,77,0)}100%{box-shadow:0 0 0 0 rgba(255,154,77,0)}}
.setup-share-safety{display:flex;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface-1)}.setup-share-safety>.ms{color:var(--accent)}.setup-share-safety span:last-child{display:grid;gap:4px}.setup-share-safety small{color:var(--muted)}
@media(max-width:720px){
  .urgent-preset-grid{grid-template-columns:1fr}.urgent-alert-settings{grid-template-columns:1fr}.urgent-alert-settings>div:first-child{grid-row:auto}
  .urgent-attention{place-items:end center;padding:12px 10px calc(12px + env(safe-area-inset-bottom))}
  .urgent-attention-card{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:15px;border-radius:var(--radius-l)}
  .urgent-attention-card>.primary-btn{grid-column:1/-1;width:100%}.urgent-attention-beacon{width:50px;height:50px}.urgent-attention-copy h2{font-size:21px}
}
body[data-motion="reduced"] .urgent-attention-beacon,body[data-motion="none"] .urgent-attention-beacon{animation:none}

/* v6.30.1 — IRL Hub health-first operations workspace */
.irl-mobile-health{display:none}
.irl-health-hero{grid-template-columns:minmax(260px,.7fr) minmax(280px,.55fr);align-items:center;gap:18px 24px;padding:22px;margin-bottom:14px;background:radial-gradient(circle at 12% 20%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 34%),linear-gradient(125deg,color-mix(in srgb,var(--surface-2) 72%,var(--surface-1)),var(--surface-1))}
.irl-health-hero .belabox-status-main{min-width:0}.irl-health-hero .belabox-status-main h3{font-size:clamp(22px,2.4vw,34px)}
.irl-health-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.irl-health-actions>*{min-width:max-content}
.irl-health-hero .belabox-metric-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.irl-health-hero .belabox-metric-grid>span{min-height:72px;display:grid;align-content:center;gap:5px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-m);background:color-mix(in srgb,var(--surface-0) 78%,transparent)}
.irl-health-hero .belabox-metric-grid small{color:var(--faint);font:700 calc(8.5px * var(--text-scale))/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}.irl-health-hero .belabox-metric-grid b{font-size:calc(13px * var(--text-scale));font-variant-numeric:tabular-nums}
.irl-ops-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;align-items:start}.irl-ops-grid>.panel-card{min-width:0;height:100%}
.irl-source-card{grid-column:span 5}.irl-connections-card{grid-column:span 7}.irl-producer-card{grid-column:span 8}.irl-actions-card{grid-column:span 4}.irl-events-card{grid-column:span 5}.irl-setup-card{grid-column:span 7}
.irl-source-card .belabox-source-strip{grid-template-columns:1fr;margin:14px 0 0}.irl-source-card .belabox-source-chip{min-height:70px}
.irl-connections-card .belabox-link-list{margin-top:8px}.irl-connections-card .belabox-link-row{min-height:62px}
.irl-producer-card .producer-block{margin-top:14px}.irl-producer-card .producer-head>span small{color:var(--accent)}
.irl-actions-card .irl-toolkit-actions{display:grid;grid-template-columns:1fr 1fr;margin-bottom:12px}.irl-actions-card .irl-toolkit-actions>*{min-width:0}
.irl-actions-card .irl-watch-list{margin:0}.irl-overlay-setup{margin-top:12px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface-1);overflow:hidden}.irl-overlay-setup summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;cursor:pointer;list-style:none}.irl-overlay-setup summary::-webkit-details-marker{display:none}.irl-overlay-setup summary>span:first-child{display:flex;align-items:center;gap:8px}.irl-overlay-setup summary .ms{color:var(--accent)}.irl-overlay-setup summary>span:last-child{color:var(--muted);transition:transform .16s var(--ease)}.irl-overlay-setup[open] summary>span:last-child{transform:rotate(180deg)}.irl-overlay-setup>div{padding:0 13px 13px;border-top:1px solid var(--line)}
.irl-event-list{display:grid;gap:8px}.irl-event-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:58px;padding:10px 11px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-1)}.irl-event-row>.ms{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,var(--surface-2));color:var(--accent)}.irl-event-row.warning>.ms{background:color-mix(in srgb,var(--warning,#ffc46b) 14%,var(--surface-2));color:var(--warning,#ffc46b)}.irl-event-row span:nth-child(2){min-width:0;display:grid;gap:2px}.irl-event-row b{font-size:calc(11.5px * var(--text-scale))}.irl-event-row small{color:var(--muted);font-size:calc(9.5px * var(--text-scale));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.irl-event-row time{color:var(--faint);font:700 calc(8.5px * var(--text-scale))/1 var(--mono);white-space:nowrap}
.irl-readonly-note{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;margin-bottom:12px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:var(--radius-m);background:color-mix(in srgb,var(--accent) 6%,var(--surface-1))}.irl-readonly-note>.ms{color:var(--accent)}.irl-readonly-note span:last-child{display:grid;gap:3px}.irl-readonly-note small{color:var(--muted);line-height:1.4}.irl-local-access{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.irl-official-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
@media(max-width:1120px) and (min-width:821px){.irl-source-card,.irl-connections-card,.irl-producer-card,.irl-actions-card,.irl-events-card,.irl-setup-card{grid-column:span 6}}
@media(max-width:820px){body[data-current-view="belabox"] .status-strip{display:none}.belabox-page-toolbar{margin-bottom:12px}.belabox-page-toolbar .toolbar-actions{display:none}.irl-mobile-health{position:sticky;top:calc(70px + env(safe-area-inset-top));z-index:36;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin:0 -14px 12px;padding:9px 14px;border-block:1px solid var(--line-strong);background:color-mix(in srgb,var(--surface-0) 94%,transparent);backdrop-filter:blur(18px) saturate(125%);box-shadow:0 8px 22px rgba(0,0,0,.16)}.irl-mobile-health .status-orb{width:38px;height:38px}.irl-mobile-health .status-orb .ms{font-size:20px}.irl-mobile-health>span:nth-child(2){min-width:0;display:grid;gap:2px}.irl-mobile-health small{color:var(--accent);font:700 8px/1 var(--mono);letter-spacing:.12em}.irl-mobile-health b,.irl-mobile-health em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.irl-mobile-health b{font-size:calc(12px * var(--text-scale))}.irl-mobile-health em{color:var(--muted);font-style:normal;font-size:calc(9px * var(--text-scale))}.irl-health-hero{grid-template-columns:1fr;padding:16px;border-radius:var(--radius-l)}.irl-health-actions{justify-content:stretch}.irl-health-actions>*{flex:1}.irl-health-hero .belabox-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.irl-ops-grid{grid-template-columns:1fr;gap:12px}.irl-source-card,.irl-connections-card,.irl-producer-card,.irl-actions-card,.irl-events-card,.irl-setup-card{grid-column:auto}.irl-ops-grid>.panel-card{height:auto}.irl-source-card{order:1}.irl-connections-card{order:2}.irl-producer-card{order:3}.irl-actions-card{order:4}.irl-events-card{order:5}.irl-setup-card{order:6}.irl-producer-card .producer-grid{grid-template-columns:1fr}.irl-producer-card .producer-grid .prod-span-2{grid-column:auto}.irl-producer-card .producer-head{align-items:stretch;flex-direction:column}.irl-producer-card #producerArm{width:100%;justify-content:center}.irl-event-row{grid-template-columns:auto minmax(0,1fr)}.irl-event-row time{grid-column:2}.irl-actions-card .irl-toolkit-actions{grid-template-columns:1fr}.irl-setup-card .card-actions{display:grid;grid-template-columns:1fr}.irl-setup-card .card-actions>*{width:100%;justify-content:center}.irl-official-links{display:grid}}
@media(max-width:480px){.irl-health-hero .belabox-status-main{align-items:flex-start}.irl-health-hero .status-orb{width:44px;height:44px}.irl-health-hero .belabox-metric-grid>span{min-height:66px;padding:10px}.irl-health-actions{display:grid;grid-template-columns:1fr 1fr}.irl-health-actions #belaboxPageRefresh{grid-column:1/-1}.irl-mobile-health{top:calc(70px + env(safe-area-inset-top))}}

/* v6.28 — BELABOX monitoring source health and stale-snapshot clarity */
.belabox-stale-banner{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;margin:-5px 0 12px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--warning,#ffc46b) 45%,var(--line));border-radius:var(--radius-m);background:color-mix(in srgb,var(--warning,#ffc46b) 8%,var(--surface-1))}
.belabox-stale-banner[hidden]{display:none}.belabox-stale-banner>.ms{font-size:22px;color:var(--warning,#ffc46b)}.belabox-stale-banner>div{display:grid;gap:2px}.belabox-stale-banner small{color:var(--muted);line-height:1.35}
.belabox-source-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 16px}
.belabox-source-chip{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface-1)}
.belabox-source-chip .source-dot{width:10px;height:10px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 4px color-mix(in srgb,var(--muted) 12%,transparent)}
.belabox-source-chip[data-status="connected"] .source-dot{background:var(--success,#4ce09a);box-shadow:0 0 0 4px color-mix(in srgb,var(--success,#4ce09a) 15%,transparent)}
.belabox-source-chip[data-status="partial"] .source-dot{background:var(--warning,#ffc46b);box-shadow:0 0 0 4px color-mix(in srgb,var(--warning,#ffc46b) 15%,transparent)}
.belabox-source-chip[data-status="unavailable"] .source-dot{background:var(--danger,#ff7d70);box-shadow:0 0 0 4px color-mix(in srgb,var(--danger,#ff7d70) 15%,transparent)}
.belabox-source-chip>span:last-child{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:baseline}.belabox-source-chip small{font:700 8px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}.belabox-source-chip b{font-size:calc(12px * var(--text-scale));text-align:right}.belabox-source-chip em{grid-column:1/-1;color:var(--muted);font-style:normal;font-size:calc(9px * var(--text-scale));line-height:1.35}
.belabox-status-hero.stale{border-color:color-mix(in srgb,var(--warning,#ffc46b) 42%,var(--line-strong));background:linear-gradient(120deg,color-mix(in srgb,var(--warning,#ffc46b) 8%,transparent),transparent 48%),var(--surface-1)}
@media(max-width:680px){.belabox-source-strip{grid-template-columns:1fr}.belabox-source-chip{min-height:62px}.belabox-stale-banner{margin-top:0}}


/* =====================================================================
   v6.30.1 — moderator ping sidecar + balanced IRL field grid
   ===================================================================== */
.urgent-ping-dialog{
  position:fixed;
  inset:0 0 0 auto;
  width:min(520px,100vw);
  max-width:none;
  height:100dvh;
  max-height:100dvh;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-left:1px solid var(--line-strong);
  border-radius:var(--radius-xl) 0 0 var(--radius-xl);
  background:var(--surface-0);
  box-shadow:-28px 0 80px rgba(0,0,0,.46);
}
.urgent-ping-dialog .sheet-shell{
  box-sizing:border-box;
  width:100%;
  height:100%;
  max-height:none;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:max(22px,env(safe-area-inset-top)) 20px max(22px,env(safe-area-inset-bottom));
}
.urgent-ping-dialog .sheet-head{margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--line)}
.urgent-ping-dialog .urgent-preset-grid{grid-template-columns:1fr;gap:9px}
.urgent-ping-dialog .urgent-preset{min-height:72px}
@media(max-width:720px){
  .urgent-ping-dialog{inset:0;width:100vw;height:100dvh;border-left:0;border-radius:0}
  .urgent-ping-dialog .sheet-shell{padding-inline:16px}
}

/* =====================================================================
   v6.30.2 — unified sidecars, balanced IRL desktop, consistency pass
   ===================================================================== */

/* Shared visual contract for temporary workspaces. Feature-specific classes
   keep their own content layouts, but every sidecar now uses the same edge,
   header rhythm, elevation, and mobile takeover behavior. */
.th5-sidecar,
.th5-sidecar-dialog {
  --sidecar-width: min(620px, 48vw);
  background: var(--bg);
  border-color: var(--line-strong);
  box-shadow: -28px 0 80px rgba(0,0,0,.42);
}
.th5-sidecar :is(.raid-sidecar-head,.live-assist-head,.caravan-sidecar-head),
.th5-sidecar-head {
  min-height: 70px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb,var(--surface-1) 95%,transparent);
  backdrop-filter: blur(16px) saturate(120%);
}
.th5-sidecar-body { min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.th5-sidecar-title { display:flex; align-items:center; gap:10px; min-width:0; }
.th5-sidecar-title>span:last-child { min-width:0; display:grid; gap:3px; }
.th5-sidecar-title small { color:var(--accent); font:700 8px/1 var(--mono); letter-spacing:.12em; }
.th5-sidecar-title b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.th5-sidecar-icon { width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb,var(--accent) 17%,var(--surface-2)); color:var(--accent); }
.th5-sidecar-footer { padding:12px 16px max(12px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--surface-1); }
.th5-sidecar-footer small { display:block; color:var(--muted); line-height:1.45; }

@media (max-width:820px), (max-width:920px) and (orientation:portrait) {
  html.th5-sidecar-open, html.th5-sidecar-open body { height:100%; overflow:hidden; }
  body.th5-sidecar-open .app-main { margin-right:0 !important; }
  html.th5-sidecar-open #mainContent { height:auto !important; overflow:visible !important; }
  body.th5-sidecar-open :is(.app-topbar,.status-strip,.mobile-nav,.on-air-dock,.chat-dock) { visibility:hidden !important; pointer-events:none !important; }
  .th5-sidecar,
  .th5-sidecar-dialog,
  .raid-sidecar,
  .live-assist-sidecar,
  #caravanRoot .caravan-sidecar,
  #caravanRoot .caravan-sidecar.tall,
  .urgent-ping-dialog {
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    grid-template-rows:auto minmax(0,1fr) auto;
    box-shadow:none !important;
    z-index:210 !important;
    animation-name:th5-mobile-workspace-in !important;
  }
  @keyframes th5-mobile-workspace-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
  .th5-sidecar :is(.raid-sidecar-head,.live-assist-head,.caravan-sidecar-head),
  .th5-sidecar-head {
    position:sticky; top:0; z-index:5; min-height:64px;
    padding:max(10px,env(safe-area-inset-top)) 12px 9px;
    border-radius:0;
  }
  .raid-sidecar-body,.live-assist-body,#caravanRoot .caravan-sidecar-body,.th5-sidecar-body {
    min-height:0; padding:12px 12px calc(24px + env(safe-area-inset-bottom)); overflow:auto;
  }
  .raid-sidecar-sequence,.live-assist-footer,.th5-sidecar-footer { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  #raidSidecarFull,#caravanRoot [data-inspector-expand],#caravanRoot .caravan-tall-toggle { display:none !important; }
}

/* IRL Hub: mobile layout remains the existing single-column flow. Tablet and
   desktop now use explicit rows, so the final modules can never orphan or
   collapse into a narrow left column. */
[data-irl-module][hidden], [data-irl-metric][hidden] { display:none !important; }
@media (min-width:821px) {
  .irl-ops-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:18px;
    align-items:start;
  }
  .irl-ops-grid>.panel-card { grid-column:auto; width:auto; height:auto; min-width:0; }
  .irl-source-card { grid-column:1; }
  .irl-connections-card { grid-column:2; }
  .irl-producer-card { grid-column:1 / -1; }
  .irl-actions-card { grid-column:1; }
  .irl-events-card { grid-column:2; }
  .irl-setup-card { grid-column:1 / -1; }
  .irl-setup-card .irl-diagnostic-actions { display:flex; flex-wrap:wrap; }
  .irl-setup-card .irl-local-access { display:grid; grid-template-columns:minmax(280px,1fr) auto; align-items:end; gap:14px; }
  .irl-setup-card .irl-local-access>.card-actions { margin:0; }
}
@media (min-width:1360px) {
  .irl-ops-grid { grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:20px; }
}
.irl-health-hero .belabox-metric-grid[hidden] { display:none !important; }
.irl-ops-grid>.panel-card { overflow:hidden; }
.irl-diagnostic-actions>* { min-width:max-content; }

/* BELABOX repair workspace */
.belabox-troubleshoot-dialog {
  position:fixed; inset:0 0 0 auto; width:min(560px,100vw); height:100dvh; margin:0;
  border:0; border-left:1px solid var(--line-strong); border-radius:var(--radius-xl) 0 0 var(--radius-xl);
  overflow:hidden; background:var(--bg);
}
.belabox-troubleshoot-dialog .th5-sidecar-shell { height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.belabox-troubleshoot-dialog .th5-sidecar-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:max(14px,env(safe-area-inset-top)) 16px 13px; }
.belabox-troubleshoot-dialog .th5-sidecar-body { padding:16px; display:grid; align-content:start; gap:16px; }
.troubleshoot-summary { display:grid; gap:10px; padding:15px; border:1px solid var(--line); border-radius:var(--radius-l); background:var(--surface-1); }
.troubleshoot-summary>header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.troubleshoot-summary h3 { margin:3px 0 0; font-size:calc(18px * var(--text-scale)); }
.troubleshoot-summary>div { display:grid; gap:8px; }
.troubleshoot-status { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; padding:10px 11px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface-0); }
.troubleshoot-status>.ms { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--surface-3); color:var(--muted); }
.troubleshoot-status.good>.ms { color:var(--emerald); background:rgba(61,220,151,.12); }
.troubleshoot-status.needs>.ms { color:var(--warning,#ffc46b); background:color-mix(in srgb,var(--warning,#ffc46b) 13%,var(--surface-2)); }
.troubleshoot-status>span:last-child { min-width:0; display:grid; gap:3px; }
.troubleshoot-status small { color:var(--muted); line-height:1.4; }
.troubleshoot-action-list { display:grid; gap:8px; }
.troubleshoot-action { width:100%; min-height:70px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface-1); color:var(--text); text-align:left; cursor:pointer; }
.troubleshoot-action:hover { border-color:color-mix(in srgb,var(--accent) 48%,var(--line)); background:color-mix(in srgb,var(--accent) 7%,var(--surface-1)); }
.troubleshoot-action.primary { border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }
.troubleshoot-action>span:nth-child(2) { min-width:0; display:grid; gap:3px; }
.troubleshoot-action small { color:var(--muted); line-height:1.4; }
.troubleshoot-action>.ms:first-child { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--surface-3); color:var(--accent); }
.troubleshoot-action>.ms:last-child { color:var(--muted); }
.troubleshoot-action.loading>.ms:first-child { animation:spin .8s linear infinite; }
.troubleshoot-links { display:grid; gap:9px; padding-top:4px; }
.troubleshoot-links>small { color:var(--muted); font:700 8px/1 var(--mono); letter-spacing:.12em; }
.troubleshoot-links>div { display:flex; flex-wrap:wrap; gap:8px; }

/* App-wide consistency pass: shared module rhythm without forcing every module
   into the same content pattern. */
.panel-card { border-radius:var(--radius-l); }
.panel-card>.card-head { min-width:0; gap:12px; margin-bottom:12px; }
.panel-card>.card-head>div { min-width:0; }
.panel-card>.card-head h3 { margin-top:3px; line-height:1.15; }
.card-actions,.toolbar-actions,.inline-actions { row-gap:8px; }
:is(.primary-btn,.soft-btn,.ghost-btn,.danger-btn,.link-btn) { min-height:40px; }
.empty-inline { line-height:1.5; }
:is(.dashboard-grid,.belabox-page-grid,.raid-layout,.mod-queue-grid,.mod-controls-grid,.mod-irl-grid)>* { min-width:0; }


/* Optional IRL pairs redistribute cleanly when only one side has data. */
@media (min-width:821px) {
  .irl-ops-grid:not(:has(.irl-source-card:not([hidden]))) .irl-connections-card:not([hidden]),
  .irl-ops-grid:not(:has(.irl-connections-card:not([hidden]))) .irl-source-card:not([hidden]),
  .irl-ops-grid:not(:has(.irl-actions-card:not([hidden]))) .irl-events-card:not([hidden]),
  .irl-ops-grid:not(:has(.irl-events-card:not([hidden]))) .irl-actions-card:not([hidden]) { grid-column:1 / -1; }
}


/* =====================================================================
   v6.31.0 — Wayfinder themes + premium motion language
   ===================================================================== */

/* Action hierarchy: navigation, filters, and status remain pills; actions are
   field-equipment rectangles so the interface no longer reads as one wall of pills. */
:is(.primary-btn,.ghost-btn,.soft-btn,.danger-btn,.link-btn) { border-radius:var(--action-radius); }
.text-button { border-radius:10px; }
.welcome-actions :is(.primary-btn,.ghost-btn) { border-radius:16px; }
.accent-setting-tools { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.accent-setting-tools input[type="color"] { width:54px; height:42px; cursor:pointer; }
.accent-setting-tools .small { min-height:42px; padding-inline:13px; }

/* Preloaded terrains are complete palettes. The small previews use a consistent
   mini-console anatomy, making their differences readable before selection. */
.theme-choice-grid { grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:12px; }
.theme-choice-grid button {
  position:relative; overflow:hidden; min-height:126px; padding:11px;
  border-radius:18px; background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 72%,transparent),var(--surface-1));
  transition:transform var(--motion-base) var(--ease-premium),border-color var(--motion-base) var(--ease),box-shadow var(--motion-base) var(--ease),background var(--motion-base) var(--ease);
}
.theme-choice-grid button::after {
  content:""; position:absolute; left:11px; right:11px; bottom:0; height:3px;
  border-radius:3px 3px 0 0; background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--motion-base) var(--ease-premium);
}
.theme-choice-grid button:hover { transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.18); }
.theme-choice-grid button.active { border-color:color-mix(in srgb,var(--accent) 64%,var(--line)); background:linear-gradient(160deg,rgba(var(--accent-rgb),.09),var(--surface-1) 62%); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.1),0 18px 42px rgba(0,0,0,.18); }
.theme-choice-grid button.active::after { transform:scaleX(1); }
.theme-choice-grid button.active .theme-mini { animation:th5-terrain-select .55s var(--ease-spring); }
.theme-mini { min-height:78px; grid-template-columns:28% 1fr; grid-template-rows:repeat(3,1fr); isolation:isolate; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.theme-mini::after { content:""; position:absolute; inset:auto -8% -36% 14%; height:74%; border:1px solid rgba(255,255,255,.12); border-radius:50%; transform:rotate(-13deg); }
.theme-mini em { position:absolute; right:9px; top:9px; width:9px; height:9px; border-radius:50%; background:currentColor; box-shadow:0 0 14px currentColor; opacity:.82; }
.theme-mini.studio { background:#131313; }.theme-mini.studio::before{background:#1d1d1c}.theme-mini.studio i{background:#383837}.theme-mini.studio i:first-of-type{background:#ffc46b}.theme-mini.studio em{color:#ffc46b}
.theme-mini.basecamp em{color:#d7f24b}.theme-mini.charcoal em{color:#d7f24b}.theme-mini.midnight em{color:#84b8ff}.theme-mini.summit em{color:#4ce09a}.theme-mini.aurora em{color:#6fd6ff}.theme-mini.light em{color:#5c7a14}
@keyframes th5-terrain-select { 0%{transform:scale(.97) translateY(3px)} 56%{transform:scale(1.025) translateY(-2px)} 100%{transform:none} }

/* The first-run look step now mirrors Settings: terrain, independent signal
   color, and atmosphere. The preview is a tiny animated Trailhead workspace. */
.setup-progress { grid-template-columns:repeat(6,1fr); gap:7px; }
.setup-progress span { position:relative; overflow:hidden; height:6px; }
.setup-progress span.active::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); animation:th5-progress-glint .9s var(--ease-premium) both; }
.setup-look-step { max-width:none; }
.setup-look-layout { display:grid; grid-template-columns:minmax(250px,.82fr) minmax(360px,1.18fr); gap:24px; align-items:stretch; }
.setup-look-preview {
  position:relative; min-height:430px; overflow:hidden; isolation:isolate;
  border:1px solid var(--line-strong); border-radius:24px;
  background:
    linear-gradient(150deg,rgba(var(--accent-rgb),.14),transparent 42%),
    var(--hero-image),var(--surface-0);
  background-size:auto,cover,auto; background-position:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.24);
}
.setup-look-preview::before {
  content:""; position:absolute; inset:-25%; z-index:-1; opacity:.32;
  background-image:var(--topographic); background-size:460px; transform:rotate(-8deg) scale(1.08);
  animation:th5-contour-drift 18s linear infinite;
}
.setup-look-preview::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(6,9,7,.08),rgba(6,9,7,.68)); }
.setup-preview-sky { position:absolute; inset:0; overflow:hidden; }
.setup-preview-sky span { position:absolute; border-radius:50%; background:rgba(var(--accent-rgb),.18); filter:blur(1px); animation:th5-orbit-drift 7s ease-in-out infinite alternate; }
.setup-preview-sky span:nth-child(1){width:150px;height:150px;right:-32px;top:-28px}.setup-preview-sky span:nth-child(2){width:82px;height:82px;left:18px;top:38%;animation-delay:-2s}.setup-preview-sky span:nth-child(3){width:46px;height:46px;right:23%;bottom:17%;animation-delay:-4s}
.setup-preview-shell {
  position:absolute; left:24px; right:24px; bottom:28px; height:66%; display:grid; grid-template-columns:46px 1fr; gap:10px; padding:10px;
  border:1px solid rgba(255,255,255,.16); border-radius:20px; background:color-mix(in srgb,var(--surface-0) 88%,transparent);
  box-shadow:0 28px 70px rgba(0,0,0,.36); backdrop-filter:blur(14px); transform:perspective(900px) rotateX(2deg) rotateY(-2deg);
  animation:th5-console-float 5.5s ease-in-out infinite;
}
.setup-preview-rail { border-radius:13px; background:linear-gradient(180deg,var(--accent) 0 18%,var(--surface-3) 18% 100%); }
.setup-preview-main { min-width:0; display:grid; grid-template-rows:auto 1fr auto; gap:9px; }
.setup-preview-top { display:flex; justify-content:space-between; gap:8px; }.setup-preview-top i{height:8px;border-radius:var(--pill);background:var(--surface-4)}.setup-preview-top i:first-child{width:42%}.setup-preview-top i:last-child{width:22%}
.setup-preview-hero { position:relative; overflow:hidden; display:grid; align-content:end; gap:5px; padding:14px; border-radius:14px; background:linear-gradient(140deg,rgba(var(--accent-rgb),.2),rgba(7,9,8,.62)),var(--hero-image); background-size:cover; background-position:center; color:#f6f7f1; }
.setup-preview-hero small { font:650 7px/1 var(--mono); letter-spacing:.18em; color:var(--accent); }.setup-preview-hero b{max-width:190px;font-size:18px;line-height:1}.setup-preview-hero span{width:56%;height:5px;border-radius:var(--pill);background:rgba(255,255,255,.34)}
.setup-preview-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.setup-preview-cards i{height:44px;border-radius:11px;background:var(--surface-3)}.setup-preview-cards i:first-child{background:var(--accent)}
.setup-preview-marker { position:absolute; right:17px; top:18px; width:48px; height:48px; display:grid; place-items:center; border-radius:17px; background:var(--accent); color:var(--on-accent); box-shadow:0 16px 32px rgba(var(--accent-rgb),.26); animation:th5-marker-bob 3.2s ease-in-out infinite; }
.setup-look-controls { min-width:0; display:grid; align-content:start; gap:12px; }
.setup-control-label { color:var(--faint); font:650 9px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; }
.setup-theme-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.setup-theme-grid button { min-width:0; min-height:62px; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--line); border-radius:15px; background:var(--surface-0); color:var(--text); text-align:left; cursor:pointer; transition:transform var(--motion-fast) var(--ease),border-color var(--motion-base) var(--ease),background var(--motion-base) var(--ease); }
.setup-theme-grid button:hover { transform:translateY(-2px); border-color:var(--line-strong); }.setup-theme-grid button.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface-0));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.1)}
.setup-theme-grid button>i { width:34px; height:34px; border-radius:11px; background:var(--swatch-bg,#121411); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.setup-theme-grid i.basecamp{--swatch-bg:linear-gradient(135deg,#d7f24b 0 30%,#232722 30%)}.setup-theme-grid i.charcoal{--swatch-bg:linear-gradient(135deg,#d7f24b 0 30%,#181a1b 30%)}.setup-theme-grid i.summit{--swatch-bg:linear-gradient(135deg,#4ce09a 0 30%,#1a201d 30%)}.setup-theme-grid i.aurora{--swatch-bg:linear-gradient(135deg,#6fd6ff 0 30%,#191f2a 30%)}.setup-theme-grid i.midnight{--swatch-bg:linear-gradient(135deg,#84b8ff 0 30%,#1c1924 30%)}.setup-theme-grid i.studio{--swatch-bg:linear-gradient(135deg,#ffc46b 0 30%,#1d1d1c 30%)}.setup-theme-grid i.light{--swatch-bg:linear-gradient(135deg,#5c7a14 0 30%,#fff 30%)}
.setup-theme-grid button span { min-width:0; display:grid; gap:2px; }.setup-theme-grid button b{font-size:12px}.setup-theme-grid button small{color:var(--muted);font-size:9px}
.setup-control-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-top:4px; }.setup-control-heading>span{display:grid;gap:3px}.setup-control-heading b{font-size:12px}.setup-control-heading small{color:var(--muted);font-size:10px}.setup-control-heading .text-button{min-height:32px;font-size:10px}.setup-control-heading .text-button.active{color:var(--text);background:rgba(var(--accent-rgb),.1)}
.setup-look-step .accent-options { grid-template-columns:repeat(4,minmax(0,1fr)); }
.setup-look-step .accent-options button,.accent-custom { min-height:66px; border-radius:14px; }
.accent-custom { display:grid; place-items:center; align-content:center; gap:6px; padding:8px; border:1px solid var(--line); background:var(--surface-0); color:var(--muted); font-size:10px; font-weight:620; cursor:pointer; }
.accent-custom input { width:28px; height:18px; padding:0; border:0; border-radius:var(--pill); overflow:hidden; cursor:pointer; }
.setup-scenic-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.setup-scenic-options button { min-height:48px; display:flex; align-items:center; justify-content:center; gap:7px; padding:8px; border:1px solid var(--line); border-radius:14px; background:var(--surface-0); color:var(--muted); cursor:pointer; font-size:11px; font-weight:650; }
.setup-scenic-options button.active { border-color:var(--accent); background:rgba(var(--accent-rgb),.09); color:var(--text); }
.setup-scenic-options .ms { font-size:18px; color:var(--accent); }
.setup-look-step .setup-finish { margin-top:18px; }

/* Signature motion: layered, soft-overshoot, and directional rather than
   constant bouncing. It echoes premium product animation without delaying work. */
.setup-dialog[open] { animation:th5-setup-arrive .52s var(--ease-premium) both; }
.setup-step.active { animation:th5-stage-in .46s var(--ease-premium) both; }
.setup-step.active > :is(.setup-icon,small,h2,p,.choice-grid,.setup-mode-grid,.setup-pack-panel,.setup-comfort-grid,.setup-look-layout,.setup-finish) { animation:th5-content-rise .48s var(--ease-premium) both; }
.setup-step.active > small{animation-delay:35ms}.setup-step.active > h2{animation-delay:60ms}.setup-step.active > p{animation-delay:85ms}.setup-step.active > :is(.choice-grid,.setup-mode-grid,.setup-pack-panel,.setup-comfort-grid,.setup-look-layout){animation-delay:110ms}.setup-step.active > .setup-finish{animation-delay:150ms}
.welcome-preview { perspective:1200px; animation:th5-welcome-arrive .82s var(--ease-premium) both; }
.welcome-preview .preview-window { transform-origin:50% 70%; animation:th5-welcome-float 7s ease-in-out infinite; }
.welcome-preview .preview-cards span:nth-child(1){animation:th5-card-breathe 4.8s ease-in-out infinite}.welcome-preview .preview-cards span:nth-child(2){animation:th5-card-breathe 4.8s -1.6s ease-in-out infinite}.welcome-preview .preview-cards span:nth-child(3){animation:th5-card-breathe 4.8s -3.2s ease-in-out infinite}
.welcome-glow { animation:th5-glow-drift 9s ease-in-out infinite alternate; }.welcome-glow.glow-b{animation-delay:-4.5s}
.welcome-screen::after { content:""; position:fixed; inset:-20%; pointer-events:none; opacity:.12; background-image:var(--topographic); background-size:660px; animation:th5-contour-drift 34s linear infinite; mix-blend-mode:screen; }
.welcome-shell { position:relative; z-index:1; }

@keyframes th5-setup-arrive { from{opacity:0;transform:translateY(18px) scale(.975);filter:blur(5px)} to{opacity:1;transform:none;filter:none} }
@keyframes th5-stage-in { from{opacity:0;transform:translateX(18px);clip-path:inset(0 0 0 12% round 18px)} to{opacity:1;transform:none;clip-path:inset(0 round 0)} }
@keyframes th5-content-rise { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes th5-progress-glint { from{transform:translateX(-110%)} to{transform:translateX(110%)} }
@keyframes th5-contour-drift { from{background-position:0 0} to{background-position:660px 330px} }
@keyframes th5-console-float { 0%,100%{transform:perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(0)} 50%{transform:perspective(900px) rotateX(1deg) rotateY(1deg) translateY(-7px)} }
@keyframes th5-marker-bob { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-6px) rotate(2deg)} }
@keyframes th5-orbit-drift { to{transform:translate3d(18px,-12px,0) scale(1.12)} }
@keyframes th5-welcome-arrive { from{opacity:0;transform:translateX(34px) scale(.96);filter:blur(6px)} to{opacity:1;transform:none;filter:none} }
@keyframes th5-welcome-float { 0%,100%{transform:rotateY(-3deg) rotateX(1deg) translateY(0)} 50%{transform:rotateY(2deg) rotateX(-1deg) translateY(-8px)} }
@keyframes th5-card-breathe { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes th5-glow-drift { to{transform:translate3d(26px,-18px,0) scale(1.12);opacity:.86} }

/* View Transitions make theme changes feel like a material shift rather than a
   flash. Browsers without the API fall back to the existing instant update. */
::view-transition-old(root) { animation:th5-theme-out .22s ease-in both; }
::view-transition-new(root) { animation:th5-theme-in .5s var(--ease-premium) both; }
@keyframes th5-theme-out { to{opacity:0;transform:scale(.992);filter:saturate(.82)} }
@keyframes th5-theme-in { from{opacity:0;transform:scale(1.012);filter:saturate(1.18)} to{opacity:1;transform:none;filter:none} }

@media (max-width:820px) {
  .setup-dialog { width:100vw; height:100dvh; max-height:none; border:0; border-radius:0; }
  .setup-dialog form { min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto; padding:max(18px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); }
  .setup-look-layout { grid-template-columns:1fr; gap:15px; }
  .setup-look-preview { min-height:230px; }
  .setup-preview-shell { left:15px; right:15px; bottom:15px; height:72%; }
  .setup-preview-marker { width:42px; height:42px; border-radius:14px; }
  .setup-theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .setup-look-step .accent-options { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .setup-step h2 { font-size:clamp(25px,8vw,34px); }
  .theme-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:440px) {
  .setup-theme-grid { grid-template-columns:1fr 1fr; }
  .setup-theme-grid button { min-height:58px; grid-template-columns:30px minmax(0,1fr); padding:8px; }
  .setup-theme-grid button>i { width:30px; height:30px; }
  .setup-look-step .accent-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .setup-scenic-options button { font-size:10px; }
  .accent-setting-tools { width:100%; justify-content:flex-start; }
  #accentRow { align-items:flex-start; flex-direction:column; }
}

body[data-motion="reduced"] :is(.setup-look-preview::before,.setup-preview-sky span,.setup-preview-shell,.setup-preview-marker,.welcome-preview .preview-window,.welcome-preview .preview-cards span,.welcome-glow,.welcome-screen::after),
body[data-motion="none"] :is(.setup-look-preview::before,.setup-preview-sky span,.setup-preview-shell,.setup-preview-marker,.welcome-preview .preview-window,.welcome-preview .preview-cards span,.welcome-glow,.welcome-screen::after) { animation:none!important; }
@media (prefers-reduced-motion:reduce) {
  :is(.setup-look-preview::before,.setup-preview-sky span,.setup-preview-shell,.setup-preview-marker,.welcome-preview .preview-window,.welcome-preview .preview-cards span,.welcome-glow,.welcome-screen::after) { animation:none!important; }
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* =====================================================================
   v6.32.0 — Mission Brief, progressive setup, route visualization
   ===================================================================== */

/* Mission Brief: a decision-first home surface rather than equal cards. */
.mission-brief-view { max-width: 1440px; margin-inline: auto; }
.mission-phase-strip {
  display:grid; grid-template-columns:auto minmax(28px,1fr) auto minmax(28px,1fr) auto;
  align-items:center; gap:12px; margin:0 4px 14px; padding:10px 14px;
  border:1px solid var(--line); border-radius:var(--radius-m);
  background:color-mix(in srgb,var(--surface-1) 90%,transparent);
}
.mission-phase-strip>span { display:flex; align-items:center; gap:9px; min-width:0; color:var(--faint); }
.mission-phase-strip>span>.ms { width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--surface-2); font-size:16px; }
.mission-phase-strip>span>b { font-size:calc(11px * var(--text-scale)); }
.mission-phase-strip>span>small { color:var(--faint); font:500 calc(8px * var(--text-scale))/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.mission-phase-strip>span.active { color:var(--text); }
.mission-phase-strip>span.active>.ms { background:var(--accent); color:var(--on-accent); box-shadow:0 0 0 5px rgba(var(--accent-rgb),.10); }
.mission-route-line { height:1px; min-width:20px; background:linear-gradient(90deg,var(--line-strong),rgba(var(--accent-rgb),.36),var(--line-strong)); }
.mission-phase-strip.is-live .mission-route-line:first-of-type { height:2px; background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),.28)); }

.mission-hero { min-height:300px; margin-bottom:16px; }
.mission-hero::after { background:linear-gradient(92deg,rgba(9,12,9,.91),rgba(9,12,9,.62) 55%,rgba(9,12,9,.24)),linear-gradient(180deg,transparent 55%,rgba(4,7,4,.44)) !important; }
.mission-compass { display:block; position:absolute; right:clamp(22px,5vw,74px); bottom:clamp(22px,4vw,54px); width:150px; height:150px; opacity:.82; }
.mission-compass .orbit-core { position:absolute; inset:48px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--on-accent); box-shadow:0 0 0 10px rgba(var(--accent-rgb),.12),0 18px 55px rgba(0,0,0,.28); }
.mission-compass .orbit-core .ms { font-size:30px; }
.mission-compass i { position:absolute; inset:0; border:1px solid rgba(255,255,255,.22); border-radius:50%; animation:mission-orbit 18s linear infinite; }
.mission-compass i:nth-child(2) { inset:17px; animation-duration:12s; animation-direction:reverse; }
.mission-compass i:nth-child(3) { inset:34px; animation-duration:8s; }
.mission-compass i::after { content:""; position:absolute; width:7px; height:7px; left:50%; top:-4px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px rgba(var(--accent-rgb),.7); }
@keyframes mission-orbit { to { transform:rotate(360deg); } }
body[data-motion="none"] .mission-compass i { animation:none; }
@media (prefers-reduced-motion: reduce) { .mission-compass i { animation:none; } }

.mission-grid { align-items:start; }
.mission-next-card { position:relative; overflow:hidden; border-color:rgba(var(--accent-rgb),.34); background:linear-gradient(145deg,rgba(var(--accent-rgb),.12),var(--surface-1) 60%); }
.mission-next-card::after { content:""; position:absolute; right:-28px; bottom:-42px; width:130px; height:130px; border:1px solid rgba(var(--accent-rgb),.22); border-radius:50%; box-shadow:0 0 0 18px rgba(var(--accent-rgb),.045),0 0 0 38px rgba(var(--accent-rgb),.025); pointer-events:none; }
.mission-next-card>p { min-height:48px; margin:0; color:var(--muted); line-height:1.55; }
.mission-attention-list { display:grid; gap:8px; }
.state-message { width:100%; min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface-0); color:var(--text); text-align:left; }
button.state-message { cursor:pointer; }
button.state-message:hover { border-color:var(--line-strong); transform:translateY(-1px); }
.state-message>.ms:first-child { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--surface-2); color:var(--muted); }
.state-message>span:nth-child(2) { min-width:0; display:grid; gap:3px; }
.state-message b { font-size:calc(11.5px * var(--text-scale)); }
.state-message small { color:var(--muted); font-size:calc(9.5px * var(--text-scale)); line-height:1.35; }
.state-message.healthy { border-color:rgba(76,224,154,.22); background:rgba(76,224,154,.055); }
.state-message.healthy>.ms:first-child { color:#4ce09a; background:rgba(76,224,154,.12); }
.state-message.attention { border-color:rgba(255,196,107,.27); background:rgba(255,196,107,.055); }
.state-message.attention>.ms:first-child { color:#ffc46b; background:rgba(255,196,107,.12); }
.state-message.loading>.ms:first-child { color:var(--accent); }

.mission-setup-card { background:linear-gradient(155deg,color-mix(in srgb,var(--surface-2) 58%,transparent),var(--surface-1)); }
.mission-checklist { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.mission-check { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; padding:11px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface-0); color:var(--text); text-align:left; cursor:pointer; }
.mission-check:hover { border-color:var(--line-strong); }
.mission-check>.ms:first-child { color:var(--faint); }
.mission-check.done>.ms:first-child { color:#4ce09a; }
.mission-check>span:nth-child(2) { min-width:0; display:grid; gap:3px; }
.mission-check b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:calc(10px * var(--text-scale)); }
.mission-check small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--faint); font-size:calc(8px * var(--text-scale)); }
.mission-check>.ms:last-child { color:var(--faint); font-size:16px; }

body[data-operating-state="live"] .mission-phase-strip { border-color:rgba(255,93,110,.28); }
body[data-operating-state="live"] .mission-hero { box-shadow:inset 0 0 80px rgba(255,93,110,.045),var(--shadow-soft); }

/* Shared sidecar intent. Width varies by task, behavior remains standardized. */
[data-sidecar-kind="quick"] { --sidecar-width:min(440px,42vw); }
[data-sidecar-kind="inspector"] { --sidecar-width:min(500px,44vw); }
[data-sidecar-kind="editor"] { --sidecar-width:min(580px,48vw); }
[data-sidecar-kind="workspace"] { --sidecar-width:min(680px,52vw); }
.th5-sidecar[data-sidecar-kind], .th5-sidecar-dialog[data-sidecar-kind] { width:var(--sidecar-width); max-width:100vw; }

/* IRL signal-route visualization. */
.irl-signal-route { margin-bottom:18px; overflow:hidden; }
.signal-route-track { display:grid; grid-template-columns:minmax(100px,1fr) 26px minmax(100px,1fr) 26px minmax(100px,1fr) 26px minmax(100px,1fr) 26px minmax(100px,1fr) 26px minmax(100px,1fr); align-items:center; gap:6px; }
.signal-route-track>i { height:2px; border-radius:2px; background:linear-gradient(90deg,var(--line-strong),rgba(var(--accent-rgb),.34)); }
.route-stage { min-width:0; display:grid; justify-items:center; gap:8px; padding:10px 6px; border:0; border-radius:var(--radius-m); background:transparent; color:var(--text); cursor:pointer; text-align:center; }
.route-stage:hover { background:var(--surface-2); }
.route-stage .route-orb { width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:50%; background:var(--surface-0); color:var(--faint); box-shadow:0 8px 22px rgba(0,0,0,.12); }
.route-stage .route-orb .ms { font-size:22px; }
.route-stage>span:last-child { min-width:0; display:grid; gap:3px; }
.route-stage b { font-size:calc(10.5px * var(--text-scale)); }
.route-stage small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--faint); font-size:calc(8px * var(--text-scale)); }
.route-stage[data-state="healthy"] .route-orb { border-color:rgba(76,224,154,.35); background:rgba(76,224,154,.1); color:#4ce09a; box-shadow:0 0 0 5px rgba(76,224,154,.045); }
.route-stage[data-state="attention"] .route-orb { border-color:rgba(255,196,107,.38); background:rgba(255,196,107,.1); color:#ffc46b; }
.route-stage[data-state="offline"] .route-orb { border-color:rgba(255,93,110,.42); background:rgba(255,93,110,.1); color:#ff7181; }
.route-stage[data-state="muted"] { opacity:.68; }
.signal-route-note { margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:calc(10.5px * var(--text-scale)); line-height:1.5; }

/* Progressive four-step first run. */
.setup-step[data-step="0"]>.choice-grid { margin-top:18px; }
.setup-launch-grid { display:grid; gap:9px; margin:22px 0; }
.setup-launch-grid>span { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:11px; padding:13px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface-0); }
.setup-launch-grid>span>.ms { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:rgba(var(--accent-rgb),.12); color:var(--accent); }
.setup-launch-grid>span>span { display:grid; gap:3px; }
.setup-launch-grid small { color:var(--muted); line-height:1.4; }
.setup-launch-step .flow-callout { margin-top:18px; }

/* Standard state vocabulary. */
[data-state="healthy"],.state-pill.status-healthy { --state-color:#4ce09a; }
[data-state="active"],.state-pill.status-active { --state-color:var(--accent); }
[data-state="attention"],.state-pill.status-attention { --state-color:#ffc46b; }
[data-state="critical"],.state-pill.status-critical { --state-color:#ff5d6e; }
[data-state="offline"],.state-pill.status-offline { --state-color:#ff7181; }
[data-state="unavailable"],.state-pill.status-unavailable,[data-state="not-configured"],.state-pill.status-not-configured { --state-color:var(--faint); }

@media (max-width:1100px) {
  .mission-checklist { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mission-check:last-child { grid-column:1/-1; }
  .signal-route-track { grid-template-columns:repeat(6,minmax(112px,1fr)); gap:8px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity; }
  .signal-route-track>i { display:none; }
  .route-stage { scroll-snap-align:start; border:1px solid var(--line); background:var(--surface-0); }
}
@media (max-width:820px) {
  .mission-phase-strip { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:8px; }
  .mission-route-line { display:none; }
  .mission-phase-strip>span { justify-content:center; }
  .mission-phase-strip>span>small { display:none; }
  .mission-compass { display:none; }
  .mission-hero { min-height:330px; }
  .mission-checklist { grid-template-columns:1fr; }
  .mission-check:last-child { grid-column:auto; }
  .signal-route-track { margin-inline:-4px; }
}
@media (max-width:520px) {
  .mission-phase-strip>span { display:grid; justify-items:center; gap:4px; text-align:center; }
  .mission-phase-strip>span>.ms { width:28px; height:28px; }
  .mission-hero { min-height:360px; }
  .mission-hero .hero-actions>* { width:100%; justify-content:center; }
  .state-message { padding:10px; }
}

/* =====================================================================
   TRAILHEAD5 DESIGN SYSTEM  (v6.33.0 - v6.36.0)
   =====================================================================
   This block is authoritative and appended last, so it wins on equal
   specificity without rewriting 4,200 lines of history.

   Contents, in order:
     1. Tokens          breakpoint scale, spacing, type, motion, status
     2. Shell           5-step responsive shell, no gaps, no overlap
     3. Container qs    components size off their container, not the window
     4. Visual          radii, tabular numerals, touch targets, focus
     5. Operating state basecamp / live emphasis shift
     6. Motion          five primitives, three intensity levels
     7. Sidecars        shared base + contextual panel model
     8. Home grid       dense auto-reflow
     9. Sidebar         collapsible rail

   Conventions used throughout:
     - Breakpoints are >= / <= only. Never pair N and N+1 (that leaves a
       sub-pixel dead zone; it caused a real tablet bug).
     - Width changes override the --sidebar-w* TOKENS rather than adding
       competing grid-template-columns rules, which would lose to later
       media queries.
     - Anything decorative is disabled at motion level `focused` (live).
   ===================================================================== */

/* ---- v6.33.0 — DESIGN SYSTEM PASS (Phases 1–3) ----
   This block is authoritative. It is appended last so it wins on equal
   specificity, letting us correct the accumulated breakpoint drift
   without rewriting 4,200 lines of history.

   PHASE 1 — FOUNDATION
   The stylesheet had grown to 124 media queries across 62 distinct
   breakpoints (720 AND 721, 820 AND 821, plus 760/780/900/920/960/980).
   Two consequences, both user-visible:

   a) TABLET DEAD ZONE (the "tablet won't load" bug). The sidebar was
      hidden only at <=820px, but .app-shell reserved a fixed 212px
      sidebar column all the way up to 1280px, and .mobile-nav only
      appeared at <=820px. Landscape tablets (1024-1180px) therefore
      rendered the desktop grid with a squeezed content column and no
      mobile nav.

   b) 1px BOUNDARY GAPS. Rules paired as (max-width:820px) and
      (min-width:821px) leave 820.01-820.99px matching NEITHER. Browser
      zoom and fractional device pixel ratios land there routinely, and
      the layout collapsed when they did.

   THE SCALE (5 steps, no gaps — each min-width is exactly the previous
   max-width + 0.02px, which is below any device's resolvable precision):
     compact   <= 640px    phone
     tablet    641-1023px  portrait tablet / large phone landscape
     laptop    1024-1279px landscape tablet / small laptop
     desktop   1280-1679px standard desktop
     wide      >= 1680px   large desktop

   Breakpoints are expressed with >= / <= only. We never pair N and N+1.
   ===================================================================== */

:root {
  /* Spacing scale — replaces ad-hoc 7/9/11/13/14/17px paddings.
     Geometric-ish, 4px-based, so vertical rhythm actually aligns. */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-s:  12px;
  --space-m:  16px;
  --space-l:  24px;
  --space-xl: 32px;
  --space-2xl:48px;

  /* Layout tokens — single source of truth for the shell. */
  --sidebar-w-desktop: 244px;
  --sidebar-w-laptop:  212px;
  --chat-dock-w:       344px;
  --content-max:      1560px;

  /* Type scale — 1.2 minor third, multiplied by user's --text-scale. */
  --type-xs:  calc(11px * var(--text-scale));
  --type-s:   calc(13px * var(--text-scale));
  --type-m:   calc(15px * var(--text-scale));
  --type-l:   calc(18px * var(--text-scale));
  --type-xl:  calc(22px * var(--text-scale));
  --type-2xl: calc(28px * var(--text-scale));
}

/* ---------------------------------------------------------------------
   PHASE 1a — SHELL: one coherent rule per step, no gaps, no overlap.
   --------------------------------------------------------------------- */

/* compact + tablet: no sidebar, mobile nav drives navigation.
   Raised from 820px to 1023px so PORTRAIT TABLETS get the touch layout
   they should always have had. This is the primary tablet fix. */
@media (max-width: 1023px) {
  :root { --sidebar-w: 0px; }
  .app-shell { display: block; grid-template-columns: none; }
  .sidebar { display: none; }
  .app-main { grid-column: auto; }
  body:not(.on-air) .app-shell {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
  /* Mobile nav now covers the whole touch range, not just <=820px. */
  .mobile-nav { display: grid; }
}

/* laptop: sidebar returns, narrower. Landscape tablets land here and now
   get a real sidebar with a correctly-sized content column. */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --sidebar-w: var(--sidebar-w-laptop); }
  .app-shell { display: grid; grid-template-columns: var(--sidebar-w-laptop) minmax(0, 1fr); }
  .sidebar { display: flex; width: var(--sidebar-w-laptop); }
  .mobile-nav { display: none; }
  body:not(.on-air) .app-shell { padding-bottom: 0; }
}

/* desktop + wide: full sidebar. */
@media (min-width: 1280px) {
  :root { --sidebar-w: var(--sidebar-w-desktop); }
  .app-shell { display: grid; grid-template-columns: var(--sidebar-w-desktop) minmax(0, 1fr); }
  .sidebar { display: flex; width: var(--sidebar-w-desktop); }
  .mobile-nav { display: none; }
  body:not(.on-air) .app-shell { padding-bottom: 0; }
}

/* Chat dock is a third column only where there is genuinely room for it.
   Requires desktop step AND the dock toggled on. */
@media (min-width: 1280px) {
  body.chat-docked .app-shell {
    grid-template-columns: var(--sidebar-w-desktop) minmax(0, 1fr) var(--chat-dock-w);
  }
}
@media (max-width: 1279px) {
  body.chat-docked .chat-dock { display: none; }
  .chat-dock-toggle { display: none; }
}

/* On Air overrides every step: full-bleed, no sidebar. */
body.on-air .app-shell { display: block; grid-template-columns: none; }

/* ---------------------------------------------------------------------
   PHASE 2 — CONTAINER QUERIES
   The stylesheet had ZERO of these; every component sized off the
   VIEWPORT. But a Caravan card inside a 460px sidecar at 1440px viewport
   is narrower than the same card full-width on a 700px phone, and
   viewport queries get that exactly backwards. Components now respond to
   the space they actually occupy.
   --------------------------------------------------------------------- */

.dashboard-grid,
.caravan-roster,
.mod-dashboard-grid,
.team-grid,
.settings-grid,
.th5-sidecar-body,
.app-main { container-type: inline-size; }

/* Caravan cards */
@container (max-width: 560px) {
  .caravan-roster { grid-template-columns: 1fr; }
}
@container (min-width: 561px) and (max-width: 899px) {
  .caravan-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 900px) {
  .caravan-roster { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
}

/* Home dashboard cards */
@container (max-width: 620px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .dash-card.span-2, .dash-card.span-3 { grid-column: 1 / -1; }
}
@container (min-width: 621px) and (max-width: 1023px) {
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-card.span-2, .dash-card.span-3 { grid-column: span 2; }
}
@container (min-width: 1024px) {
  .dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-card.span-2 { grid-column: span 2; }
  .dash-card.span-3 { grid-column: 1 / -1; }
}

/* Moderator modules — the 12-col grid collapses by available width, so a
   module behaves correctly whether it's on a dashboard or in a sidecar. */
@container (max-width: 700px) {
  .mod-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mod-module,
  .mod-module[data-size="compact"],
  .mod-module[data-size="standard"],
  .mod-module[data-size="wide"],
  .mod-module[data-size="tall"] { grid-column: span 1; }
  .mod-module[data-size="hero"],
  .mod-module[data-size="full"] { grid-column: 1 / -1; }
}
@container (min-width: 701px) and (max-width: 1099px) {
  .mod-dashboard-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .mod-module[data-size="compact"] { grid-column: span 2; }
  .mod-module[data-size="standard"],
  .mod-module[data-size="wide"],
  .mod-module[data-size="tall"] { grid-column: span 4; }
  .mod-module[data-size="hero"] { grid-column: span 8; }
  .mod-module[data-size="full"] { grid-column: 1 / -1; }
}
@container (min-width: 1100px) {
  .mod-dashboard-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .mod-module[data-size="compact"] { grid-column: span 3; }
  .mod-module[data-size="standard"] { grid-column: span 4; }
  .mod-module[data-size="wide"]     { grid-column: span 6; }
  .mod-module[data-size="tall"]     { grid-column: span 4; }
  .mod-module[data-size="hero"]     { grid-column: span 8; }
  .mod-module[data-size="full"]     { grid-column: 1 / -1; }
}

/* Team follows its own container, not the window.
   NOTE: .settings-grid is deliberately NOT included here — it uses a
   rail + detail layout (.settings-paged: minmax(260px,.72fr) /
   minmax(0,1.55fr)), and forcing it to two equal columns squashes the
   category rail. It gets its own container rule below. */
@container (max-width: 700px) {
  .team-grid { grid-template-columns: 1fr; }
}
@container (min-width: 701px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Settings: collapse the rail into the detail pane when the container is
   too narrow to hold both, preserving the intended proportions above it. */
@container (max-width: 720px) {
  .settings-grid.settings-paged { display: block; }
}
@container (min-width: 721px) {
  .settings-grid.settings-paged {
    display: grid;
    grid-template-columns: minmax(240px, .72fr) minmax(0, 1.55fr);
  }
}

/* Fallback for engines without container query support: keep the old
   viewport behaviour rather than collapsing to a single column. */
@supports not (container-type: inline-size) {
  @media (min-width: 1024px) {
    .dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .caravan-roster { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
  }
}

/* ---------------------------------------------------------------------
   PHASE 3 — VISUAL PASS
   Restraint over decoration: normalise the radius scale, stabilise
   numerals, and give the content column a sane measure. No new
   ornament — the console's job is legibility under pressure while live.
   --------------------------------------------------------------------- */

/* The stylesheet used 23 distinct radii including 9/11/13/17/19px —
   values nobody chose deliberately. Snap the common surfaces to the
   existing token scale. */
.dash-card, .panel-card, .hero-card, .mod-module,
.caravan-card, .setting-row, .team-people-card { border-radius: var(--radius-l); }
.soft-btn, .ghost-btn, .primary-btn, .danger-btn, .icon-button,
.field input, .field select, .field textarea { border-radius: var(--radius-m); }
.chip, .pill, .badge, .tag { border-radius: var(--radius-xs); }

/* Content measure: on wide displays an unconstrained column makes
   dashboard text run to 200+ characters. Cap it, keep it left-aligned
   against the sidebar so the eye has a fixed anchor. */
@media (min-width: 1680px) {
  .app-main > .view-stack { max-width: var(--content-max); }
}

/* Live-updating numbers must not reflow as digits change. Already
   applied to some stat blocks; extend to every numeric readout. */
.mod-health-grid b, .mod-pulse-grid b, .mod-automod-mini b,
.stat-value, .metric-value, .count-badge, .irl-metric b,
.telemetry-value, .queue-count { font-variant-numeric: tabular-nums; }

/* Touch targets: 44px is the accessibility floor. Below the laptop step
   every control is finger-driven. */
@media (max-width: 1023px) {
  .icon-button, .nav-button, .chip, .text-button { min-height: 44px; }
  .setting-row { padding: var(--space-s) var(--space-m); }
}

/* Focus visibility — keyboard users need this everywhere, not just where
   it was remembered. Uses the signal colour so it reads as intentional. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Respect reduced motion globally rather than per-component. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   v6.33.0 — Edit stream sidecar
   Inherits the shared .th5-sidecar shell (position, motion, mobile
   full-screen behaviour); only its content needs styling.
   --------------------------------------------------------------------- */
.stream-edit-body {
  display: grid;
  align-content: start;
  gap: var(--space-m);
  padding: var(--space-m);
}
.stream-edit-body .field { display: grid; gap: var(--space-2xs); }
.stream-edit-body .field > span {
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.stream-edit-body .field input {
  width: 100%;
  padding: var(--space-s) var(--space-m);
  font-size: var(--type-m);
  border-radius: var(--radius-m);
}
.stream-edit-body .field-hint {
  justify-self: end;
  font-size: var(--type-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stream-edit-note {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: var(--space-s) var(--space-m);
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  font-size: var(--type-s);
  color: var(--muted);
}
.stream-edit-actions { display: flex; gap: var(--space-xs); }
.stream-edit-actions .primary-btn { flex: 1; }
.stream-edit-hint {
  margin: 0;
  font-size: var(--type-xs);
  line-height: 1.5;
  color: var(--muted);
}
/* Full-width actions on the temporary full-screen phone workspace. */
@media (max-width: 640px) {
  .stream-edit-actions { flex-direction: column-reverse; }
  .stream-edit-actions .soft-btn { width: 100%; }
}

/* ---------------------------------------------------------------------
   v6.33.0 — Notifications as a tablet sidecar
   Previously the 721-1279px band inherited the DESKTOP popover: a ~500px
   modal box floating over a blocked app, on a screen with room to spare.
   Notifications are reference material — you read an alert while watching
   chat or telemetry — so on tablet it docks to the right edge NON-MODALLY
   and the console stays live behind it.
   --------------------------------------------------------------------- */
@media (min-width: 721px) and (max-width: 1023px) {
  body.notifications-docked .app-main { padding-right: min(420px, 82vw); }
}
@media (min-width: 721px) and (max-width: 1279px) {
  body.notifications-docked .notification-dialog[open] {
    position: fixed;
    inset: 0 0 0 auto;                 /* right edge, full height */
    width: min(420px, 82vw);
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--line-strong);
    background: transparent;
    box-shadow: -18px 0 48px rgba(0, 0, 0, .34);
    animation: th5-notification-dock-in .22s var(--ease);
  }
  /* Non-modal dialogs have no ::backdrop, which is the point — the app
     behind stays visible AND clickable. */
  body.notifications-docked .notification-dialog[open]::backdrop { background: transparent; }

  body.notifications-docked .notification-popover {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    background: var(--surface-0);
    padding-top: env(safe-area-inset-top);
  }
  body.notifications-docked .notification-popover > header {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--surface-0);
    padding: var(--space-m);
    border-bottom: 1px solid var(--line);
  }
  body.notifications-docked .notification-list { flex: 1; overflow: auto; border-top: 0; }
  body.notifications-docked .notification-popover > footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-s) var(--space-m) calc(var(--space-s) + env(safe-area-inset-bottom));
  }
  body.notifications-docked .notification-popover > footer small { max-width: none; text-align: left; }

  /* Content offset for the tablet dock is handled by the 721-1023px rule
     above; at >=1024px the shell reserves a real track instead. */
}

@keyframes th5-notification-dock-in {
  from { transform: translateX(18px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.notifications-docked .notification-dialog[open] { animation: none; }
}


/* ---- v6.34.0 — MISSION ARCHITECTURE ----
   Implements the operating-state model. The console already had a manual
   "Live Mode" (body.on-air), but NOTHING reacted to the channel actually
   going live — the interface looked identical whether you were planning
   tomorrow's stream or bleeding viewers on a dying connection.

   Two states, one structure. Per the brief's own constraint, controls do
   NOT move between states — only emphasis changes. Switching states must
   never force anyone to relearn where things are, least of all mid-stream.

     data-operating-state="basecamp"   planning, setup, review
     data-operating-state="live"       channel is live (auto) or Live Mode

   THE RISK I'M TAKING (deliberate, and the one place boldness is spent):
   in live state the interface DESATURATES ITSELF. Scenic texture, hero
   imagery, and decorative glow drop away; only status colour survives.
   The reasoning is inverted from normal product design — when something
   is wrong at 2am on a bonded connection, every non-signal pixel is
   competing with the one pixel that matters. Going live makes the app
   quieter, not louder. Atmosphere is for basecamp.
   ===================================================================== */

:root {
  /* Motion scale. The stylesheet had ten ad-hoc durations (.12/.13/.14/
     .15/.16/.18/.2/.22/.3/.5s) with no semantic meaning, which is why
     motion felt inconsistent — there was nothing to be consistent with.
     Named by JOB, so the duration is chosen by what the motion explains. */
  --motion-feedback: 130ms;   /* taps, toggles, focus */
  --motion-control:  190ms;   /* buttons, small expansions */
  --motion-sidecar:  280ms;   /* right-edge workspaces */
  --motion-page:     380ms;   /* view + terrain transitions */

  /* Status ramp — reserved. These four colours mean something and are
     never used decoratively. */
  --state-ready:   var(--accent);
  --state-warn:    #e8a33d;
  --state-critical:#e5484d;
  --state-idle:    var(--muted);
}

/* ---------------------------------------------------------------------
   LIVE STATE — emphasis shifts, layout does not.
   --------------------------------------------------------------------- */

/* 1. Atmosphere recedes. */
body[data-operating-state="live"] .welcome-glow,
body[data-operating-state="live"] .app-main::before,
body[data-operating-state="live"] .hero-card::after {
  opacity: 0;
  transition: opacity var(--motion-page) var(--ease);
}
body[data-operating-state="live"] {
  --scenic-opacity: 0;
}

/* 2. Contrast rises. Borders that were hairlines in basecamp become
      legible at a glance across a room. */
body[data-operating-state="live"] .panel-card,
body[data-operating-state="live"] .dash-card,
body[data-operating-state="live"] .mod-module {
  border-color: var(--line-strong);
  background: var(--surface-1);
}

/* 3. Status-bearing elements move forward; everything decorative recedes.
      This is the core of the state: not "more stuff", but LESS competing
      with the signal. */
body[data-operating-state="live"] .route-stage[data-state="warn"],
body[data-operating-state="live"] .route-stage[data-state="critical"],
body[data-operating-state="live"] [data-status="warn"],
body[data-operating-state="live"] [data-status="critical"] {
  box-shadow: 0 0 0 1px currentColor, 0 6px 24px rgba(0, 0, 0, .4);
}

/* 4. Live-critical controls get real touch mass, at every size. */
body[data-operating-state="live"] .safety-hold,
body[data-operating-state="live"] .quick-controls .command-tile,
body[data-operating-state="live"] .field-actions button { min-height: 56px; }

/* 5. Secondary management is suppressed, not removed — still reachable,
      just no longer competing. Never hidden outright: hiding controls
      mid-stream is how people panic. */
body[data-operating-state="live"] .settings-flow-launch,
body[data-operating-state="live"] .basecamp-checklist,
body[data-operating-state="live"] .trail-suggestions { opacity: .55; }
body[data-operating-state="live"] :is(.settings-flow-launch,
  .basecamp-checklist, .trail-suggestions):is(:hover, :focus-within) { opacity: 1; }

/* ---------------------------------------------------------------------
   THE ONE SIGNATURE — the trail marker.
   The brief proposed five motion primitives. Four of them decorate; on a
   tool used while a stream is failing that is exactly the "decorative
   motion every time a user taps anything" the brief itself warns against.
   So there is ONE, and it carries information rather than personality:
   a thin route line tracking Prepare -> Live -> Wrap. It is the only
   ambient motion in the product, which is what makes it read as a
   signature instead of noise.
   --------------------------------------------------------------------- */
.trail-progress {
  position: relative;
  height: 2px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.trail-progress::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--trail-progress, 0%);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 55%, transparent), var(--accent));
  border-radius: inherit;
  transition: width var(--motion-page) var(--ease-premium);
}
/* The marker only pulses while live — ambient motion is earned by
   meaning something, and "we are on air" is the one thing worth it. */
body[data-operating-state="live"] .trail-progress::after {
  animation: trail-pulse 2.4s var(--ease) infinite;
}
@keyframes trail-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .72; }
}

/* ---------------------------------------------------------------------
   EMPTY-STATE TAXONOMY
   The brief's sharpest observation: a missing BELABOX signal must NOT
   disappear and make the app look healthy. Absence is information.
   Six situations, six treatments — never one generic "nothing here".
   --------------------------------------------------------------------- */
.state-block {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-l) var(--space-m);
  border-radius: var(--radius-l);
  text-align: center;
  justify-items: center;
}
.state-block .ms { font-size: 30px; opacity: .85; }
.state-block b { font-size: var(--type-m); }
.state-block small { max-width: 42ch; color: var(--muted); line-height: 1.5; }

/* never configured — an invitation, and the only variant with a CTA */
.state-block[data-state="setup"] {
  border: 1px dashed var(--line-strong);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.state-block[data-state="setup"] .ms { color: var(--accent); }

/* configured but not reporting — STAYS VISIBLE. The whole point. */
.state-block[data-state="recovery"] {
  border: 1px solid var(--state-warn);
  background: color-mix(in srgb, var(--state-warn) 9%, transparent);
}
.state-block[data-state="recovery"] .ms { color: var(--state-warn); }

/* last known good, now stale — visibly provisional */
.state-block[data-state="stale"] {
  border: 1px solid var(--line-strong);
  background: repeating-linear-gradient(135deg,
    transparent 0 7px, color-mix(in srgb, var(--surface-3) 55%, transparent) 7px 14px);
}
.state-block[data-state="stale"] .ms { color: var(--state-idle); }

/* loading — skeleton, never a spinner in a data region */
.state-block[data-state="loading"] { border: 1px solid var(--line); }
.state-block[data-state="loading"] .skeleton-row {
  width: min(280px, 80%); height: 9px; border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3));
  background-size: 200% 100%;
  animation: skeleton-sweep 1.3s linear infinite;
}
@keyframes skeleton-sweep { to { background-position: -200% 0; } }

/* filtered to nothing — the fix is always one click */
.state-block[data-state="no-results"] { border: 1px solid var(--line); }

/* done — quiet, small, never a trophy */
.state-block[data-state="complete"] {
  padding: var(--space-s) var(--space-m);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}
.state-block[data-state="complete"] .ms { font-size: 20px; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .trail-progress::after,
  .state-block[data-state="loading"] .skeleton-row { animation: none; }
}

/* Trail marker sits with the existing Prepare/Live/Wrap strip rather than
   competing with it — one journey indicator, not two. */
.mission-phase-strip { position: relative; }
.mission-phase-strip .trail-progress { grid-column: 1 / -1; margin-top: var(--space-xs); }
.trail-progress-label {
  grid-column: 1 / -1;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
body[data-operating-state="live"] .trail-progress-label { color: var(--accent); }


/* ---- v6.34.1 — Sidecar positioning moved into the SHARED base class ----
   Bug: .th5-sidecar only ever set colour and shadow — every sidecar
   declared its own `position: fixed` separately. Any new panel adopting
   the shared class therefore rendered as a static block at the bottom of
   the document, half off-screen. That is exactly what happened to Edit
   stream on mobile. Positioning now belongs to the contract, so this
   cannot recur.
   ===================================================================== */
.th5-sidecar {
  position: fixed;
  z-index: 90;
  inset: 0 0 0 auto;
  width: var(--sidecar-width, min(560px, 46vw));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-left: 1px solid var(--line-strong);
  border-radius: var(--radius-l) 0 0 var(--radius-l);
  overflow: hidden;
  animation: th5-sidecar-in var(--motion-sidecar) var(--ease) both;
}
.th5-sidecar[hidden] { display: none !important; }

@keyframes th5-sidecar-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Phones and portrait tablets: temporary FULL-SCREEN workspace, per the
   existing sidecar contract — not a narrow panel jammed against an edge. */
@media (max-width: 720px), (max-width: 920px) and (orientation: portrait) {
  .th5-sidecar {
    inset: 0;
    width: 100%;
    max-width: none;
    border-left: 0;
    border-radius: 0;
    padding-top: env(safe-area-inset-top);
    animation: th5-sidecar-up var(--motion-sidecar) var(--ease) both;
  }
  .th5-sidecar .th5-sidecar-head { min-height: 58px; padding: 10px 12px; }
  .th5-sidecar .th5-sidecar-body { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@keyframes th5-sidecar-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}


/* ---- v6.34.1 — MOTION PRIMITIVES with a live-aware motion LEVEL ----
   Better model than "cut motion when live": keep the full vocabulary, and
   scale its INTENSITY by what the creator is doing. Motion that explains
   something (direction, hierarchy, state) survives everywhere; motion
   that only delights is spent in basecamp, where there is room for it.

   Three levels, resolved on <body data-motion-level>:
     full     basecamp — the whole vocabulary
     focused  live     — informational motion only, faster, no ambience
     minimal  reduced-motion preference — dissolves and state changes only

   Every primitive below reads --motion-scale and --motion-travel, so one
   level change retunes the entire system rather than 40 separate rules.
   ===================================================================== */

body { --motion-scale: 1; --motion-travel: 1; }
body[data-motion-level="focused"] { --motion-scale: .68; --motion-travel: .45; }
body[data-motion-level="minimal"] { --motion-scale: .01; --motion-travel: 0; }

/* ---- 1. TRAIL REVEAL -------------------------------------------------
   A thin route line draws toward newly revealed content. Encodes
   DIRECTION — where the thing you just opened came from. */
.trail-reveal { position: relative; }
.trail-reveal::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent,
    var(--accent) 22%, var(--accent) 78%, transparent);
  transform: scaleY(0);
  transform-origin: top;
  animation: trail-draw calc(var(--motion-page) * var(--motion-scale)) var(--ease-premium) forwards;
}
@keyframes trail-draw { to { transform: scaleY(1); } }

/* ---- 2. CARD → SIDECAR MORPH ----------------------------------------
   The card you clicked pushes toward the edge the panel opens from, so
   the connection between object and inspector stays legible. Encodes
   RELATIONSHIP. */
.morph-source {
  animation: morph-toward calc(var(--motion-sidecar) * var(--motion-scale)) var(--ease) both;
}
@keyframes morph-toward {
  from { transform: translateX(0) scale(1); }
  to   { transform: translateX(calc(-6px * var(--motion-travel))) scale(.985); }
}

/* ---- 3. MARKER CONFIRMATION -----------------------------------------
   A quick stamp on success. Encodes COMPLETION — the one purely
   affirmative primitive, and the first thing trimmed when live. */
.marker-confirm { position: relative; }
.marker-confirm::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid var(--accent);
  border-radius: inherit;
  opacity: 0;
  animation: marker-stamp calc(var(--motion-control) * var(--motion-scale) * 1.6) var(--ease-spring) forwards;
  pointer-events: none;
}
@keyframes marker-stamp {
  0%   { opacity: 1; transform: scale(calc(1 + .06 * var(--motion-travel))); }
  100% { opacity: 0; transform: scale(1); }
}

/* ---- 4. TERRAIN TRANSITION ------------------------------------------
   Directional contour wipe when the theme changes. Pure atmosphere, so
   it is disabled outright below `full`. */
body[data-motion-level="full"] .terrain-wipe::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%,
    color-mix(in srgb, var(--accent) 22%, transparent) 50%, transparent 60%);
  background-size: 280% 100%;
  animation: terrain-sweep var(--motion-page) var(--ease-premium) forwards;
}
@keyframes terrain-sweep {
  from { background-position: 140% 0; }
  to   { background-position: -140% 0; }
}

/* ---- 5. LIVE-STATE TRANSITION ---------------------------------------
   Secondary elements settle back as the console shifts into live. Encodes
   the STATE CHANGE itself, so it runs at every level above minimal. */
body[data-operating-state="live"] :is(.settings-flow-launch, .basecamp-checklist, .trail-suggestions) {
  transition: opacity calc(var(--motion-page) * var(--motion-scale)) var(--ease),
              transform calc(var(--motion-page) * var(--motion-scale)) var(--ease);
  transform: translateY(calc(2px * var(--motion-travel)));
}

/* ---- Level: FOCUSED (live) ------------------------------------------
   Ambient loops stop — a pulsing element in peripheral vision is a
   distraction when you are reading a bitrate. Everything informational
   keeps working, just tighter. */
body[data-motion-level="focused"] .trail-progress::after,
body[data-motion-level="focused"] .auth-pack svg,
body[data-motion-level="focused"] .pack-roll,
body[data-motion-level="focused"] .welcome-screen::after { animation: none; }
body[data-motion-level="focused"] .terrain-wipe::after { display: none; }
body[data-motion-level="focused"] .marker-confirm::after { animation-duration: 120ms; }

/* ---- Level: MINIMAL (reduced motion) --------------------------------
   Spatial movement is replaced by dissolves and immediate state changes,
   never removed entirely — feedback still has to arrive. */
@media (prefers-reduced-motion: reduce) {
  body { --motion-scale: .01; --motion-travel: 0; }
  .trail-reveal::before { animation: none; transform: scaleY(1); }
  .morph-source { animation: none; }
  .marker-confirm::after { animation: marker-fade 140ms linear forwards; }
  .terrain-wipe::after { display: none; }
}
@keyframes marker-fade { from { opacity: .9; } to { opacity: 0; } }


/* ---- v6.34.1 — HOME: dense auto-reflow grid ----
   Home mixed 1-wide and 2-wide cards in a plain 3-column grid with
   stretched rows, so a short card next to a tall one left dead space
   below it, and a 2-wide card that didn't fit left a hole beside it.

   Fix has three parts, all necessary together:
     1. grid-auto-flow: row dense  — later small cards backfill earlier
        gaps instead of leaving holes.
     2. align-items: start         — cards take their natural height
        rather than stretching to the tallest sibling in the row.
     3. row spans from content     — tall cards claim the vertical space
        they actually need, so neighbours can slot beside them.

   Dense packing can reorder cards VISUALLY away from DOM order, which
   normally breaks keyboard navigation. Home is a status surface read
   in any order, not a sequence, so the reordering carries no meaning
   loss — and focus order still follows the DOM, so tabbing stays sane.
   ===================================================================== */
.dashboard-grid {
  grid-auto-flow: row dense;
  align-items: start;
  grid-auto-rows: minmax(0, auto);
}

/* Cards that genuinely need two rows of vertical space claim them, which
   is what lets shorter neighbours slot in alongside rather than leaving
   a stripe of empty grid. */
.dash-card.mission-status-card,
.dash-card.onair-card { grid-row: span 2; }

/* A 2-wide card is a preference, not a requirement: when only one column
   remains it drops to 1-wide rather than forcing a wrap and a hole. */
@container (max-width: 1023px) {
  .dash-card.span-2 { grid-column: span 2; }
  .dash-card.mission-status-card,
  .dash-card.onair-card { grid-row: auto; }
}
@container (max-width: 620px) {
  .dash-card.span-2,
  .dash-card.span-3 { grid-column: 1 / -1; }
}

/* Live state: attention-bearing cards sort to the front of the grid.
   `order` moves them visually without touching the DOM, so nothing
   relocates permanently and focus order is untouched. */
body[data-operating-state="live"] .dash-card.mission-attention-card { order: -2; }
body[data-operating-state="live"] .dash-card.irl-module { order: -1; }

/* Equal-height alignment WITHIN a card so ragged content doesn't reopen
   the gaps the grid just closed. */
.dash-card { display: flex; flex-direction: column; }
.dash-card > .card-actions { margin-top: auto; }


/* ---- v6.35.0 — SIDECAR AS A CONTEXTUAL PANEL (not an overlay) ----
   Every sidecar was `position: fixed` floating ABOVE the page, with a
   `margin-right` hack shoving .app-main aside. That is why they never
   felt like part of the product: an overlay is something covering your
   work, and the content underneath was merely squeezed, not re-laid-out.

   New model — the panel is a PEER CARD IN THE SHELL GRID:
     • .app-shell gains a real third track that opens from 0fr to its
       width, so the panel occupies space rather than covering it.
     • The panel is inset with the same gutter and radius as every other
       card, so it reads as a sibling of the content, not a layer on top.
     • .app-main is a container, so when the track collapses the centre
       content genuinely REFLOWS to fill the space back — cards re-slot
       via the dense grid rather than just stretching.

   Grid-track animation is the key detail: transitioning grid-template-
   columns between `0fr` and a fixed width makes the layout itself move,
   which is what sells "it slotted in" instead of "it appeared over".
   ===================================================================== */

:root {
  --sidecar-panel-w: clamp(340px, 27vw, 460px);
  --sidecar-gutter: var(--space-s);
}

/* The shell gains a collapsible third track. 0fr keeps it in the grid
   (so the transition has something to animate) while taking no space. */
@media (min-width: 1024px) {
  .app-shell {
    transition: grid-template-columns var(--motion-sidecar) var(--ease-premium);
  }
  body.th5-sidecar-open .app-shell {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--sidecar-panel-w);
  }
  /* The sidecars live OUTSIDE .app-shell in the DOM (four separate
     controllers own them), so they cannot literally occupy track 3.
     Instead the shell RESERVES the track and the panel is positioned to
     fill exactly that reserved column. Visually identical to being a
     grid child, with no DOM surgery across four features. */
  body.th5-sidecar-open .th5-sidecar {
    position: fixed;
    top: var(--sidecar-gutter);
    right: var(--sidecar-gutter);
    bottom: var(--sidecar-gutter);
    left: auto;
    z-index: 60;
    width: calc(var(--sidecar-panel-w) - (var(--sidecar-gutter) * 2));
    height: auto;
    margin: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-l);
    background: var(--surface-1);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
    animation: th5-panel-in var(--motion-sidecar) var(--ease-premium) both;
  }
  @keyframes th5-panel-in {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* Content is no longer shoved by a margin — the grid genuinely
     narrowed, so this must be neutralised or it double-counts. */
  body.th5-sidecar-open .app-main,
  body.live-assist-open .app-main { margin-right: 0 !important; }

  /* Rounded panel needs its header/footer corners to follow. */
  body.th5-sidecar-open .th5-sidecar > :first-child {
    border-radius: var(--radius-l) var(--radius-l) 0 0;
  }
  body.th5-sidecar-open .th5-sidecar > :last-child {
    border-radius: 0 0 var(--radius-l) var(--radius-l);
  }
}

/* Reflow on close: .app-main is a container, so the dense Home grid
   re-slots its cards into the reclaimed width instead of merely
   stretching them. Give the cards a matching transition so the refill
   reads as deliberate rather than a snap. */
.dashboard-grid > .dash-card {
  transition: grid-column var(--motion-sidecar) var(--ease),
              opacity var(--motion-control) var(--ease);
}

/* Below the laptop step there is no room for a peer column, so the panel
   returns to the temporary full-screen workspace — unchanged contract. */
@media (max-width: 1023px) {
  body.th5-sidecar-open .app-shell { grid-template-columns: none; }
  body.th5-sidecar-open .th5-sidecar {
    position: fixed;
    inset: 0;
    margin: 0;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }
}

/* Focused motion keeps the track transition (it explains the layout
   change) but tightens it; minimal removes the movement entirely. */
body[data-motion-level="minimal"] .app-shell { transition: none; }
body[data-motion-level="minimal"] .dashboard-grid > .dash-card { transition: none; }

/* Notifications adopt the same contextual-panel treatment on laptop and
   up, so every right-edge surface in the product reads as one component
   family rather than three different-looking things. */
@media (min-width: 1024px) {
  body.notifications-docked .app-shell {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--sidecar-panel-w);
  }
  body.notifications-docked .notification-dialog[open] {
    position: fixed;
    inset: var(--sidecar-gutter) var(--sidecar-gutter) var(--sidecar-gutter) auto;
    width: calc(var(--sidecar-panel-w) - (var(--sidecar-gutter) * 2));
    height: auto;
    max-height: none;
    margin: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-l);
    background: var(--surface-1);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
    overflow: hidden;
  }
  body.notifications-docked .notification-popover {
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: inherit;
    background: transparent;
  }
  body.notifications-docked .app-main { padding-right: 0; }
}


/* ---- v6.36.0 — COLLAPSIBLE SIDEBAR ----
   Adopts the reference's mechanics — icon-only rail, grouped sections,
   hover tooltips when collapsed, header-paired toggle — in Trailhead's
   own language.

   Two departures from the reference, both deliberate:

   1. SECTION LABELS ARE WORKFLOW, NOT CATEGORY. The reference groups by
      business domain (Operation / Internal Audit / Preferences). Here
      they follow the arc of a broadcast — Basecamp, On the trail, Crew —
      so the navigation reinforces the same journey the trail marker and
      operating states already tell. Structure that encodes something
      true, rather than decorative dividers.

   2. THE RAIL STAYS 76px, NOT ~56px. The reference is a desk CRM; this
      is touched mid-stream, sometimes on a tablet, sometimes without
      looking directly at it. 76px keeps every target above the 44px
      accessibility floor with real margin around it.
   ===================================================================== */

:root { --sidebar-w-rail: 76px; }

.sidebar {
  /* The sidebar is position:fixed (line 372), so it is NOT a grid child —
     resizing the --sidebar-w track alone left it at its old width and the
     rail never appeared. It must be sized explicitly too. overflow stays
     VISIBLE so collapsed tooltips can escape the rail; label clipping is
     handled per-element instead. */
  width: var(--sidebar-w);
  overflow: visible;
  transition: width var(--motion-control) var(--ease-premium);
}

/* --- The toggle, paired with the brand as in the reference ---------- */
.side-collapse {
  margin-left: auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  transition: background var(--motion-feedback) var(--ease),
              color var(--motion-feedback) var(--ease),
              transform var(--motion-control) var(--ease-premium);
}
.side-collapse:hover { background: var(--surface-3); color: var(--text); }
.side-collapse .ms { font-size: 19px; }

/* --- Section labels ------------------------------------------------- */
.side-section-label {
  padding: var(--space-m) var(--space-s) var(--space-2xs);
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .72;
  white-space: nowrap;
}
.side-nav > .side-section-label:first-child { padding-top: var(--space-xs); }

/* =====================  COLLAPSED  ================================== */
/* Collapse works by REDEFINING THE WIDTH TOKEN, not by adding competing
   grid-template-columns rules. Every breakpoint rule already builds its
   columns from --sidebar-w / --sidebar-w-laptop / --sidebar-w-desktop,
   so overriding those three at the body level makes the rail apply at
   every step and in every sidecar combination automatically. Adding
   parallel rules instead would lose to the later media queries — which
   is exactly what a cascade simulation caught. */
body.sidebar-collapsed {
  --sidebar-w: var(--sidebar-w-rail);
  --sidebar-w-laptop: var(--sidebar-w-rail);
  --sidebar-w-desktop: var(--sidebar-w-rail);
}
body.sidebar-collapsed .sidebar { width: var(--sidebar-w-rail); }

/* Labels collapse to nothing rather than wrapping or clipping mid-word. */
body.sidebar-collapsed .nav-button > span:not(.ms):not(.tab-count),
body.sidebar-collapsed .side-help > span:not(.ms),
body.sidebar-collapsed .side-brand > div,
body.sidebar-collapsed .side-section-label {
  width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity var(--motion-feedback) var(--ease), width var(--motion-control) var(--ease);
}
/* Section labels become a hairline rule — the grouping survives even
   without words, so the rail keeps its rhythm instead of one long stack. */
body.sidebar-collapsed .side-section-label {
  display: block;
  height: 1px;
  width: 28px;
  margin: var(--space-s) auto var(--space-2xs);
  padding: 0;
  background: var(--line-strong);
  opacity: .5;
}
body.sidebar-collapsed .side-nav > .side-section-label:first-child { margin-top: var(--space-xs); }

body.sidebar-collapsed .nav-button,
body.sidebar-collapsed .side-help {
  justify-content: center;
  padding-inline: 0;
  gap: 0;
}
body.sidebar-collapsed .side-brand { justify-content: center; padding-inline: 0; }
body.sidebar-collapsed .side-collapse { transform: rotate(180deg); }

/* Collapsed: the mod subnav would be an ambiguous stack of small icons,
   so it hides — the parent Moderation button still reaches it. */
body.sidebar-collapsed .side-mod-subnav { display: none; }

/* Badges stay visible when collapsed — a queue count is exactly what you
   need at a glance — but shrink to a corner dot with the number. */
body.sidebar-collapsed .nav-button { position: relative; }
body.sidebar-collapsed .nav-button .tab-count {
  position: absolute;
  top: 6px; right: 12px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

/* --- Tooltips on the collapsed rail --------------------------------- */
body.sidebar-collapsed .nav-button,
body.sidebar-collapsed .side-help { overflow: visible; }
body.sidebar-collapsed :is(.nav-button, .side-help)::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  z-index: 120;
  padding: 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface-3);
  color: var(--text);
  font-size: var(--type-s);
  font-weight: 620;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
  transition: opacity var(--motion-feedback) var(--ease),
              transform var(--motion-feedback) var(--ease);
}
body.sidebar-collapsed :is(.nav-button, .side-help):is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
/* Tooltips are hover affordances; suppress them at minimal motion and on
   touch, where there is no hover and they would flash on tap. */
@media (hover: none) {
  body.sidebar-collapsed :is(.nav-button, .side-help)::after { display: none; }
}

/* The rail is desktop/laptop only — below that the mobile dock owns
   navigation and the sidebar is hidden entirely. */
@media (max-width: 1023px) {
  body.sidebar-collapsed .app-shell { grid-template-columns: none; }
  .side-collapse { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .side-collapse,
  body.sidebar-collapsed :is(.nav-button, .side-help)::after { transition: none; }
}

/* ---- v6.37.0 — Sidecar: close the landscape-tablet gap ---- */
/* A landscape tablet at ~900px matched NEITHER the full-screen rule
   (which needs <=720px or portrait) NOR the >=1024px contextual panel,
   so it fell through to the bare base class: a narrow 46vw strip with no
   inset, no radius, and content spilling past its own edges. That is the
   "busted edit sidecar on tablet". The band now gets a proper panel. */
@media (min-width: 721px) and (max-width: 1023px) and (orientation: landscape) {
  .th5-sidecar {
    position: fixed;
    inset: var(--space-xs) var(--space-xs) var(--space-xs) auto;
    width: min(440px, 52vw);
    height: auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-l);
    background: var(--surface-1);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .3);
  }
}

/* ---- v6.37.0 — Sidecar containment ---- */
/* Reported: "containers don't stay within the sidecar container". The
   panel is a grid of header + body, but the body had no min-height:0, so
   grid children refused to shrink below their content and overflowed the
   rounded frame. Also strips the excessive nested boxes: inside a panel
   that is already a card, every child re-declaring a border and surface
   creates boxes-within-boxes for no informational gain. */
.th5-sidecar {
  grid-template-rows: auto minmax(0, 1fr);
  contain: layout paint;
}
.th5-sidecar-body {
  min-height: 0;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.th5-sidecar-body > * { min-width: 0; max-width: 100%; }
/* One level of surface only: the sidecar IS the container, so direct
   children are flat unless they carry real status meaning. */
.th5-sidecar-body > :is(.panel-card, .dash-card, .setting-row) {
  border: 0;
  background: transparent;
  padding-inline: 0;
  box-shadow: none;
}
.th5-sidecar-body > :is(.panel-card, .dash-card) + :is(.panel-card, .dash-card) {
  border-top: 1px solid var(--line);
  border-radius: 0;
}
/* Long words, URLs and Twitch names must not push the panel wider. */
.th5-sidecar-body :is(p, b, small, span, h2, h3) { overflow-wrap: anywhere; }

/* ---- v6.37.0 — Stream journey as a module ---- */
/* Was a full-width bar pinned above everything on Home, which spent the
   most valuable row on the page — the one directly under the topbar — on
   three words and a progress line. As a card it competes fairly with the
   other modules and joins the dense reflow. */
.mission-journey-card { grid-column: span 1; }
.mission-journey-card .mission-phase-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-s);
  padding: 0;
  border: 0;
  background: none;
}
.mission-journey-card .mission-phase-strip > span {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}
.mission-journey-card .mission-phase-strip .ms { font-size: 20px; color: var(--muted); }
.mission-journey-card .mission-phase-strip b { font-size: var(--type-s); }
.mission-journey-card .mission-phase-strip small { font-size: var(--type-xs); color: var(--muted); }
.mission-journey-card .mission-route-line {
  height: 1px;
  background: var(--line-strong);
  align-self: center;
}
/* The active phase is the only coloured element in the card. */
body[data-operating-state="live"] .mission-journey-card [data-mission-phase="live"] .ms,
body[data-operating-state="live"] .mission-journey-card [data-mission-phase="live"] b { color: var(--accent); }

/* ---- v6.37.0 — Chat as a sidecar ---- */
/* The docked chat was a third grid column at >=1280px only, which meant
   it competed with the sidecar panel for the same track and was
   unavailable on every smaller screen. Routing it through the shared
   sidecar contract gives it the full panel width (wider than the old
   344px dock), makes it available from laptop up, and lets it use the
   same open/close/mutual-exclusion logic as everything else. */
body[data-sidecar-owner="chat"] .th5-sidecar { --sidecar-width: min(520px, 40vw); }
.chat-sidecar-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  padding: 0;
}
.chat-sidecar-body .chat-dock-log { min-height: 0; overflow: auto; padding: var(--space-s); }
.chat-sidecar-body .chat-dock-form { padding: var(--space-s); border-top: 1px solid var(--line); }

/* =====================================================================
   v6.39.0 — ALPHA 1 UI HOTFIX
   =====================================================================
   Diagnosed from a real desktop screenshot rather than theory. Four
   compounding faults made Home look sparse and broken:

   1. The stream thumbnail had a min-height but NO aspect ratio or cap.
      A square Twitch avatar in a .72fr column rendered ~250px tall, so
      the NOW card became roughly twice the height of every other card.
      That single card set the row height, and everything beside it was
      left with a large dead area underneath.

   2. .mission-status-card / .onair-card carried `grid-row: span 2`.
      Combined with (1) that reserved a second row those cards did not
      need, creating a literal empty grid cell rather than a short card.

   3. The journey card's phase strip laid out five columns
      (label / line / label / line / label) inside a ONE-column card.
      Each label got ~70px, so "Prepare" wrapped to "Pre par e" and its
      sub-caption wrapped again.

   4. --content-max of 1560px left wide displays heavily margined while
      the cards inside were simultaneously cramped.
   ===================================================================== */

/* ---- 1. Stream thumbnail: constrain it like the preview it is ------ */
.stream-overview {
  /* Fixed thumb column instead of .72fr: a preview does not need to grow
     with the card, and letting it do so is what set the row height. */
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  align-items: center;
}
.stream-thumbnail {
  aspect-ratio: 16 / 9;
  min-height: 0;
  max-height: 132px;
  width: 100%;
}
.stream-thumbnail img,
.stream-thumbnail iframe {
  min-height: 0;
  height: 100%;
  object-fit: cover;
}


/* ---- 2. Drop the row spans that reserved empty cells --------------- */
/* With the thumbnail capped, these cards are a normal height and the
   dense flow can pack every column without holes. Overriding to `auto`
   rather than deleting the old rule keeps this block authoritative. */
.dash-card.mission-status-card,
.dash-card.onair-card { grid-row: auto; }

/* ---- 3. Phase strip: respect the width it actually has ------------- */
/* The strip is informative, not decorative, so it degrades by dropping
   detail rather than wrapping: sub-captions go first, then the
   connecting lines, and the icon + phase name always survive. */
.mission-journey-card .mission-phase-strip > span > b,
.mission-journey-card .mission-phase-strip > span > small { white-space: nowrap; }



/* The card head already names the current phase, so the strip never
   needs to repeat it in full. */
.mission-journey-card .mission-phase-strip > span > b {
  font-size: var(--type-s);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.mission-journey-card .mission-phase-strip > span > .ms {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  flex: 0 0 auto;
}
.mission-journey-card .mission-phase-strip > span.active > .ms {
  background: var(--accent);
  color: var(--on-accent);
}

/* ---- 4. Use the width wide displays actually have ------------------ */
:root { --content-max: 1760px; }

/* ---- 5. Card rhythm ------------------------------------------------ */
/* Cards no longer stretch to a forced row height, so their internals
   should sit at the top and let the card end where the content ends. */
.dash-card { align-content: start; }
.dash-card > .card-actions { margin-top: auto; padding-top: var(--space-s); }

/* ---- v6.39.0 — Panel must not strangle the content column ---------- */
/* State audit finding: reserving a 460px track from 1024px up left the
   content at 352px (1024 viewport) and 576px (1280) with a panel open —
   narrower than the single-column breakpoint, so Home collapsed to one
   cramped column while a wide panel sat beside it.

   Rule: the panel only RESERVES space when the content keeps a usable
   width afterwards (>=1360px viewport). Below that it OVERLAYS, which is
   the honest trade — a temporary panel covering content is better than
   permanently unusable content. */
@media (min-width: 1024px) and (max-width: 1359px) {
  body.th5-sidecar-open .app-shell,
  body.notifications-docked .app-shell,
  body.chat-docked .app-shell {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  }
  body.th5-sidecar-open .th5-sidecar,
  body.notifications-docked .notification-dialog[open] {
    box-shadow: -18px 0 52px rgba(0, 0, 0, .5);
  }
}
/* Panel scales with the room available rather than a flat 460px. */
@media (min-width: 1360px) {
  :root { --sidecar-panel-w: clamp(360px, 26vw, 440px); }
}
@media (min-width: 1920px) {
  :root { --sidecar-panel-w: clamp(400px, 24vw, 520px); }
}

/* ---- v6.39.1 — Home fixes that never applied --------------------- */
/* Root cause: the v6.39.0 card-level rules were written as @container
   queries, but .dash-card is NOT a container. The nearest ancestor
   container is .dashboard-grid (~1140px on desktop), so a
   `max-width: 700px` test could never match and every card-level rule
   was silently inert. Everything else in that release applied normally,
   which is why only Home looked unchanged.

   Fixed WITHOUT making .dash-card a container: container-type applies
   layout containment and makes the card a containing block for absolutely
   positioned descendants, which would risk breaking pills, badges and
   drag handles inside every card. These rules do not need a query. */

/* Phase strip: the card head already states the current phase ("Set the
   route" / "Live"), so repeating it under each icon was redundant at any
   width. Dropping the sub-captions outright removes the wrapping problem
   and the query along with it. */
.mission-journey-card .mission-phase-strip > span > small { display: none; }
.mission-journey-card .mission-phase-strip {
  grid-template-columns: auto minmax(12px, 1fr) auto minmax(12px, 1fr) auto;
  gap: var(--space-xs);
}
.mission-journey-card .mission-phase-strip > span {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 0;
}
.mission-journey-card .mission-phase-strip > span > b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mission-journey-card .mission-route-line {
  height: 1px;
  min-width: 12px;
  background: var(--line-strong);
  align-self: center;
}

/* Stream overview: viewport-driven, so a media query is both correct and
   guaranteed to fire. */
@media (max-width: 820px) {
  .stream-overview { grid-template-columns: 1fr; }
  .stream-thumbnail { max-height: 180px; min-height: 0; }
}

/* ---- v6.39.3 — Home: make row heights independent of DATA VOLUME ---
   Reported symptom: Home looks correct while loading behind the veil, then
   goes wrong once the account loads. That is the real tell — behind the
   veil every card is EMPTY and therefore uniform height, so the grid looks
   tidy. When real data arrives, one card grows to eight activity rows or a
   full-size Twitch avatar while its neighbour stays at two lines, and the
   row stretches to the tallest card. The gaps are not a grid bug; they are
   unbounded content.

   Every scrolling region on Home is now capped, so a card's height is set
   by its DESIGN rather than by how much data happens to exist. Content
   past the cap scrolls inside the card, which is also better behaviour —
   "Recent activity" should never push the fold down by 400px. */

.dash-card .activity-list {
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.dash-card .mission-attention-list {
  max-height: 216px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dash-card .collab-stack,
.dash-card .mini-actions {
  max-height: 132px;
  overflow-y: auto;
}
.dash-card .health-mini { max-height: none; }

/* A floor as well as a ceiling: without one, a two-line card next to a
   capped 264px card still leaves a visible step. This keeps the shortest
   cards close enough that the grid reads as even. */
.dashboard-grid > .dash-card { min-height: 172px; }
.dashboard-grid > .dash-card.span-2 { min-height: 196px; }

/* Text scale defence: at 115-200% the phase strip labels grow and would
   re-wrap. Hold them on one line and let the label ellipsis instead — the
   card head already states the current phase in full. */
.mission-journey-card .mission-phase-strip > span > b {
  font-size: calc(12px * var(--text-scale));
  min-width: 0;
}
.mission-journey-card .mission-phase-strip > span > .ms {
  font-size: 18px;
  width: 26px; height: 26px;
}

/* ---- v6.39.4 — Page content must share the topbar's left edge ------
   Systemic alignment bug, present on EVERY page, not just Home:

     .app-topbar   full width, padded by --page-gutter   -> title at left
     .view-stack   max-width + `margin: 0 auto`          -> CENTERED

   Once the viewport exceeds the content cap, the two disagree. On a 2560px
   display the page title sits at x=288 while the content below starts at
   x=566 — a 278px step between the header and everything it labels. That
   is what reads as "the content doesn't line up", and why it looked wrong
   on other pages too, including in demo mode where no account data exists.

   The v6.33 notes already said the content should stay "left-aligned
   against the sidebar so the eye has a fixed anchor" — but only max-width
   was set, and the inherited `margin: 0 auto` kept centring it. The stated
   intent was never actually implemented. It is now.

   Keeping the cap (long measures hurt readability) while anchoring left
   means the title, the status rail and the cards all share one edge at
   every width. */
.app-main > .view-stack {
  margin-inline: 0;
}

/* On very wide displays the topbar's right-hand controls would otherwise
   drift far from the content they act on. Hold the topbar's inner row to
   the same measure so the whole page reads as one column. */
@media (min-width: 1900px) {
  .app-topbar {
    max-width: calc(var(--content-max) + (var(--page-gutter) * 2));
    margin-inline: 0;
  }
}

/* On-air and moderation deliberately go full-bleed; leave them alone. */
body.on-air .app-main > .view-stack,
body[data-current-view="moderation"] .app-main > .view-stack { margin-inline: 0; }

/* =====================================================================
   v6.40.0 — HOME LAYOUT REWRITE
   =====================================================================
   Five CSS fixes to the old grid produced no visible change, and an
   incognito load confirmed the deployed code was mine and still wrong.
   The diagnosis was wrong, not the delivery — so this replaces the
   mechanism instead of tuning it again.

   WHY THE OLD APPROACH KEPT FAILING
   Home used `display: grid` with dense packing. A grid row is as tall as
   its tallest card, and a card only backfills a hole if it FITS that
   hole. With cards whose natural heights differ by 300px+ (a live
   thumbnail and eight activity rows against a two-line status card),
   holes are not a bug to tune out — they are what grid is defined to do.
   Every fix I shipped was fighting the layout model itself.

   THE NEW MECHANISM: MULTI-COLUMN
   Cards now flow into balanced columns. Each card is atomic
   (`break-inside: avoid`) and the browser distributes them to equalise
   column heights. There is no row concept, so there is no such thing as
   a hole. Cards of any height compose correctly, which means Home stops
   depending on content volume entirely — the thing that made it look
   right behind the veil and wrong once real data arrived.

   TRADE ACCEPTED: no card can span multiple columns, and reading order
   becomes column-major rather than row-major. For a status surface read
   by glance rather than in sequence that is the right trade, and it buys
   a layout that cannot regress into gaps. Tab order still follows the
   DOM, so keyboard navigation is unaffected.

   The container is `.th5-hgrid` — a fresh class with NO legacy rules
   attached, so none of the 143 accumulated Home rules can reach it,
   including the one `!important` that forced a single column.
   ===================================================================== */

.th5-hgrid {
  column-gap: var(--space-m);
  column-fill: balance;
  columns: 1;
  margin-top: var(--space-m);
}

/* Column count follows the CONTENT width (.app-main is the container),
   so opening a sidecar reflows Home correctly instead of guessing from
   the viewport. */
@container (min-width: 700px)  { .th5-hgrid { columns: 2; } }
@container (min-width: 1180px) { .th5-hgrid { columns: 3; } }

/* Fallback where container queries are unavailable. */
@supports not (container-type: inline-size) {
  @media (min-width: 1000px) { .th5-hgrid { columns: 2; } }
  @media (min-width: 1500px) { .th5-hgrid { columns: 3; } }
}

/* Each card is atomic and never splits across a column boundary. */
.th5-hgrid > .dash-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;              /* flex/grid children can break column flow */
  width: 100%;
  margin: 0 0 var(--space-m);
  min-height: 0;               /* heights are natural again; no floors needed */
  overflow: hidden;            /* keeps rounded corners honest */
}

/* Card internals: the old rules assumed a stretched flex card. In column
   flow the card is its natural height, so actions sit after content
   rather than being pushed to a forced bottom. */
.th5-hgrid > .dash-card > .card-actions {
  margin-top: var(--space-m);
  padding-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* Content caps stay — they keep any single card from dominating a column
   and make "Recent activity" scroll instead of running to 40 rows. */
.th5-hgrid .activity-list { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.th5-hgrid .mission-attention-list { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.th5-hgrid .collab-stack,
.th5-hgrid .mini-actions { max-height: 140px; overflow-y: auto; }

/* Stream thumbnail stays capped: a square Twitch avatar at full column
   width is what inflated this card in the first place. */
.th5-hgrid .stream-overview {
  display: grid;
  grid-template-columns: minmax(0, 168px) minmax(0, 1fr);
  gap: var(--space-s);
  align-items: center;
}
.th5-hgrid .stream-thumbnail {
  aspect-ratio: 16 / 9;
  min-height: 0;
  max-height: 108px;
  width: 100%;
}
@container (max-width: 560px) {
  .th5-hgrid .stream-overview { grid-template-columns: 1fr; }
  .th5-hgrid .stream-thumbnail { max-height: 180px; }
}

/* Phase strip: one line, ellipsis, no sub-captions — the card head
   already names the current phase. */
.th5-hgrid .mission-phase-strip {
  display: grid;
  grid-template-columns: auto minmax(8px, 1fr) auto minmax(8px, 1fr) auto;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-s);
  padding: 0;
  border: 0;
  background: none;
}
.th5-hgrid .mission-phase-strip > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.th5-hgrid .mission-phase-strip > span > small { display: none; }
.th5-hgrid .mission-phase-strip > span > b {
  font-size: calc(12px * var(--text-scale));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.th5-hgrid .mission-phase-strip > span > .ms {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-3);
  font-size: 17px;
}
.th5-hgrid .mission-route-line { height: 1px; background: var(--line-strong); align-self: center; }

/* Live state ordering used grid `order`, which multi-column ignores.
   Column flow follows DOM order, so this is a no-op now and is removed
   rather than left to look meaningful. */
body[data-operating-state="live"] .th5-hgrid > .dash-card { order: 0; }

/* =====================================================================
   v6.41.0 — HOME: MISSION BRIEF LAYOUT (design pass)
   =====================================================================
   The brief asked for a Mission Brief that answers three questions on
   sight: what state am I in, does anything need me, what do I do next.
   What existed was ten cards of equal visual weight — the "card
   collection" the brief explicitly warned against — so nothing led and
   the eye had no entry point.

   This replaces both the old dense grid and the masonry experiment with
   EXPLICIT PLACEMENT on a 6-column grid, organised into bands:

     BAND 1  Journey        full width, thin — where you are in the arc
     BAND 2  NOW  (4/6)  +  Next move (2/6) — state and the action for it
     BAND 3  Attention + Quick controls + IRL — the operational row
     BAND 4  Crew (2/6)  +  Recent activity (4/6) — reference
     BAND 5  Basecamp checklist, full width — setup, recedes when done
     LIVE    On-air controls, full width, only while live

   Why explicit placement rather than auto-flow: every gap problem this
   week came from letting the browser decide where cards land. Dense
   packing leaves holes when card heights differ; masonry fixed that but
   forfeited spans and row-major reading. Naming each card's position
   removes the guesswork entirely — the layout is now designed rather
   than negotiated, and it renders identically every time.

   Cards stretch to their band's height, and every internal list is
   capped and scrolls, so a band's height is set by design rather than
   by how much data happens to exist.
   ===================================================================== */

.th5-hgrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-m);
  align-items: stretch;
  margin-top: var(--space-m);
  columns: auto;              /* cancel the masonry experiment */
}

/* Every card fills the cell it is given — no partial-height cards, which
   is what read as "holes" even when the grid was technically correct. */
.th5-hgrid > .dash-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  break-inside: auto;
}
.th5-hgrid > .dash-card > .card-actions { margin-top: auto; padding-top: var(--space-m); }

/* ---- BAND placement: desktop (>=1180px of CONTENT width) ---------- */
@container (min-width: 1180px) {
  .th5-hgrid > .mission-journey-card { grid-column: span 6; }
  .th5-hgrid > .mission-status-card  { grid-column: span 4; }
  .th5-hgrid > #homeNextMoveCard     { grid-column: span 2; }

  .th5-hgrid > #homeAttentionCard    { grid-column: span 2; }
  .th5-hgrid > .home-quick-card      { grid-column: span 2; }
  .th5-hgrid > .irl-module           { grid-column: span 2; }

  .th5-hgrid > .accent-card          { grid-column: span 2; }
  .th5-hgrid > .home-activity-card   { grid-column: span 4; }

  .th5-hgrid > #homeSetupRoute       { grid-column: span 6; }
  .th5-hgrid > #homeOnAirCard        { grid-column: span 6; }
}

/* ---- Tablet / narrow desktop: 2 bands per row -------------------- */
@container (min-width: 700px) and (max-width: 1179px) {
  .th5-hgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .th5-hgrid > .mission-journey-card,
  .th5-hgrid > .mission-status-card,
  .th5-hgrid > #homeSetupRoute,
  .th5-hgrid > #homeOnAirCard,
  .th5-hgrid > .home-activity-card { grid-column: span 4; }
  .th5-hgrid > #homeNextMoveCard,
  .th5-hgrid > #homeAttentionCard,
  .th5-hgrid > .home-quick-card,
  .th5-hgrid > .irl-module,
  .th5-hgrid > .accent-card { grid-column: span 2; }
}

/* ---- Phone: one column, order by urgency ------------------------- */
@container (max-width: 699px) {
  .th5-hgrid { grid-template-columns: 1fr; }
  .th5-hgrid > .dash-card { grid-column: 1 / -1; }
}

/* Fallback where container queries are unsupported. */
@supports not (container-type: inline-size) {
  .th5-hgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  @media (max-width: 1100px) { .th5-hgrid { grid-template-columns: 1fr; } }
}

/* ---- Hierarchy: the Mission Brief needs one clear lead ------------ */
/* NOW is the primary card. It gets more presence than its neighbours
   through weight, not decoration — a stronger border and a slightly
   raised surface, nothing that competes with status colour. */
.th5-hgrid > .mission-status-card {
  border-color: var(--line-strong);
  background: var(--surface-1);
}
.th5-hgrid > .mission-status-card .card-head h3 { font-size: calc(20px * var(--text-scale)); }

/* Next move is the single action card: it should read as a button-first
   surface, so its content pins to the bottom edge. */
.th5-hgrid > #homeNextMoveCard { justify-content: space-between; }

/* Setup recedes as it completes rather than shouting for attention. */
.th5-hgrid > #homeSetupRoute { opacity: .84; }
.th5-hgrid > #homeSetupRoute:hover,
.th5-hgrid > #homeSetupRoute:focus-within { opacity: 1; }

/* ---- Content caps: band height is design-led, not data-led -------- */
.th5-hgrid .activity-list { max-height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.th5-hgrid .home-activity-card { max-height: 420px; }
.th5-hgrid .mission-attention-list { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; }
.th5-hgrid .collab-stack,
.th5-hgrid .mini-actions { max-height: 148px; overflow-y: auto; }

/* =====================================================================
   v6.42.0 — HOME / ROUTE CONSOLE
   A true dashboard hierarchy: command header, current state, next action,
   operations, context, and progressive setup. Existing feature IDs and
   event contracts are preserved; only the information architecture changes.
   ===================================================================== */

.mission-brief-view {
  --home-gap: clamp(12px, 1.35vw, 18px);
  max-width: 1480px;
}

.home-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: clamp(22px, 2.1vw, 30px);
  background: var(--surface-1);
  box-shadow: var(--shadow-soft);
}
.home-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .18;
  background-image: var(--topographic);
  background-size: 620px;
  mask-image: linear-gradient(90deg, transparent 8%, #000 72%);
}
.home-stage::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 92px;
  height: 6px;
  background: var(--accent);
  box-shadow: -104px 0 0 color-mix(in srgb, var(--accent) 38%, transparent);
}

.home-command-hero {
  min-height: clamp(390px, 38vw, 500px);
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(310px, .72fr);
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-position: center 40%;
}
.home-command-hero::after {
  background:
    linear-gradient(90deg, rgba(7, 9, 7, .93) 0%, rgba(7, 9, 7, .79) 46%, rgba(7, 9, 7, .34) 100%),
    linear-gradient(180deg, transparent 48%, rgba(5, 7, 5, .62)) !important;
}
.home-hero-copy {
  align-self: center;
  max-width: 850px;
  padding: clamp(34px, 5vw, 72px);
  padding-right: clamp(26px, 3vw, 46px);
}
.home-hero-copy h2 {
  max-width: 780px;
  margin-block: 18px 15px;
  font-size: clamp(42px, 5.2vw, 78px);
  line-height: .92;
  letter-spacing: -.042em;
}
.home-hero-copy p { max-width: 58ch; }
.home-hero-copy .hero-actions { margin-top: 30px; }
.home-hero-copy .hero-actions > button { min-height: 48px; }

.home-hero-console {
  position: relative;
  z-index: 3;
  align-self: stretch;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: clamp(20px, 2.2vw, 30px);
  margin-left: 0;
  padding: clamp(20px, 2vw, 28px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-l);
  background: linear-gradient(160deg, rgba(14, 17, 14, .88), rgba(14, 17, 14, .62));
  color: #f4f7ef;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 80px rgba(0,0,0,.24);
  backdrop-filter: blur(18px) saturate(1.08);
}
.home-hero-console::before,
.home-hero-console::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.home-hero-console::before {
  inset: 0;
  opacity: .16;
  background-image: var(--topographic);
  background-size: 380px;
}
.home-hero-console::after {
  width: 80px;
  height: 80px;
  right: -41px;
  bottom: -41px;
  border: 1px solid rgba(var(--accent-rgb), .56);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(var(--accent-rgb), .06), 0 0 0 38px rgba(var(--accent-rgb), .03);
}
.home-hero-console > * { position: relative; z-index: 1; }
.home-console-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #aeb8a7;
  font: 700 calc(8.5px * var(--text-scale))/1 var(--mono);
  letter-spacing: .16em;
}
.home-console-beacon { display: inline-flex; align-items: center; gap: 7px; }
.home-console-beacon i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .1), 0 0 16px rgba(var(--accent-rgb), .5);
}
.home-console-beacon b { color: #f4f7ef; font-size: inherit; }
.home-hero-console .creator-signature {
  width: 100%;
  margin: 0;
  padding: 11px 12px;
  border-color: rgba(255,255,255,.14);
  border-radius: var(--radius-m);
  background: rgba(255,255,255,.055);
  backdrop-filter: none;
}
.home-hero-console .creator-signature .signature-avatar { width: 40px; height: 40px; }
.home-system-copy {
  margin: -4px 0 0;
  color: #c6cec0;
  font-size: calc(12px * var(--text-scale));
  line-height: 1.55;
}
.home-console-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.home-console-metrics > span,
.home-hero-console .mc-item {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 12px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-s);
  background: rgba(255,255,255,.045);
}
.home-console-metrics small,
.home-hero-console .mc-item small {
  color: #929d8d;
  font: 700 calc(7.5px * var(--text-scale))/1 var(--mono);
  letter-spacing: .15em;
}
.home-console-metrics b {
  overflow: hidden;
  color: #f4f7ef;
  font-size: calc(11px * var(--text-scale));
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hero-console .mission-clock {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.home-hero-console .mc-item { text-align: left; }
.home-hero-console .mc-item b { color: var(--accent); font-size: clamp(19px, 2vw, 27px); }
.home-route-signal {
  display: grid;
  grid-template-columns: 10px 1fr 1fr 10px;
  align-items: center;
  gap: 0;
  margin-top: auto;
  padding-top: 4px;
}
.home-route-signal i { display: block; height: 2px; background: rgba(255,255,255,.18); }
.home-route-signal i:first-child,
.home-route-signal i:last-child {
  width: 9px;
  height: 9px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: transparent;
}
.home-route-signal i:nth-child(2) { background: linear-gradient(90deg, var(--accent), rgba(255,255,255,.18)); }
body[data-operating-state="live"] .home-route-signal i:nth-child(3) { background: linear-gradient(90deg, var(--accent), rgba(255,255,255,.18)); }
body[data-operating-state="live"] .home-console-beacon i { animation: home-live-beacon 1.8s ease-in-out infinite; }
@keyframes home-live-beacon { 50% { opacity: .56; transform: scale(.78); } }

.home-journey-rail {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(128px, .24fr) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 14px clamp(20px, 3vw, 34px) 16px;
  border-top: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface-0) 90%, transparent);
  backdrop-filter: blur(18px);
}
.home-journey-copy { display: grid; gap: 3px; }
.home-journey-copy small {
  color: var(--faint);
  font: 700 calc(8px * var(--text-scale))/1 var(--mono);
  letter-spacing: .16em;
}
.home-journey-copy h3 { margin: 0; font-size: calc(15px * var(--text-scale)); }
.home-journey-rail .mission-phase-strip {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.home-journey-rail .trail-progress { grid-column: 2; margin-top: -9px; }

.home-priority-layout,
.home-operations-layout,
.home-reference-layout {
  display: grid;
  gap: var(--home-gap);
  margin-top: var(--home-gap);
}
.home-priority-layout { grid-template-columns: minmax(0, 1.55fr) minmax(330px, .75fr); align-items: stretch; }
.home-priority-stack { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--home-gap); }
.home-operations-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-reference-layout { grid-template-columns: minmax(0, 1.55fr) minmax(290px, .65fr); }
.home-live-toolkit,
.home-setup-card { margin-top: var(--home-gap); }

.home-priority-layout > .dash-card,
.home-priority-stack > .dash-card,
.home-operations-layout > .dash-card,
.home-reference-layout > .dash-card,
.home-live-toolkit,
.home-setup-card {
  min-height: 0;
  margin: 0;
}
.home-priority-layout .mission-status-card {
  min-height: 360px;
  padding: clamp(21px, 2vw, 28px);
  border-color: var(--line-strong);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 62%, transparent), var(--surface-1) 58%);
}
.home-priority-layout .mission-status-card .card-head h3 { font-size: calc(22px * var(--text-scale)); }
.home-priority-layout .stream-overview {
  flex: 1;
  grid-template-columns: minmax(240px, .95fr) minmax(0, 1.05fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: center;
}
.home-priority-layout .stream-thumbnail {
  width: 100%;
  min-height: 220px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
}
.home-priority-layout .stream-thumbnail img,
.home-priority-layout .stream-thumbnail iframe { min-height: 220px; }
.home-priority-layout .stream-copy > strong { font-size: calc(21px * var(--text-scale)); }
.home-priority-layout .card-actions { margin-top: auto; padding-top: 18px; }

.home-priority-stack .mission-next-card {
  min-height: 190px;
  justify-content: space-between;
  border-color: rgba(var(--accent-rgb), .38);
  background:
    linear-gradient(145deg, rgba(var(--accent-rgb), .14), var(--surface-1) 62%);
}
.home-priority-stack .mission-next-card h3 { font-size: calc(20px * var(--text-scale)); }
.home-priority-stack .mission-next-card p { max-width: 52ch; min-height: 0; }
.home-priority-stack .mission-attention-card { min-height: 0; }
.home-priority-stack .mission-attention-list { max-height: 186px; overflow: auto; }

.home-operations-layout > .dash-card,
.home-reference-layout > .dash-card { padding: clamp(20px, 1.8vw, 25px); }
.home-operations-layout .mini-actions { min-height: 38px; max-height: 118px; overflow: auto; }
.home-operations-layout .health-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-operations-layout .health-mini span { min-width: 0; }
.home-reference-layout .home-activity-card { min-height: 245px; }
.home-reference-layout .activity-list { max-height: 268px; overflow: auto; overscroll-behavior: contain; }
.home-crew-card { justify-content: flex-start; }
.home-crew-card .wide { margin-top: auto; }
.home-setup-card { opacity: .88; transition: opacity var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease); }
.home-setup-card:hover,
.home-setup-card:focus-within { opacity: 1; border-color: var(--line-strong); }
.home-setup-card .mission-checklist { margin-top: 4px; }

body[data-operating-state="live"] .home-stage { border-color: rgba(255, 93, 110, .34); }
body[data-operating-state="live"] .home-stage::after { background: var(--danger); box-shadow: -104px 0 0 rgba(255,93,110,.28); }
body[data-operating-state="live"] .home-command-hero::after {
  background:
    linear-gradient(90deg, rgba(8, 8, 8, .93) 0%, rgba(8, 8, 8, .76) 45%, rgba(21, 8, 10, .38) 100%),
    linear-gradient(180deg, transparent 44%, rgba(10, 3, 4, .66)) !important;
}
body[data-operating-state="live"] .home-console-beacon i { background: var(--danger); box-shadow: 0 0 0 5px rgba(255,93,110,.1), 0 0 16px rgba(255,93,110,.56); }
body[data-operating-state="live"] .home-hero-console { border-color: rgba(255,93,110,.28); }
body[data-operating-state="live"] .home-route-signal i:first-child,
body[data-operating-state="live"] .home-route-signal i:last-child { border-color: var(--danger); }
body[data-operating-state="live"] .home-route-signal i:nth-child(2),
body[data-operating-state="live"] .home-route-signal i:nth-child(3) { background: linear-gradient(90deg, var(--danger), rgba(255,255,255,.18)); }

body[data-scenic="minimal"] .home-command-hero,
body[data-scenic="topographic"] .home-command-hero { color: var(--text); }
body[data-scenic="minimal"] .home-command-hero::after,
body[data-scenic="topographic"] .home-command-hero::after {
  background: linear-gradient(115deg, color-mix(in srgb, var(--surface-1) 96%, transparent), color-mix(in srgb, var(--surface-1) 78%, transparent)) !important;
}
body[data-scenic="minimal"] .home-hero-console,
body[data-scenic="topographic"] .home-hero-console {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface-0) 90%, transparent);
  color: var(--text);
}
body[data-scenic="minimal"] .home-console-beacon b,
body[data-scenic="topographic"] .home-console-beacon b,
body[data-scenic="minimal"] .home-console-metrics b,
body[data-scenic="topographic"] .home-console-metrics b { color: var(--text); }
body[data-scenic="minimal"] .home-system-copy,
body[data-scenic="topographic"] .home-system-copy { color: var(--muted); }
body[data-scenic="minimal"] .home-console-metrics > span,
body[data-scenic="topographic"] .home-console-metrics > span,
body[data-scenic="minimal"] .home-hero-console .mc-item,
body[data-scenic="topographic"] .home-hero-console .mc-item { border-color: var(--line); background: var(--surface-1); }

@media (prefers-reduced-motion: reduce) {
  body[data-operating-state="live"] .home-console-beacon i { animation: none; }
}

@container (max-width: 1120px) {
  .home-command-hero { grid-template-columns: minmax(0, 1.1fr) minmax(292px, .9fr); }
  .home-hero-copy { padding: 38px; }
  .home-hero-copy h2 { font-size: clamp(40px, 5vw, 62px); }
  .home-priority-layout { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); }
  .home-priority-layout .stream-overview { grid-template-columns: 1fr; align-items: start; }
  .home-priority-layout .stream-thumbnail { min-height: 190px; max-height: 230px; }
  .home-priority-layout .stream-thumbnail img,
  .home-priority-layout .stream-thumbnail iframe { min-height: 190px; }
}

@container (max-width: 860px) {
  .home-command-hero { grid-template-columns: 1fr; }
  .home-hero-copy { padding: 38px 32px 24px; }
  .home-hero-console { margin: 0 24px 24px; }
  .home-journey-rail { grid-template-columns: 1fr; gap: 12px; }
  .home-journey-rail .trail-progress { grid-column: 1; margin-top: -4px; }
  .home-priority-layout,
  .home-reference-layout { grid-template-columns: 1fr; }
  .home-priority-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .home-operations-layout .health-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 640px) {
  .mission-brief-view { --home-gap: 12px; }
  .home-stage { border-radius: 20px; }
  .home-command-hero { min-height: 0; }
  .home-hero-copy { padding: 30px 22px 20px; }
  .home-hero-copy h2 { margin-block: 14px 12px; font-size: clamp(37px, 11.5vw, 54px); }
  .home-hero-copy .hero-actions { display: grid; margin-top: 23px; }
  .home-hero-copy .hero-actions > button { width: 100%; justify-content: center; }
  .home-hero-console { margin: 0 14px 14px; padding: 18px; }
  .home-console-metrics { grid-template-columns: 1fr; }
  .home-console-metrics > span { grid-template-columns: 72px minmax(0, 1fr); align-items: center; }
  .home-hero-console .mission-clock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-journey-rail { padding: 14px 18px 16px; }
  .home-journey-rail .mission-phase-strip { gap: 5px; }
  .home-journey-rail .mission-phase-strip > span { gap: 5px; }
  .home-journey-rail .mission-phase-strip > span > small { display: none; }
  .home-journey-rail .mission-phase-strip > span > b { font-size: calc(10px * var(--text-scale)); }
  .home-journey-rail .mission-phase-strip > span > .ms { width: 27px; height: 27px; }
  .home-priority-stack,
  .home-operations-layout { grid-template-columns: 1fr; }
  .home-priority-layout .mission-status-card { min-height: 0; }
  .home-priority-layout .stream-overview { grid-template-columns: 1fr; }
  .home-priority-layout .stream-thumbnail { min-height: 170px; }
  .home-priority-layout .stream-thumbnail img,
  .home-priority-layout .stream-thumbnail iframe { min-height: 170px; }
  .home-priority-stack .mission-next-card { min-height: 0; }
  .home-operations-layout .health-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-setup-card .mission-checklist { grid-template-columns: 1fr; }
}