/*
 * Catch brand token layer.
 *
 * This is the complete, portable design system: color tokens, semantic
 * surface/text/state tokens (light + dark), base typography, shape,
 * elevation, spacing, chart color (categorical/sequential/diverging), and
 * the brand-mark component. Every value here is meant to be consumed as-is
 * by any internal platform — apply the tokens, don't re-derive them.
 *
 * Every system built on this standard must support both light and dark
 * theme — that's why every semantic token below is supplied as a pair.
 *
 * The --app-space-* scale (4/8/12/16/24/32/48/64px) is theme-independent
 * and load-bearing for cards, pills and tabs — see design-system.html
 * section 07 for how they're meant to compose.
 *
 * See README.md for the surface model, theme bootstrap, and known
 * inconsistencies to fix rather than inherit.
 */

:root {
  color-scheme: light;
  --catch-black: #100f13;
  --catch-purple: #9b1dff;
  --catch-purple-dark: #832fdf;
  --catch-purple-deep: #7012c4;
  --catch-purple-light: #b56aff;
  --catch-purple-soft: #f4e7ff;
  --catch-lime: #bff846;
  --catch-magenta: #ee4175;
  --catch-teal: #16dfdf;
  --catch-orange: #ffad05;
  --catch-blue: #1c6bff;
  --catch-grey: #7d7b7e;
  --catch-silver: #b8b7b9;
  --catch-smoke: #e4e4e4;
  --catch-snow: #f6f6f6;
  --catch-white: #ffffff;
  --catch-purple-gradient: linear-gradient(180deg, #9b1dff 0%, #832fdf 58%, #7012c4 100%);

  --app-canvas: var(--catch-snow);
  --app-nav: var(--catch-black);
  --app-workspace: var(--catch-snow);
  --app-surface: #f0eff1;
  --app-surface-raised: var(--catch-white);
  --app-surface-strong: var(--catch-smoke);
  --app-line: var(--catch-smoke);
  --app-line-strong: var(--catch-silver);
  --app-text: var(--catch-black);
  --app-text-secondary: #565459;
  --app-text-muted: #6b696d;
  --app-accent: var(--catch-purple);
  --app-accent-hover: var(--catch-purple-dark);
  --app-accent-soft: var(--catch-purple-soft);
  --app-focus: var(--catch-blue);
  --app-positive: #3f6e00;
  --app-positive-soft: #effbd8;
  --app-warning: #845600;
  --app-warning-soft: #fff4d7;
  --app-critical: #b51d4d;
  --app-critical-hover: #9c1841;
  --app-critical-soft: #fde9ef;
  --app-info: #1554ce;
  --app-info-soft: #eaf0ff;
  --call-inbound: var(--catch-blue);
  --call-outbound: var(--catch-magenta);
  /* Chart categorical series — assign 1..6 in order, never cycled or
   * reordered. Validated (CVD-simulated + normal-vision) as a set; slots
   * 1-3 also clear the stricter all-pairs check scatter/bubble/map charts
   * need. See design-system.html section 11 for the full validation
   * results and what to do past 6 series or past slot 3 on those forms. */
  --app-chart-1: #1c6bff;
  --app-chart-2: #b8790a;
  --app-chart-3: #009999;
  --app-chart-4: #ee4175;
  --app-chart-5: #3f6e00;
  --app-chart-6: #9b1dff;
  --app-chart-sequential-low: #f4e7ff;
  --app-chart-sequential-mid: #9b1dff;
  --app-chart-sequential-high: #7012c4;
  --app-chart-diverging-negative: #b8790a;
  --app-chart-diverging-neutral: #e4e4e4;
  --app-chart-diverging-positive: #1c5cb8;
  --app-shadow: 0 12px 32px rgba(16, 15, 19, .08);
  --app-shadow-menu: 0 20px 50px rgba(16, 15, 19, .16), 0 2px 8px rgba(16, 15, 19, .08);
  --app-backdrop: rgba(16, 15, 19, .62);
  --app-radius-control: 999px;
  --app-radius-panel: 14px;
  --app-radius-input: 10px;
  --app-space-1: 4px;
  --app-space-2: 8px;
  --app-space-3: 12px;
  --app-space-4: 16px;
  --app-space-5: 24px;
  --app-space-6: 32px;
  --app-space-7: 48px;
  --app-space-8: 64px;
  --app-control-height: 40px;
  --app-sidebar-width: 248px;
  --app-topbar-height: 64px;
  /* The nav rail is --app-nav (already dark in both themes) — these
   * three are the fixed light-on-dark treatment for content that sits
   * on it, independent of the app's own light/dark toggle. Not a
   * second theme system: the sidebar simply doesn't participate in the
   * light/dark toggle the way surface content does. */
  --app-nav-text: rgba(255, 255, 255, .92);
  --app-nav-text-muted: rgba(255, 255, 255, .58);
  --app-nav-accent: #c186ff;
  --font-ui: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --app-canvas: var(--catch-black);
  --app-nav: #09080b;
  --app-workspace: #151318;
  --app-surface: #1d1b20;
  --app-surface-raised: #242127;
  --app-surface-strong: #302c34;
  --app-line: #3b3740;
  --app-line-strong: #56505b;
  --app-text: var(--catch-white);
  --app-text-secondary: #d0cdd2;
  --app-text-muted: #aaa5ad;
  --app-accent: #c186ff;
  --app-accent-hover: #d2a9ff;
  --app-accent-soft: #39204f;
  --app-focus: #73c3ff;
  --app-positive: var(--catch-lime);
  --app-positive-soft: #2b3915;
  --app-warning: var(--catch-orange);
  --app-warning-soft: #3d2c0b;
  --app-critical: #ff7aa1;
  --app-critical-hover: #ff97b6;
  --app-critical-soft: #471d2b;
  --app-info: var(--catch-teal);
  --app-info-soft: #10383a;
  --call-inbound: #7598ff;
  --call-outbound: #ff78a0;
  --app-chart-1: #4a7ae8;
  --app-chart-2: #b87804;
  --app-chart-3: #0d9d9d;
  --app-chart-4: #e0567e;
  --app-chart-5: #749f27;
  --app-chart-6: #a05ce8;
  --app-chart-sequential-low: #2d1a42;
  --app-chart-sequential-mid: #9b1dff;
  --app-chart-sequential-high: #c186ff;
  --app-chart-diverging-negative: #b87804;
  --app-chart-diverging-neutral: #302c34;
  --app-chart-diverging-positive: #4a7ae8;
  --app-shadow: 0 14px 38px rgba(0, 0, 0, .28);
  --app-shadow-menu: 0 24px 60px rgba(0, 0, 0, .48);
}

/* Density. .compact shifts the spacing scale itself down one step and
 * drops --app-control-height, so it works two ways at once: applied to
 * one component it's that component's compact tier; applied to an
 * ancestor (a card, a section, <body>) it cascades to every descendant
 * that reads these tokens, with no per-child class needed. See
 * design-system.html section 07 ("Density") for the full explanation,
 * including the one real gotcha: a descendant's own .standard class
 * does not escape an ambient .compact ancestor, because the tokens
 * themselves shifted, not just that one element's declarations. */
.compact {
  --app-space-8: var(--app-space-7);
  --app-space-7: var(--app-space-6);
  --app-space-6: var(--app-space-5);
  --app-space-5: var(--app-space-4);
  --app-space-4: var(--app-space-3);
  --app-space-3: var(--app-space-2);
  --app-space-2: var(--app-space-1);
  --app-control-height: 32px;
}

html, body { background: var(--app-canvas); }
body {
  color: var(--app-text);
  background: var(--app-canvas);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
}
h1, h2, h3, h4 { font-family: var(--font-ui); }
h1 { font-weight: 700; letter-spacing: -.04em; }
h2, h3, h4 { font-weight: 700; }
::selection { color: var(--catch-white); background: var(--catch-purple); }

/* Brand mark — swap the cut, never recolour. Pass a black + white PNG pair
   per lockup (see assets/) as .on-light / .on-dark children. */
.brand-logo { position: relative; display: inline-grid; align-items: center; width: 164px; line-height: 0; }
.brand-logo img { grid-area: 1 / 1; display: block; width: 100%; height: auto; }
.brand-logo-light-art { display: none !important; }
.brand-logo-light .brand-logo-dark-art { display: none; }
.brand-logo-light .brand-logo-light-art { display: block !important; }
.brand-logo-compact { width: 24px; }
:root[data-theme="dark"] .brand-logo-auto .brand-logo-dark-art { display: none; }
:root[data-theme="dark"] .brand-logo-auto .brand-logo-light-art { display: block !important; }
.center .brand-logo { width: 190px; margin: 0 auto 1rem; }
.center > p { text-align: center; }

@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
  color-scheme: dark;
  --app-canvas: var(--catch-black);
  --app-nav: #09080b;
  --app-workspace: #151318;
  --app-surface: #1d1b20;
  --app-surface-raised: #242127;
  --app-surface-strong: #302c34;
  --app-line: #3b3740;
  --app-line-strong: #56505b;
  --app-text: var(--catch-white);
  --app-text-secondary: #d0cdd2;
  --app-text-muted: #aaa5ad;
  --app-accent: #c186ff;
  --app-accent-hover: #d2a9ff;
  --app-accent-soft: #39204f;
  --app-focus: #73c3ff;
  --app-positive: var(--catch-lime);
  --app-positive-soft: #2b3915;
  --app-warning: var(--catch-orange);
  --app-warning-soft: #3d2c0b;
  --app-critical: #ff7aa1;
  --app-critical-hover: #ff97b6;
  --app-critical-soft: #471d2b;
  --app-info: var(--catch-teal);
  --app-info-soft: #10383a;
  --call-inbound: #7598ff;
  --call-outbound: #ff78a0;
  --app-chart-1: #4a7ae8;
  --app-chart-2: #b87804;
  --app-chart-3: #0d9d9d;
  --app-chart-4: #e0567e;
  --app-chart-5: #749f27;
  --app-chart-6: #a05ce8;
  --app-chart-sequential-low: #2d1a42;
  --app-chart-sequential-mid: #9b1dff;
  --app-chart-sequential-high: #c186ff;
  --app-chart-diverging-negative: #b87804;
  --app-chart-diverging-neutral: #302c34;
  --app-chart-diverging-positive: #4a7ae8;
  --app-shadow: 0 14px 38px rgba(0, 0, 0, .28);
  --app-shadow-menu: 0 24px 60px rgba(0, 0, 0, .48);
}
:root:not([data-theme="light"]) .brand-logo-auto .brand-logo-dark-art{ display: none; }
:root:not([data-theme="light"]) .brand-logo-auto .brand-logo-light-art{ display: block !important; }
}

