/* Themes (Joe 2026-10-16: Ember, Paper, Steel from the six-looks mock).
   An overlay on styles.css, gated by <html data-theme="ember|paper|steel">. No attribute = Classic,
   exactly the look that shipped before. Every rule below is scoped to a theme attribute, so deleting
   this file (or one attribute) restores the old app with no other change.
   All three are flat (Ethan's system): no glass, no blur, no glow. Color is a budget: the accent marks
   what is selected or clickable, red means urgent, amber means watch, and green is only "done". */

html[data-theme="ember"], html[data-theme="ember"][data-business] {
  --bg:#000; --panel:#101010; --panel-2:#181818; --border:#2a2a2a; --border-bright:#3d3d3d;
  --text:#fff; --text-dim:#b8b8b8; --text-faint:#929292;
  --accent:#ff5a47; --accent-bright:#ff7a6b; --accent-dim:rgba(255,90,71,.14); --accent-ink:#190603;
  --good:#22c55e; --warn:#eab308; --bad:#ff5a47;
  --st-urg:#ff7a6b; --st-att:#eab308; --st-ok:#4ade80;
  --ov1:rgba(255,255,255,.03); --ov2:rgba(255,255,255,.06); --ov3:rgba(255,255,255,.1);
  --font-body:Onest,Inter,system-ui,sans-serif; --font-display:Onest,Inter,system-ui,sans-serif; --font-mono:'Geist Mono','JetBrains Mono',ui-monospace,monospace;
  --grad-a:var(--accent); --grad-b:var(--accent); --grad-glow:transparent;
  color-scheme:dark;
}
html[data-theme="paper"], html[data-theme="paper"][data-business] {
  --bg:#f5f4f1; --panel:#fff; --panel-2:#f0efea; --border:#e3e1da; --border-bright:#cdcac0;
  --text:#16161a; --text-dim:#43434b; --text-faint:#6a6a72;
  --accent:#2447e0; --accent-bright:#1d3bc4; --accent-dim:rgba(36,71,224,.09); --accent-ink:#fff;
  --good:#1b8049; --warn:#a8680f; --bad:#cf3a2f;
  --st-urg:#b92f25; --st-att:#8f5708; --st-ok:#1b7a45;
  --ov1:rgba(0,0,0,.025); --ov2:rgba(0,0,0,.05); --ov3:rgba(0,0,0,.09);
  --font-body:Inter,system-ui,sans-serif; --font-display:Inter,system-ui,sans-serif; --font-mono:'Geist Mono','JetBrains Mono',ui-monospace,monospace;
  --grad-a:var(--accent); --grad-b:var(--accent); --grad-glow:transparent;
  color-scheme:light;
}
html[data-theme="steel"], html[data-theme="steel"][data-business] {
  --bg:#0b0d10; --panel:#11151a; --panel-2:#171c22; --border:#222a33; --border-bright:#313c48;
  --text:#e9eef3; --text-dim:#b5c0ca; --text-faint:#8793a1;
  --accent:#8cb4d6; --accent-bright:#a9c9e4; --accent-dim:rgba(140,180,214,.14); --accent-ink:#0a1218;
  --good:#5faa7f; --warn:#d9a93a; --bad:#e5534b;
  --st-urg:#f07a73; --st-att:#e0b14a; --st-ok:#7cc29a;
  --ov1:rgba(255,255,255,.03); --ov2:rgba(255,255,255,.06); --ov3:rgba(255,255,255,.1);
  --font-body:Geist,Inter,system-ui,sans-serif; --font-display:Geist,Inter,system-ui,sans-serif; --font-mono:'Geist Mono','JetBrains Mono',ui-monospace,monospace;
  --grad-a:var(--accent); --grad-b:var(--accent); --grad-glow:transparent;
  color-scheme:dark;
}

