html,body{margin:0;height:100%;overflow:hidden}

  /* ---- Semantic surface layer: one set of tokens, both themes ---- */
  :root{
    --page:#f3f4f6;                 /* content canvas behind cards */
    --surface:var(--card);          /* big cards (white) */
    --surface-2:#ffffff;            /* nested cards / list rows */
    --hover:#f4f4f5;
    --kv-line:#e4e4e7;
  }
  .dark{
    --page:var(--background);
    --surface:var(--card);
    --surface-2:#17171a;
    --hover:#26262b;
    --kv-line:rgba(255,255,255,0.08);
  }

  /* Background helpers — class-based so var() re-resolves on theme toggle
     (React-set inline var backgrounds do not re-resolve on a class flip). */
  .bg-page{background:var(--page)}
  .bg-surface{background:var(--surface)}
  .bg-surface-2{background:var(--surface-2)}
  .bg-popover{background:var(--popover)}
  .req-row{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
    display:flex;flex-direction:row;align-items:center;cursor:pointer;transition:border-color .12s}
  .req-row:hover{background:var(--hover)}

  /* ---- Segmented profile tabs ---- */
  .seg{display:inline-flex;gap:2px;padding:4px;border-radius:var(--radius-lg);background:var(--muted);border:1px solid var(--border)}
  .dark .seg{background:color-mix(in oklab, var(--background) 55%, var(--card))}
  .seg-tab{padding:7px 13px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:var(--muted-foreground);
    border:none;background:transparent;cursor:pointer;white-space:nowrap;transition:color .12s}
  .seg-tab:hover{color:var(--foreground)}
  .seg-tab.active{background:var(--surface);color:var(--foreground);box-shadow:var(--shadow-sm)}
  .dark .seg-tab.active{background:var(--secondary);box-shadow:0 1px 2px rgb(0 0 0 / .4)}

  /* ---- Action Required badge (theme-aware) ---- */
  .attn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;white-space:nowrap;
    padding:1px 8px;border-radius:6px;background:#fef3c7;border:1px solid #fcd34d;color:#b45309}
  .attn.sm{padding:0 6px;font-size:11px}
  .dark .attn{background:color-mix(in oklab,#f59e0b 18%,transparent);border-color:color-mix(in oklab,#f59e0b 45%,transparent);color:#fbbf24}

  /* theme switch */
  .theme-switch{position:fixed;top:16px;right:16px;z-index:200;width:64px;height:32px;border-radius:999px;
    border:1px solid rgba(0,0,0,.15);background:#e8e4dc;cursor:pointer;padding:0;display:flex;align-items:center;
    justify-content:space-between;box-shadow:0 2px 12px rgba(0,0,0,.18)}
  .theme-switch.on{background:#2a2722;border-color:rgba(255,255,255,.16)}
  .theme-switch i{width:18px;height:18px;display:flex;align-items:center;justify-content:center;z-index:2;margin:0 8px;position:relative}
  .theme-switch .ts-sun{color:#b8860b}
  .theme-switch .ts-moon{color:#9aa0aa}
  .theme-switch.on .ts-sun{color:#6b6256}
  .theme-switch.on .ts-moon{color:#e9d79c}
  .theme-switch .ts-knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;z-index:1;
    box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .2s cubic-bezier(.2,.7,.3,1),background .2s}
  .theme-switch.on .ts-knob{transform:translateX(32px);background:#16130f}

  /* ---- Workforce (Zendesk WFM) — plan §2a: kit.css stays untouched (trip-views renders a real
     avatar badge everywhere else); this scoped override reproduces the source's deliberate
     avatar-less look (commit 46bb2b7) for just the Workforce screens, wrapped in .wfm-root by
     prototype-app.jsx's renderMain(). */
  .wfm-root .avatar{display:none}

  /* The WFM components build clickable rows/cells as bare <button style="background:none;border:none">
     without setting color, so they fall back to the UA stylesheet's `buttontext` (black). The source
     app is light-only (no theme toggle), so this never showed there — inside trip-views' dark theme
     it renders ~174 labels per Schedule screen as black-on-black (agent names, shift chips, the
     On Shift Now rows). Inheriting restores the themed foreground; buttons that set their own inline
     color (shift-type tints) still win over this rule. */
  .wfm-root button{color:inherit}

  /* Print block, ported verbatim from zendesk-schedules/"WFM Shifts Export.html" (its <style>
     block, not a kit.css/colors_and_type.css rule) — hides chrome so "Export as PDF"/"Print
     report" (WorkforceHeaderActions, workforce-section.jsx) print just the report content.
     Untouched selectors match the source exactly; applies to any page that prints (nothing else
     in trip-views has a print workflow today, so this is a no-op elsewhere). */
  @media print {
    aside, header, .toast, .hide-print, .tabs-pill { display: none !important; }
    main { overflow: visible !important; background: #fff !important; padding: 0 !important; }
    .card { break-inside: avoid; box-shadow: none !important; }
    @page { margin: 14mm; }
  }