/* ACW Enforcer admin UI, on the Catch design system.
   scripts/build-ui.ts bundles ui/tokens.css (verbatim from catch-design-system, see .catch-design-version)
   ahead of this file, and generates the prefers-color-scheme twin of every :root[data-theme="dark"] rule.
   Everything below reads those tokens. */

/* App-level additions (not Catch tokens, flagged in the port):
   --font-mono   Genesys IDs and code only; the Catch system has one family.
   --acw-on-accent  text/marks on an --app-accent fill. Dark accent is a light purple, where white fails contrast.
   --acw-select-chevron  the Catch Chevron, rotated 90°, in --app-text-muted (a data URI can't read currentColor). */
:root{
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --acw-on-accent:var(--catch-white);
  --acw-select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b696d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 9 12 16 19 9'/%3E%3C/svg%3E");
}
:root[data-theme="dark"]{
  --acw-on-accent:var(--catch-black);
  --acw-select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa5ad' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 9 12 16 19 9'/%3E%3C/svg%3E");
}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{-webkit-font-smoothing:antialiased}
a{color:var(--app-accent)}
a:hover{color:var(--app-accent-hover)}
:focus-visible{outline:2px solid var(--app-focus); outline-offset:2px}
.icon{width:20px; height:20px; flex:none}
[hidden]{display:none !important}

