/* Shared landing-inspired palette. Explicit opt-in keeps on-stream artwork
   independent from a viewer's saved interface preference. Load after ui.css. */
:root[data-theme-ui] {
  color-scheme: dark;
  --bg: #111418;
  --panel: #1b2027;
  --shell: #161b22;
  --raise: #252d38;
  --soft: #171d25;
  --text: #e8eaed;
  --dim: #acb4bf;
  --faint: #99a3b1;
  --line: #343e4b;
  --line-hi: #647185;
  --accent: #a8c7fa;
  --accent-dim: #233652;
  --action: #a8c7fa;
  --action-hover: #c3d8fb;
  --action-ink: #112d54;
  --bad: #ffb4ab;
  --bad-text: #ffb4ab;
  --bad-dim: #452925;
  --bad-ink: #3c1511;
  --stop: #b3261e;
  --stop-hover: #8c1d18;
  --warn: #f7cf86;
  --ok: #9bd2ac;
  --green-soft: #1c3028;
  --green-text: #aad2b4;
  --warm-soft: #30271f;
  --disabled: #99a3b1;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23acb4bf'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E");
  --surface: var(--panel);
  --ink: var(--text);
  --paper: var(--bg);
  --rule: var(--line);
  --muted: var(--dim);
  --fg: var(--text);
  --accent-soft: var(--accent-dim);
  --accent-ink: var(--accent);
  --card: var(--panel);
  --edge: var(--line);
  --edge2: var(--line-hi);
  --amber: var(--warm-soft);
  --amber-ink: var(--text);
  --moss: var(--green-soft);
  --moss-ink: var(--green-text);
  --body: Archivo, 'Segoe UI', system-ui, sans-serif;
  --display: var(--body);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius: 18px;
  --radius-small: 10px;
  --space: 8px;
  --checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23112d54'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
}
:root[data-theme-ui][data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #f5f7fa;
  --shell: #f0f4f9;
  --raise: #ffffff;
  --soft: #f5f7fa;
  --text: #202124;
  --dim: #5f6368;
  --faint: #666c75;
  --line: #dce1e8;
  --line-hi: #8793a3;
  --accent: #1967d2;
  --accent-dim: #e8f0fe;
  --action: #1967d2;
  --action-hover: #1558b4;
  --action-ink: #ffffff;
  --bad: #b3261e;
  --bad-text: #b3261e;
  --bad-dim: #fce9e7;
  --bad-ink: #ffffff;
  --warn: #805500;
  --ok: #137333;
  --green-soft: #eef4f0;
  --green-text: #315b40;
  --warm-soft: #fcf4eb;
  --disabled: #666c75;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%235f6368'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E");
  --checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23ffffff'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
}
:root[data-theme-ui] body { background: var(--bg); color: var(--text); }
:root[data-theme-ui] :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
:root[data-theme-ui] ::selection { background: var(--accent-dim); color: var(--text); }
:root[data-theme-ui] :is(button.primary, .btn.primary):not(:disabled) { background: var(--action); border-color: var(--action); color: var(--action-ink); }
:root[data-theme-ui] :is(button.primary, .btn.primary):not(:disabled):hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--action-ink); }
:root[data-theme-ui] :is(input, textarea, select) { accent-color: var(--accent); }
:root[data-theme-ui] :is(input, textarea)::placeholder { color: var(--dim); opacity: 1; }
:root[data-theme-ui] button.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 0 0 auto; min-height: 44px; padding: 9px 13px;
  border: 1px solid var(--line-hi); border-radius: 24px;
  background: transparent; color: var(--text); font: 500 12px/1.4 var(--body);
  letter-spacing: 0; text-transform: none; white-space: nowrap;
  cursor: pointer; touch-action: manipulation;
}
:root[data-theme-ui] button.theme-toggle::before {
  content: ''; width: 26px; height: 16px; border: 1px solid var(--dim); border-radius: 10px;
  background: radial-gradient(circle at 7px 50%, var(--dim) 4px, transparent 4.5px);
}
:root[data-theme-ui] button.theme-toggle[aria-pressed="true"]::before {
  border-color: var(--accent); background: radial-gradient(circle at 17px 50%, var(--action-ink) 4px, transparent 4.5px), var(--accent);
}
:root[data-theme-ui] button.theme-toggle:hover { background-color: var(--soft); color: var(--text); }
:root[data-theme-ui] button.theme-toggle[hidden] { display: none; }

:root[data-theme-ui] :is(.account-page, .legal-page) header nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
@media(max-width:480px) { :root[data-theme-ui] :is(.account-page, .legal-page) header { flex-wrap: wrap; } }

/* Runtime headers keep the preference beside the controls at every width. */
:root[data-theme-ui] :is(.control-topbar, .remote-head, .setup-head, .head, .broadcast-head) { flex-wrap: wrap; }
:root[data-theme-ui] .control-topbar { height: auto; min-height: 56px; }
:root[data-theme-ui] .control-actions { flex-wrap: wrap; flex-shrink: 1; max-width: 100%; }
:root[data-theme-ui] .control-title { flex: 1 1 auto; min-width: 0; }
:root[data-theme-ui] .control-title > div { min-width: 0; }
:root[data-theme-ui] .control-title h1 { overflow-wrap: anywhere; }
:root[data-theme-ui] .remote-head .theme-toggle { margin-left: auto; }
:root[data-theme-ui] .desktop-page #tools { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 24px); }
:root[data-theme-ui] .desktop-page #tools :is(button, .btn) { background: var(--panel); color: var(--text); }
@media(max-width:480px) {
  :root[data-theme-ui] .control-topbar { gap: 8px; padding-block: 8px; }
  :root[data-theme-ui] .control-topbar > .control-actions { margin-left: auto; }
}