/* ── shared flat treatment (all three themes) ── */
html[data-theme] body { font-family: var(--font-body); background: var(--bg); color: var(--text); }
html[data-theme] .bg-mesh { background: var(--bg); background-attachment: scroll; }
html[data-theme] .sidebar, html[data-theme] .glass-sidebar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--border); }
html[data-theme] .side-nav button.active { background: var(--panel-2); color: var(--text); }
html[data-theme] .side-logo .mark { background: var(--accent); }
html[data-theme] .glass-card, html[data-theme] .panel, html[data-theme] .stat-card, html[data-theme] .mini-box, html[data-theme] .media-card, html[data-theme] .call-card, html[data-theme] .mr-batch {
  background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--border); box-shadow: none;
}
html[data-theme] [style*="rgba(17,17,17"] { background: var(--panel) !important; }
html[data-theme] [style*="#ff8a82"] { color: var(--st-urg) !important; }
html[data-theme] .gstat { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: none; backdrop-filter: none; }
html[data-theme] .gstat::before { display: none; }
html[data-theme] .gstat-num { color: var(--text); text-shadow: none; }
html[data-theme] .gstat-label { color: var(--text-dim); }
html[data-theme] .gstat-sub { color: var(--text-faint); }
html[data-theme] .gstat.glow-urgent, html[data-theme] .gstat.glow-attention, html[data-theme] .gstat.glow-done { background: var(--panel); box-shadow: none; border: 1px solid var(--border); }
html[data-theme] .gstat.glow-urgent { border-color: color-mix(in srgb, var(--st-urg) 55%, transparent); }
html[data-theme] .gstat.glow-attention { border-color: color-mix(in srgb, var(--st-att) 50%, transparent); }
html[data-theme] .gstat.glow-urgent .gstat-num { color: var(--st-urg); text-shadow: none; }
html[data-theme] .gstat.glow-attention .gstat-num { color: var(--st-att); text-shadow: none; }
html[data-theme] .gstat.glow-done .gstat-num { color: var(--text); text-shadow: none; }
html[data-theme] .gstat.glow-urgent .gstat-label, html[data-theme] .gstat.glow-attention .gstat-label, html[data-theme] .gstat.glow-done .gstat-label,
html[data-theme] .gstat.glow-urgent .gstat-sub, html[data-theme] .gstat.glow-attention .gstat-sub, html[data-theme] .gstat.glow-done .gstat-sub { color: var(--text-dim); }
html[data-theme] .gstat-sub.warn, html[data-theme] .c-warn, html[data-theme] .cr-hw .own.coach { color: var(--st-att); }
html[data-theme] .gstat-sub.good, html[data-theme] .c-ok { color: var(--st-ok); }
html[data-theme] .c-bad, html[data-theme] .cr-hw .due, html[data-theme] .pb-error { color: var(--st-urg); }
html[data-theme] .gchip { background: var(--ov2); backdrop-filter: none; border-color: var(--border); color: var(--text-dim); }
html[data-theme] .gchip.urgent { border-color: color-mix(in srgb, var(--st-urg) 55%, transparent); color: var(--st-urg); }
html[data-theme] .gchip.attention { border-color: color-mix(in srgb, var(--st-att) 55%, transparent); color: var(--st-att); }
html[data-theme] .gchip.done { border-color: color-mix(in srgb, var(--st-ok) 50%, transparent); color: var(--st-ok); }
html[data-theme] .gchip.neutral { border-color: var(--border-bright); color: var(--text-dim); }
html[data-theme] .gbtn-glass, html[data-theme] .qa, html[data-theme] .gsel, html[data-theme] .gview-tabs {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
html[data-theme] .gbtn-glass:hover, html[data-theme] .qa:hover { border-color: var(--border-bright); }
html[data-theme] .gbtn-glass.primary, html[data-theme] .btn-primary, html[data-theme] .seg button.active, html[data-theme] .gview-tab.active {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: none;
}
html[data-theme] .gview-tab { color: var(--text-dim); }
html[data-theme] .gview-tab.active { color: var(--accent-ink); }
html[data-theme] .grow:hover, html[data-theme] .act-link:hover, html[data-theme] tr.row:hover, html[data-theme] .secnav a:hover, html[data-theme] .cr-lr:hover,
html[data-theme] .pb-session-item:hover, html[data-theme] [role="button"][tabindex]:focus-visible, html[data-theme] .ac-row:hover, html[data-theme] .ac-row:focus-visible { background: var(--ov2); border-color: var(--border-bright); }
html[data-theme] .ac-row.sel { background: var(--ov3); }
html[data-theme] .gtl-item::after, html[data-theme] .cr-bar { background: var(--ov3); }
html[data-theme] .badge-high, html[data-theme] .pct-bad { background: color-mix(in srgb, var(--st-urg) 16%, transparent); color: var(--st-urg); }
html[data-theme] .badge-medium, html[data-theme] .badge-paused, html[data-theme] .pct-warn { background: color-mix(in srgb, var(--st-att) 16%, transparent); color: var(--st-att); }
html[data-theme] .badge-low, html[data-theme] .badge-active, html[data-theme] .pct-good { background: color-mix(in srgb, var(--st-ok) 16%, transparent); color: var(--st-ok); }
html[data-theme] .badge-completed { background: var(--accent-dim); color: var(--accent-bright); }
html[data-theme] .badge-churned { background: var(--ov3); color: var(--text-dim); }
html[data-theme] .badge-nsn { background: var(--accent-dim); color: var(--accent-bright); }
html[data-theme] .dot { background: var(--ov3); }
html[data-theme] .wk-cell.ci { background: color-mix(in srgb, var(--st-ok) 14%, transparent); border-color: color-mix(in srgb, var(--st-ok) 45%, transparent); color: var(--st-ok); }
html[data-theme] .wk-cell.note { background: color-mix(in srgb, var(--st-att) 12%, transparent); border-color: color-mix(in srgb, var(--st-att) 40%, transparent); color: var(--st-att); }
html[data-theme] .wk-cell.due { background: var(--ov2); border-color: var(--border-bright); color: var(--text); }
html[data-theme] .wk-cell.none { background: color-mix(in srgb, var(--st-urg) 8%, transparent); border-color: color-mix(in srgb, var(--st-urg) 28%, transparent); }
html[data-theme] .gap-block, html[data-theme] .missing-data-banner { background: color-mix(in srgb, var(--st-urg) 8%, transparent); border-color: color-mix(in srgb, var(--st-urg) 35%, transparent); }
html[data-theme] .takeaway-banner, html[data-theme] .act-banner { background: color-mix(in srgb, var(--st-att) 9%, var(--panel)); border-color: color-mix(in srgb, var(--st-att) 45%, transparent); }
html[data-theme] .act-banner strong { color: var(--st-att); }
html[data-theme] .btn-danger { color: var(--st-urg); border-color: color-mix(in srgb, var(--st-urg) 40%, transparent); }
html[data-theme] .auth-error, html[data-theme] .toast.err { background: color-mix(in srgb, var(--st-urg) 12%, var(--panel)); color: var(--st-urg); border-color: color-mix(in srgb, var(--st-urg) 45%, transparent); }
html[data-theme] .toast { background: var(--panel); color: var(--text); border-color: var(--border-bright); box-shadow: 0 8px 24px -10px rgba(0,0,0,.35); }
html[data-theme] .toast.ok { color: var(--text); border-color: color-mix(in srgb, var(--st-ok) 55%, transparent); }
html[data-theme] .tour-card, html[data-theme] .help-panel, html[data-theme] .act-dd { background: var(--panel); border-color: var(--border-bright); color: var(--text); box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); }
html[data-theme] .help-msg.assistant { background: var(--ov2); }
html[data-theme] .help-input-row input { background: var(--ov1); color: var(--text); }
html[data-theme] .help-fab { background: var(--accent); color: var(--accent-ink); }
html[data-theme] .pb-bubble-user { background: var(--accent-dim); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
html[data-theme] .overlay { background: rgba(0,0,0,.45); }
html[data-theme] .act-bell { background: var(--panel); color: var(--text); border-color: var(--border-bright); }
html[data-theme] .act-bell .ct { background: var(--bad); color: #fff; border-color: var(--bg); }
html[data-theme] .ac-new { background: var(--accent); color: var(--accent-ink); }
html[data-theme] .ac-dot.new { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
html[data-theme] .ac-day { background: var(--ov1); }
html[data-theme] .ac-person { background: var(--panel); }
html[data-theme] .ac-yes { color: var(--st-ok); }
html[data-theme] .ac-filters select { background: var(--panel); color: var(--text); }
html[data-theme] .rep-dot.missed, html[data-theme] .rep-pill.miss { color: var(--st-urg); border-color: color-mix(in srgb, var(--st-urg) 55%, transparent); }
html[data-theme] .rep-pill.due { color: var(--st-att); border-color: color-mix(in srgb, var(--st-att) 55%, transparent); }
html[data-theme] .src-pill { color: var(--text-dim); border-color: var(--border-bright); }
html[data-theme] input, html[data-theme] select, html[data-theme] textarea { color-scheme: inherit; }
html[data-theme="paper"] .sidebar, html[data-theme="paper"] .glass-sidebar { background: var(--panel); }
html[data-theme="paper"] .glass-card, html[data-theme="paper"] .panel { box-shadow: 0 1px 2px rgba(20,20,30,.04); }
html[data-theme="paper"] .gstat-num { color: var(--text); }
html[data-theme="paper"] .overlay { background: rgba(20,20,30,.28); }

/* ── the theme switcher in the sidebar footer ── */
.theme-sw { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 2px; }
.th-sw { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.th-sw i { width: 10px; height: 10px; border-radius: 50%; display: block; border: 1px solid rgba(128,128,128,.5); }
.th-sw.on { background: var(--panel-2); color: var(--text); border-color: var(--border-bright); }
.th-sw:hover { border-color: var(--border-bright); }
@media (max-width: 860px) { .theme-sw { margin: 0; } }
html[data-theme] .btn-quiet { background: transparent; border-color: transparent; color: var(--text-dim); }
html[data-theme] .btn-quiet:hover { color: var(--text); }
html[data-theme] .btn { background: var(--panel-2); color: var(--text); border-color: var(--border); }
html[data-theme] .btn.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
html[data-theme] .btn.btn-quiet { background: transparent; border-color: transparent; color: var(--text-dim); }
@media (max-width: 860px) { .th-sw { font-size: 0; padding: 5px; gap: 0; } .th-sw i { width: 15px; height: 15px; } }