/* Type roles (closed set): Heading 28/700, Subheading 18/600, Body 14/400, Eyebrow 12/700 caps, Label 11/700 caps. */
h1{font-size:1.75rem; font-weight:700; letter-spacing:-.035em; line-height:1.2; margin:0 0 var(--app-space-2)}
h2{font-size:1.125rem; font-weight:600; letter-spacing:-.015em; line-height:1.3; margin:0 0 var(--app-space-2)}
h3{font-size:.75rem; font-weight:700; letter-spacing:.095em; text-transform:uppercase; color:var(--app-text-secondary); margin:var(--app-space-5) 0 var(--app-space-2)}
.label,.menu-label,.kv dt,thead th,.field,.chart .tick{font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.label{display:block; color:var(--app-text-muted); margin-bottom:var(--app-space-2)}
.muted{color:var(--app-text-muted)}
.hint{color:var(--app-text-secondary); margin:0 0 var(--app-space-4); max-width:120ch}
.nowrap{white-space:nowrap}
code{font-family:var(--font-mono); font-variant-ligatures:none; background:var(--app-surface); border:1px solid var(--app-line); border-radius:var(--app-radius-control); padding:0 var(--app-space-2); overflow-wrap:anywhere}
/* Genesys IDs under a name: quiet, and allowed to break anywhere rather than widen the table. */
code.id{background:none; border:0; padding:0; color:var(--app-text-muted); word-break:break-all}
section{margin-top:var(--app-space-7)}
h1 + .hint,h1 + .banner{margin-top:var(--app-space-2)}

/* ---- Navigation shell: rail (always dark) + top bar ---- */
.rail{position:fixed; inset:0 auto 0 0; z-index:30; width:var(--app-sidebar-width); display:flex; flex-direction:column; gap:var(--app-space-6);
  padding:var(--app-space-5) var(--app-space-3); background:var(--app-nav); overflow-y:auto}
.rail-brand{display:flex; flex-direction:column; gap:var(--app-space-3); padding:0 var(--app-space-3); text-decoration:none}
.rail-product{color:var(--app-nav-text-muted); font-size:.75rem; font-weight:700; letter-spacing:.095em; text-transform:uppercase}
.rail-nav{display:flex; flex-direction:column; gap:var(--app-space-1)}
.nav-item{display:flex; align-items:center; gap:var(--app-space-3); padding:var(--app-space-2) var(--app-space-3); border-radius:var(--app-radius-input);
  color:var(--app-nav-text-muted); text-decoration:none; font-weight:600}
.nav-item:hover{color:var(--app-nav-text); background:rgba(255,255,255,.06)}
.nav-item.active{color:var(--app-nav-accent); background:rgba(255,255,255,.08)}
.main{margin-left:var(--app-sidebar-width); min-height:100vh}
.topbar{position:sticky; top:0; z-index:20; height:var(--app-topbar-height); display:flex; align-items:center; justify-content:space-between; gap:var(--app-space-4);
  padding:0 var(--app-space-6); background:var(--app-surface-raised); border-bottom:1px solid var(--app-line)}
.topbar-left,.topbar-right{display:flex; align-items:center; gap:var(--app-space-4); min-width:0}
.menu-btn{display:none !important}
.content{max-width:1600px; padding:var(--app-space-6) var(--app-space-6) var(--app-space-8)}
.loading{display:flex; align-items:center; gap:var(--app-space-2); color:var(--app-text-muted); margin-bottom:var(--app-space-4)}
.spinner{width:16px; height:16px; border-radius:var(--app-radius-control); border:2px solid var(--app-line); border-top-color:var(--app-line-strong); animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* User menu: the top bar's one trigger. */
.user-wrap{position:relative}
.user-trigger{display:flex; align-items:center; gap:var(--app-space-2); min-height:40px; padding:var(--app-space-1) var(--app-space-3) var(--app-space-1) var(--app-space-1);
  border:1px solid transparent; border-radius:var(--app-radius-control); background:none; color:var(--app-text); font:inherit; font-weight:600; cursor:pointer}
.user-trigger:hover{background:var(--app-surface)}
.avatar{width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:var(--app-radius-control); background:var(--app-accent); color:var(--acw-on-accent);
  font-size:.6875rem; font-weight:700; letter-spacing:.06em}
.user-name{max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chevron-down{width:16px; height:16px; color:var(--app-text-muted); transform:rotate(90deg)}
.user-menu{position:absolute; top:calc(100% + var(--app-space-2)); right:0; z-index:40; width:280px; padding:var(--app-space-2);
  background:var(--app-surface-raised); border:1px solid var(--app-line); border-radius:var(--app-radius-panel); box-shadow:var(--app-shadow-menu)}
.menu-header{padding:var(--app-space-2) var(--app-space-3)}
.menu-header strong{display:block; overflow-wrap:anywhere}
.menu-header span{color:var(--app-text-muted)}
.menu-divider{height:1px; margin:var(--app-space-1) 0; background:var(--app-line)}
.menu-label{padding:var(--app-space-2) var(--app-space-3) 0; color:var(--app-text-muted)}
.menu-row{padding:var(--app-space-2) var(--app-space-3)}
.menu-item{display:flex; align-items:center; gap:var(--app-space-2); width:100%; padding:var(--app-space-2) var(--app-space-3); border:0; border-radius:var(--app-radius-input);
  background:none; color:var(--app-text); font:inherit; font-weight:600; text-align:left; text-decoration:none; cursor:pointer}
.menu-item:hover{background:var(--app-surface); color:var(--app-text)}
.menu-item .icon{width:16px; height:16px}
.menu-item.destructive{color:var(--app-critical)}
.menu-item.destructive:hover{background:var(--app-critical-soft); color:var(--app-critical)}

/* Theme switcher: a segmented control of three fixed 32px icon buttons. */
.theme-switcher{display:inline-flex; gap:var(--app-space-1); padding:var(--app-space-1); background:var(--app-surface); border:1px solid var(--app-line); border-radius:var(--app-radius-control)}
.theme-switcher button{display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:var(--app-radius-control); background:transparent; color:var(--app-text-muted); cursor:pointer}
.theme-switcher button:hover{color:var(--app-text)}
.theme-switcher button.active{background:var(--app-accent); color:var(--acw-on-accent)}
.theme-switcher .icon{width:16px; height:16px}

/* ---- Cards, banners ---- */
.card,.kpi,.panel{background:var(--app-surface-raised); border:1px solid var(--app-line); border-radius:var(--app-radius-panel); box-shadow:var(--app-shadow); padding:var(--app-space-5)}
.card p{margin:var(--app-space-2) 0 0}
.grid{display:grid; gap:var(--app-space-5)}
.grid.health{grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-bottom:var(--app-space-5)}
.grid.kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.grid.kpis + section{margin-top:var(--app-space-6)}
.kpi{display:flex; flex-direction:column}
.kpi .value{display:block; margin-top:auto; font-size:1.75rem; font-weight:700; letter-spacing:-.035em; line-height:1.2; font-variant-numeric:tabular-nums}
.kpi.bad .value{color:var(--app-critical)}
.panel{margin-top:var(--app-space-6)}
.panel > :last-child{margin-bottom:0}
details.panel summary{display:flex; align-items:center; gap:var(--app-space-2); cursor:pointer; list-style:none}
details.panel summary::-webkit-details-marker{display:none}
details.panel summary h2{margin:0}
details.panel summary::before{content:""; width:16px; height:16px; flex:none; background:var(--app-text-muted);
  -webkit-mask:url("assets/icons/chevron.svg") center/16px no-repeat; mask:url("assets/icons/chevron.svg") center/16px no-repeat; transition:transform 120ms ease}
details[open].panel summary::before{transform:rotate(90deg)}
.row-between{display:flex; justify-content:space-between; align-items:center; gap:var(--app-space-4)}
.banner{margin-bottom:var(--app-space-5); padding:var(--app-space-4); border-radius:var(--app-radius-panel); background:var(--app-surface-raised);
  border:1px solid var(--app-line); box-shadow:inset 3px 0 var(--app-accent)}
.banner.info{background:var(--app-info-soft); border-color:transparent; box-shadow:inset 3px 0 var(--app-info)}
.banner.warning{background:var(--app-warning-soft); border-color:transparent; box-shadow:inset 3px 0 var(--app-warning)}
.banner.critical{background:var(--app-critical-soft); border-color:transparent; box-shadow:inset 3px 0 var(--app-critical)}
.banner.live{background:var(--app-accent-soft); border-color:transparent; box-shadow:inset 3px 0 var(--app-accent)}
.panel .banner{margin:var(--app-space-4) 0}

/* ---- Pills ---- */
.pill{display:inline-flex; align-items:center; gap:var(--app-space-1); padding:var(--app-space-1) var(--app-space-3); border-radius:var(--app-radius-control);
  font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.4; white-space:nowrap;
  color:var(--app-text-secondary); background:var(--app-surface); border:1px solid var(--app-line)}
.pill.positive,.pill.warning,.pill.critical,.pill.info,.pill.accent{border-color:transparent}
.pill.positive{color:var(--app-positive); background:var(--app-positive-soft)}
.pill.warning{color:var(--app-warning); background:var(--app-warning-soft)}
.pill.critical{color:var(--app-critical); background:var(--app-critical-soft)}
.pill.info{color:var(--app-info); background:var(--app-info-soft)}
.pill.accent{color:var(--app-accent); background:var(--app-accent-soft)}
/* Segmented control = pills in a row, one marked active (queue mode, enforcement days). Fixed 32px. */
.pill-group{display:inline-flex; gap:var(--app-space-2)}
.pill-btn,.day{display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 16px; border-radius:var(--app-radius-control); cursor:pointer;
  font:inherit; font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  color:var(--app-text-secondary); background:var(--app-surface); border:1px solid var(--app-line)}
.pill-btn:hover,.day:hover{color:var(--app-text); border-color:var(--app-line-strong)}
.pill-btn.active,.day.on{border-color:transparent; color:var(--app-accent); background:var(--app-accent-soft)}
.pill-btn.active.off{color:var(--app-text); background:var(--app-surface-strong)}
.pill-btn.active.dry_run{color:var(--app-info); background:var(--app-info-soft)}
.pill-btn.active.enforce{color:var(--acw-on-accent); background:var(--app-accent)}
.pill-group .pill-btn{padding:0 12px}
.day{min-width:56px; padding:0 12px}
.day input{position:absolute; opacity:0; pointer-events:none}
.day:has(input:focus-visible){outline:2px solid var(--app-focus); outline-offset:2px}
.day:has(input:disabled){opacity:.45; cursor:default}

/* ---- Buttons: primary, secondary (default), quiet, destructive; standard 40px / compact 32px ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--app-space-2); min-height:var(--app-control-height); padding:0 var(--app-space-5);
  border:1px solid var(--app-line-strong); border-radius:var(--app-radius-control); background:var(--app-surface-raised); color:var(--app-text);
  font:inherit; font-size:.875rem; font-weight:700; line-height:1.2; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background 120ms ease,border-color 120ms ease,color 120ms ease,transform 120ms ease}
.btn .icon{width:16px; height:16px}
.btn:hover:not(:disabled){color:var(--app-accent-hover); background:var(--app-accent-soft); border-color:var(--app-accent)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none !important}
.btn.standard{min-height:40px; padding:0 24px}
.btn.compact{min-height:32px; padding:0 16px}
.btn.icon-only{width:40px; padding:0}
.btn.icon-only.compact{width:32px}
.btn.primary{color:var(--catch-white); background:var(--app-accent); border-color:transparent}
.btn.primary:hover:not(:disabled){color:var(--catch-white); background:var(--app-accent-hover); border-color:transparent; transform:translateY(-1px)}
:root[data-theme="dark"] .btn.primary,:root[data-theme="dark"] .btn.primary:hover:not(:disabled){background:var(--catch-purple-gradient)}
.btn.quiet{color:var(--app-text-secondary); background:transparent; border-color:transparent}
.btn.quiet:hover:not(:disabled){color:var(--app-accent-hover); background:var(--app-accent-soft); border-color:transparent}
.btn.destructive{color:var(--acw-on-accent); background:var(--app-critical); border-color:transparent}
.btn.destructive:hover:not(:disabled){color:var(--acw-on-accent); background:var(--app-critical-hover); border-color:transparent}
.btn.destructive.outline{color:var(--app-critical); background:transparent; border-color:var(--app-critical)}
.btn.destructive.outline:hover:not(:disabled){color:var(--acw-on-accent); background:var(--app-critical); border-color:var(--app-critical)}
h1 .help-link{margin-left:var(--app-space-2); vertical-align:middle; letter-spacing:normal}

/* ---- Forms: every field is --app-surface, whatever is behind it ---- */
input,select,textarea{font:inherit; font-size:.875rem; color:var(--app-text); background:var(--app-surface); border:1px solid var(--app-line-strong); border-radius:var(--app-radius-input)}
input:not([type=checkbox]):not([type=radio]),select{min-height:var(--app-control-height); padding:0 var(--app-space-3)}
input.compact,select.compact{min-height:32px}
textarea{width:100%; padding:var(--app-space-2) var(--app-space-3); resize:vertical}
select{appearance:none; padding-right:36px; background-image:var(--acw-select-chevron); background-repeat:no-repeat; background-position:right 12px center; background-size:14px}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--app-text-muted)}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--app-focus)}
input:disabled,select:disabled,textarea:disabled{opacity:.45; cursor:not-allowed}
input[type=number]{width:96px}
input[type=time]{width:128px}
input:invalid:not(:placeholder-shown){border-color:var(--app-critical)}
label{color:var(--app-text-secondary)}
.field{display:flex; flex-direction:column; align-items:flex-start; gap:var(--app-space-2); color:var(--app-text-secondary)}
.modal .field input{align-self:stretch}
.field input,.field select{text-transform:none; letter-spacing:normal; font-weight:400}
/* Checkbox / radio: 18px, fixed 4px radius (a deliberate one-off at this size). */
input[type=checkbox],input[type=radio]{appearance:none; flex:none; width:18px; height:18px; margin:0; padding:0; display:inline-grid; place-content:center;
  border:1.5px solid var(--app-line-strong); border-radius:4px; background:var(--app-surface); cursor:pointer; vertical-align:middle}
input[type=radio]{border-radius:var(--app-radius-control)}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--app-accent); border-color:var(--app-accent)}
input[type=checkbox]:checked::after{content:""; width:5px; height:9px; margin-top:-2px; border:solid var(--acw-on-accent); border-width:0 2px 2px 0; transform:rotate(45deg)}
input[type=radio]:checked::after{content:""; width:8px; height:8px; border-radius:var(--app-radius-control); background:var(--acw-on-accent)}
/* Toggle: the track reuses --app-radius-control. */
input[type=checkbox].toggle{width:36px; height:20px; border:0; border-radius:var(--app-radius-control); background:var(--app-line-strong); place-content:center start; padding:2px; transition:background 120ms ease}
input[type=checkbox].toggle::after{content:""; width:16px; height:16px; margin:0; border:0; border-radius:var(--app-radius-control); background:var(--catch-white); transform:none; transition:transform 120ms ease}
input[type=checkbox].toggle:checked{background:var(--app-accent)}
input[type=checkbox].toggle:checked::after{transform:translateX(16px)}
/* Filter bar: ordinary fields in a row, compact. */
form.filters,form.inline{display:flex; flex-wrap:wrap; align-items:end; gap:var(--app-space-4); margin-bottom:var(--app-space-5)}
form.filters label{display:flex; flex-direction:column; gap:var(--app-space-2); font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
form.filters label input,form.filters label select{text-transform:none; letter-spacing:normal; font-weight:400}
form.inline input:not([type=date]){min-width:240px; flex:1}
form.inline label{display:flex; align-items:center; gap:var(--app-space-2)}
.radios{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--app-space-4); margin-bottom:var(--app-space-4)}
.radio{display:grid; grid-template-columns:18px 1fr; gap:var(--app-space-1) var(--app-space-3); align-items:start; padding:var(--app-space-4);
  border:1px solid var(--app-line); border-radius:var(--app-radius-input); background:var(--app-surface-raised); cursor:pointer}
.radio input{grid-row:span 2; margin-top:1px}
.radio.on{border-color:var(--app-accent); background:var(--app-accent-soft)}
.radio b{color:var(--app-text)}
.switch{display:flex; gap:var(--app-space-3); align-items:center; flex-wrap:wrap; margin:var(--app-space-4) 0}
.switch > span{flex:1; min-width:240px}
.switch b{color:var(--app-text)}
.window{display:flex; flex-wrap:wrap; align-items:center; gap:var(--app-space-3); margin:var(--app-space-3) 0}
.days{display:flex; flex-wrap:wrap; gap:var(--app-space-2)}
.form-grid{display:grid; grid-template-columns:minmax(220px,340px) 1fr; gap:var(--app-space-4); align-items:center; margin-top:var(--app-space-5)}
.savebar{position:sticky; bottom:var(--app-space-4); z-index:10; display:flex; align-items:center; gap:var(--app-space-2); justify-content:flex-end; margin-top:var(--app-space-6);
  padding:var(--app-space-4); background:var(--app-surface-raised); border:1px solid var(--app-line); border-radius:var(--app-radius-panel); box-shadow:var(--app-shadow-menu)}
.savebar span{margin-right:auto; color:var(--app-text-muted)}
.savebar.dirty{border-color:var(--app-accent)}
.savebar.dirty span{color:var(--app-accent); font-weight:700}

/* ---- Tables: header row one rung below the table, selection = accent wash + 3px inset ---- */
.table-wrap{background:var(--app-surface-raised); border:1px solid var(--app-line); border-radius:var(--app-radius-panel); box-shadow:var(--app-shadow); overflow-x:auto}
table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
th,td{text-align:left; vertical-align:top; padding:var(--app-space-3) var(--app-space-4); border-bottom:1px solid var(--app-line)}
thead th{background:var(--app-surface); color:var(--app-text-muted); white-space:nowrap}
tbody tr:last-child > *{border-bottom:0}
td .btn.compact{margin:-6px 0}
th.num,td.num{text-align:right}
td.empty{color:var(--app-text-muted); text-align:center; padding:var(--app-space-5)}
table.clickable tbody tr:not(.detail){cursor:pointer}
table.clickable tbody tr:not(.detail):hover > td{background:var(--app-accent-soft)}
tr.selected > td{background:var(--app-accent-soft)}
tr.selected > td:first-child,tr.detail > td:first-child{box-shadow:inset 3px 0 var(--app-accent)}
tr.detail > td{background:var(--app-surface-raised); padding:var(--app-space-5)}
/* Record detail facts: label/value grid. */
.kv{display:grid; grid-template-columns:180px 1fr; gap:var(--app-space-3) var(--app-space-4); margin:0}
.kv dt{color:var(--app-text-muted); padding-top:2px}
.kv dd{margin:0}

/* ---- Chart: series slots 1 and 2, gridlines --app-line, axis --app-line-strong ---- */
.chart-wrap{position:relative}
.chart{width:100%; height:auto; display:block}
.chart .grid{stroke:var(--app-line)}
.chart .axis{stroke:var(--app-line-strong)}
.chart .tick{fill:var(--app-text-muted); font-family:var(--font-ui)}
.chart .hit{fill:transparent}
.chart .day.hover .hit{fill:var(--app-surface)}
.chart .bar-1{fill:var(--app-chart-1)}
.chart .bar-2{fill:var(--app-chart-2)}
.chart-tip{position:absolute; z-index:5; transform:translate(-50%,calc(-100% - 8px)); display:flex; flex-direction:column; gap:var(--app-space-1); padding:var(--app-space-3) var(--app-space-4);
  background:var(--app-surface-raised); border:1px solid var(--app-line); border-radius:var(--app-radius-input); box-shadow:var(--app-shadow-menu); pointer-events:none; white-space:nowrap}
.chart-tip.below{transform:translate(-50%,8px)}
.chart-tip.from-left{transform:translate(-16px,calc(-100% - 8px))}
.chart-tip.from-right{transform:translate(calc(-100% + 16px),calc(-100% - 8px))}
.chart-tip.below.from-left{transform:translate(-16px,8px)}
.chart-tip.below.from-right{transform:translate(calc(-100% + 16px),8px)}
.chart-tip span{display:flex; align-items:center; gap:var(--app-space-2); color:var(--app-text-secondary)}
.legend{display:flex; flex-wrap:wrap; gap:var(--app-space-4); margin:0 0 var(--app-space-3); font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--app-text-secondary)}
.legend span{display:inline-flex; align-items:center; gap:var(--app-space-2)}
.sw{display:inline-block; width:10px; height:10px; border-radius:var(--app-radius-control)}
.sw.s1{background:var(--app-chart-1)}
.sw.s2{background:var(--app-chart-2)}

/* ---- Overlays: dialog, toasts, drawer scrim ---- */
.modal-backdrop{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:var(--app-space-4); background:var(--app-backdrop)}
.modal{width:100%; max-width:520px; padding:var(--app-space-5); background:var(--app-surface-raised); border-radius:18px; box-shadow:var(--app-shadow-menu)}
.modal p{color:var(--app-text-secondary)}
.modal .field{margin:var(--app-space-4) 0}
.modal .actions{display:flex; justify-content:flex-end; gap:var(--app-space-2); margin-top:var(--app-space-5)}
.toasts{position:fixed; right:var(--app-space-5); bottom:var(--app-space-5); z-index:60; display:flex; flex-direction:column; gap:var(--app-space-2)}
.toast{max-width:420px; padding:var(--app-space-3) var(--app-space-4); color:var(--app-text); background:var(--app-surface-raised); border:1px solid var(--app-line);
  border-radius:var(--app-radius-panel); box-shadow:var(--app-shadow-menu),inset 3px 0 var(--app-positive)}
.toast.critical{box-shadow:var(--app-shadow-menu),inset 3px 0 var(--app-critical)}
.toast.info{box-shadow:var(--app-shadow-menu),inset 3px 0 var(--app-info)}
.scrim{position:fixed; inset:0; z-index:25; background:var(--app-backdrop)}
.center{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--app-space-4)}
.card.signin{max-width:420px; text-align:center; padding:var(--app-space-6)}
.card.signin .btn{margin-top:var(--app-space-2)}

/* ---- In-app guide ---- */
.guide{display:grid; grid-template-columns:minmax(200px,240px) minmax(0,1fr); gap:var(--app-space-6); align-items:start}
.guide-toc{position:sticky; top:calc(var(--app-topbar-height) + var(--app-space-5)); display:flex; flex-direction:column; gap:var(--app-space-4);
  max-height:calc(100vh - var(--app-topbar-height) - var(--app-space-6)); overflow:auto}
.guide-toc input{width:100%}
.guide-toc nav{display:flex; flex-direction:column; gap:var(--app-space-1)}
.guide-toc nav a{padding:var(--app-space-2) var(--app-space-3); border-radius:var(--app-radius-input); color:var(--app-text-secondary); text-decoration:none}
.guide-toc nav a:hover{color:var(--app-text); background:var(--app-surface-strong)}
.guide-toc nav a.active{color:var(--app-accent); background:var(--app-accent-soft); font-weight:600}
.guide-toc .btn{align-self:flex-start}
/* One measure for everything in the body (text, tables, steps), so edges line up. */
.guide-body{max-width:1120px; container-type:inline-size}
.guide-section{margin-top:var(--app-space-7); scroll-margin-top:calc(var(--app-topbar-height) + var(--app-space-5))}
.guide-section h2{margin-bottom:var(--app-space-3)}
.guide-section .table-wrap{margin:var(--app-space-4) 0}
.guide-section .anchor{color:var(--app-line-strong); text-decoration:none; margin-left:var(--app-space-1)}
.guide-section h2:hover .anchor{color:var(--app-accent)}
.lead{color:var(--app-text)}
b.ui{display:inline-block; padding:0 var(--app-space-2); background:var(--app-surface); border:1px solid var(--app-line); border-radius:var(--app-radius-control); font-weight:700; white-space:nowrap}
ol.steps{counter-reset:step; list-style:none; padding:0; margin:var(--app-space-4) 0}
ol.steps > li{counter-increment:step; position:relative; padding-left:40px; margin:0 0 var(--app-space-4)}
ol.steps > li::before{content:counter(step); position:absolute; left:0; top:-1px; width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--app-radius-control); background:var(--app-accent-soft); color:var(--app-accent); font-size:.6875rem; font-weight:700}
/* How it works: numbered step cards on a grid (1, 2 or 3 per row by the body's width), no trailing arrows. */
ol.flow{list-style:none; padding:0; margin:var(--app-space-5) 0; counter-reset:flow; display:grid; grid-template-columns:1fr; gap:var(--app-space-4)}
@container (min-width:520px){ol.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:760px){ol.flow{grid-template-columns:repeat(3,minmax(0,1fr))}}
ol.flow > li{counter-increment:flow; padding:var(--app-space-4);
  background:var(--app-surface-raised); border:1px solid var(--app-line); border-radius:var(--app-radius-panel); box-shadow:var(--app-shadow)}
ol.flow > li::before{content:"Step " counter(flow); display:block; margin-bottom:var(--app-space-2); color:var(--app-text-muted); font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
ol.flow > li.accent{border-color:var(--app-accent); background:var(--app-accent-soft)}
ol.flow > li.accent::before{color:var(--app-accent)}
ol.flow code{white-space:nowrap; overflow-wrap:normal}
.callout{margin:var(--app-space-4) 0; padding:var(--app-space-4); border-radius:var(--app-radius-panel); background:var(--app-surface-raised); border:1px solid var(--app-line); box-shadow:inset 3px 0 var(--app-accent)}
.callout.info{background:var(--app-info-soft); border-color:transparent; box-shadow:inset 3px 0 var(--app-info)}
.faq dt{font-weight:700; margin-top:var(--app-space-4)}
.faq dd{margin:var(--app-space-1) 0 0; color:var(--app-text-secondary)}

/* Per-queue overrides editor */
.overrides{display:grid; gap:var(--app-space-5)}
.overrides h3{margin-top:0}
.overrides .actions{display:flex; justify-content:flex-end; gap:var(--app-space-2)}

/* ---- Responsive: 1024px (rail becomes a drawer) and 640px (single column) ---- */
@media (max-width:1023px){
  .rail{transform:translateX(-100%); transition:transform 160ms ease; box-shadow:var(--app-shadow-menu)}
  .rail.open{transform:none}
  .main{margin-left:0}
  .menu-btn{display:inline-flex !important}
}
@media (min-width:1024px){
  .scrim{display:none}
}
@media (max-width:639px){
  .topbar{padding:0 var(--app-space-4); gap:var(--app-space-2)}
  .topbar-right{gap:var(--app-space-2)}
  .mode-pill,.user-name,.user-trigger .chevron-down{display:none}
  .user-trigger{padding:var(--app-space-1)}
  .content{padding:var(--app-space-5) var(--app-space-4) var(--app-space-7)}
  .form-grid,.kv,.guide{grid-template-columns:1fr}
  .guide-toc{position:static; max-height:none}
  .toasts{left:var(--app-space-4); right:var(--app-space-4)}
  form.inline input:not([type=date]){min-width:0}
  .table-wrap td:first-child{min-width:168px}
}

@media print{
  .rail,.topbar,.guide-toc,.toasts,.banner,.help-link,.anchor,.scrim{display:none !important}
  .main{margin-left:0}
  .content{padding:0; max-width:none}
  .guide{display:block}
  .guide-section{break-inside:avoid-page}
  .table-wrap,.card,.panel,ol.flow > li{box-shadow:none}
}

@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
  --acw-on-accent:var(--catch-black);
  --acw-select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa5ad' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 9 12 16 19 9'/%3E%3C/svg%3E");
}
:root:not([data-theme="light"]) .btn.primary,:root:not([data-theme="light"]) .btn.primary:hover:not(:disabled){background:var(--catch-purple-gradient)}
}