/* =============================================================================
   DVO Helpdesk — REDESIGN PREVIEW LAYER (test build)
   -----------------------------------------------------------------------------
   Loaded AFTER styles.css. Every rule here only applies while
   <html data-ui="v2"> is set (by /js/ui-preview.js), so switching it off gives
   the current look back instantly — no reload, nothing else changes.
     - Tokens: new light/dark palette (WCAG AA verified) + the old token names
       re-pointed at it, so the existing 2,600-line stylesheet re-skins itself.
     - Overrides: header, login, buttons, inputs, tabs, chips, bubbles, toasts.
     - Fonts: Inter (self-hosted, /fonts/Inter.woff2, SIL OFL) — CSP-safe.
   Generated from the design files in /design (tokens.css, components.css).
   Remove this file + ui-preview.js to roll back completely.
   ============================================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Inter.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ------------------------------------------------------------------ */
html:root[data-ui="v2"] {
  color-scheme: light;
  --surface-sunken: #dadee6;
  --surface-base: #e6e9ef;
  --surface-raised: #f1f3f7;
  --surface-overlay: #f7f8fb;
  --text-primary: #1a202c;
  --text-secondary: #3f4756;
  --text-tertiary: #555d6c;
  --text-disabled: #8a919e;
  --text-on-brand: #ffffff;
  --border-subtle: #cfd4dd;
  --border-card: #d3d8e0;
  --border-control: #767e8c;
  --brand: #7c3aed;
  --brand-hover: #6d28d9;
  --brand-active: #5b21b6;
  --brand-text: #6025c9;
  --brand-tint: #ece4fd;
  --brand-tint-text: #5b21b6;
  --focus-ring: #7c3aed;
  --danger: #c81e1e;
  --danger-hover: #a51818;
  --danger-text: #b01a1a;
  --success: #15803d;
  --success-hover: #116932;
  --shadow-dark: #b8bcc2;
  --shadow-light: #ffffff;
  --status-open-bg: #dbe6fd;
  --status-open-fg: #1d4aa8;
  --status-progress-bg: #ece4fd;
  --status-progress-fg: #5b21b6;
  --status-hold-bg: #e0e3e9;
  --status-hold-fg: #454d5b;
  --status-resolved-bg: #d3f0de;
  --status-resolved-fg: #14612f;
  --status-closed-bg: #dde9e2;
  --status-closed-fg: #1f5136;
  --priority-low-bg: #d3f0de;
  --priority-low-fg: #14612f;
  --priority-medium-bg: #faefc8;
  --priority-medium-fg: #7a4509;
  --priority-high-bg: #fde2cf;
  --priority-high-fg: #8f3010;
  --priority-critical-bg: #fbdddd;
  --priority-critical-fg: #a61b1b;
  --sla-paused-bg: #ece4fd;
  --sla-paused-fg: #5b21b6;
  --status-open-solid: #2563eb;
  --status-progress-solid: #7c3aed;
  --status-hold-solid: #6b7280;
  --status-resolved-solid: #15803d;
  --status-closed-solid: #2f7a50;
  --priority-low-solid: #15803d;
  --priority-medium-solid: #a16207;
  --priority-high-solid: #c2410c;
  --priority-critical-solid: #dc2626;
  --shadow-overlay: 0 16px 40px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
  --scrim: rgba(17, 24, 39, 0.45);
  --card-border: 1px solid transparent;
  --control-border: 1px solid var(--border-control);
}
@media (prefers-color-scheme: dark) {
  html:root[data-ui="v2"]:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-sunken: #1c2330;
    --surface-base: #252d3a;
    --surface-raised: #2f3846;
    --surface-overlay: #363f4e;
    --text-primary: #f3f4f6;
    --text-secondary: #d4d8df;
    --text-tertiary: #aab2bf;
    --text-disabled: #6b7482;
    --text-on-brand: #ffffff;
    --border-subtle: #3c4555;
    --border-card: #4f5a6c;
    --border-control: #848ea0;
    --brand: #7c3aed;
    --brand-hover: #6d28d9;
    --brand-active: #5b21b6;
    --brand-text: #c4b5fd;
    --brand-tint: #3a2d63;
    --brand-tint-text: #ddd3fe;
    --focus-ring: #c4a5fd;
    --danger: #c81e1e;
    --danger-hover: #dc2626;
    --danger-text: #fca5a5;
    --success: #15803d;
    --success-hover: #116932;
    --shadow-dark: #141a24;
    --shadow-light: #3d4757;
    --status-open-bg: #1f3558;
    --status-open-fg: #b3cdff;
    --status-progress-bg: #3a2d63;
    --status-progress-fg: #ddd3fe;
    --status-hold-bg: #3a4352;
    --status-hold-fg: #dde1e7;
    --status-resolved-bg: #173a28;
    --status-resolved-fg: #94e3b4;
    --status-closed-bg: #22352c;
    --status-closed-fg: #b3d9c3;
    --priority-low-bg: #173a28;
    --priority-low-fg: #94e3b4;
    --priority-medium-bg: #43350e;
    --priority-medium-fg: #f5d27a;
    --priority-high-bg: #4a2916;
    --priority-high-fg: #fdba8c;
    --priority-critical-bg: #4d1f1f;
    --priority-critical-fg: #fcb0b0;
    --sla-paused-bg: #3a2d63;
    --sla-paused-fg: #ddd3fe;
    --status-open-solid: #60a5fa;
    --status-progress-solid: #a78bfa;
    --status-hold-solid: #9aa3b2;
    --status-resolved-solid: #4ade80;
    --status-closed-solid: #7cc49c;
    --priority-low-solid: #4ade80;
    --priority-medium-solid: #fbbf24;
    --priority-high-solid: #fb923c;
    --priority-critical-solid: #f87171;
    --shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
    --scrim: rgba(0, 0, 0, 0.6);
    --card-border: 1px solid var(--border-card);
    --control-border: 1px solid var(--border-control);
  }
}
html:root[data-ui="v2"][data-theme="dark"] {
  color-scheme: dark;
  --surface-sunken: #1c2330;
  --surface-base: #252d3a;
  --surface-raised: #2f3846;
  --surface-overlay: #363f4e;
  --text-primary: #f3f4f6;
  --text-secondary: #d4d8df;
  --text-tertiary: #aab2bf;
  --text-disabled: #6b7482;
  --text-on-brand: #ffffff;
  --border-subtle: #3c4555;
  --border-card: #4f5a6c;
  --border-control: #848ea0;
  --brand: #7c3aed;
  --brand-hover: #6d28d9;
  --brand-active: #5b21b6;
  --brand-text: #c4b5fd;
  --brand-tint: #3a2d63;
  --brand-tint-text: #ddd3fe;
  --focus-ring: #c4a5fd;
  --danger: #c81e1e;
  --danger-hover: #dc2626;
  --danger-text: #fca5a5;
  --success: #15803d;
  --success-hover: #116932;
  --shadow-dark: #141a24;
  --shadow-light: #3d4757;
  --status-open-bg: #1f3558;
  --status-open-fg: #b3cdff;
  --status-progress-bg: #3a2d63;
  --status-progress-fg: #ddd3fe;
  --status-hold-bg: #3a4352;
  --status-hold-fg: #dde1e7;
  --status-resolved-bg: #173a28;
  --status-resolved-fg: #94e3b4;
  --status-closed-bg: #22352c;
  --status-closed-fg: #b3d9c3;
  --priority-low-bg: #173a28;
  --priority-low-fg: #94e3b4;
  --priority-medium-bg: #43350e;
  --priority-medium-fg: #f5d27a;
  --priority-high-bg: #4a2916;
  --priority-high-fg: #fdba8c;
  --priority-critical-bg: #4d1f1f;
  --priority-critical-fg: #fcb0b0;
  --sla-paused-bg: #3a2d63;
  --sla-paused-fg: #ddd3fe;
  --status-open-solid: #60a5fa;
  --status-progress-solid: #a78bfa;
  --status-hold-solid: #9aa3b2;
  --status-resolved-solid: #4ade80;
  --status-closed-solid: #7cc49c;
  --priority-low-solid: #4ade80;
  --priority-medium-solid: #fbbf24;
  --priority-high-solid: #fb923c;
  --priority-critical-solid: #f87171;
  --shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --scrim: rgba(0, 0, 0, 0.6);
  --card-border: 1px solid var(--border-card);
  --control-border: 1px solid var(--border-control);
}
html:root[data-ui="v2"] {

  /* Type — Inter (Google Fonts: wght 400;500;600;700) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; /* ticket ids only */
  --text-xs: 12px;   --leading-xs: 16px;   /* badges, timestamps, table headers */
  --text-sm: 14px;   --leading-sm: 20px;   /* body, rows, inputs (app default) */
  --text-md: 16px;   --leading-md: 24px;   /* long-form message text, login */
  --text-lg: 18px;   --leading-lg: 28px;   /* card titles */
  --text-xl: 20px;   --leading-xl: 28px;   /* section titles, ticket subject on mobile */
  --text-2xl: 24px;  --leading-2xl: 32px;  /* page titles */
  --text-3xl: 30px;  --leading-3xl: 36px;  /* ticket subject (desktop), big stats */
  --text-4xl: 36px;  --leading-4xl: 40px;  /* login headline */
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --tracking-tight: -0.025em;  /* headings 20px+ */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;     /* UPPERCASE micro-labels */

  /* Spacing — 4px grid */
  --space-0: 0;     --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px;

  /* Radii */
  --radius-xs: 6px;    /* checkboxes, tiny chips */
  --radius-sm: 8px;    /* badges, menu items */
  --radius-md: 12px;   /* buttons, inputs, selects, tabs */
  --radius-lg: 16px;   /* menus, toasts, table wrappers */
  --radius-xl: 24px;   /* cards, modal, drawer */
  --radius-pill: 9999px;
  --radius-round: 50%;

  /* Motion — one easing, five durations */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-instant: 80ms;   /* press feedback */
  --dur-fast: 150ms;     /* hover, focus, colour changes */
  --dur-base: 220ms;     /* menus, tab indicator, row reveal */
  --dur-slow: 300ms;     /* modal, drawer, toast */
  --dur-page: 450ms;     /* page-load stagger (total budget) */

  /* Layers */
  --z-sticky: 10; --z-dropdown: 50; --z-drawer: 80; --z-modal: 100; --z-toast: 200;

  /* Focus ring (both modes; colour comes from --focus-ring) */
  --ring: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--focus-ring);
  --ring: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--focus-ring);
  /* Gradients — the template's 145° soft-plastic fill */
  --surface-raised-grad: linear-gradient(145deg, var(--surface-raised), var(--surface-base));
  --surface-sunken-grad: linear-gradient(145deg, var(--surface-sunken), var(--surface-base));
  --brand-grad: linear-gradient(145deg, var(--brand), var(--brand-hover));

  /* SLA aliases — keep the STYLES.md meanings */
  --sla-ontrack-bg: var(--priority-low-bg);       --sla-ontrack-fg: var(--priority-low-fg);
  --sla-warning-bg: var(--priority-medium-bg);    --sla-warning-fg: var(--priority-medium-fg);
  --sla-breached-bg: var(--priority-critical-bg); --sla-breached-fg: var(--priority-critical-fg);
  --sla-met-bg: var(--status-hold-bg);            --sla-met-fg: var(--status-hold-fg);

  /* Shadows: raised / inset / flat */
  --shadow-raised:    8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
  --shadow-raised-sm: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
  --shadow-raised-xs: 2px 2px 4px var(--shadow-dark), -2px -2px 4px var(--shadow-light);
  --shadow-inset:     inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
  --shadow-inset-sm:  inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light);
  --shadow-flat:      none;
  /* old styles.css token  ->  new design token */
  --bg: var(--surface-base); --surface: var(--surface-raised); --press: var(--surface-sunken);
  --text: var(--text-primary); --muted: var(--text-secondary); --faint: var(--text-tertiary); --line: var(--border-subtle);
  --purple: var(--brand-text); --purple-2: var(--brand-hover); --purple-bg: var(--brand-tint);
  --blue: var(--status-open-solid); --blue-2: var(--status-open-fg); --blue-bg: var(--status-open-bg);
  --blue-tint: color-mix(in srgb, var(--status-open-solid) 6%, transparent);
  --green: var(--status-resolved-solid); --green-2: var(--status-resolved-fg); --green-deep: var(--status-resolved-fg); --green-bg: var(--status-resolved-bg);
  --name: var(--status-resolved-fg);
  --crit: var(--danger-text);
  --raise: var(--shadow-raised); --raise-sm: var(--shadow-raised-sm); --inset: var(--shadow-inset-sm);
  --cta: var(--brand-grad);
  --open-bg: var(--status-open-bg); --open-fg: var(--status-open-fg);
  --prog-bg: var(--status-progress-bg); --prog-fg: var(--status-progress-fg);
  --hold-bg: var(--status-hold-bg); --hold-fg: var(--status-hold-fg);
  --resolved-bg: var(--status-resolved-bg); --resolved-fg: var(--status-resolved-fg);
  --closed-bg: var(--status-closed-bg); --closed-fg: var(--status-closed-fg);
  --low-bg: var(--priority-low-bg); --low-fg: var(--priority-low-fg);
  --med-bg: var(--priority-medium-bg); --med-fg: var(--priority-medium-fg);
  --high-bg: var(--priority-high-bg); --high-fg: var(--priority-high-fg);
  --crit-bg: var(--priority-critical-bg); --crit-fg: var(--priority-critical-fg);
  --amber-bg: var(--priority-medium-bg); --amber-fg: var(--priority-medium-fg); --amber-accent: var(--priority-medium-solid);
  --info-bg: var(--status-open-bg); --info-fg: var(--status-open-fg);
  --note-bg: var(--priority-medium-bg);
}
@media (prefers-reduced-motion: reduce) {
  html:root[data-ui="v2"] { --dur-instant: 0.01ms; --dur-fast: 0.01ms; --dur-base: 0.01ms; --dur-slow: 0.01ms; --dur-page: 0.01ms; }
}

/* ---- Fonts: every rule that named Plus Jakarta Sans / Hanken Grotesk now uses Inter (generated) */
:root[data-ui="v2"] body { font-family: var(--font-sans); }
:root[data-ui="v2"] header h1 .wm-tag { font-family: var(--font-sans); }
:root[data-ui="v2"] header h1 { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .notif-head { font-family: var(--font-sans); }
:root[data-ui="v2"] .card h2 { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] h1, :root[data-ui="v2"] h2, :root[data-ui="v2"] h3 { font-family: var(--font-sans); }
:root[data-ui="v2"] .task-title { font-family: var(--font-sans); }
:root[data-ui="v2"] .auth-wm { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .auth-headline { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .pf-wm { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .stat-number { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .t-subject { font-family: var(--font-sans); }
:root[data-ui="v2"] .detail-subject { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .ai-summary-head { font-family: var(--font-sans); }
:root[data-ui="v2"] .tpl-group-head { font-family: var(--font-sans); }
:root[data-ui="v2"] .bar-count { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .bill-total-val { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .bill-company-name { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .bill-stat-val { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .bill-group-name { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .kb-card-title { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .contact-name-text { font-family: var(--font-sans); }
:root[data-ui="v2"] .collapse-card > summary { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .dvo-hero-title { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .list-head h2 { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .views-head h3 { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .hub-row-title { font-family: var(--font-sans); }
:root[data-ui="v2"] .co-card-name { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .co-stat strong { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .ct-name a { font-family: var(--font-sans); }
:root[data-ui="v2"] .lc-kpi-n { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .lc-change-head strong { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .lc-score-pill { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .lc-att-top strong { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .lc-site-name { font-family: var(--font-sans); }
:root[data-ui="v2"] .lc-ring text { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .site-pc-title { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .lc-metric-v { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .lc-h3 { font-family: var(--font-sans); font-weight: 700; }
:root[data-ui="v2"] .cp-sev { font-family: var(--font-sans); font-weight: 700; }

/* ---- Base ----------------------------------------------------------------- */
:root[data-ui="v2"] body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
:where(:root[data-ui="v2"]) h1, :where(:root[data-ui="v2"]) h2, :where(:root[data-ui="v2"]) h3 { font-family: var(--font-sans); font-weight: 600; letter-spacing: var(--tracking-tight); }
:where(:root[data-ui="v2"]) a { color: var(--brand-text); }
:root[data-ui="v2"] .muted { color: var(--text-secondary); }
:root[data-ui="v2"] ::selection { background: var(--brand-tint); color: var(--brand-tint-text); }

/* One focus ring everywhere (keyboard only). Outline, so it never fights the neumorphic box-shadows. */
:root[data-ui="v2"] :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
:root[data-ui="v2"] input:focus, :root[data-ui="v2"] textarea:focus, :root[data-ui="v2"] select:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* ---- Header: light raised top bar instead of the dark indigo band ---------- */
:root[data-ui="v2"] header {
  background: var(--surface-raised); color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--shadow-dark) 40%, transparent);
  padding: 10px 24px; z-index: 40;
}
:root[data-ui="v2"] .nav-pill { background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; border-radius: 0; max-width: 1600px; }
:root[data-ui="v2"] header .nav-pill > h1, :root[data-ui="v2"] header > h1 { font-family: var(--font-sans); font-weight: 700; font-size: 17px; letter-spacing: var(--tracking-tight); display: inline-flex; align-items: center; }
:root[data-ui="v2"] header .nav-pill > h1::before, :root[data-ui="v2"] header > h1::before {
  content: ""; flex: none; width: 30px; height: 30px; margin-right: 10px; border-radius: 8px;
  background: url('/favicon.svg') center / contain no-repeat; box-shadow: var(--shadow-raised-xs);
}
:root[data-ui="v2"] header h1 a, :root[data-ui="v2"] header h1 .home-link { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--text-primary); }
:root[data-ui="v2"] header h1 .wm-data { background: none; -webkit-text-fill-color: var(--brand-text); color: var(--brand-text); }
:root[data-ui="v2"] header h1 .wm-options { -webkit-text-fill-color: var(--text-primary); color: var(--text-primary); }
:root[data-ui="v2"] header h1 .wm-tag { background: var(--brand-tint); -webkit-text-fill-color: var(--brand-tint-text); color: var(--brand-tint-text); font-family: var(--font-sans); font-weight: 600; letter-spacing: var(--tracking-wide); border-radius: var(--radius-sm); }
:root[data-ui="v2"] header h1 .wm-tag.wm-tag-support { background: var(--status-resolved-bg); -webkit-text-fill-color: var(--status-resolved-fg); color: var(--status-resolved-fg); }
:root[data-ui="v2"] .nav-link { color: var(--text-secondary); font-weight: 500; border-radius: var(--radius-md); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
:root[data-ui="v2"] .nav-link:hover { background: var(--surface-base); color: var(--text-primary); }
:root[data-ui="v2"] .nav-link.nav-active { background: var(--brand-tint); color: var(--brand-tint-text); font-weight: 600; }
:root[data-ui="v2"] .nav-badge { background: var(--brand); color: var(--text-on-brand); }
:root[data-ui="v2"] .nav-badge.overdue { background: var(--danger); }
:root[data-ui="v2"] .logout-btn { background: var(--surface-raised-grad); color: var(--text-primary); border: var(--card-border); box-shadow: var(--shadow-raised-xs); }
:root[data-ui="v2"] .home-link { color: var(--text-primary); }

:root[data-ui="v2"] .global-search { background: var(--surface-sunken-grad); border: var(--control-border); box-shadow: var(--shadow-inset-sm); border-radius: var(--radius-md); }
:root[data-ui="v2"] .global-search:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
:root[data-ui="v2"] .gsearch-ic { background: var(--text-tertiary); }
:root[data-ui="v2"] .gsearch-input { color: var(--text-primary); }
:root[data-ui="v2"] .gsearch-input::placeholder { color: var(--text-tertiary); }
:root[data-ui="v2"] .gsearch-input:focus { outline: none; }
:root[data-ui="v2"] .gsearch-type { background: var(--surface-raised); color: var(--text-primary); border: var(--control-border); }
:root[data-ui="v2"] .gsearch-results, :root[data-ui="v2"] .profile-menu, :root[data-ui="v2"] .notif-panel, :root[data-ui="v2"] .apick-menu, :root[data-ui="v2"] .send-menu, :root[data-ui="v2"] .sla-menu, :root[data-ui="v2"] .m-menu, :root[data-ui="v2"] .recip-suggest, :root[data-ui="v2"] .t-preview {
  background: var(--surface-overlay); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay);
  animation: v2-menu-in var(--dur-base) var(--ease);
}
:root[data-ui="v2"] .gsearch-item:hover, :root[data-ui="v2"] .profile-item:hover, :root[data-ui="v2"] .recip-option.active, :root[data-ui="v2"] .recip-option:hover { background: var(--brand-tint); color: var(--brand-tint-text); }
:root[data-ui="v2"] .notif-bell { background: transparent; border: 0; color: var(--text-secondary); border-radius: var(--radius-md); box-shadow: none; }
:root[data-ui="v2"] .notif-bell:hover { background: var(--surface-base); color: var(--text-primary); }
:root[data-ui="v2"] .notif-count { background: var(--danger); color: var(--text-on-brand); }
:root[data-ui="v2"] .avatar-sm, :root[data-ui="v2"] .avatar-sm:hover { box-shadow: var(--shadow-raised-xs); }
:root[data-ui="v2"] .avatar-circle { background: var(--brand-tint); color: var(--brand-tint-text); }
:root[data-ui="v2"] .profile-signout, :root[data-ui="v2"] .profile-item.profile-signout .pi-ic { color: var(--danger-text); }

/* Dashboard hero (lives inside the header): light, no overlap trick */
:root[data-ui="v2"] .dvo-hero { margin-top: 18px; padding-bottom: 18px; }
:root[data-ui="v2"] .dvo-hero-kicker, :root[data-ui="v2"] .page-kicker { background: var(--brand-tint); border: 0; color: var(--brand-tint-text); letter-spacing: var(--tracking-wide); }
:root[data-ui="v2"] .dvo-hero-title { color: var(--text-primary); font-weight: 700; font-size: 30px; letter-spacing: var(--tracking-tight); }
:root[data-ui="v2"] .dvo-hero-title span { background: none; -webkit-text-fill-color: var(--brand-text); color: var(--brand-text); }
:root[data-ui="v2"] .dvo-hero-actions .btn-primary { box-shadow: var(--shadow-raised-sm); }
:root[data-ui="v2"] .hero-task-chip { background: var(--brand-tint); border: 0; color: var(--brand-tint-text); }
:root[data-ui="v2"] .hero-task-chip:hover { background: var(--brand); color: var(--text-on-brand); }
:root[data-ui="v2"] main.dash { margin-top: 24px; }
:root[data-ui="v2"] main.dash > .stats { margin-top: 0; }

/* Floating theme toggle */
:root[data-ui="v2"] .theme-toggle { width: 48px; height: 48px; background: var(--surface-raised-grad); color: var(--brand-text); border: var(--card-border); box-shadow: var(--shadow-raised); }
:root[data-ui="v2"] .theme-toggle:hover { color: var(--brand-hover); }

/* ---- Surfaces --------------------------------------------------------------- */
:root[data-ui="v2"] .card { background: var(--surface-raised-grad); border: var(--card-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-raised); }
:root[data-ui="v2"] .stat-card { background: var(--surface-raised-grad); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); }
:root[data-ui="v2"] .stat-tile { border-top: var(--card-border); }
:root[data-ui="v2"] .stat-tile.tone-open, :root[data-ui="v2"] .stat-tile.tone-crit, :root[data-ui="v2"] .stat-tile.tone-low, :root[data-ui="v2"] .stat-tile.tone-closed, :root[data-ui="v2"] .stat-tile.tone-purple { border-top-width: 1px; }
:root[data-ui="v2"] .stat-number { font-weight: 700; letter-spacing: var(--tracking-tight); }
:root[data-ui="v2"] .stat-icon { border-radius: var(--radius-md); }
:root[data-ui="v2"] .directory-row { border: var(--card-border); }
:root[data-ui="v2"] .views-rail, :root[data-ui="v2"] .views-body, :root[data-ui="v2"] .merge-bar, :root[data-ui="v2"] .m-sheet, :root[data-ui="v2"] .tabbar, :root[data-ui="v2"] .lightbox-close { border: var(--card-border); }
:root[data-ui="v2"] .description { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
:root[data-ui="v2"] .ai-summary-panel { border-radius: var(--radius-lg); box-shadow: none; border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); }
:root[data-ui="v2"] .ai-summary-refresh:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); }

/* ---- Typography details --------------------------------------------------------- */
/* Field labels: sentence case, readable, not shouty uppercase */
:where(:root[data-ui="v2"]) label { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-secondary); }
:root[data-ui="v2"] .filter-field, :root[data-ui="v2"] dl.fields dt, :root[data-ui="v2"] .status-actions > strong, :root[data-ui="v2"] .row-line-label, :root[data-ui="v2"] .t-cat-label, :root[data-ui="v2"] .send-menu-title,
:root[data-ui="v2"] .gsearch-group, :root[data-ui="v2"] .pf-head, :root[data-ui="v2"] .bug-group-title, :root[data-ui="v2"] .task-history > summary, :root[data-ui="v2"] .lc-sub-h, :root[data-ui="v2"] .ctx-h {
  text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
:root[data-ui="v2"] .user-table th, :root[data-ui="v2"] .agent-table th, :root[data-ui="v2"] .bill-table th, :root[data-ui="v2"] .apikey-table th { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
:root[data-ui="v2"] .detail-subject { font-weight: 700; font-size: 26px; letter-spacing: var(--tracking-tight); }
:root[data-ui="v2"] .t-subject { font-weight: 600; }
:root[data-ui="v2"] .list-head h2 { font-weight: 700; }

/* ---- Inputs ----------------------------------------------------------------------- */
:where(:root[data-ui="v2"]) input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"])), :where(:root[data-ui="v2"]) textarea, :where(:root[data-ui="v2"]) select {
  background: var(--surface-sunken-grad); border: var(--control-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset-sm); color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease);
}
:where(:root[data-ui="v2"]) input::placeholder, :where(:root[data-ui="v2"]) textarea::placeholder { color: var(--text-tertiary); }
:where(:root[data-ui="v2"]) input[type="checkbox"], :where(:root[data-ui="v2"]) input[type="radio"] { accent-color: var(--brand); }
/* Class-styled controls keep their tints but get the visible edge too */
:root[data-ui="v2"] .apick-btn, :root[data-ui="v2"] .filter-field select, :root[data-ui="v2"] .tpl-picker, :root[data-ui="v2"] .pager-size select, :root[data-ui="v2"] .assign-actions select, :root[data-ui="v2"] .sla-actions input[type="datetime-local"],
:root[data-ui="v2"] .ai-controls select, :root[data-ui="v2"] .recip-box, :root[data-ui="v2"] .link-ticket-input, :root[data-ui="v2"] #article-picker, :root[data-ui="v2"] .inline-select,
:root[data-ui="v2"] .row-select:not([class*="st-"]):not([class*="prio-"]) { border: var(--control-border); }
:root[data-ui="v2"] .filter-field.is-set select, :root[data-ui="v2"] .filter-field.is-set .apick-btn { border-color: var(--status-open-solid); }
:root[data-ui="v2"] .ql-toolbar.ql-snow { border: var(--control-border); border-bottom: 0; background: var(--surface-sunken); border-radius: var(--radius-md) var(--radius-md) 0 0; }
:root[data-ui="v2"] .ql-editor.ql-blank::before { color: var(--text-tertiary); }
:root[data-ui="v2"] .ql-snow .ql-picker-options { background: var(--surface-overlay); border: var(--card-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-overlay); }
:root[data-ui="v2"] .ql-container.ql-snow { border: var(--control-border); background: var(--surface-sunken-grad); border-radius: 0 0 var(--radius-md) var(--radius-md); }
:root[data-ui="v2"] .recip-input, :root[data-ui="v2"] .gsearch-input { border: 0; background: transparent; box-shadow: none; }
:root[data-ui="v2"] .switch-slider { border: var(--control-border); }
:root[data-ui="v2"] .switch input:checked + .switch-slider { background: var(--brand); border-color: transparent; }

/* ---- Buttons ------------------------------------------------------------------------ */
:where(:root[data-ui="v2"]) button {
  border-radius: var(--radius-md); font-weight: 600; box-shadow: var(--shadow-raised-sm); color: var(--text-on-brand);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
:where(:root[data-ui="v2"]) button:hover { filter: none; }
:where(:root[data-ui="v2"]) button:not([class]):hover:not(:disabled), :root[data-ui="v2"] .btn-primary:hover, :root[data-ui="v2"] .btn-small:not(.btn-danger):hover { background: var(--brand-hover); color: var(--text-on-brand); transform: translateY(-1px); }
:where(:root[data-ui="v2"]) button:not([class]):active:not(:disabled), :root[data-ui="v2"] .btn-primary:active, :root[data-ui="v2"] .btn-small:active, :root[data-ui="v2"] .btn-secondary:active, :root[data-ui="v2"] .btn-ghost:active { transform: translateY(1px); box-shadow: var(--shadow-inset-sm); transition-duration: var(--dur-instant); }
:root[data-ui="v2"] .btn-primary { border-radius: var(--radius-md); font-weight: 600; box-shadow: var(--shadow-raised-sm); }
:root[data-ui="v2"] .btn-small { border-radius: var(--radius-sm); font-weight: 600; }
:root[data-ui="v2"] .btn-secondary, :root[data-ui="v2"] .btn-ghost, :root[data-ui="v2"] a.btn-secondary { background: var(--surface-raised-grad); color: var(--text-primary); border: var(--card-border); box-shadow: var(--shadow-raised-sm); }
:root[data-ui="v2"] .btn-secondary:hover, :root[data-ui="v2"] .btn-ghost:hover { color: var(--brand-text); transform: translateY(-1px); }
:root[data-ui="v2"] .btn-danger, :root[data-ui="v2"] .btn-small.btn-danger, :root[data-ui="v2"] .btn-primary.btn-danger { background: var(--danger); color: var(--text-on-brand); }
:root[data-ui="v2"] .btn-danger:hover, :root[data-ui="v2"] .btn-small.btn-danger:hover { background: var(--danger-hover); filter: none; }
:root[data-ui="v2"] .btn-link { color: var(--brand-text); }
:root[data-ui="v2"] .btn-link.danger { color: var(--danger-text); }
:root[data-ui="v2"] button:disabled, :root[data-ui="v2"] .btn-primary[aria-disabled="true"] { background: var(--surface-sunken); color: var(--text-disabled); box-shadow: none; transform: none; cursor: not-allowed; }
/* White text on a fill: make sure the fill is a solid, dark-enough colour in both modes */
:root[data-ui="v2"] .filter-btn.active, :root[data-ui="v2"] .auto-tab.active, :root[data-ui="v2"] .svc-chip-hit, :root[data-ui="v2"] .updates-pill, :root[data-ui="v2"] a.tpl-kind-chip.company-chip:hover { background: var(--brand); color: var(--text-on-brand); }
:root[data-ui="v2"] .agent-side-initials { background: var(--brand-tint); color: var(--brand-tint-text); }
:root[data-ui="v2"] .pasted-x { background: var(--danger); }
:root[data-ui="v2"] .task-check { border-color: var(--status-open-solid); }
:root[data-ui="v2"] .task-done .task-check { background: var(--success); border-color: var(--success); }
:root[data-ui="v2"] .btn-note { background: var(--priority-medium-solid); color: var(--text-primary); }
:root[data-ui="v2"] .btn-reply-open { background: var(--status-open-bg); color: var(--status-open-fg); }
:root[data-ui="v2"] .btn-note-open { background: var(--priority-medium-bg); color: var(--priority-medium-fg); }
:root[data-ui="v2"] .updates-pill { box-shadow: var(--shadow-raised-sm); }
:root[data-ui="v2"] .filter-btn { border: var(--card-border); border-radius: var(--radius-pill); }

/* Status changer: current = tinted fill + solid ring (white text failed contrast in dark) */
:root[data-ui="v2"] .status-btn { border-radius: var(--radius-md); box-shadow: none; }
:root[data-ui="v2"] .status-btn.current { color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
:root[data-ui="v2"] .status-btn.current[data-status="Open"]        { background: var(--status-open-bg);     color: var(--status-open-fg); }
:root[data-ui="v2"] .status-btn.current[data-status="In Progress"] { background: var(--status-progress-bg); color: var(--status-progress-fg); }
:root[data-ui="v2"] .status-btn.current[data-status="On Hold"]     { background: var(--status-hold-bg);     color: var(--status-hold-fg); }
:root[data-ui="v2"] .status-btn.current[data-status="Resolved"]    { background: var(--status-resolved-bg); color: var(--status-resolved-fg); }
:root[data-ui="v2"] .status-btn.current[data-status="Closed"]      { background: var(--status-closed-bg);   color: var(--status-closed-fg); }

/* ---- Tabs: segmented control (pill fill on the active tab) ------------------------ */
:root[data-ui="v2"] .tab-bar, :root[data-ui="v2"] .auto-tabs {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 20px; width: max-content; max-width: 100%; overflow-x: auto; justify-self: start; align-self: flex-start;
  background: var(--surface-sunken-grad); border: var(--control-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-inset-sm);
}
:root[data-ui="v2"] .tab-btn, :root[data-ui="v2"] .auto-tab {
  margin: 0; border: 0; border-radius: var(--radius-md); padding: 8px 16px; background: transparent; box-shadow: none;
  color: var(--text-secondary); font-weight: 600; white-space: nowrap;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
:root[data-ui="v2"] .tab-btn:hover, :root[data-ui="v2"] .auto-tab:hover { color: var(--text-primary); background: transparent; transform: none; }
:root[data-ui="v2"] .tab-btn.active, :root[data-ui="v2"] .auto-tab.active { background: var(--brand-grad); color: var(--text-on-brand); box-shadow: var(--shadow-raised-xs); }

/* ---- Chips, badges, pills -------------------------------------------------------- */
:root[data-ui="v2"] .chip { border-radius: var(--radius-pill); font-weight: 600; letter-spacing: 0; padding: 3px 10px; }
:root[data-ui="v2"] .badge, :root[data-ui="v2"] .sla-badge, :root[data-ui="v2"] .import-badge, :root[data-ui="v2"] .list-count, :root[data-ui="v2"] .views-count, :root[data-ui="v2"] .tpl-kind-chip, :root[data-ui="v2"] #history-count { font-weight: 600; }
:root[data-ui="v2"] .badge.role-ga, :root[data-ui="v2"] .import-badge, :root[data-ui="v2"] .list-count, :root[data-ui="v2"] .views-count, :root[data-ui="v2"] #history-count, :root[data-ui="v2"] .recip-chip, :root[data-ui="v2"] .ticket-chip, :root[data-ui="v2"] .task-ref, :root[data-ui="v2"] .task-private, :root[data-ui="v2"] .t-id-tag { background: var(--brand-tint); color: var(--brand-tint-text); }
:root[data-ui="v2"] .recip-chip button, :root[data-ui="v2"] .ticket-chip button { color: var(--brand-tint-text); }
:root[data-ui="v2"] .svc-chip { background: var(--brand-tint); color: var(--brand-tint-text); }
:root[data-ui="v2"] .merged-banner { border-left: 0; background: var(--brand-tint); color: var(--brand-tint-text); border-radius: var(--radius-md); }
:root[data-ui="v2"] .tpl-star { color: var(--priority-medium-solid); -webkit-text-fill-color: var(--priority-medium-solid); }

/* ---- Dashboard rows & tables ------------------------------------------------------ */
:root[data-ui="v2"] .ticket-row { transition: background var(--dur-fast) var(--ease); }
:root[data-ui="v2"] .ticket-row:hover, :root[data-ui="v2"] .task-row:hover { background: var(--surface-overlay); }
:root[data-ui="v2"] .ticket-row.row-selected { background: var(--brand-tint); border-left-color: var(--brand); }
:root[data-ui="v2"] .ticket-row.ticket-done { opacity: 0.72; }   /* was .55 — closed rows stay readable */
:root[data-ui="v2"] .user-main-row:hover, :root[data-ui="v2"] .agent-table tbody tr:hover, :root[data-ui="v2"] .bill-table tbody tr:hover { background: var(--surface-overlay); }
:root[data-ui="v2"] .t-reporter-name { color: var(--status-resolved-fg); }

/* Saved views dock */
:root[data-ui="v2"] .views-rail { color: var(--brand-text); border-left: 0; }
:root[data-ui="v2"] .views-body { border-left: 0; }
:root[data-ui="v2"] .view-row { border-left: 0; }
:root[data-ui="v2"] .view-row.active { background: var(--brand-tint); }
:root[data-ui="v2"] .view-row.active .view-apply { color: var(--brand-tint-text); font-weight: 700; }
:root[data-ui="v2"] .view-row.drop-above { box-shadow: 0 -2px 0 0 var(--brand); }
:root[data-ui="v2"] .view-row.drop-below { box-shadow: 0 2px 0 0 var(--brand); }

/* ---- Ticket page: bubbles instead of left-edge stripes ----------------------------- */
:root[data-ui="v2"] .msg { border: 1px solid var(--border-subtle); border-left: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-base); box-shadow: none; }
:root[data-ui="v2"] .msg-out { background: var(--brand-tint); border-color: transparent; }
:root[data-ui="v2"] .msg-out .msg-who, :root[data-ui="v2"] .msg-out .msg-body, :root[data-ui="v2"] .msg-out .msg-html { color: var(--brand-tint-text); }
:root[data-ui="v2"] .msg-note { background: var(--note-bg); border-color: transparent; }
:root[data-ui="v2"] .reply-card { border-left: var(--card-border); }
:root[data-ui="v2"] .reply-card .box-hint { color: var(--status-open-fg); }
:root[data-ui="v2"] .note-card { background: var(--note-bg); border-left: var(--card-border); }
:root[data-ui="v2"] .note-card .box-hint { color: var(--priority-medium-fg); }
:root[data-ui="v2"] .activity-item.type-comment, :root[data-ui="v2"] .activity-item.internal { border-left: 0; border-radius: var(--radius-md); margin: 2px 0; }
:root[data-ui="v2"] .quoted-thread.forwarded { border-left-color: var(--brand); }

/* ---- Toasts --------------------------------------------------------------------------- */
:root[data-ui="v2"] .toast {
  background: var(--surface-overlay); color: var(--text-primary); border: var(--card-border);
  border-left: 4px solid var(--priority-critical-solid); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
:root[data-ui="v2"] .toast-info { border-left-color: var(--status-open-solid); }
:root[data-ui="v2"] .toast-success { border-left-color: var(--status-resolved-solid); }

/* ---- Modals, sheets, overlays ----------------------------------------------------------- */
:root[data-ui="v2"] .merge-overlay { background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: v2-fade-in var(--dur-slow) var(--ease); }
:root[data-ui="v2"] .merge-overlay > .card, :root[data-ui="v2"] .merge-modal, :root[data-ui="v2"] .rule-modal { background: var(--surface-overlay); box-shadow: var(--shadow-overlay); animation: v2-modal-in var(--dur-slow) var(--ease); }
:root[data-ui="v2"] .m-sheet { background: var(--surface-base); box-shadow: var(--shadow-overlay); }
:root[data-ui="v2"] .tabbar { background: var(--surface-raised); border-width: 1px 0 0; box-shadow: 0 -4px 16px color-mix(in srgb, var(--shadow-dark) 40%, transparent); }
:root[data-ui="v2"] .tabbar .tab.active { color: var(--brand-tint-text); background: var(--brand-tint); }

/* ---- Login: light neumorphic brand panel (matches the step-3 mockup) -------------------- */
:root[data-ui="v2"] .auth-split { gap: 32px; padding: 32px; max-width: 1320px; margin: 0 auto; align-items: center; }
:root[data-ui="v2"] .auth-brand {
  align-self: stretch; color: var(--text-primary); border-radius: var(--radius-xl);
  background: var(--surface-raised-grad); border: var(--card-border); box-shadow: var(--shadow-raised);
}
:root[data-ui="v2"] .auth-brand::before { background: radial-gradient(40% 50% at 92% 100%, var(--brand-tint), transparent 70%); }
:root[data-ui="v2"] .auth-brand-logo::before {
  content: ""; width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: url('/favicon.svg') center / contain no-repeat; box-shadow: var(--shadow-raised-xs);
}
:root[data-ui="v2"] .auth-wm { font-weight: 700; }
:root[data-ui="v2"] .auth-wm-data { background: none; -webkit-text-fill-color: var(--brand-text); color: var(--brand-text); }
:root[data-ui="v2"] .auth-wm-options { color: var(--text-primary); }
:root[data-ui="v2"] .auth-wm-tag { background: var(--brand-tint); color: var(--brand-tint-text); }
:root[data-ui="v2"] .auth-wm-tag-support { background: var(--status-resolved-bg); color: var(--status-resolved-fg); }
:root[data-ui="v2"] .auth-eyebrow { background: var(--brand-tint); border: 0; color: var(--brand-tint-text); }
:root[data-ui="v2"] .auth-eyebrow-support { color: var(--status-resolved-fg); background: var(--status-resolved-bg); }
:root[data-ui="v2"] .auth-headline { color: var(--text-primary); font-weight: 700; }
:root[data-ui="v2"] .auth-headline span { background: none; -webkit-text-fill-color: var(--brand-text); color: var(--brand-text); }
:root[data-ui="v2"] .auth-sub { color: var(--text-secondary); }
:root[data-ui="v2"] .auth-brand-foot { color: var(--text-tertiary); }
:root[data-ui="v2"] .auth-card { border-radius: var(--radius-xl); }

/* Client portal footer wordmark */
:root[data-ui="v2"] .pf-wm .wm-data { background: none; -webkit-text-fill-color: var(--brand-text); color: var(--brand-text); }

/* Report printing keeps its own light palette (styles.css @media print) */

/* ---- Page-load motion (see MOTION.md) ----------------------------------------------------- */
:root[data-ui="v2"] main > * { animation: v2-rise var(--dur-page) var(--ease) both; }
:root[data-ui="v2"] main > *:nth-child(2) { animation-delay: 60ms; }
:root[data-ui="v2"] main > *:nth-child(3) { animation-delay: 120ms; }
:root[data-ui="v2"] main > *:nth-child(n+4) { animation-delay: 180ms; }
@keyframes v2-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes v2-fade-in { from { opacity: 0; } }
@keyframes v2-menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@keyframes v2-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
  P main > * { animation: none; }
  W button:not([class]):hover, :root[data-ui="v2"] .btn-primary:hover, :root[data-ui="v2"] .btn-small:hover, :root[data-ui="v2"] .btn-secondary:hover, :root[data-ui="v2"] .btn-ghost:hover, :root[data-ui="v2"] .stat-tile:hover { transform: none; }
}

/* ---- Small screens ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  P .auth-split { padding: 16px; gap: 16px; }
}
@media (max-width: 700px) {
  P header { padding: 8px 12px; }
  P .card { border-radius: var(--radius-lg); }
  P .dvo-hero-title { font-size: 24px; }
}

/* ---- Preview switch pill (shown in BOTH looks so you can flip back) --------- */
.ui-preview-pill {
  position: fixed; left: 16px; bottom: 16px; z-index: 9998;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px;
  border: 1px solid rgba(124, 58, 237, 0.35); border-radius: 999px; cursor: pointer;
  background: #ffffff; color: #3b1a8a; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  font: 600 12.5px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ui-preview-pill::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #7c3aed; }
.ui-preview-pill[aria-pressed="false"]::before { background: #9aa0b2; }
.ui-preview-pill:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
:root[data-theme="dark"] .ui-preview-pill { background: #2f3846; color: #ddd3fe; border-color: #4f5a6c; }
body.mobile .ui-preview-pill { bottom: 84px; }
@media print { .ui-preview-pill { display: none; } }

/* =============================================================================
   PHASE 1 · Foundations (appended to the v2 layer; ui-kit.js drives it)
   ============================================================================= */

/* Real type scale instead of html{zoom:1.05}: 200% zoom and 400% reflow work again */
:root[data-ui="v2"] { zoom: 1; }
:root[data-ui="v2"] body { font-size: 15px; line-height: 1.45; }
@media (max-width: 700px) { :root[data-ui="v2"] body { font-size: 15px; } }

/* Focus is never hidden under the sticky header, pills or bars (WCAG 2.4.11) */
:root[data-ui="v2"] { scroll-padding-top: 88px; scroll-padding-bottom: 96px; }
:root[data-ui="v2"] .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Skip link */
:root[data-ui="v2"] .skip-link { position: absolute; left: 16px; top: -100px; z-index: 10000; padding: 10px 16px; border-radius: var(--radius-md); background: var(--brand); color: var(--text-on-brand); font-weight: 600; text-decoration: none; transition: top var(--dur-fast) var(--ease); }
:root[data-ui="v2"] .skip-link:focus { top: 16px; outline: 2px solid var(--focus-ring); outline-offset: 2px; }
:root[data-ui="v2"] main:focus { outline: none; }

/* Pointer targets ≥ 24 px (WCAG 2.5.8) — the small controls the app has today */
:root[data-ui="v2"] .view-x, :root[data-ui="v2"] .views-collapse, :root[data-ui="v2"] .msg-edit, :root[data-ui="v2"] .recip-chip button, :root[data-ui="v2"] .ticket-chip button,
:root[data-ui="v2"] .task-cal-del, :root[data-ui="v2"] .pasted-x, :root[data-ui="v2"] .notif-action, :root[data-ui="v2"] .quote-toggle, :root[data-ui="v2"] .ai-summary-refresh {
  min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center;
}
:root[data-ui="v2"] .msg-edit { opacity: 1; color: var(--text-tertiary); }   /* was hover-only (invisible to keyboard users) */
:root[data-ui="v2"] .msg:hover .msg-edit, :root[data-ui="v2"] .msg-edit:focus-visible { color: var(--text-primary); }
:root[data-ui="v2"] .ql-toolbar button { width: 28px; height: 28px; }
:root[data-ui="v2"] .t-merge-check, :root[data-ui="v2"] input[type="checkbox"] { width: 18px; height: 18px; }
:root[data-ui="v2"] .t-merge { padding: 6px; margin: -6px; }
:root[data-ui="v2"] .tabbar .tab { min-height: 44px; }

/* Inline icons that replaced emoji */
:root[data-ui="v2"] .ui-ic { width: 1em; height: 1em; font-size: 16px; vertical-align: -0.18em; flex: none; }
:root[data-ui="v2"] .ui-ic-wrap { display: inline-flex; align-items: center; margin-right: 0.35em; line-height: 1; }
:root[data-ui="v2"] .ui-ic-wrap:last-child { margin-right: 0; }
:root[data-ui="v2"] h2 .ui-ic, :root[data-ui="v2"] h3 .ui-ic, :root[data-ui="v2"] .side-head .ui-ic { color: var(--brand-text); font-size: 18px; }
:root[data-ui="v2"] .ui-dot-good .ui-ic { color: var(--status-resolved-solid); } :root[data-ui="v2"] .ui-dot-bad .ui-ic { color: var(--priority-critical-solid); }
:root[data-ui="v2"] .ui-dot-warn .ui-ic { color: var(--priority-medium-solid); } :root[data-ui="v2"] .ui-dot-off .ui-ic { color: var(--text-tertiary); }
:root[data-ui="v2"] .ui-dot-good .ui-ic, :root[data-ui="v2"] .ui-dot-bad .ui-ic, :root[data-ui="v2"] .ui-dot-warn .ui-ic, :root[data-ui="v2"] .ui-dot-off .ui-ic { fill: currentColor; stroke: none; font-size: 12px; }
:root[data-ui="v2"] .tpl-star .ui-ic, :root[data-ui="v2"] .views-rail-ic .ui-ic { fill: currentColor; }

/* Toasts: bottom-right stack with Undo (replaces the old centred dark toast under v2) */
:root[data-ui="v2"] #toast-wrap { display: none; }
:root[data-ui="v2"] .toast-region { position: fixed; z-index: 9999; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 12px; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
:root[data-ui="v2"] body.mobile .toast-region, :root[data-ui="v2"] .toast-region.is-mobile { right: 12px; left: 12px; bottom: 84px; width: auto; }
:root[data-ui="v2"] .toast-region .toast {
  --toast-accent: var(--status-open-solid);
  pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; max-width: none; opacity: 1; transform: none;
  padding: 12px 12px 12px 14px; background: var(--surface-overlay); color: var(--text-primary); font-size: 14px;
  border: var(--card-border); border-left: 4px solid var(--toast-accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay);
  animation: v2-toast-in var(--dur-slow) var(--ease);
}
:root[data-ui="v2"] .toast-region .toast-success { --toast-accent: var(--status-resolved-solid); }
:root[data-ui="v2"] .toast-region .toast-error { --toast-accent: var(--priority-critical-solid); }
:root[data-ui="v2"] .toast-region .toast-warning { --toast-accent: var(--priority-medium-solid); }
:root[data-ui="v2"] .toast-region .toast-info { --toast-accent: var(--status-open-solid); }
:root[data-ui="v2"] .toast-icon { color: var(--toast-accent); flex: none; margin-top: 1px; }
:root[data-ui="v2"] .toast-text { flex: 1; min-width: 0; }
:root[data-ui="v2"] .toast-title { font-weight: 600; }
:root[data-ui="v2"] .toast-msg { color: var(--text-secondary); }
:root[data-ui="v2"] .toast-actions { display: flex; align-items: center; gap: 4px; flex: none; margin: -4px -4px -4px 0; }
:root[data-ui="v2"] .toast-undo { background: var(--brand-tint); color: var(--brand-tint-text); border: 0; box-shadow: none; padding: 6px 12px; border-radius: var(--radius-sm); font: inherit; font-weight: 600; cursor: pointer; min-height: 32px; }
:root[data-ui="v2"] .toast-undo:hover { background: var(--brand); color: var(--text-on-brand); transform: none; }
:root[data-ui="v2"] .toast-undo:disabled { opacity: .6; cursor: progress; }
:root[data-ui="v2"] .toast-close { background: none; border: 0; box-shadow: none; color: var(--text-tertiary); width: 32px; height: 32px; padding: 0; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
:root[data-ui="v2"] .toast-close:hover { background: var(--surface-base); color: var(--text-primary); transform: none; }
:root[data-ui="v2"] .toast-region .toast.is-leaving { animation: v2-toast-out var(--dur-base) var(--ease) forwards; }
@keyframes v2-toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes v2-toast-out { to { opacity: 0; transform: translateX(24px); } }

/* Dialogs built by ui-kit (confirm, shortcut sheet) */
:root[data-ui="v2"] .ui-overlay { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: v2-fade-in var(--dur-slow) var(--ease); }
:root[data-ui="v2"] .ui-overlay.is-closing { animation: v2-fade-out var(--dur-base) var(--ease) forwards; }
:root[data-ui="v2"] .ui-modal { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--surface-overlay); border: var(--card-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-overlay); padding: 24px; animation: v2-modal-in var(--dur-slow) var(--ease); }
:root[data-ui="v2"] .ui-modal-head { display: flex; align-items: flex-start; gap: 12px; }
:root[data-ui="v2"] .ui-modal-head .ui-btn-icon { margin: -6px -6px 0 auto; }
:root[data-ui="v2"] .ui-modal-title { font-size: 20px; line-height: 28px; margin: 0 0 8px; letter-spacing: var(--tracking-tight); }
:root[data-ui="v2"] .ui-modal-body { margin: 0; color: var(--text-secondary); }
:root[data-ui="v2"] .ui-modal-foot { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
:root[data-ui="v2"] .ui-modal-hint { margin: 16px 0 0; font-size: 12px; color: var(--text-tertiary); }
:root[data-ui="v2"] .ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 20px; border: var(--card-border); border-radius: var(--radius-md); background: var(--surface-raised-grad); color: var(--text-primary); box-shadow: var(--shadow-raised-sm); font: inherit; font-weight: 600; cursor: pointer; }
:root[data-ui="v2"] .ui-btn-primary { background: var(--brand-grad); color: var(--text-on-brand); border-color: transparent; }
:root[data-ui="v2"] .ui-btn-danger { background: var(--danger); color: var(--text-on-brand); border-color: transparent; }
:root[data-ui="v2"] .ui-btn-ghost { background: transparent; box-shadow: none; border-color: transparent; color: var(--text-secondary); }
:root[data-ui="v2"] .ui-btn-ghost:hover { background: var(--surface-base); color: var(--text-primary); }
:root[data-ui="v2"] .ui-btn-icon { width: 36px; padding: 0; }
:root[data-ui="v2"] .ui-btn:hover { transform: translateY(-1px); }
:root[data-ui="v2"] .ui-btn:active { transform: translateY(1px); }
:root[data-ui="v2"] .ui-sheet { width: min(560px, 100%); }
:root[data-ui="v2"] .ui-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin: 8px 0 0; }
:root[data-ui="v2"] .ui-keys > div { display: flex; align-items: center; gap: 12px; min-height: 32px; }
:root[data-ui="v2"] .ui-keys dt { margin: 0; flex: none; min-width: 84px; }
:root[data-ui="v2"] .ui-keys dd { margin: 0; color: var(--text-secondary); }
:root[data-ui="v2"] kbd { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--surface-sunken); border: 1px solid var(--border-control); box-shadow: inset 0 -2px 0 var(--border-subtle); font: 600 12px/18px var(--font-mono); color: var(--text-primary); }
@media (max-width: 560px) { :root[data-ui="v2"] .ui-keys { grid-template-columns: 1fr; } }
@keyframes v2-fade-out { to { opacity: 0; } }

/* Shared tabs/select classes (for Phase 2 pages); harmless where unused */
:root[data-ui="v2"] .tabs { position: relative; display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-sunken-grad); border: var(--control-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-inset-sm); max-width: 100%; overflow-x: auto; }
:root[data-ui="v2"] .tabs [role="tab"] { position: relative; z-index: 1; min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--radius-md); background: transparent; box-shadow: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--text-secondary); white-space: nowrap; transition: color var(--dur-base) var(--ease); }
:root[data-ui="v2"] .tabs [role="tab"][aria-selected="true"] { color: var(--text-on-brand); }
:root[data-ui="v2"] .tabs-indicator { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--radius-md); background: var(--brand-grad); box-shadow: var(--shadow-raised-xs); transition: transform var(--dur-base) var(--ease), width var(--dur-base) var(--ease); }
:root[data-ui="v2"] .tabs-indicator.no-anim { transition: none; }
:root[data-ui="v2"] .select { position: relative; }
:root[data-ui="v2"] .select-trigger { position: relative; width: 100%; min-height: 40px; padding: 0 40px 0 14px; display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; color: var(--text-primary); cursor: pointer; background: var(--surface-raised-grad); border: var(--control-border); border-radius: var(--radius-md); box-shadow: var(--shadow-raised-xs); }
:root[data-ui="v2"] .select-trigger::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); transform: rotate(45deg); transition: transform var(--dur-base) var(--ease); }
:root[data-ui="v2"] .select-trigger[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: -2px; }
:root[data-ui="v2"] .select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="v2"] .select .menu { position: absolute; z-index: 50; left: 0; top: calc(100% + 8px); min-width: 100%; max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface-overlay); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); animation: v2-menu-in var(--dur-base) var(--ease); }
:root[data-ui="v2"] .menu [role="option"], :root[data-ui="v2"] .menu [role="menuitem"] { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer; white-space: nowrap; }
:root[data-ui="v2"] .menu .is-active, :root[data-ui="v2"] .menu [role="option"]:hover, :root[data-ui="v2"] .menu [role="menuitem"]:hover { background: var(--brand-tint); color: var(--brand-tint-text); }
:root[data-ui="v2"] .menu [aria-selected="true"] { font-weight: 600; }

/* Pulsing "updates" pill → static badge (motion that nags is distracting; the live region announces it) */
:root[data-ui="v2"] .updates-pill { animation: none; }

/* =============================================================================
   PHASE 2a · Queue (views bar, turn badges, preview pane, bulk bar, palette)
   ============================================================================= */

/* Views bar: the queue's built-in tabs, above the filter bar */
:root[data-ui="v2"] .queue-views { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; margin: 0 0 14px; background: var(--surface-sunken-grad); border: var(--control-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-inset-sm); width: max-content; max-width: 100%; }
:root[data-ui="v2"] .queue-view { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 14px; border: 0; border-radius: var(--radius-md); background: transparent; box-shadow: none; color: var(--text-secondary); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
:root[data-ui="v2"] .queue-view:hover { color: var(--text-primary); background: var(--surface-base); transform: none; }
:root[data-ui="v2"] .queue-view.is-active { background: var(--brand-grad); color: var(--text-on-brand); box-shadow: var(--shadow-raised-xs); }
:root[data-ui="v2"] .queue-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface-raised); color: var(--text-secondary); font-size: 12px; font-weight: 600; }
:root[data-ui="v2"] .queue-count.is-hot { background: var(--status-open-bg); color: var(--status-open-fg); }
:root[data-ui="v2"] .queue-view.is-active .queue-count { background: rgba(255,255,255,.22); color: var(--text-on-brand); }
:root[data-ui="v2"] .queue-select-all { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--text-secondary); font-weight: 500; cursor: pointer; }

/* Turn badge on rows: whose move is it? */
:root[data-ui="v2"] .t-turn { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; }
:root[data-ui="v2"] .t-turn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
:root[data-ui="v2"] .t-turn[data-turn="ours"] { background: var(--status-open-bg); color: var(--status-open-fg); }
:root[data-ui="v2"] .t-turn[data-turn="new"] { background: var(--brand-tint); color: var(--brand-tint-text); }
:root[data-ui="v2"] .t-turn[data-turn="theirs"] { background: var(--status-hold-bg); color: var(--status-hold-fg); }
:root[data-ui="v2"] .t-turn[data-turn="done"] { background: transparent; color: var(--text-tertiary); padding-left: 0; }
:root[data-ui="v2"] .t-turn[data-turn="done"]::before { display: none; }
:root[data-ui="v2"] .ticket-row.is-previewing { background: var(--brand-tint); border-left-color: var(--brand); }
:root[data-ui="v2"] .ticket-row { cursor: pointer; }
:root[data-ui="v2"] .ticket-row .t-top:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }
:root[data-ui="v2"] .ticket-row.ticket-done { opacity: 1; }
:root[data-ui="v2"] .ticket-row.ticket-done .t-subject, :root[data-ui="v2"] .ticket-row.ticket-done .t-sub { color: var(--text-secondary); }

/* Preview pane: fixed on the right; wide screens make room, narrow ones overlay */
:root[data-ui="v2"] .queue-pane { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); z-index: 85; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; overflow-y: auto; background: var(--surface-overlay); border-left: var(--card-border); box-shadow: var(--shadow-overlay); animation: v2-drawer-in var(--dur-slow) var(--ease); outline: none; }
:root[data-ui="v2"] .queue-pane:focus-visible { box-shadow: var(--shadow-overlay), inset 0 0 0 2px var(--focus-ring); }
@keyframes v2-drawer-in { from { transform: translateX(100%); } }
@media (min-width: 1500px) { :root[data-ui="v2"] body.queue-pane-open main.dash, :root[data-ui="v2"] body.queue-pane-open .dvo-hero { margin-right: 484px; } :root[data-ui="v2"] body.queue-pane-open main.dash { max-width: none; margin-left: 24px; } :root[data-ui="v2"] body.queue-pane-open.views-open main.dash { margin-left: 264px; } }
@media (max-width: 1499px) { :root[data-ui="v2"] body.queue-pane-open::after { content: ""; position: fixed; inset: 0; z-index: 84; background: var(--scrim); animation: v2-fade-in var(--dur-slow) var(--ease); } }
:root[data-ui="v2"] .queue-pane-head { display: grid; gap: 8px; }
:root[data-ui="v2"] .queue-pane-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:root[data-ui="v2"] .queue-pane-close { margin-left: auto; min-width: 32px; min-height: 32px; padding: 0; }
:root[data-ui="v2"] .queue-pane-title { font-size: 19px; line-height: 26px; margin: 0; letter-spacing: var(--tracking-tight); font-weight: 700; }
:root[data-ui="v2"] .queue-pane-title a { color: var(--text-primary); text-decoration: none; }
:root[data-ui="v2"] .queue-pane-title a:hover { color: var(--brand-text); text-decoration: underline; }
:root[data-ui="v2"] .queue-pane-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-secondary); font-size: 13px; }
:root[data-ui="v2"] .queue-pane-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:root[data-ui="v2"] .queue-pane-agent { margin-left: auto; color: var(--text-secondary); font-size: 13px; }
:root[data-ui="v2"] .queue-pane-row { display: grid; gap: 6px; }
:root[data-ui="v2"] .queue-pane-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
:root[data-ui="v2"] .queue-pane .status-buttons { gap: 6px; }
:root[data-ui="v2"] .queue-pane .status-btn { padding: 6px 12px; font-size: 13px; }
:root[data-ui="v2"] .queue-pane .prio-opt { background: var(--surface-sunken); color: var(--text-secondary); }
:root[data-ui="v2"] .queue-pane .prio-opt.prio-low.current { background: var(--priority-low-bg); color: var(--priority-low-fg); }
:root[data-ui="v2"] .queue-pane .prio-opt.prio-medium.current { background: var(--priority-medium-bg); color: var(--priority-medium-fg); }
:root[data-ui="v2"] .queue-pane .prio-opt.prio-high.current { background: var(--priority-high-bg); color: var(--priority-high-fg); }
:root[data-ui="v2"] .queue-pane .prio-opt.prio-critical.current { background: var(--priority-critical-bg); color: var(--priority-critical-fg); }
:root[data-ui="v2"] .queue-pane-msgs { display: grid; gap: 8px; }
:root[data-ui="v2"] .queue-pane .t-preview-msg { position: static; width: auto; box-shadow: none; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-base); border: 1px solid var(--border-subtle); border-left: 3px solid var(--border-subtle); font-size: 13.5px; line-height: 1.45; }
:root[data-ui="v2"] .queue-pane .t-preview-msg.is-client { border-left-color: var(--status-open-solid); }
:root[data-ui="v2"] .queue-pane .t-preview-msg.is-agent { border-left-color: var(--brand); background: var(--brand-tint); }
:root[data-ui="v2"] .queue-pane .t-preview-msg.is-note { border-left-color: var(--priority-medium-solid); background: var(--priority-medium-bg); }
:root[data-ui="v2"] .queue-pane .t-preview-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 600; margin-bottom: 2px; }
:root[data-ui="v2"] .queue-pane-hint { margin: auto 0 0; font-size: 12px; color: var(--text-tertiary); }

/* Bulk bar: assign / status / priority / merge / delete on the selection */
:root[data-ui="v2"] .merge-bar { gap: 10px; padding: 10px 14px; border: var(--card-border); max-width: calc(100vw - 32px); flex-wrap: wrap; justify-content: center; }
:root[data-ui="v2"] .bulk-field { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: none; letter-spacing: 0; }
:root[data-ui="v2"] .bulk-field .row-select { flex: none; width: auto; min-width: 120px; font-size: 13px; }
:root[data-ui="v2"] .views-name-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: 0 0 4px; }
.views-name-label { display: block; font-size: 11px; font-weight: 700; color: var(--faint); margin: 0 0 4px; }   /* classic too: a label beats a placeholder */
:root[data-ui="v2"] .views-save { flex-wrap: wrap; }
:root[data-ui="v2"] .views-save .views-name-label { flex: 1 1 100%; }

/* Command palette */
:root[data-ui="v2"] .ui-overlay-top { place-items: start center; padding-top: 12vh; }
:root[data-ui="v2"] .cmdk { width: min(640px, 100%); padding: 0; overflow: hidden; }
:root[data-ui="v2"] .cmdk-input { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--text-tertiary); }
:root[data-ui="v2"] .cmdk-input input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; padding: 6px 0; font: inherit; font-size: 16px; color: var(--text-primary); outline: none; }
:root[data-ui="v2"] .cmdk-input input:focus { outline: none; box-shadow: none; }
:root[data-ui="v2"] .cmdk-list { max-height: min(56vh, 480px); overflow-y: auto; padding: 6px; }
:root[data-ui="v2"] .cmdk-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
:root[data-ui="v2"] .cmdk-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--radius-md); color: var(--text-primary); cursor: pointer; }
:root[data-ui="v2"] .cmdk-item .ui-ic { color: var(--text-tertiary); flex: none; }
:root[data-ui="v2"] .cmdk-item.is-active { background: var(--brand-tint); color: var(--brand-tint-text); }
:root[data-ui="v2"] .cmdk-item.is-active .ui-ic { color: inherit; }
:root[data-ui="v2"] .cmdk-label { font-weight: 600; white-space: nowrap; }
:root[data-ui="v2"] .cmdk-sub { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; font-size: 13px; }
:root[data-ui="v2"] .cmdk-item.is-active .cmdk-sub { color: inherit; opacity: .85; }
:root[data-ui="v2"] .cmdk-keys { margin-left: auto; display: inline-flex; gap: 4px; }
:root[data-ui="v2"] .cmdk-empty { padding: 28px 16px; text-align: center; color: var(--text-tertiary); }
:root[data-ui="v2"] .cmdk-foot { display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--text-tertiary); }
:root[data-ui="v2"] .cmdk-foot kbd { margin-right: 4px; }
@media (max-width: 700px) { :root[data-ui="v2"] .ui-overlay-top { padding-top: 8px; } :root[data-ui="v2"] .queue-pane { width: 100vw; } :root[data-ui="v2"] .queue-views { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } }

/* =============================================================================
   PHASE 2b · Ticket page (action bar, send panel, unread divider, warnings)
   ============================================================================= */
:root[data-ui="v2"] .tk-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; padding: 10px 14px; background: var(--surface-raised-grad); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised-sm); }
:root[data-ui="v2"] .tk-bar-left, :root[data-ui="v2"] .tk-bar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:root[data-ui="v2"] .tk-bar-right { margin-left: auto; }
:root[data-ui="v2"] .tk-bar-id { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--brand-text); background: var(--brand-tint); padding: 4px 10px; border-radius: var(--radius-sm); }
:root[data-ui="v2"] .tk-menu-wrap { position: relative; }
:root[data-ui="v2"] .tk-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: var(--card-border); border-radius: var(--radius-md); background: var(--surface-raised-grad); color: var(--text-primary); box-shadow: var(--shadow-raised-xs); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
:root[data-ui="v2"] .tk-btn:hover { transform: translateY(-1px); color: var(--brand-text); }
:root[data-ui="v2"] .tk-btn.chip, :root[data-ui="v2"] .tk-btn.badge { font-size: 12.5px; border-radius: 999px; padding: 0 12px; }
:root[data-ui="v2"] .tk-btn.chip:hover, :root[data-ui="v2"] .tk-btn.badge:hover { color: inherit; filter: brightness(.97); }
:root[data-ui="v2"] .tk-ghost { background: transparent; box-shadow: none; border-color: transparent; color: var(--text-secondary); }
:root[data-ui="v2"] .tk-ghost:hover { background: var(--surface-base); color: var(--text-primary); transform: none; }
:root[data-ui="v2"] .tk-primary { background: var(--brand-grad); color: var(--text-on-brand); border-color: transparent; box-shadow: var(--shadow-raised-sm); }
:root[data-ui="v2"] .tk-primary:hover { color: var(--text-on-brand); }
:root[data-ui="v2"] .tk-icon { width: 36px; padding: 0; justify-content: center; }
:root[data-ui="v2"] .tk-bar .menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 220px; z-index: 60; margin: 0; padding: 4px; list-style: none; background: var(--surface-overlay); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); animation: v2-menu-in var(--dur-base) var(--ease); }
:root[data-ui="v2"] .tk-bar .menu.align-right { left: auto; right: 0; }
:root[data-ui="v2"] .tk-bar-left .menu.align-right { left: 0; right: auto; }
:root[data-ui="v2"] .tk-bar .menu-sep { list-style: none; height: 1px; margin: 4px 6px; background: var(--border-subtle); }
:root[data-ui="v2"] .tk-bar .menu .is-danger { color: var(--danger-text); }
:root[data-ui="v2"] .tk-bar .menu .is-current { font-weight: 700; }
:root[data-ui="v2"] .tk-bar .menu .ui-ic { color: var(--text-tertiary); margin-right: 2px; }
/* The details card no longer needs its own status row and scattered buttons */
:root[data-ui="v2"] .status-actions, :root[data-ui="v2"] .ticket-delete-btn, :root[data-ui="v2"] .send-caret, :root[data-ui="v2"] #send-menu { display: none !important; }
:root[data-ui="v2"] .send-split button[type="submit"] { border-radius: var(--radius-md); }
:root[data-ui="v2"] .m-more-btn { display: none; }   /* phone "…" menu: the bar covers it */

/* Send panel: what happens after the reply goes out */
:root[data-ui="v2"] .tk-send-panel { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 10px 0 2px; padding: 10px 12px; background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
:root[data-ui="v2"] .tk-field { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: none; letter-spacing: 0; }
:root[data-ui="v2"] .tk-field select, :root[data-ui="v2"] .tk-field input[type="text"] { min-height: 34px; padding: 5px 10px; font-size: 13px; font-weight: 400; width: 150px; }
:root[data-ui="v2"] .tk-field.tk-note { flex: 1 1 220px; } :root[data-ui="v2"] .tk-field.tk-note input { width: 100%; }
:root[data-ui="v2"] .tk-check { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; align-self: end; }
:root[data-ui="v2"] .tk-warn { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--priority-medium-bg); color: var(--priority-medium-fg); font-size: 13px; }
:root[data-ui="v2"] .tk-warn .ui-ic { flex: none; }

/* Unread divider */
:root[data-ui="v2"] .tk-unread { display: flex; align-items: center; gap: 10px; margin: 2px 0; font-size: 12px; font-weight: 600; color: var(--brand-text); }
:root[data-ui="v2"] .tk-unread::before, :root[data-ui="v2"] .tk-unread::after { content: ""; flex: 1; height: 2px; background: var(--brand); opacity: .5; border-radius: 1px; }

/* Presence (who else is here) reads as part of the bar */
:root[data-ui="v2"] .presence-bar { margin: 0 0 8px; }
@media (max-width: 700px) { :root[data-ui="v2"] .tk-bar { position: static; } :root[data-ui="v2"] .tk-bar-right { margin-left: 0; } :root[data-ui="v2"] .tk-bar .tk-ghost span { display: none; } }

/* ---- QA pass 2026-10-26 ------------------------------------------------------ */
/* #13 The preview pill (fixed, bottom-left) covered the last row / buttons on every page. */
:root[data-ui="v2"] main { padding-bottom: 72px; }
/* #14 The theme toggle's icon collapsed to 6px and the button sat past the right edge. */
:root[data-ui="v2"] .theme-toggle { right: 24px; bottom: 24px; }
:root[data-ui="v2"] .theme-toggle svg { width: 22px; height: 22px; flex: none; }
/* #18 Security → Incidents: long titles widened the grid column and clipped the intro. */
/* #26 Analytics custom range: line the Period select up with the date boxes. */
:root[data-ui="v2"] #a-filters { align-items: flex-end; }

/* ---- Native <select> -> kit select (ui-kit.js enhanceSelect, 2026-10-26) -------
   The native control stays underneath (invisible, not focusable) so forms,
   validation and every existing change handler keep working. */
:root[data-ui="v2"] .select-native { display: inline-block; vertical-align: middle; position: relative; max-width: 100%; }
:root[data-ui="v2"] .select-native.select-fill { display: block; width: 100%; }
:root[data-ui="v2"] .select-native > select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
/* The open listbox is moved to <body> (see ui-kit.js), so it carries the kit menu look itself. */
:root[data-ui="v2"] ul.select-native-menu { position: fixed; z-index: 1000; margin: 0; padding: 4px; list-style: none; max-height: 280px; overflow-y: auto; background: var(--surface-overlay); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); animation: v2-menu-in var(--dur-base) var(--ease); }
:root[data-ui="v2"] .select-native:not(.select-fill) > .select-trigger { width: auto; }
:root[data-ui="v2"] .select-native .menu-group { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
:root[data-ui="v2"] .select-native .menu [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
:root[data-ui="v2"] .select-trigger[disabled] { opacity: .55; cursor: not-allowed; }
:root[data-ui="v2"] .select-value.placeholder { color: var(--text-tertiary); }
/* Compact variants: dashboard row controls, header search scope, pager, ticket send panel, bulk bar */
:root[data-ui="v2"] .select-trigger.row-select { min-height: 30px; padding: 0 26px 0 10px; font-size: 12.5px; font-weight: 600; width: auto; }
:root[data-ui="v2"] .select-trigger.row-select::after { right: 10px; }
:root[data-ui="v2"] .row-line .select-native { width: 150px; }
:root[data-ui="v2"] .t-category .select-native { width: 190px; }
:root[data-ui="v2"] .row-line .select-trigger.row-select, :root[data-ui="v2"] .t-category .select-trigger.row-select { width: 100%; }
/* Header search scope: theme tokens, not the classic dark-header white (it was white-on-white in light mode). */
:root[data-ui="v2"] .select-trigger.gsearch-type { min-height: 30px; padding: 0 24px 0 10px; font-size: 12px; font-weight: 600; background: var(--surface-raised-grad); color: var(--text-primary); border: var(--control-border); box-shadow: var(--shadow-raised-xs); }
:root[data-ui="v2"] .select-trigger.gsearch-type::after { right: 9px; border-color: currentColor; }
:root[data-ui="v2"] .pager-size .select-trigger, :root[data-ui="v2"] .tk-field .select-trigger, :root[data-ui="v2"] .ai-controls .select-trigger, :root[data-ui="v2"] .bulk-field .select-trigger { min-height: 34px; padding: 0 30px 0 10px; font-size: 13px; }
:root[data-ui="v2"] .filter-field .select-native, :root[data-ui="v2"] .field .select-native { display: block; width: 100%; }
:root[data-ui="v2"] .filter-field.is-set .select-trigger { border-color: var(--status-open-solid); }
/* Status / priority colours on the dashboard row triggers (same tokens as the classic row selects) */
:root[data-ui="v2"] .select-trigger.prio-low { background: var(--low-bg); color: var(--low-fg); }
:root[data-ui="v2"] .select-trigger.prio-medium { background: var(--med-bg); color: var(--med-fg); }
:root[data-ui="v2"] .select-trigger.prio-high { background: var(--high-bg); color: var(--high-fg); }
:root[data-ui="v2"] .select-trigger.prio-critical { background: var(--crit-bg); color: var(--crit-fg); }
:root[data-ui="v2"] .select-trigger.st-open { background: var(--blue-bg); color: var(--blue-2); }
:root[data-ui="v2"] .select-trigger.st-in-progress { background: var(--prog-bg); color: var(--prog-fg); }
:root[data-ui="v2"] .select-trigger.st-on-hold { background: var(--hold-bg); color: var(--hold-fg); }
:root[data-ui="v2"] .select-trigger.st-resolved { background: var(--resolved-bg); color: var(--resolved-fg); }
:root[data-ui="v2"] .select-trigger.st-closed { background: var(--closed-bg); color: var(--closed-fg); }
:root[data-ui="v2"] .select-trigger[class*="st-"]::after, :root[data-ui="v2"] .select-trigger[class*="prio-"]::after { border-color: currentColor; }
:root[data-ui="v2"] .pager-size { white-space: nowrap; }
:root[data-ui="v2"] .global-search .select-native { flex: none; }

/* ---- UI BUGS folder, 2026-10-26 ---------------------------------------------- */
/* The "Back to previous page" link stays on the same line as the back link. */
:root[data-ui="v2"] a.back-link { display: inline-flex; align-items: center; gap: 6px; }
:root[data-ui="v2"] .back-prev { display: inline-flex; margin-left: 14px; }
/* Assignee picker popup must sit above the ticket list card that follows it. */
:root[data-ui="v2"] #filters, :root[data-ui="v2"] .filters { position: relative; z-index: 30; }
:root[data-ui="v2"] .apick-menu { z-index: 1000; }
/* Services dropdown: the summary wears the kit trigger look; chips inside keep their colours. */
:root[data-ui="v2"] .svc-dd > summary.select-trigger { min-height: 36px; font-size: 13px; }
:root[data-ui="v2"] .svc-dd > summary::after { position: static; margin-top: 0; transform: rotate(45deg); }
:root[data-ui="v2"] .svc-dd[open] > summary::after { transform: rotate(225deg); }

/* ---- Phase 3: On Hold with a reason ---- */
:root[data-ui="v2"] .hold-dialog .hold-opts { display: grid; gap: 8px; margin: 14px 0 12px; }
:root[data-ui="v2"] .hold-opt { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border: var(--control-border); border-radius: var(--radius-md); background: var(--surface-base); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
:root[data-ui="v2"] .hold-opt:hover { background: var(--surface-raised); }
:root[data-ui="v2"] .hold-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
:root[data-ui="v2"] .hold-opt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
:root[data-ui="v2"] .hold-opt input { grid-row: 1 / span 2; margin: 0; accent-color: var(--brand); }
:root[data-ui="v2"] .hold-opt-t { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-primary); }
:root[data-ui="v2"] .hold-opt-s { font-size: 12px; color: var(--text-tertiary); font-weight: 400; }
:root[data-ui="v2"] .hold-field { display: grid; gap: 4px; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
:root[data-ui="v2"] .hold-field input { width: 100%; }
:root[data-ui="v2"] .hold-error { margin: 0 0 8px; color: var(--danger, #c0392b); font-size: 13px; }
:root[data-ui="v2"] .t-turn[data-turn="hold"] { background: var(--status-hold-bg); color: var(--status-hold-fg); }
:root[data-ui="v2"] .t-turn[data-turn="hold"][data-hold="scheduled"] { background: var(--brand-tint); color: var(--brand-tint-text); }
:root[data-ui="v2"] .t-turn[data-turn="hold"][data-hold="vendor"]::before { border-radius: 2px; }
:root[data-ui="v2"] .queue-subviews { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 14px 4px; }
:root[data-ui="v2"] .queue-subview { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: var(--control-border); border-radius: 999px; background: var(--surface-base); color: var(--text-secondary); font-size: 12px; font-weight: 600; box-shadow: none; }
:root[data-ui="v2"] .queue-subview:hover { color: var(--text-primary); transform: none; }
:root[data-ui="v2"] .queue-subview.is-active { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-tint-text); }
:root[data-ui="v2"] .queue-subview .queue-count { min-width: 18px; height: 18px; font-size: 11px; }
:root[data-ui="v2"] .hold-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--status-hold-bg); color: var(--status-hold-fg); max-width: 100%; }
:root[data-ui="v2"] .hold-chip.hold-scheduled { background: var(--brand-tint); color: var(--brand-tint-text); }
:root[data-ui="v2"] .hold-chip .hold-note { font-weight: 400; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
:root[data-ui="v2"] .hold-chip .hold-change { font-size: 12px; padding: 0; margin-left: 2px; }

/* ---- Phase 3: two SLA clocks (first reply + resolve) ---- */
:root[data-ui="v2"] .sla-1st { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 0 4px; border-radius: 4px; background: rgba(0,0,0,.12); margin-right: 2px; }
:root[data-ui="v2"] .sla-meters { display: inline-flex; gap: 14px; flex-wrap: wrap; align-items: center; }
:root[data-ui="v2"] .sla-meter { display: inline-grid; grid-template-columns: auto 72px auto; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
:root[data-ui="v2"] .sla-meter-label { color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: .06em; }
:root[data-ui="v2"] .sla-meter-bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
:root[data-ui="v2"] .sla-meter-bar i { display: block; height: 100%; border-radius: 999px; background: var(--status-open-fg); transition: width var(--dur-base) var(--ease); }
:root[data-ui="v2"] .sla-meter-green .sla-meter-bar i { background: #16a34a; }
:root[data-ui="v2"] .sla-meter-yellow .sla-meter-bar i { background: #d97706; }
:root[data-ui="v2"] .sla-meter-red .sla-meter-bar i, :root[data-ui="v2"] .sla-meter-late .sla-meter-bar i { background: #dc2626; }
:root[data-ui="v2"] .sla-meter-red .sla-meter-text, :root[data-ui="v2"] .sla-meter-late .sla-meter-text { color: #dc2626; }
:root[data-ui="v2"] .sla-meter-done .sla-meter-bar i { background: var(--text-tertiary); }
:root[data-ui="v2"] .sla-meter-paused .sla-meter-bar i { background: var(--sla-paused-fg); width: 30% !important; opacity: .5; }
:root[data-ui="v2"] .queue-pane-clocks { font-size: 12px; color: var(--text-secondary); padding: 0 0 8px; }
:root[data-ui="v2"] .sla-targets-grid { border-collapse: collapse; margin: 10px 0 6px; }
:root[data-ui="v2"] .sla-targets-grid th, :root[data-ui="v2"] .sla-targets-grid td { padding: 4px 8px 4px 0; text-align: left; font-size: 12px; color: var(--text-secondary); }
:root[data-ui="v2"] .sla-targets-grid input { width: 90px; }

/* ---- Phase 3: snooze ---- */
:root[data-ui="v2"] .snooze-opts { display: grid; gap: 8px; margin: 14px 0 12px; }
:root[data-ui="v2"] .t-turn[data-turn="snoozed"] { background: var(--sla-paused-bg); color: var(--sla-paused-fg); }
:root[data-ui="v2"] .snooze-chip { background: var(--sla-paused-bg); color: var(--sla-paused-fg); }
:root[data-ui="v2"] .ticket-row:has(.t-turn[data-turn="snoozed"]) { opacity: .78; }
:root[data-ui="v2"] .ticket-row:has(.t-turn[data-turn="snoozed"]):hover { opacity: 1; }

/* ---- Phase 3: @mentions ---- */
:root[data-ui="v2"] .mention { background: var(--brand-tint); color: var(--brand-tint-text); border-radius: 4px; padding: 0 4px; font-weight: 600; }
:root[data-ui="v2"] .mention-pop { background: var(--surface-overlay); border: var(--control-border); border-radius: var(--radius-md); box-shadow: var(--shadow-raised-md, 0 8px 24px rgba(0,0,0,.18)); }
:root[data-ui="v2"] .mention-item { color: var(--text-primary); }
:root[data-ui="v2"] .mention-item.is-active, :root[data-ui="v2"] .mention-item:hover { background: var(--brand-tint); color: var(--brand-tint-text); transform: none; box-shadow: none; }
:root[data-ui="v2"] .mention-role { color: var(--text-tertiary); }
:root[data-ui="v2"] .msg.is-target { outline: 2px solid var(--brand); outline-offset: 2px; animation: v2-fade-in var(--dur-base) var(--ease); }

/* ---- Phase 4: side conversations (vendor threads) ---- */
:root[data-ui="v2"] .side-card { grid-column: 1 / -1; }
:root[data-ui="v2"] .side-conv { border: var(--card-border); border-radius: var(--radius-lg); padding: 12px 14px; margin: 10px 0; background: var(--surface-base); }
:root[data-ui="v2"] .side-conv.is-closed { opacity: .72; }
:root[data-ui="v2"] .side-conv.is-their-word { border-color: var(--status-open-fg); }
:root[data-ui="v2"] .side-conv.is-target { outline: 2px solid var(--brand); outline-offset: 2px; }
:root[data-ui="v2"] .side-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; }
:root[data-ui="v2"] .side-with { font-weight: 700; color: var(--text-primary); }
:root[data-ui="v2"] .side-seq { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--brand-tint); color: var(--brand-tint-text); }
:root[data-ui="v2"] .side-subject { flex-basis: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
:root[data-ui="v2"] .side-msgs { display: flex; flex-direction: column; gap: 8px; }
:root[data-ui="v2"] .side-msg { max-width: 82%; padding: 8px 12px; border-radius: var(--radius-md); border: var(--control-border); background: var(--surface-raised); font-size: 13px; }
:root[data-ui="v2"] .side-msg.is-out { align-self: flex-end; background: var(--brand-tint); color: var(--brand-tint-text); border-color: transparent; }
:root[data-ui="v2"] .side-msg.is-new { box-shadow: 0 0 0 2px var(--status-open-fg); }
:root[data-ui="v2"] .side-msg-head { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; margin-bottom: 4px; }
:root[data-ui="v2"] .side-msg-who { font-weight: 700; }
:root[data-ui="v2"] .side-msg-body p { margin: 0 0 6px; }
:root[data-ui="v2"] .side-actions { display: flex; gap: 8px; margin-top: 10px; }
:root[data-ui="v2"] .side-composer { margin-top: 14px; padding-top: 14px; border-top: var(--control-border); display: grid; gap: 10px; }
:root[data-ui="v2"] .side-composer-title { margin: 0; font-size: 15px; }
:root[data-ui="v2"] .side-field { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
:root[data-ui="v2"] .side-field input { width: 100%; }
:root[data-ui="v2"] .side-opts { display: grid; gap: 6px; font-size: 13px; }
:root[data-ui="v2"] .side-opts label { display: flex; align-items: center; gap: 8px; }
:root[data-ui="v2"] .side-attach-from summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); }
:root[data-ui="v2"] .side-att-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 2px 0 2px 12px; }
:root[data-ui="v2"] .t-side { display: inline-flex; align-items: baseline; gap: 2px; margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 800; background: var(--status-open-bg); color: var(--status-open-fg); vertical-align: middle; }
:root[data-ui="v2"] .t-side b { font-size: 10px; }
:root[data-ui="v2"] .queue-pane-side { font-size: 12px; color: var(--text-secondary); padding: 2px 0; }
:root[data-ui="v2"] .queue-pane-side.is-their-word { color: var(--status-open-fg); font-weight: 600; }

/* ---- Phase 4: account at a glance ---- */
:root[data-ui="v2"] .tk-glance { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; padding: 6px 14px; border-radius: var(--radius-md); font-size: 13px; background: var(--surface-sunken-grad); border: var(--control-border); color: var(--text-secondary); }
:root[data-ui="v2"] .tk-glance.tone-warn { border-color: #d97706; background: color-mix(in srgb, #d97706 10%, var(--surface-base)); }
:root[data-ui="v2"] .tk-glance.tone-bad { border-color: #dc2626; background: color-mix(in srgb, #dc2626 10%, var(--surface-base)); }
:root[data-ui="v2"] .tk-seg { color: inherit; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
:root[data-ui="v2"] .tk-seg:hover { text-decoration: underline; }
:root[data-ui="v2"] .tk-seg.is-warn { color: #b45309; }
:root[data-ui="v2"] .tk-seg.is-bad { color: #dc2626; }
:root[data-ui="v2"] .tk-glance .tk-sep { color: var(--text-tertiary); }
:root[data-ui="v2"] .tk-glance-more { display: none; border: 0; background: none; color: var(--brand); font: inherit; font-size: 12px; font-weight: 700; padding: 0 4px; cursor: pointer; box-shadow: none; }
@media (max-width: 700px) { :root[data-ui="v2"] .tk-glance.is-collapsed > :nth-child(n+4):not(.tk-glance-more) { display: none; } :root[data-ui="v2"] .tk-glance-more { display: inline; } }
:root[data-ui="v2"] .tk-departed { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: var(--radius-md); background: color-mix(in srgb, #dc2626 12%, var(--surface-base)); border: 1px solid #dc2626; color: var(--text-primary); font-size: 13px; }
:root[data-ui="v2"] .tk-departed-actions { display: flex; gap: 8px; }

/* ---- Phase 4: merge dialog + suggestions ---- */
:root[data-ui="v2"] .merge-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; margin: 14px 0 10px; }
:root[data-ui="v2"] .merge-side { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); min-width: 0; }
:root[data-ui="v2"] .merge-side input { width: 100%; font-family: var(--font-mono, monospace); }
:root[data-ui="v2"] .merge-side-sub { font-weight: 400; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em; }
:root[data-ui="v2"] .merge-swap { align-self: center; margin-bottom: 18px; }
:root[data-ui="v2"] .merge-preview { margin: 6px 0; color: var(--text-primary); font-size: 14px; }
:root[data-ui="v2"] .merge-warnings { margin: 6px 0 0; padding: 8px 12px 8px 28px; border-radius: var(--radius-md); background: color-mix(in srgb, #d97706 12%, var(--surface-base)); color: #b45309; font-size: 13px; }
:root[data-ui="v2"] .tk-suggest { margin: -6px 0 10px; font-size: 13px; color: var(--text-secondary); }
:root[data-ui="v2"] .tk-suggest-item { display: block; }
:root[data-ui="v2"] .tk-suggest .btn-link { font-size: 13px; padding: 0; }
@media (max-width: 700px) { :root[data-ui="v2"] .merge-pair { grid-template-columns: 1fr; } :root[data-ui="v2"] .merge-swap { justify-self: center; margin: 0; } }

/* =============================================================================
   PHASE 2c · Ticket page consolidation (ticket-layout.js): one header, one
   context row. Scoped to .tk-consolidated so the classic markup is untouched
   until the script has reshaped the page.
   ============================================================================= */
/* The bar owns status / priority / assignee / due time: the card stops repeating them */
:root[data-ui="v2"].tk-consolidated .detail-head > .chip,
:root[data-ui="v2"].tk-consolidated dl.fields [data-field="priority"],
:root[data-ui="v2"].tk-consolidated dl.fields [data-field="status"],
:root[data-ui="v2"].tk-consolidated dl.fields [data-field="sla"],
:root[data-ui="v2"].tk-consolidated dl.fields [data-field="assigned-agent"],
:root[data-ui="v2"].tk-consolidated dl.fields [data-field="created"],
:root[data-ui="v2"].tk-consolidated dl.fields [data-field="last-modified"],
:root[data-ui="v2"].tk-consolidated dl.fields [data-field="category"] > dt:empty,
:root[data-ui="v2"].tk-consolidated dl.fields dt[data-field="category"],
:root[data-ui="v2"].tk-consolidated dl.fields dt[data-field="subcategory"],
:root[data-ui="v2"].tk-consolidated dl.fields dt[data-field="tags"] { display: none !important; }
:root[data-ui="v2"].tk-consolidated .sla-actions { display: none !important; }   /* the ⋯ menu's "Change due time" dialog drives these hidden controls */
:root[data-ui="v2"].tk-consolidated .sla-actions.is-shown { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-sunken-grad); border: var(--control-border); }
:root[data-ui="v2"].tk-consolidated .sla-actions .ticket-delete-btn { display: none !important; }

/* The details line: category › subcategory · tags · Reporter · Cc */
:root[data-ui="v2"].tk-consolidated dl.fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 14px 0 6px; }
:root[data-ui="v2"].tk-consolidated dl.fields dt { margin: 0; font-size: 11px; letter-spacing: .04em; }
:root[data-ui="v2"].tk-consolidated dl.fields dd { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="category"]::after { content: "›"; color: var(--text-tertiary); font-weight: 600; margin: 0 -2px; }
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="subcategory"]::after,
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="tags"]::after { content: "·"; color: var(--text-tertiary); margin-left: 4px; }
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="reporter"] { flex-wrap: wrap; }
:root[data-ui="v2"].tk-consolidated dl.fields dt[data-field="reporter"], :root[data-ui="v2"].tk-consolidated dl.fields dt[data-field="cc-d"] { color: var(--text-tertiary); text-transform: none; font-size: 12.5px; font-weight: 600; letter-spacing: 0; }
:root[data-ui="v2"].tk-consolidated dl.fields dt[data-field="reporter"] { margin-left: 2px; }
:root[data-ui="v2"].tk-consolidated dl.fields dd.cc-list.is-collapsed .tk-cc-full { display: none; }
:root[data-ui="v2"].tk-consolidated dl.fields dd.cc-list .tk-cc-full { font-weight: 400; color: var(--text-secondary); }
:root[data-ui="v2"].tk-consolidated .tk-cc-toggle { font-weight: 600; padding: 0 2px; }
:root[data-ui="v2"].tk-consolidated .tk-when { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; font-size: 12.5px; color: var(--text-tertiary); }
:root[data-ui="v2"].tk-consolidated .tk-when .tk-sep { color: var(--text-tertiary); }
:root[data-ui="v2"].tk-consolidated .scenario-bar { margin-top: 10px; }
:root[data-ui="v2"].tk-consolidated .detail-head { gap: 10px; }
:root[data-ui="v2"].tk-consolidated .detail-subject { margin: 8px 0 10px; }
:root[data-ui="v2"].tk-consolidated #ticket-detail { margin-bottom: 10px; }

/* AI summary: four lines, then "Show more" */
:root[data-ui="v2"].tk-consolidated .ai-summary-body.is-clipped { max-height: 6.2em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
:root[data-ui="v2"].tk-consolidated .tk-sum-more { margin-top: 4px; font-weight: 600; }

/* The old right column is empty now; the page uses its full width */
:root[data-ui="v2"].tk-consolidated .detail-side.is-emptied { display: none !important; }
@media (max-width: 2100px) { :root[data-ui="v2"].tk-consolidated main.wide { max-width: 1500px; margin-left: auto; margin-right: auto; } }

/* Context rail (right edge) + drawer */
:root[data-ui="v2"] .tk-rail { position: fixed; right: 10px; top: calc(var(--tk-head, 62px) + 14px); z-index: 35; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--surface-raised-grad); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised-sm); }
:root[data-ui="v2"] .tk-rail-btn { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 56px; min-height: 50px; padding: 6px 2px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; box-shadow: none; }
:root[data-ui="v2"] .tk-rail-btn .ui-ic { color: var(--text-tertiary); }
:root[data-ui="v2"] .tk-rail-btn:hover { background: var(--surface-base); color: var(--text-primary); }
:root[data-ui="v2"] .tk-rail-btn:hover .ui-ic { color: var(--text-primary); }
:root[data-ui="v2"] .tk-rail-btn[aria-expanded="true"] { background: var(--brand-tint); color: var(--brand-tint-text); border-color: var(--brand-tint); }
:root[data-ui="v2"] .tk-rail-btn[aria-expanded="true"] .ui-ic { color: var(--brand-text); }
:root[data-ui="v2"] .tk-rail-count { position: absolute; top: 0; right: 0; min-width: 18px; padding: 1px 5px; border-radius: 999px; font-size: 10px; font-weight: 700; color: var(--text-on-brand); background: var(--brand); line-height: 1.4; text-align: center; }
:root[data-ui="v2"] .tk-rail-count:empty { display: none; }
:root[data-ui="v2"] .tk-rail-btn:not(.has-count) .tk-rail-count { background: var(--surface-sunken-grad); color: var(--text-tertiary); border: var(--control-border); }
:root[data-ui="v2"] .tk-drawer { position: fixed; top: var(--tk-head, 62px); right: 0; bottom: 0; width: min(440px, 100vw); z-index: 34; display: flex; flex-direction: column; background: var(--surface-overlay); border-left: var(--card-border); box-shadow: var(--shadow-overlay); animation: tk-drawer-in var(--dur-base) var(--ease); }
@keyframes tk-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { :root[data-ui="v2"] .tk-drawer { animation: none; } }
:root[data-ui="v2"] .tk-drawer-head { display: flex; align-items: center; gap: 6px; padding: 12px 14px 10px 18px; border-bottom: 1px solid var(--border-subtle); }
:root[data-ui="v2"] .tk-drawer-title { margin: 0; flex: 1; font-size: 15px; font-weight: 700; color: var(--text-primary); }
:root[data-ui="v2"] .tk-drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px 24px; }
:root[data-ui="v2"] .tk-ctx-card { display: none; margin: 0 !important; width: 100%; box-shadow: none !important; border: 0 !important; background: transparent !important; padding: 0 !important; }
:root[data-ui="v2"] .tk-ctx-card.is-open { display: block; }
:root[data-ui="v2"] .tk-ctx-card > summary, :root[data-ui="v2"] .tk-ctx-card > .side-head { display: none; }
/* Rail + floating drawer leave room on the right; pinned = docked beside the content */
:root[data-ui="v2"] main.wide { padding-right: 110px; }
:root[data-ui="v2"] body.tk-drawer-docked main.wide { padding-right: calc(min(440px, 100vw) + 124px); max-width: none; margin-left: 16px; }
:root[data-ui="v2"] body.tk-drawer-open .tk-rail { right: calc(min(440px, 100vw) + 10px); }
:root[data-ui="v2"] body.tk-drawer-docked .tk-drawer { box-shadow: none; animation: none; }
/* Empty "account at a glance" strip (contact with no company yet) takes no space */
:root[data-ui="v2"] .tk-glance:empty { display: none; }
@media (max-width: 1100px) { :root[data-ui="v2"] .tk-rail-label { display: none; } :root[data-ui="v2"] .tk-rail-btn { width: 44px; min-height: 42px; } :root[data-ui="v2"] main.wide { padding-right: 70px; } }
@media (max-width: 700px) {
  :root[data-ui="v2"] .tk-rail { top: auto; bottom: calc(var(--m-nav, 64px) + 12px); right: 66px; left: auto; flex-direction: row; gap: 2px; padding: 4px; }
  :root[data-ui="v2"] .tk-rail-btn { width: 46px; min-height: 44px; }
  :root[data-ui="v2"] .ui-preview-pill { bottom: calc(var(--m-nav, 64px) + 70px) !important; }
  :root[data-ui="v2"] main.wide { padding-right: 0; padding-bottom: 90px; }
  :root[data-ui="v2"] .tk-drawer { top: var(--tk-head, 62px); width: 100vw; z-index: 45; }
  :root[data-ui="v2"].tk-consolidated dl.fields dd::after { content: none !important; }
  :root[data-ui="v2"].tk-consolidated dl.fields { gap: 8px 12px; }
}

/* =============================================================================
   COLOUR PASS · colour carries meaning, nothing decorative.
   Purple  = the primary action and "you are here"
   Status / priority / SLA = their own token hues (same meanings as classic)
   Blue    = the client (conversation, their messages, their turn)
   Green   = ours / done (our replies, Close, resolved)
   Amber   = internal (notes) and warnings
   Red     = breached / danger
   ============================================================================= */
/* The bar: status and priority wear their colours, strong enough to read at a glance */
:root[data-ui="v2"] .tk-bar .tk-btn.chip { border-width: 1.5px; font-weight: 700; }
:root[data-ui="v2"] .tk-bar .tk-btn.chip.st-open { background: var(--status-open-bg); color: var(--status-open-fg); border-color: var(--status-open-solid); }
:root[data-ui="v2"] .tk-bar .tk-btn.chip.st-in-progress { background: var(--status-progress-bg); color: var(--status-progress-fg); border-color: var(--status-progress-solid); }
:root[data-ui="v2"] .tk-bar .tk-btn.chip.st-on-hold { background: var(--status-hold-bg); color: var(--status-hold-fg); border-color: var(--status-hold-solid); }
:root[data-ui="v2"] .tk-bar .tk-btn.chip.st-resolved { background: var(--status-resolved-bg); color: var(--status-resolved-fg); border-color: var(--status-resolved-solid); }
:root[data-ui="v2"] .tk-bar .tk-btn.chip.st-closed { background: var(--status-closed-bg); color: var(--status-closed-fg); border-color: var(--status-closed-solid); }
:root[data-ui="v2"] .tk-bar .tk-btn.badge { border-width: 1.5px; font-weight: 700; }
:root[data-ui="v2"] .tk-bar .tk-btn.badge.priority-low { background: var(--priority-low-bg); color: var(--priority-low-fg); border-color: var(--priority-low-solid); }
:root[data-ui="v2"] .tk-bar .tk-btn.badge.priority-medium { background: var(--priority-medium-bg); color: var(--priority-medium-fg); border-color: var(--priority-medium-solid); }
:root[data-ui="v2"] .tk-bar .tk-btn.badge.priority-high { background: var(--priority-high-bg); color: var(--priority-high-fg); border-color: var(--priority-high-solid); }
:root[data-ui="v2"] .tk-bar .tk-btn.badge.priority-critical { background: var(--priority-critical-bg); color: var(--priority-critical-fg); border-color: var(--priority-critical-solid); }
:root[data-ui="v2"] .tk-bar .tk-btn.badge i { background: currentColor; }
/* Reply is the primary action (purple); Close is green = "done", not the loudest thing on the page */
:root[data-ui="v2"] .tk-bar [data-act="reply"] { background: var(--brand-grad); color: var(--text-on-brand); border-color: transparent; box-shadow: var(--shadow-raised-sm); }
:root[data-ui="v2"] .tk-bar [data-act="reply"]:hover { color: var(--text-on-brand); }
:root[data-ui="v2"] .tk-bar [data-act="reply"] .ui-ic { color: inherit; }
:root[data-ui="v2"] .tk-bar .tk-primary[aria-controls="tk-close"] { background: var(--status-resolved-bg); color: var(--status-resolved-fg); border-color: var(--status-resolved-solid); box-shadow: var(--shadow-raised-xs); }
:root[data-ui="v2"] .tk-bar .tk-primary[aria-controls="tk-close"]:hover { color: var(--status-resolved-fg); filter: brightness(.97); }
:root[data-ui="v2"] .tk-bar [data-act="note"] { color: var(--priority-medium-fg); }
:root[data-ui="v2"] .tk-bar [data-act="note"] .ui-ic { color: var(--priority-medium-fg); }
/* The ticket card wears its priority on the left edge */
:root[data-ui="v2"] #ticket-detail { border-left: 5px solid transparent; }
:root[data-ui="v2"] #ticket-detail.tk-prio-low { border-left-color: var(--priority-low-solid); }
:root[data-ui="v2"] #ticket-detail.tk-prio-medium { border-left-color: var(--priority-medium-solid); }
:root[data-ui="v2"] #ticket-detail.tk-prio-high { border-left-color: var(--priority-high-solid); }
:root[data-ui="v2"] #ticket-detail.tk-prio-critical { border-left-color: var(--priority-critical-solid); }
/* SLA meters: the bar fill carries the level */
:root[data-ui="v2"] .sla-meter-bar i { background: var(--sla-ontrack-fg); }
:root[data-ui="v2"] .sla-meter-yellow .sla-meter-bar i { background: var(--sla-warning-fg); }
:root[data-ui="v2"] .sla-meter-red .sla-meter-bar i, :root[data-ui="v2"] .sla-meter-late .sla-meter-bar i { background: var(--sla-breached-fg); }
:root[data-ui="v2"] .sla-meter-done .sla-meter-bar i { background: var(--sla-met-fg); }
:root[data-ui="v2"] .sla-meter-red .sla-meter-text, :root[data-ui="v2"] .sla-meter-late .sla-meter-text { color: var(--sla-breached-fg); font-weight: 700; }
:root[data-ui="v2"] .sla-meter-yellow .sla-meter-text { color: var(--sla-warning-fg); font-weight: 700; }
:root[data-ui="v2"] .sla-meter-done .sla-meter-text { color: var(--sla-met-fg); }
/* Sections: the client's side is blue, ours is green, internal is amber */
:root[data-ui="v2"] .reply-card { border-top: 4px solid var(--info-fg); }
:root[data-ui="v2"] .reply-card > h2 { color: var(--info-fg); }
:root[data-ui="v2"] .reply-card > h2 .ui-ic { color: var(--info-fg); }
:root[data-ui="v2"] .note-card { border-top: 4px solid var(--priority-medium-fg); }
:root[data-ui="v2"] .note-card > h2, :root[data-ui="v2"] .note-card > h2 .ui-ic { color: var(--priority-medium-fg); }
:root[data-ui="v2"] .msg { border-left: 4px solid var(--border-subtle); }
:root[data-ui="v2"] .msg-in { border-left-color: var(--info-fg); background: color-mix(in srgb, var(--info-bg) 55%, var(--surface-raised)); }
:root[data-ui="v2"] .msg-out { border-left-color: var(--sla-met-fg); background: color-mix(in srgb, var(--sla-met-bg) 45%, var(--surface-raised)); }
:root[data-ui="v2"] .msg-note { border-left-color: var(--priority-medium-fg); }
:root[data-ui="v2"] .msg-in .msg-who { color: var(--info-fg); }
:root[data-ui="v2"] .msg-out .msg-who { color: var(--sla-met-fg); }
:root[data-ui="v2"] .btn-reply-open { color: var(--info-fg); border-color: var(--info-fg); }
:root[data-ui="v2"] .btn-note-open { color: var(--priority-medium-fg); border-color: var(--priority-medium-fg); }
/* Queue: priority on the row's left edge, the views bar's counts coloured by what they mean */
:root[data-ui="v2"] .ticket-row:has(.row-select.prio-critical) { border-left: 3px solid var(--priority-critical-solid); }
:root[data-ui="v2"] .ticket-row:has(.row-select.prio-high) { border-left: 3px solid var(--priority-high-solid); }
:root[data-ui="v2"] .ticket-row:has(.row-select.prio-medium) { border-left: 3px solid var(--priority-medium-solid); }
:root[data-ui="v2"] .ticket-row:has(.row-select.prio-low) { border-left: 3px solid var(--priority-low-solid); }
:root[data-ui="v2"] .queue-view[data-view="needs"] .queue-count { background: var(--priority-high-bg); color: var(--priority-high-fg); }
:root[data-ui="v2"] .queue-view[data-view="due"] .queue-count { background: var(--sla-warning-bg); color: var(--sla-warning-fg); }
:root[data-ui="v2"] .queue-view[data-view="waiting"] .queue-count { background: var(--status-hold-bg); color: var(--status-hold-fg); }
:root[data-ui="v2"] .queue-view[data-view="unassigned"] .queue-count { background: var(--info-bg); color: var(--info-fg); }
:root[data-ui="v2"] .queue-view.is-active .queue-count { background: rgba(255,255,255,.25); color: var(--text-on-brand); }
:root[data-ui="v2"] .t-turn[data-turn="ours"] { background: var(--priority-high-bg); color: var(--priority-high-fg); }     /* the client replied: your turn */
:root[data-ui="v2"] .t-turn[data-turn="theirs"] { background: var(--info-bg); color: var(--info-fg); }                      /* waiting on the client */
:root[data-ui="v2"] .t-turn[data-turn="done"] { color: var(--sla-met-fg); }

/* Reporter + Cc'd on their own row (Cain, 2026-10-26); the tags dd ends the first row. */
:root[data-ui="v2"].tk-consolidated dl.fields .tk-break { flex-basis: 100%; height: 0; margin: -2px 0; }
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="tags"]::after { content: none; }
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="subcategory"] .ai-suggest-btn { margin-left: 2px; }

/* Cc'd row: the "hide" toggle never shrinks or wraps; a long list goes on its own line under it (Tinyuibug, 2026-10-26). */
:root[data-ui="v2"].tk-consolidated .tk-cc-toggle { flex: none; white-space: nowrap; }
:root[data-ui="v2"].tk-consolidated dl.fields dd.tk-cc-full { flex: 1 1 100%; min-width: 0; display: block; line-height: 1.5; font-weight: 400; color: var(--text-secondary); margin-top: -4px; }
:root[data-ui="v2"].tk-consolidated dl.fields dd.cc-list.is-collapsed + dd.tk-cc-full { display: none; }

/* The SLA quick-pick menu was painting BEHIND the conversation cards below the header card (tinguibug2, 2026-10-26). */
:root[data-ui="v2"] #ticket-detail { position: relative; }
:root[data-ui="v2"] #ticket-detail:has(.sla-menu:not([hidden])), :root[data-ui="v2"] #ticket-detail:has(#sla-custom:not([hidden])) { z-index: 40; }
:root[data-ui="v2"] .sla-menu { z-index: 60; }

/* "Change due time" dialog (⋯ menu) */
:root[data-ui="v2"] .due-picks { display: grid; gap: 6px; margin: 12px 0 4px; }
:root[data-ui="v2"] .due-pick { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; padding: 10px 12px; border: var(--control-border); border-radius: var(--radius-md); background: var(--surface-base); color: var(--text-primary); font: inherit; font-weight: 600; text-align: left; box-shadow: none; }
:root[data-ui="v2"] .due-pick:hover { background: var(--brand-tint); color: var(--brand-tint-text); transform: none; }
:root[data-ui="v2"] .due-pick small { font-weight: 400; color: var(--text-tertiary); }
:root[data-ui="v2"] .due-pick-reset { margin-top: 6px; }

/* =============================================================================
   PHASE 2d · Dashboard: one place to pick a view (queue-layout.js)
   sidebar = where · filters = refine · list = what
   ============================================================================= */
/* Sidebar: the saved-views dock stays open on wide screens and loses its tab/collapse */
:root[data-ui="v2"].dash-sidebar .views-dock .views-rail, :root[data-ui="v2"].dash-sidebar .views-collapse { display: none !important; }
:root[data-ui="v2"].dash-sidebar .views-dock.open .views-body { display: flex; width: 248px; padding: 16px 12px 18px; border-radius: 0 var(--radius-lg) 0 0; }
:root[data-ui="v2"].dash-sidebar body.views-open main.dash { margin-left: 272px; }
:root[data-ui="v2"] .views-builtin-head, :root[data-ui="v2"] .views-head h3 { margin: 0 0 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
:root[data-ui="v2"] .views-head { margin-top: 18px; }
/* Built-in views as a vertical list in the sidebar */
:root[data-ui="v2"] .views-body .queue-views { display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 0 0 4px; padding: 0; background: none; border: 0; box-shadow: none; }
:root[data-ui="v2"] .views-body .queue-view { width: 100%; justify-content: space-between; min-height: 36px; padding: 0 10px 0 12px; border-radius: var(--radius-md); font-size: 13.5px; }
:root[data-ui="v2"] .views-body .queue-view .queue-count { min-width: 24px; text-align: center; }
:root[data-ui="v2"] .views-body .queue-subviews { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 8px 12px; }
:root[data-ui="v2"] .views-body .queue-subview { font-size: 12px; min-height: 26px; padding: 0 8px; }
/* Saved views read like the built-ins */
:root[data-ui="v2"] .views-body .view-row { border-radius: var(--radius-md); }
:root[data-ui="v2"] .views-body .views-save { margin-top: 10px; }
/* The tiles are gone: their numbers are the sidebar counts */
:root[data-ui="v2"].dash-sidebar #stats { display: none !important; }
:root[data-ui="v2"] .list-closed-today { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; font-size: 12.5px; color: var(--text-tertiary); }
:root[data-ui="v2"] .list-closed-today .ui-ic { color: var(--sla-met-fg); }
/* Filters: a button and chips; the row opens under it */
:root[data-ui="v2"] .dash-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
:root[data-ui="v2"] .dash-filter-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: var(--card-border); border-radius: var(--radius-md); background: var(--surface-raised-grad); color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-raised-xs); }
:root[data-ui="v2"] .dash-filter-btn[aria-expanded="true"], :root[data-ui="v2"] .dash-filter-btn.is-set { color: var(--brand-text); border-color: var(--brand); }
:root[data-ui="v2"] .dash-filter-n { min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: var(--text-on-brand); font-size: 11px; line-height: 18px; text-align: center; }
:root[data-ui="v2"] .dash-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
:root[data-ui="v2"] .dash-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 6px 0 10px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-tint-text); font-size: 12.5px; font-weight: 600; }
:root[data-ui="v2"] .dash-chip-k { font-weight: 400; opacity: .8; }
:root[data-ui="v2"] .dash-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; box-shadow: none; padding: 0; }
:root[data-ui="v2"] .dash-chip-x:hover { background: rgba(0,0,0,.08); }
:root[data-ui="v2"] .dash-chip-clear { font-size: 12.5px; font-weight: 600; }
:root[data-ui="v2"] #filters.is-collapsed { display: none !important; }
:root[data-ui="v2"] #filters:not(.is-collapsed) { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface-sunken-grad); border: var(--control-border); animation: v2-menu-in var(--dur-base) var(--ease); }
/* The page header carries the title and the one primary action; the hero text is gone */
@media (max-width: 1099px) { :root[data-ui="v2"] .views-head h3 { text-transform: none; font-size: 15px; letter-spacing: 0; color: var(--text-primary); } }

/* =============================================================================
   PAGE SWEEP · Tasks (tasks-layout.js)
   ============================================================================= */
:root[data-ui="v2"].tasks-consolidated .tasks-hint, :root[data-ui="v2"].tasks-consolidated #task-stats { display: none !important; }
:root[data-ui="v2"] .tasks-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
:root[data-ui="v2"] .tasks-head h2 { margin: 0; flex: none; }
:root[data-ui="v2"] .tasks-head #task-quick { flex: 1 1 320px; display: flex; gap: 8px; margin: 0; }
:root[data-ui="v2"] .tasks-head #task-quick input { flex: 1; min-height: 40px; }
:root[data-ui="v2"] .tasks-head #task-quick button { white-space: nowrap; }
:root[data-ui="v2"] .tasks-new { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; white-space: nowrap; }
/* Views: the same segmented control as the queue */
:root[data-ui="v2"] #task-views.queue-views { margin: 0 0 12px; }
:root[data-ui="v2"] #task-views .filter-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: none; cursor: pointer; }
:root[data-ui="v2"] #task-views .filter-btn:hover { color: var(--text-primary); background: var(--surface-base); transform: none; }
:root[data-ui="v2"] #task-views .filter-btn.active { background: var(--brand-grad); color: var(--text-on-brand); box-shadow: var(--shadow-raised-xs); }
/* Rows */
:root[data-ui="v2"] #task-list .task-row { position: relative; border-left: 3px solid transparent; padding-left: 14px; border-radius: var(--radius-sm); outline-offset: -2px; }
:root[data-ui="v2"] #task-list .task-row:hover, :root[data-ui="v2"] #task-list .task-row:focus-visible { background: var(--surface-base); }
:root[data-ui="v2"] #task-list .task-row.row-priority-critical { border-left-color: var(--priority-critical-solid); }
:root[data-ui="v2"] #task-list .task-row.row-priority-high { border-left-color: var(--priority-high-solid); }
:root[data-ui="v2"] #task-list .task-row.row-priority-medium { border-left-color: var(--priority-medium-solid); }
:root[data-ui="v2"] #task-list .task-row.row-priority-low { border-left-color: var(--priority-low-solid); }
:root[data-ui="v2"] #task-list .task-sub > .muted { display: none; }                 /* created-by / on-calendar: in the tooltip now */
:root[data-ui="v2"] #task-list .task-done .task-sub > .muted:last-child { display: inline; }  /* "Completed by …" stays on done rows */
:root[data-ui="v2"] #task-list .task-sub > .chip:not(.st-in-progress):not(.st-closed) { display: none; }   /* "To do" = the empty circle */
:root[data-ui="v2"] #task-list .task-due { font-weight: 600; }
:root[data-ui="v2"] #task-list .task-overdue { color: var(--sla-breached-fg); }
:root[data-ui="v2"] #task-list .task-check { border-width: 2px; }
:root[data-ui="v2"] #task-list .task-done .task-check { background: var(--sla-met-fg); border-color: var(--sla-met-fg); color: #fff; }
/* Group headings: colour only where it means something */
:root[data-ui="v2"] #task-list .bug-group-title { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); border-bottom: 1px solid var(--border-subtle); padding-bottom: 6px; }
:root[data-ui="v2"] #task-list .task-group-n { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--surface-sunken-grad); border: var(--control-border); color: var(--text-secondary); letter-spacing: 0; }
:root[data-ui="v2"] #task-list .bug-group-title[data-group="overdue"] { color: var(--sla-breached-fg); }
:root[data-ui="v2"] #task-list .bug-group-title[data-group="overdue"] .task-group-n { background: var(--sla-breached-bg); color: var(--sla-breached-fg); border-color: transparent; }
:root[data-ui="v2"] #task-list .bug-group-title[data-group="today"] { color: var(--sla-warning-fg); }
:root[data-ui="v2"] #task-list .bug-group-title[data-group="today"] .task-group-n { background: var(--sla-warning-bg); color: var(--sla-warning-fg); border-color: transparent; }
:root[data-ui="v2"] #task-list .task-done-group summary { cursor: pointer; list-style: none; }
:root[data-ui="v2"] #task-list .task-done-group summary::before { content: "▸"; font-size: 11px; }
:root[data-ui="v2"] #task-list .task-done-group[open] summary::before { content: "▾"; }
/* Editor: wider, two columns, tabs for the sections */
:root[data-ui="v2"] .merge-modal.task-modal { max-width: 820px; }
:root[data-ui="v2"] .task-modal .task-grid { grid-template-columns: repeat(3, 1fr); }
:root[data-ui="v2"] .task-tabs { display: flex; gap: 4px; margin-top: 6px; padding: 4px; width: max-content; max-width: 100%; background: var(--surface-sunken-grad); border: var(--control-border); border-radius: var(--radius-lg); }
:root[data-ui="v2"] .task-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; box-shadow: none; cursor: pointer; }
:root[data-ui="v2"] .task-tab[aria-selected="true"] { background: var(--surface-raised-grad); color: var(--brand-text); box-shadow: var(--shadow-raised-xs); }
:root[data-ui="v2"] .task-tab-n { font-size: 11.5px; color: var(--text-tertiary); }
:root[data-ui="v2"] .task-tab-n:empty { display: none; }
:root[data-ui="v2"] .task-tabpanel { display: none; }
:root[data-ui="v2"] .task-tabpanel.is-on { display: block; margin-top: 2px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-base); border: 1px solid var(--border-subtle); }
:root[data-ui="v2"] .task-tabpanel > summary { display: none; }
@media (max-width: 700px) {
  :root[data-ui="v2"] .tasks-head #task-quick { flex-basis: 100%; order: 3; }
  :root[data-ui="v2"] .task-modal .task-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   PAGE SWEEP · Contacts & Companies (contacts-layout.js)
   ============================================================================= */
/* Header: title, People | Companies, ⋯ — one line, no back link, no Tools tab */
:root[data-ui="v2"].ct-v2 main.dir-page > .back-link { display: none; }
:root[data-ui="v2"].ct-v2 .ct-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 16px; }
:root[data-ui="v2"].ct-v2 .ct-head h2 { margin: 0; }
:root[data-ui="v2"].ct-v2 .ct-head .tab-bar { margin: 0; }
:root[data-ui="v2"].ct-v2 .ct-head .ct-more { margin-left: auto; }
:root[data-ui="v2"].ct-v2 .ct-tools-tab { display: none !important; }
:root[data-ui="v2"] .ct-tab-n { margin-left: 4px; font-size: 12px; font-weight: 700; opacity: .7; }
:root[data-ui="v2"] .ct-tab-n:empty { display: none; }
:root[data-ui="v2"] .ct-more .menu { right: 0; left: auto; top: calc(100% + 6px); min-width: 230px; position: absolute; z-index: 60; margin: 0; padding: 4px; list-style: none; background: var(--surface-overlay); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); }
:root[data-ui="v2"] .ct-more .menu .ui-ic { color: var(--text-tertiary); }
:root[data-ui="v2"] .ct-tools-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; font-weight: 600; }

/* Toolbar: search grows; the hidden selects stay in the DOM for contacts.js */
:root[data-ui="v2"].ct-v2 .co-toolbar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
:root[data-ui="v2"].ct-v2 .co-toolbar .kb-search { flex: 1 1 320px; min-height: 42px; font-size: 14.5px; }
:root[data-ui="v2"] .ct-hidden-field { display: none !important; }
:root[data-ui="v2"].ct-v2 .co-toolbar .btn-primary { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; white-space: nowrap; }
/* Chips */
:root[data-ui="v2"] .ct-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
:root[data-ui="v2"] .ct-chip { min-height: 30px; padding: 0 12px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-raised-grad); color: var(--text-secondary); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; box-shadow: none; }
:root[data-ui="v2"] .ct-chip:hover { color: var(--text-primary); border-color: var(--border-strong, var(--border-subtle)); transform: none; }
:root[data-ui="v2"] .ct-chip.is-on { background: var(--brand-tint); color: var(--brand-tint-text); border-color: var(--brand); }
:root[data-ui="v2"] .ct-chip-departed.is-on { background: var(--sla-breached-bg); color: var(--sla-breached-fg); border-color: var(--sla-breached-fg); }
:root[data-ui="v2"] .ct-chip-inactive.is-on { background: var(--status-closed-bg); color: var(--status-closed-fg); border-color: var(--status-closed-solid); }
:root[data-ui="v2"] .ct-chip-sep { width: 1px; height: 20px; background: var(--border-subtle); margin: 0 4px; }
:root[data-ui="v2"] .ct-chips .co-count { margin: 0 0 0 auto; font-size: 12.5px; }

/* Table */
:root[data-ui="v2"].ct-v2 .ct-table-card { padding: 0; overflow: hidden; }
:root[data-ui="v2"].ct-v2 .ct-table th { padding: 10px 14px; background: var(--surface-sunken-grad); color: var(--text-tertiary); }
:root[data-ui="v2"].ct-v2 .ct-table td { padding: 10px 14px; vertical-align: middle; }
:root[data-ui="v2"].ct-v2 .ct-table .ct-hide, :root[data-ui="v2"].ct-v2 .ct-table td.ct-phone { display: none; }
:root[data-ui="v2"].ct-v2 .ct-table td.ct-check, :root[data-ui="v2"].ct-v2 .ct-table th.ct-check { width: 36px; padding-right: 0; }
:root[data-ui="v2"].ct-v2 .ct-row { outline-offset: -2px; }
:root[data-ui="v2"].ct-v2 .ct-row td:first-child { box-shadow: inset 3px 0 0 transparent; }
:root[data-ui="v2"].ct-v2 .ct-row:hover td, :root[data-ui="v2"].ct-v2 .ct-row:focus-visible td { background: var(--surface-base); }
:root[data-ui="v2"].ct-v2 .ct-row.is-previewed td { background: var(--brand-tint); }
:root[data-ui="v2"].ct-v2 .ct-row.is-previewed td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
:root[data-ui="v2"].ct-v2 .ct-row.row-selected td { background: color-mix(in srgb, var(--brand-tint) 70%, var(--surface-raised)); }
:root[data-ui="v2"].ct-v2 .ct-who { display: flex; align-items: center; gap: 10px; }
:root[data-ui="v2"].ct-v2 .ct-name a { font-weight: 700; color: var(--text-primary); text-decoration: none; }
:root[data-ui="v2"].ct-v2 .ct-name a:hover { color: var(--brand-text); text-decoration: underline; }
:root[data-ui="v2"].ct-v2 .ct-title { font-size: 12.5px; margin-top: 1px; }
:root[data-ui="v2"].ct-v2 .ct-name .t-tags { margin-left: 4px; }
:root[data-ui="v2"].ct-v2 .ct-name .tag-chip { font-size: 11px; padding: 1px 7px; }
/* Role badges: one shape, colour by meaning */
:root[data-ui="v2"].ct-v2 .cbadges { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 1px; }
:root[data-ui="v2"] .cbadge, :root[data-ui="v2"] .ct-pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.5; border: 1px solid transparent; }
:root[data-ui="v2"] .cbadge-primary, :root[data-ui="v2"] .ct-pill-primary { background: var(--priority-medium-bg); color: var(--priority-medium-fg); border-color: var(--priority-medium-solid); }
:root[data-ui="v2"] .cbadge-approve, :root[data-ui="v2"] .ct-pill-approve { background: var(--status-resolved-bg); color: var(--status-resolved-fg); border-color: var(--status-resolved-solid); }
:root[data-ui="v2"] .cbadge-vip, :root[data-ui="v2"] .ct-pill-vip { background: var(--brand); color: var(--text-on-brand); }
:root[data-ui="v2"] .cbadge-left, :root[data-ui="v2"] .ct-pill-left { background: var(--sla-breached-bg); color: var(--sla-breached-fg); border-color: var(--sla-breached-fg); }
:root[data-ui="v2"] .cbadge-off, :root[data-ui="v2"] .ct-pill-off { background: var(--status-closed-bg); color: var(--status-closed-fg); }
:root[data-ui="v2"] .ct-pill .ui-ic { width: 11px; height: 11px; }
/* Reach: email over phones, nothing wraps mid-number */
:root[data-ui="v2"].ct-v2 .ct-reach .dir-field { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; }
:root[data-ui="v2"].ct-v2 .ct-reach .dir-field + .dir-field { margin-top: 2px; color: var(--text-secondary); font-size: 12.5px; }
:root[data-ui="v2"].ct-v2 .ct-reach .dir-ic { color: var(--text-tertiary); flex: none; }
:root[data-ui="v2"].ct-v2 .ct-reach .ct-more { font-size: 11.5px; }
/* Portal: a word and a dot */
:root[data-ui="v2"] .ct-portal-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-tertiary); white-space: nowrap; }
:root[data-ui="v2"] .ct-portal-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--border-subtle); border: 1px solid var(--text-tertiary); }
:root[data-ui="v2"] .ct-portal-state[data-state="on"] { color: var(--status-resolved-fg); }
:root[data-ui="v2"] .ct-portal-state[data-state="on"]::before { background: var(--status-resolved-solid); border-color: var(--status-resolved-solid); }
:root[data-ui="v2"] .ct-portal-state[data-state="invited"] { color: var(--priority-medium-fg); }
:root[data-ui="v2"] .ct-portal-state[data-state="invited"]::before { background: transparent; border: 2px solid var(--priority-medium-solid); }
:root[data-ui="v2"].ct-v2 td.ct-portal { white-space: nowrap; position: relative; width: 1%; }
/* Quick actions on hover / focus */
:root[data-ui="v2"] .ct-acts { display: inline-flex; gap: 2px; margin-left: 12px; opacity: 0; transition: opacity var(--dur-fast) var(--ease); vertical-align: middle; }
:root[data-ui="v2"] .ct-row:hover .ct-acts, :root[data-ui="v2"] .ct-row:focus-within .ct-acts, :root[data-ui="v2"] .ct-row.is-previewed .ct-acts { opacity: 1; }
:root[data-ui="v2"] .ct-act { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; box-shadow: none; padding: 0; }
:root[data-ui="v2"] .ct-act:hover, :root[data-ui="v2"] .ct-act:focus-visible { background: var(--surface-raised-grad); border-color: var(--border-subtle); color: var(--brand-text); }
@media (hover: none) { :root[data-ui="v2"] .ct-acts { opacity: 1; } }
/* Bulk bar: compact, sticky above the table */
:root[data-ui="v2"].ct-v2 #bulk-bar:not([hidden]) { position: sticky; top: 8px; z-index: 20; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 10px; padding: 10px 14px; border-radius: var(--radius-lg); background: var(--surface-overlay); border: 1px solid var(--brand); box-shadow: var(--shadow-overlay); }
:root[data-ui="v2"].ct-v2 #bulk-bar .bulk-count { align-self: center; font-weight: 700; color: var(--brand-text); margin-right: 4px; }
:root[data-ui="v2"].ct-v2 #bulk-bar input, :root[data-ui="v2"].ct-v2 #bulk-bar select { min-height: 32px; font-size: 13px; }

/* Preview drawer */
:root[data-ui="v2"] .ct-dr { position: fixed; top: var(--ct-head, 62px); right: 0; bottom: 0; width: min(440px, 100vw); z-index: 40; display: flex; flex-direction: column; background: var(--surface-overlay); border-left: var(--card-border); box-shadow: var(--shadow-overlay); overflow: hidden; animation: tk-drawer-in var(--dur-base) var(--ease); outline: none; }
@keyframes tk-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { :root[data-ui="v2"] .ct-dr { animation: none; } }
:root[data-ui="v2"] body.ct-dr-docked .ct-dr { box-shadow: none; animation: none; }
:root[data-ui="v2"] body.ct-dr-docked main.dir-page { margin-right: calc(min(440px, 100vw) + 16px); max-width: none; }
:root[data-ui="v2"] .ct-dr-loading { padding: 24px; color: var(--text-tertiary); }
:root[data-ui="v2"] .ct-dr-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 18px 14px 20px; border-bottom: 1px solid var(--border-subtle); }
:root[data-ui="v2"] .ct-dr-head .av-lg { flex: none; width: 56px; height: 56px; font-size: 19px; }
:root[data-ui="v2"] .ct-dr-who { flex: 1; min-width: 0; }
:root[data-ui="v2"] .ct-dr-name { margin: 2px 0 2px; font-size: 19px; font-weight: 700; color: var(--text-primary); }
:root[data-ui="v2"] .ct-dr-sub { font-size: 13px; color: var(--text-secondary); }
:root[data-ui="v2"] .ct-dr-sub a { color: var(--brand-text); font-weight: 600; text-decoration: none; }
:root[data-ui="v2"] .ct-dr-sub a:hover { text-decoration: underline; }
:root[data-ui="v2"] .ct-dr-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
:root[data-ui="v2"] .ct-dr-pills:empty { display: none; }
:root[data-ui="v2"] .ct-dr-close { flex: none; }
:root[data-ui="v2"] .ct-dr-warn { display: flex; align-items: center; gap: 8px; margin: 12px 18px 0; padding: 9px 12px; border-radius: var(--radius-md); background: var(--sla-breached-bg); color: var(--sla-breached-fg); font-size: 13px; font-weight: 600; }
:root[data-ui="v2"] .ct-dr-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); }
:root[data-ui="v2"] .ct-dr-actions .tk-btn { text-decoration: none; }
:root[data-ui="v2"] .ct-dr-body { flex: 1; overflow-y: auto; padding: 6px 18px 28px; }
:root[data-ui="v2"] .ct-dr-sec { padding: 14px 0; border-bottom: 1px solid var(--border-subtle); }
:root[data-ui="v2"] .ct-dr-sec:last-child { border-bottom: 0; }
:root[data-ui="v2"] .ct-dr-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
:root[data-ui="v2"] .ct-dr-n { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 700; color: var(--brand-text); background: var(--brand-tint); padding: 1px 8px; border-radius: 999px; }
:root[data-ui="v2"] .ct-dr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
:root[data-ui="v2"] .ct-dr-list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-width: 0; }
:root[data-ui="v2"] .ct-dr-list li > .ui-ic { color: var(--text-tertiary); flex: none; }
:root[data-ui="v2"] .ct-dr-list a { color: var(--text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="v2"] .ct-dr-list a:hover { color: var(--brand-text); text-decoration: underline; }
:root[data-ui="v2"] .ct-dr-list .muted { font-size: 12px; }
:root[data-ui="v2"] .ct-dr-copy { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-tertiary); cursor: pointer; box-shadow: none; padding: 0; flex: none; }
:root[data-ui="v2"] .ct-dr-copy:hover { background: var(--surface-base); color: var(--brand-text); }
:root[data-ui="v2"] .ct-dr-tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
:root[data-ui="v2"] .ct-dr-tickets a { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 9px 11px; border-radius: var(--radius-md); background: var(--surface-base); border: 1px solid var(--border-subtle); color: inherit; text-decoration: none; }
:root[data-ui="v2"] .ct-dr-tickets a:hover { border-color: var(--brand); }
:root[data-ui="v2"] .ct-dr-tid { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--brand-text); align-self: center; }
:root[data-ui="v2"] .ct-dr-tsub { font-size: 13.5px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="v2"] .ct-dr-tmeta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
:root[data-ui="v2"] .ct-dr-tmeta .chip, :root[data-ui="v2"] .ct-dr-tmeta .badge { font-size: 11px; }
:root[data-ui="v2"] .ct-dr-late { font-size: 11px; font-weight: 700; color: var(--sla-breached-fg); background: var(--sla-breached-bg); padding: 1px 7px; border-radius: 999px; }
:root[data-ui="v2"] .ct-dr-closed, :root[data-ui="v2"] .ct-dr-more { margin: 8px 0 0; font-size: 12.5px; }
:root[data-ui="v2"] .ct-dr-closed:empty { display: none; }
:root[data-ui="v2"] .ct-dr-notes { margin: 0; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; padding: 10px 12px; border-radius: var(--radius-md); background: var(--note-bg, var(--surface-base)); border-left: 3px solid var(--priority-medium-solid); }

/* Companies: health on the edge, zeroes hidden */
:root[data-ui="v2"].ct-v2 .co-card { border-left: 4px solid transparent; }
:root[data-ui="v2"].ct-v2 .co-card.co-health-bad { border-left-color: var(--sla-breached-fg); }
:root[data-ui="v2"].ct-v2 .co-card.co-health-warn { border-left-color: var(--priority-medium-solid); }
:root[data-ui="v2"].ct-v2 .co-card.co-card-churned { border-left-color: var(--text-tertiary); }
:root[data-ui="v2"].ct-v2 .co-card .ct-hide { display: none; }
:root[data-ui="v2"].ct-v2 .co-card:hover { border-color: var(--brand); border-left-color: inherit; }
:root[data-ui="v2"].ct-v2 .co-card .renew-line { font-size: 12.5px; margin: 6px 0 0; }
:root[data-ui="v2"].ct-v2 .co-card .renew-bad { color: var(--sla-breached-fg); font-weight: 600; }
:root[data-ui="v2"].ct-v2 .co-card .renew-warn { color: var(--priority-medium-fg); font-weight: 600; }

@media (max-width: 900px) {
  :root[data-ui="v2"] .ct-acts { display: none; }
  :root[data-ui="v2"].ct-v2 .ct-chips .co-count { width: 100%; margin: 4px 0 0; }
}
@media (max-width: 700px) {
  :root[data-ui="v2"] .ct-dr { top: 0; width: 100vw; z-index: 60; }
  :root[data-ui="v2"].ct-v2 .ct-head .tab-bar { order: 3; width: 100%; }
  :root[data-ui="v2"].ct-v2 .ct-table th:nth-child(n+3), :root[data-ui="v2"].ct-v2 .ct-table td:nth-child(n+3) { display: none; }   /* tap a person: the preview has the rest */
  :root[data-ui="v2"].ct-v2 .ct-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  :root[data-ui="v2"].ct-v2 .ct-chip { flex: none; }
  :root[data-ui="v2"].ct-v2 .ct-chips .co-count { display: none; }
  :root[data-ui="v2"].ct-v2 .co-toolbar .kb-search { flex-basis: 100%; }
  :root[data-ui="v2"].ct-v2 .co-toolbar .filter-field:not(.ct-hidden-field) { flex: 1 1 0; min-width: 0; }
  :root[data-ui="v2"].ct-v2 .co-toolbar .filter-field:not(.ct-hidden-field) select { width: 100%; }
  :root[data-ui="v2"] .ct-dr-actions { flex-wrap: nowrap; gap: 6px; }
  :root[data-ui="v2"] .ct-dr-actions .tk-btn:not(.tk-icon) { flex: 1 1 auto; justify-content: center; padding: 0 10px; }
  :root[data-ui="v2"] .ct-dr-actions [data-copy] { display: none; }
  :root[data-ui="v2"] .ct-dr-actions .tk-icon { width: 36px; flex: none; }
  :root[data-ui="v2"] .ct-dr-body { padding-bottom: 96px; }
  :root[data-ui="v2"].ct-v2 .ct-table-card { overflow: visible; }
}
:root[data-ui="v2"].ct-v2 .ct-row td .company-chip { white-space: nowrap; }
:root[data-ui="v2"].ct-v2 .ct-row.directory-left td:not(.ct-check) { opacity: .7; }
:root[data-ui="v2"].ct-v2 .ct-row.directory-left .ct-name a { text-decoration: line-through; text-decoration-thickness: 1px; }
:root[data-ui="v2"].ct-v2 .co-toolbar .filter-field:not(.ct-hidden-field) select { min-height: 42px; }
/* Drawer: Email / Call as icon buttons so the four actions fit one line */
:root[data-ui="v2"] .ct-dr-actions .tk-icon { width: 38px; justify-content: center; padding: 0; }
:root[data-ui="v2"] .ct-copy-ic { width: 14px; height: 14px; }

/* Colour correction (applies to Phase 2c / Tasks too): "ours / done" is GREEN = the
   resolved tokens. The SLA "met" tokens are deliberately neutral grey (STYLES.md), so
   the 2c rules that borrowed them for our replies rendered grey. */
:root[data-ui="v2"] .msg-out { border-left-color: var(--status-resolved-solid); background: color-mix(in srgb, var(--status-resolved-bg) 45%, var(--surface-raised)); }
:root[data-ui="v2"] .msg-out .msg-who { color: var(--status-resolved-fg); }
:root[data-ui="v2"] .t-turn[data-turn="done"] { color: var(--status-resolved-fg); }
:root[data-ui="v2"] #task-list .task-done .task-check { background: var(--status-resolved-solid); border-color: var(--status-resolved-solid); color: #fff; }
:root[data-ui="v2"].ct-v2 .ct-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 2px; font-size: 12.5px; color: var(--text-secondary); }
:root[data-ui="v2"].ct-v2 .ct-meta .cbadges, :root[data-ui="v2"].ct-v2 .ct-meta .t-tags { margin: 0; display: inline-flex; gap: 4px; flex-wrap: wrap; }
:root[data-ui="v2"].ct-v2 .ct-meta-co { display: none; }
@media (max-width: 700px) { :root[data-ui="v2"].ct-v2 .ct-meta-co { display: inline; color: var(--brand-text); font-weight: 600; } :root[data-ui="v2"].ct-v2 .ct-meta-title + .ct-meta-co::before { content: "· "; color: var(--text-tertiary); } }
:root[data-ui="v2"].ct-v2 #tab-tools a.btn-small { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }

/* Contacts ⋯ menu painted under the search row / New contact button (contactsuibug2). */
:root[data-ui="v2"].ct-v2 .ct-head { position: relative; z-index: 50; }
:root[data-ui="v2"].ct-v2 .ct-more .menu { z-index: 60; }

/* Our replies: neutral text, not purple (Cain, 2026-10-26). The green edge + name still mark them as ours. */
:root[data-ui="v2"] .msg-out .msg-body, :root[data-ui="v2"] .msg-out .msg-html { color: var(--text-primary); }
:root[data-ui="v2"] .side-msg.is-out { color: var(--text-primary); }

/* ---- Phase 5: macros ---- */
:root[data-ui="v2"] .mc-menu { z-index: 9500; min-width: 280px; max-width: 340px; margin: 0; padding: 4px; list-style: none; background: var(--surface-overlay); border: var(--card-border); border-radius: var(--radius-md); box-shadow: var(--shadow-raised-md, 0 10px 30px rgba(0,0,0,.18)); }
:root[data-ui="v2"] .mc-menu [role="menuitem"] { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm, 6px); cursor: pointer; font-size: 13px; color: var(--text-primary); }
:root[data-ui="v2"] .mc-menu [role="menuitem"]:hover, :root[data-ui="v2"] .mc-menu [role="menuitem"]:focus { background: var(--brand-tint); color: var(--brand-tint-text); outline: none; }
:root[data-ui="v2"] .mc-menu .is-disabled { opacity: .5; cursor: not-allowed; }
:root[data-ui="v2"] .mc-menu .mc-name { flex: 1; font-weight: 600; }
:root[data-ui="v2"] .mc-menu kbd, :root[data-ui="v2"] .mc-picker kbd { font-size: 11px; padding: 0 5px; border-radius: 4px; background: var(--surface-sunken); color: var(--text-secondary); }
:root[data-ui="v2"] .mc-mine { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); }
:root[data-ui="v2"] .mc-empty { padding: 8px 10px; color: var(--text-tertiary); font-size: 13px; }
:root[data-ui="v2"] .mc-picker { z-index: 9500; width: min(460px, calc(100vw - 16px)); background: var(--surface-overlay); border: var(--card-border); border-radius: var(--radius-md); box-shadow: var(--shadow-raised-md, 0 10px 30px rgba(0,0,0,.18)); overflow: hidden; }
:root[data-ui="v2"] .mc-picker-in { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); color: var(--text-tertiary); }
:root[data-ui="v2"] .mc-picker-in input { flex: 1; border: 0; background: transparent; box-shadow: none; padding: 4px 0; font: inherit; color: var(--text-primary); }
:root[data-ui="v2"] .mc-picker ul { list-style: none; margin: 0; padding: 4px; max-height: 300px; overflow-y: auto; }
:root[data-ui="v2"] .mc-picker .mc-sec { padding: 6px 8px 2px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
:root[data-ui="v2"] .mc-picker [role="option"] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
:root[data-ui="v2"] .mc-picker [role="option"].is-active { background: var(--brand-tint); color: var(--brand-tint-text); }
:root[data-ui="v2"] .mc-picker .mc-name { font-weight: 600; }
:root[data-ui="v2"] .mc-picker .mc-sum { grid-column: 2 / -1; font-size: 11.5px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-ui="v2"] .mc-save-link { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 8px; font-size: 12.5px; }
:root[data-ui="v2"] .mc-save-opts { display: grid; gap: 6px; margin: 8px 0 4px; font-size: 13px; }
:root[data-ui="v2"] .mc-save-opts label { display: flex; align-items: center; gap: 8px; }

/* Templates page → Macros tab (Phase 5) */
:root[data-ui="v2"] .tpl-tabs { margin: 0 0 14px; display: inline-flex; }
:root[data-ui="v2"] .mc-page-head { display: flex; justify-content: flex-end; margin: 0 0 12px; }
:root[data-ui="v2"] .mc-row-sum { font-size: 13px; margin-top: 4px; }
:root[data-ui="v2"] .mc-row-use { font-size: 12px; }
:root[data-ui="v2"] .mc-kbd { font-size: 11px; padding: 0 6px; border-radius: 4px; background: var(--surface-sunken); color: var(--text-secondary); }
:root[data-ui="v2"] .mc-form { display: grid; gap: 12px; }
:root[data-ui="v2"] .mc-row2 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
:root[data-ui="v2"] .mc-check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
:root[data-ui="v2"] .mc-steps { border: var(--control-border); border-radius: var(--radius-md); padding: 10px 14px; display: grid; gap: 8px; }
:root[data-ui="v2"] .mc-steps legend { padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
:root[data-ui="v2"] .mc-step-body { display: none; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 4px 26px; }
:root[data-ui="v2"] .mc-step.is-on .mc-step-body { display: flex; }
:root[data-ui="v2"] .mc-step-body textarea { flex: 1 1 100%; }
:root[data-ui="v2"] .mc-step-body input[type="number"] { width: 90px; }
:root[data-ui="v2"] .mc-preview { margin: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--text-primary); font-size: 13px; }
@media (max-width: 700px) { :root[data-ui="v2"] .mc-row2 { grid-template-columns: 1fr; } }

/* New Ticket smart defaults (Phase 5) */
:root[data-ui="v2"] .sd-slot:empty { display: none; }
:root[data-ui="v2"] .sd-slot { margin: -4px 0 10px; }
:root[data-ui="v2"] .sd-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 10px; border: 1px dashed var(--brand); border-radius: 999px; background: var(--brand-tint); color: var(--text-primary); font: inherit; font-size: 12.5px; cursor: pointer; }
:root[data-ui="v2"] .sd-chip:hover, :root[data-ui="v2"] .sd-chip:focus-visible { border-style: solid; }
:root[data-ui="v2"] .sd-why, :root[data-ui="v2"] .sd-key { color: var(--text-secondary); }
:root[data-ui="v2"] .sd-chip kbd { font-size: 11px; padding: 0 4px; border-radius: 4px; background: var(--surface-sunken); }
:root[data-ui="v2"] .sd-assigned { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
:root[data-ui="v2"] .sd-bar-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 12.5px; white-space: nowrap; }
:root[data-ui="v2"] .sd-bar-chip strong { color: var(--text-primary); }

/* Automations: rules in plain language (Phase 5) */
:root[data-ui="v2"] .rule-sentence { margin: 6px 0 4px; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
:root[data-ui="v2"] .rule-sentence strong { font-weight: 650; }
:root[data-ui="v2"] .rule-stats { font-size: 12.5px; color: var(--text-secondary); }
:root[data-ui="v2"] .rule-stats.is-dead { color: #b45309; }
:root[data-ui="v2"] .rule-stats .rule-errors { color: var(--danger-text); }
:root[data-ui="v2"] .rule-row-card:has(.rule-stats.is-dead) { border-left: 3px solid #d97706; }
:root[data-ui="v2"] .rule-row-card:has(.rule-stats.has-errors) { border-left: 3px solid var(--danger); }
:root[data-ui="v2"] .rule-detail { margin-top: 6px; font-size: 12.5px; }
:root[data-ui="v2"] .rule-detail > summary { cursor: pointer; color: var(--text-tertiary); }
:root[data-ui="v2"] .rule-sort { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--text-secondary); }
:root[data-ui="v2"] .rule-preview { position: sticky; top: 0; z-index: 2; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--brand-tint); }
:root[data-ui="v2"] .rule-runs-list { list-style: none; margin: 8px 0; padding: 0; max-height: 50vh; overflow-y: auto; font-size: 13px; display: grid; gap: 6px; }
:root[data-ui="v2"] .rule-runs-list .is-error { color: var(--danger-text); }

/* Auto-follow-ups (Phase 5) */
:root[data-ui="v2"] .hold-check { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; }
:root[data-ui="v2"] .followup-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
:root[data-ui="v2"] .followup-chip.is-off { color: var(--text-tertiary); }
:root[data-ui="v2"] .via-auto { background: var(--surface-sunken); color: var(--text-secondary); }
:root[data-ui="v2"] .t-close-badge { display: inline-flex; padding: 1px 7px; border-radius: 999px; background: #d97706; color: #fff; font-size: 11px; font-weight: 700; }
:root[data-ui="v2"] .fu-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid #d97706; background: color-mix(in srgb, #d97706 10%, var(--surface-base)); font-size: 13.5px; }
:root[data-ui="v2"] .fu-banner .fu-text { flex: 1 1 260px; }
:root[data-ui="v2"] .fu-banner .fu-acts { display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-ui="v2"] .fu-grid, .fu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 16px; margin: 10px 0 6px; align-items: end; }

:root[data-ui="v2"] .set-inline, .set-inline { display: flex; align-items: center; gap: 8px; margin: 8px 0; }

/* Scheduled tickets (Phase 5) */
:root[data-ui="v2"] .tk-checklist { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-sunken); }
:root[data-ui="v2"] .tk-cl-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
:root[data-ui="v2"] .tk-cl-count { color: var(--text-secondary); font-size: 12.5px; }
:root[data-ui="v2"] .tk-cl-bar { height: 6px; margin: 8px 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--text-tertiary) 25%, transparent); overflow: hidden; }
:root[data-ui="v2"] .tk-cl-bar i { display: block; height: 100%; background: var(--success); border-radius: inherit; }
:root[data-ui="v2"] .tk-cl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
:root[data-ui="v2"] .tk-cl-list label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
:root[data-ui="v2"] .tk-cl-list .is-done span { color: var(--text-tertiary); text-decoration: line-through; }
:root[data-ui="v2"] .tk-scheduled { display: inline-flex; padding: 2px 9px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-tint-text); font-size: 12px; text-decoration: none; white-space: nowrap; }
:root[data-ui="v2"] .tk-scheduled:hover { text-decoration: underline; }

/* Automations → Scheduled tickets (Phase 5) */
:root[data-ui="v2"] .sch-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
:root[data-ui="v2"] .sch-head p { flex: 1 1 360px; margin: 0; }
:root[data-ui="v2"] .sch-list { display: grid; gap: 10px; }
:root[data-ui="v2"] .sch-form-card { margin: 0 0 14px; }
:root[data-ui="v2"] .sch-form { display: grid; gap: 12px; }
:root[data-ui="v2"] .sch-tokens { margin: -6px 0 0; font-size: 12px; }
:root[data-ui="v2"] .sch-when, :root[data-ui="v2"] .sch-cl { border: var(--control-border); border-radius: var(--radius-md); padding: 10px 14px; }
:root[data-ui="v2"] .sch-when legend, :root[data-ui="v2"] .sch-cl legend { padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
:root[data-ui="v2"] .sch-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
:root[data-ui="v2"] .sch-sentence span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
:root[data-ui="v2"] .sch-sentence [hidden] { display: none !important; }
:root[data-ui="v2"] .sch-sentence input[type="time"] { width: 130px; }
:root[data-ui="v2"] .sch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; }
:root[data-ui="v2"] #sch-items { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; }
:root[data-ui="v2"] .sch-add { display: flex; gap: 8px; }
:root[data-ui="v2"] .sch-add input { flex: 1; }
:root[data-ui="v2"] .sch-preview { padding: 8px 12px; border-radius: var(--radius-md); background: var(--brand-tint); margin: 0; }
:root[data-ui="v2"] .hub-scheduled { margin-top: 18px; }
:root[data-ui="v2"] .hub-scheduled h3 { margin: 0 0 8px; font-size: 14px; }
:root[data-ui="v2"] .hub-sched-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
:root[data-ui="v2"] .hub-sched-list .is-off { opacity: .6; }


/* =============================================================================
   PASS 1 · You & Admin: preferences, account menu, Admin hub (prefs.js,
   settings-layout.js, admin.js)
   ============================================================================= */
/* ---- Preferences applied globally ---- */
:root[data-ui="v2"][data-text="small"] { zoom: .94; }
:root[data-ui="v2"][data-text="large"] { zoom: 1.08; }
:root[data-ui="v2"][data-reduce-motion], :root[data-ui="v2"][data-reduce-motion] * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
:root[data-ui="v2"][data-density="compact"] .ticket-row { padding-top: 8px; padding-bottom: 8px; gap: 10px; }
:root[data-ui="v2"][data-density="compact"] .ticket-row .row-controls { gap: 4px; }
:root[data-ui="v2"][data-density="compact"] .ct-table td, :root[data-ui="v2"][data-density="compact"] .ct-table th { padding-top: 6px; padding-bottom: 6px; }
:root[data-ui="v2"][data-density="compact"] #task-list .task-row { padding-top: 6px; padding-bottom: 6px; }
:root[data-ui="v2"][data-density="compact"] .msg { padding: 8px 12px; }
:root[data-ui="v2"][data-density="compact"] .msg-thread { gap: 8px; }
:root[data-ui="v2"][data-density="compact"] .card { padding: 14px 16px; }
:root[data-ui="v2"][data-density="compact"] .tk-bar { padding: 6px 10px; }

/* ---- Account menu ---- */
:root[data-ui="v2"] .profile-menu.pm-v2 { min-width: 280px; }
:root[data-ui="v2"] .profile-menu.pm-v2 .profile-item { border-bottom: 0 !important; }
:root[data-ui="v2"] .pm-sep { height: 1px; margin: 4px 10px; background: var(--border-subtle); }
:root[data-ui="v2"] .pm-hint { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--text-tertiary); }
:root[data-ui="v2"] .profile-menu [data-admin] { color: var(--brand-text); }
:root[data-ui="v2"] .profile-menu [data-admin] .pi-ic { color: var(--brand-text); }

/* ---- Admin sidebar ---- */
:root[data-ui="v2"] body.has-adm-side { display: block; }
:root[data-ui="v2"] .adm-side { position: fixed; left: 0; top: var(--adm-top, 62px); bottom: 0; z-index: 25; width: 236px; overflow-y: auto; padding: 18px 12px 24px; background: var(--surface-raised-grad); border-right: var(--card-border); box-shadow: var(--shadow-raised-xs); }
:root[data-ui="v2"] body.has-adm-side main { margin-left: 260px !important; margin-right: 24px; max-width: 1180px; }
:root[data-ui="v2"] .adm-title { display: flex; align-items: center; gap: 8px; margin: 0 6px 12px; font-size: 15px; font-weight: 700; color: var(--text-primary); text-decoration: none; }
:root[data-ui="v2"] .adm-title .pi-ic { color: var(--brand-text); }
:root[data-ui="v2"] .adm-sec { margin: 14px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
:root[data-ui="v2"] .adm-link { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--radius-md); color: var(--text-secondary); font-size: 13.5px; font-weight: 600; text-decoration: none; }
:root[data-ui="v2"] .adm-link .pi-ic { color: var(--text-tertiary); flex: none; }
:root[data-ui="v2"] .adm-link:hover { background: var(--surface-base); color: var(--text-primary); }
:root[data-ui="v2"] .adm-link.is-here { background: var(--brand-tint); color: var(--brand-tint-text); }
:root[data-ui="v2"] .adm-link.is-here .pi-ic { color: var(--brand-text); }
:root[data-ui="v2"] .adm-hide { display: none !important; }
@media (max-width: 1000px) {
  :root[data-ui="v2"] .adm-side { position: static; width: auto; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 8px 12px; border-right: 0; border-bottom: var(--card-border); scrollbar-width: none; }
  :root[data-ui="v2"] .adm-sec, :root[data-ui="v2"] .adm-title span { display: none; }
  :root[data-ui="v2"] .adm-title { margin: 0 6px 0 0; }
  :root[data-ui="v2"] .adm-link { flex: none; white-space: nowrap; }
  :root[data-ui="v2"] body.has-adm-side main { margin-left: auto !important; margin-right: auto; }
}

/* ---- Admin overview ---- */
:root[data-ui="v2"] .adm-intro { margin: -4px 0 18px; }
:root[data-ui="v2"] .adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
:root[data-ui="v2"] .adm-card { display: grid; gap: 4px; padding: 16px 18px; margin: 0; color: inherit; text-decoration: none; border-left: 4px solid transparent; }
:root[data-ui="v2"] .adm-card:hover { border-color: var(--brand); border-left-color: inherit; }
:root[data-ui="v2"] .adm-card.tone-warn { border-left-color: var(--priority-medium-solid); }
:root[data-ui="v2"] .adm-card.tone-bad { border-left-color: var(--sla-breached-fg); }
:root[data-ui="v2"] .adm-card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
:root[data-ui="v2"] .adm-card-line { font-size: 14px; color: var(--text-primary); }
:root[data-ui="v2"] .adm-card.tone-warn.warn-line .adm-card-line, :root[data-ui="v2"] .adm-card.tone-warn.warn-sub .adm-card-sub { color: var(--priority-medium-fg); font-weight: 600; }
:root[data-ui="v2"] .adm-card.tone-bad.warn-line .adm-card-line, :root[data-ui="v2"] .adm-card.tone-bad.warn-sub .adm-card-sub { color: var(--sla-breached-fg); font-weight: 600; }
:root[data-ui="v2"] .adm-card-sub { font-size: 12.5px; color: var(--text-tertiary); }

/* ---- Settings: personal vs company ---- */
:root[data-ui="v2"].settings-v2 main.settings-page > .back-link { display: none; }
:root[data-ui="v2"].settings-org .settings-nav { display: none; }
:root[data-ui="v2"].settings-org .settings-grid { grid-template-columns: 1fr; }
:root[data-ui="v2"] .pf-card h2 { margin: 0; }
:root[data-ui="v2"] .pf-head { display: flex; align-items: center; gap: 10px; }
:root[data-ui="v2"] .pf-saved { font-size: 12.5px; font-weight: 600; color: var(--status-resolved-fg); opacity: 0; transition: opacity var(--dur-base) var(--ease); }
:root[data-ui="v2"] .pf-saved.is-on { opacity: 1; }
:root[data-ui="v2"] .pf-intro { margin: 4px 0 6px; }
:root[data-ui="v2"] .pf-sub { margin: 18px 0 4px; padding-top: 14px; border-top: 1px solid var(--border-subtle); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
:root[data-ui="v2"] .pf-row { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 1.4fr); align-items: center; gap: 8px 18px; padding: 9px 0; margin: 0; font-weight: 400; }
:root[data-ui="v2"] .pf-row + .pf-row { border-top: 1px dashed var(--border-subtle); }
:root[data-ui="v2"] .pf-label { display: grid; gap: 2px; font-size: 14px; font-weight: 600; color: var(--text-primary); text-transform: none; letter-spacing: 0; }
:root[data-ui="v2"] .pf-help { font-size: 12.5px; font-weight: 400; color: var(--text-tertiary); }
:root[data-ui="v2"] .pf-row #p-conv-order { min-height: 38px; font-size: 13px; }
:root[data-ui="v2"] .pf-row select, :root[data-ui="v2"] .pf-row input[type="text"], :root[data-ui="v2"] .pf-row input[type="date"] { width: 100%; max-width: 360px; justify-self: start; }
:root[data-ui="v2"] .pf-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; justify-self: start; background: var(--surface-sunken-grad); border: var(--control-border); border-radius: var(--radius-md); box-shadow: var(--shadow-inset-sm); }
:root[data-ui="v2"] .pf-seg button { min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; box-shadow: none; cursor: pointer; }
:root[data-ui="v2"] .pf-seg button:hover { color: var(--text-primary); transform: none; }
:root[data-ui="v2"] .pf-seg button[aria-checked="true"] { background: var(--surface-raised-grad); color: var(--brand-text); box-shadow: var(--shadow-raised-xs); }
:root[data-ui="v2"] .pf-switch-row { grid-template-columns: 1fr auto; }
:root[data-ui="v2"] input.pf-switch { appearance: none; -webkit-appearance: none; position: relative; width: 40px; height: 22px; margin: 0; border-radius: 999px; background: var(--surface-sunken-grad); border: var(--control-border); box-shadow: var(--shadow-inset-sm); cursor: pointer; flex: none; justify-self: end; }
:root[data-ui="v2"] input.pf-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-raised); box-shadow: var(--shadow-raised-xs); transition: transform var(--dur-fast) var(--ease); }
:root[data-ui="v2"] input.pf-switch:checked { background: var(--brand); border-color: var(--brand); }
:root[data-ui="v2"] input.pf-switch:checked::after { transform: translateX(18px); background: #fff; }
:root[data-ui="v2"] input.pf-switch:focus-visible { outline: 2px solid var(--focus-ring, var(--brand)); outline-offset: 2px; }
:root[data-ui="v2"] .pf-matrix { width: 100%; border-collapse: collapse; margin: 6px 0 0; font-size: 14px; }
:root[data-ui="v2"] .pf-matrix th, :root[data-ui="v2"] .pf-matrix td { padding: 9px 6px; border-bottom: 1px dashed var(--border-subtle); text-align: left; }
:root[data-ui="v2"] .pf-matrix thead th { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); border-bottom: 1px solid var(--border-subtle); }
:root[data-ui="v2"] .pf-matrix th[scope="row"] { font-weight: 600; color: var(--text-primary); }
:root[data-ui="v2"] .pf-matrix td, :root[data-ui="v2"] .pf-matrix thead th:not(:first-child) { width: 80px; text-align: center; }
:root[data-ui="v2"] .pf-matrix td .pf-switch { display: inline-block; vertical-align: middle; }
:root[data-ui="v2"] .pf-times { grid-template-columns: auto auto auto auto 1fr; justify-content: start; }
:root[data-ui="v2"] .pf-times .pf-label { font-weight: 500; }
:root[data-ui="v2"] .pf-days { display: flex; flex-wrap: wrap; gap: 4px; justify-self: start; }
:root[data-ui="v2"] .pf-day { min-width: 46px; min-height: 32px; padding: 0 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-raised-grad); color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: none; }
:root[data-ui="v2"] .pf-day[aria-pressed="true"] { background: var(--brand-tint); color: var(--brand-tint-text); border-color: var(--brand); }
:root[data-ui="v2"] .pf-away { padding: 4px 14px; margin: 4px 0; border-radius: var(--radius-md); background: var(--surface-base); border: 1px solid var(--border-subtle); }
:root[data-ui="v2"] .pf-row-wide { grid-template-columns: minmax(200px, 1fr) minmax(0, 1.4fr); }
@media (max-width: 700px) {
  :root[data-ui="v2"] .pf-row { grid-template-columns: 1fr; }
  :root[data-ui="v2"] .pf-switch-row { grid-template-columns: 1fr auto; }
  :root[data-ui="v2"] .pf-times { grid-template-columns: auto 1fr auto 1fr; }
  :root[data-ui="v2"] .pf-matrix td, :root[data-ui="v2"] .pf-matrix thead th:not(:first-child) { width: 56px; }
}


/* =============================================================================
   PAGE SWEEP pass 2 · My Time (my-time-layout.js)
   ============================================================================= */
:root[data-ui="v2"].mt-v2 .mt-hidden { display: none !important; }
:root[data-ui="v2"].mt-v2 .filters .filter-field:has(#t-range) { display: none; }
:root[data-ui="v2"] .mt-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 14px; }
:root[data-ui="v2"] .mt-head h2 { margin: 0; }
:root[data-ui="v2"] .mt-weeknav { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: var(--radius-lg); background: var(--surface-sunken-grad); border: var(--control-border); }
:root[data-ui="v2"] .mt-weeklabel { min-width: 210px; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
:root[data-ui="v2"] .mt-weeknav .tk-btn[disabled] { opacity: .35; cursor: default; }
:root[data-ui="v2"] .mt-totals { display: inline-flex; gap: 14px; font-size: 13.5px; color: var(--text-secondary); }
:root[data-ui="v2"] .mt-totals strong { color: var(--text-primary); }
:root[data-ui="v2"] .mt-export { margin-left: auto; text-decoration: none; }
/* Quick add */
:root[data-ui="v2"] .mt-quick { padding: 12px 14px; margin-bottom: 14px; }
:root[data-ui="v2"] .mt-quick-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
:root[data-ui="v2"] .mt-f { margin: 0; }
:root[data-ui="v2"] .mt-f input[type="text"], :root[data-ui="v2"] .mt-f input[type="date"] { min-height: 38px; }
:root[data-ui="v2"] .mt-f-time input { width: 112px; }
:root[data-ui="v2"] .mt-f-client { flex: 0 1 190px; } :root[data-ui="v2"] .mt-f-client input { width: 100%; }
:root[data-ui="v2"] .mt-f-what { flex: 1 1 160px; } :root[data-ui="v2"] .mt-f-what input { width: 100%; }
:root[data-ui="v2"] .mt-f-bill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
:root[data-ui="v2"] .mt-days, :root[data-ui="v2"] .mt-site { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border-radius: var(--radius-md); background: var(--surface-sunken-grad); border: var(--control-border); }
:root[data-ui="v2"] .mt-days button, :root[data-ui="v2"] .mt-site button { min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; box-shadow: none; cursor: pointer; }
:root[data-ui="v2"] .mt-site button { min-width: 34px; }
:root[data-ui="v2"] .mt-days button[aria-checked="true"], :root[data-ui="v2"] .mt-site button[aria-checked="true"] { background: var(--surface-raised-grad); color: var(--brand-text); box-shadow: var(--shadow-raised-xs); }
:root[data-ui="v2"] .mt-days input[type="date"] { min-height: 32px; border: 0; background: transparent; box-shadow: none; font-size: 12.5px; color: var(--text-tertiary); width: 128px; padding: 0 6px; }
:root[data-ui="v2"] .mt-days input.is-on { color: var(--brand-text); font-weight: 700; background: var(--surface-raised-grad); border-radius: var(--radius-sm); }
:root[data-ui="v2"] .mt-preview { margin: 8px 2px 0; font-size: 12.5px; }
:root[data-ui="v2"] .mt-preview strong { color: var(--text-primary); font-family: var(--font-mono); font-size: 12px; }
/* Week grid */
:root[data-ui="v2"] .mt-week { padding: 14px; margin-bottom: 14px; }
:root[data-ui="v2"] .mt-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
:root[data-ui="v2"] .mt-cols.has-weekend { grid-template-columns: repeat(7, minmax(0, 1fr)); }
:root[data-ui="v2"] .mt-day { display: grid; grid-template-rows: auto 96px auto auto 1fr; gap: 6px; padding: 10px; border-radius: var(--radius-md); background: var(--surface-base); border: 1px solid var(--border-subtle); min-width: 0; }
:root[data-ui="v2"] .mt-day.is-today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
:root[data-ui="v2"] .mt-day.tone-future { opacity: .55; }
:root[data-ui="v2"] .mt-day-head { display: flex; align-items: baseline; gap: 6px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--text-secondary); font: inherit; cursor: pointer; text-align: left; }
:root[data-ui="v2"] .mt-day-head:hover:not([disabled]) .mt-dom { color: var(--brand-text); }
:root[data-ui="v2"] .mt-day-head[disabled] { cursor: default; }
:root[data-ui="v2"] .mt-dow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
:root[data-ui="v2"] .mt-dom { font-size: 18px; font-weight: 700; color: var(--text-primary); }
:root[data-ui="v2"] .mt-meter { position: relative; height: 96px; border-radius: var(--radius-sm); background: var(--surface-sunken-grad); overflow: hidden; }
:root[data-ui="v2"] .mt-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--text-tertiary); border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: height var(--dur-base) var(--ease); }
:root[data-ui="v2"] .mt-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--text-tertiary); opacity: .6; }
:root[data-ui="v2"] .mt-day.tone-goal .mt-fill { background: var(--status-resolved-solid); }
:root[data-ui="v2"] .mt-day.tone-ok .mt-fill { background: var(--info-fg); }
:root[data-ui="v2"] .mt-day.tone-short .mt-fill { background: var(--priority-medium-solid); }
:root[data-ui="v2"] .mt-day-total { font-size: 15px; font-weight: 700; color: var(--text-primary); }
:root[data-ui="v2"] .mt-short { font-size: 12px; font-weight: 700; color: var(--priority-medium-fg); }
:root[data-ui="v2"] .mt-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; }
:root[data-ui="v2"] .mt-chip { font-size: 12px; padding: 3px 7px; border-radius: var(--radius-sm); background: var(--surface-raised); border: 1px solid var(--border-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }
:root[data-ui="v2"] .mt-chip strong { color: var(--text-primary); }
:root[data-ui="v2"] .mt-chip.kind-ticket { border-left: 3px solid var(--info-fg); }
:root[data-ui="v2"] .mt-chip.kind-task { border-left: 3px solid var(--brand); }
:root[data-ui="v2"] .mt-chip.kind-general { border-left: 3px solid var(--text-tertiary); }
:root[data-ui="v2"] .mt-chip.mt-more { border-style: dashed; text-align: center; }
/* Gaps */
:root[data-ui="v2"] .mt-gaps { margin-bottom: 14px; border-left: 4px solid var(--priority-medium-solid); }
:root[data-ui="v2"] .mt-gaps:has(.mt-gaps-none) { border-left-color: var(--status-resolved-solid); }
:root[data-ui="v2"] .mt-gaps-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
:root[data-ui="v2"] .mt-gaps-head p { margin: 4px 0 10px; font-size: 13px; }
:root[data-ui="v2"] .mt-gaps-n { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--priority-medium-bg); color: var(--priority-medium-fg); }
:root[data-ui="v2"] .mt-gaps-none { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--status-resolved-fg); font-weight: 600; }
:root[data-ui="v2"] .mt-gap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
:root[data-ui="v2"] .mt-gap { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; grid-template-areas: "day ticket acts" "day what acts"; gap: 0 12px; align-items: center; padding: 9px 12px; border-radius: var(--radius-md); background: var(--surface-base); border: 1px solid var(--border-subtle); transition: opacity var(--dur-base) var(--ease); }
:root[data-ui="v2"] .mt-gap.is-done { opacity: 0; }
:root[data-ui="v2"] .mt-gap-day { grid-area: day; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
:root[data-ui="v2"] .mt-gap-ticket { grid-area: ticket; font-weight: 600; color: var(--text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="v2"] .mt-gap-ticket:hover { color: var(--brand-text); }
:root[data-ui="v2"] .mt-gap-id { font-family: var(--font-mono); font-size: 12px; color: var(--brand-text); }
:root[data-ui="v2"] .mt-gap-what { grid-area: what; font-size: 12.5px; }
:root[data-ui="v2"] .mt-gap-acts { grid-area: acts; display: inline-flex; gap: 4px; }
:root[data-ui="v2"] .mt-gap-acts .tk-btn { min-height: 32px; font-size: 12.5px; padding: 0 10px; }
:root[data-ui="v2"] .mt-entries-head { margin-top: 6px; }
:root[data-ui="v2"].mt-v2 main.dash > .filters { display: flex; gap: 10px; margin: 0 0 10px; }
:root[data-ui="v2"].mt-v2 main.dash > .filters select { width: auto; min-width: 160px; }
 @media (max-width: 700px) {
  :root[data-ui="v2"] .mt-f-time, :root[data-ui="v2"] .mt-f-client, :root[data-ui="v2"] .mt-f-what { flex: 1 1 100%; }
  :root[data-ui="v2"] .mt-f-time input { width: 100%; }
  :root[data-ui="v2"] .mt-weeklabel { min-width: 0; flex: 1; }
}
@media (max-width: 900px) {
  :root[data-ui="v2"] .mt-cols, :root[data-ui="v2"] .mt-cols.has-weekend { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(130px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; }
  :root[data-ui="v2"] .mt-day { scroll-snap-align: start; }
  :root[data-ui="v2"] .mt-export { margin-left: 0; }
  :root[data-ui="v2"] .mt-gap { grid-template-columns: 1fr; grid-template-areas: "day" "ticket" "what" "acts"; gap: 4px; }
}


/* =============================================================================
   PAGE SWEEP pass 3 · Admin pages (admin-pages.js)
   ============================================================================= */
:root[data-ui="v2"] .adm-hidden { display: none !important; }
:root[data-ui="v2"] .adm-count { margin-left: 6px; font-size: 13px; font-weight: 700; padding: 1px 9px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-tint-text); vertical-align: 3px; }
:root[data-ui="v2"] .adm-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
:root[data-ui="v2"] .adm-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
:root[data-ui="v2"] .adm-state.on { color: var(--status-resolved-fg); } :root[data-ui="v2"] .adm-state.on::before { background: var(--status-resolved-solid); }
:root[data-ui="v2"] .adm-state.warn { color: var(--priority-medium-fg); } :root[data-ui="v2"] .adm-state.warn::before { background: var(--priority-medium-solid); }
/* Users */
:root[data-ui="v2"].admpg .user-table th { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
:root[data-ui="v2"].admpg .user-table td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
:root[data-ui="v2"] .adm-person { display: flex; align-items: center; gap: 10px; }
:root[data-ui="v2"] .adm-person strong { display: block; color: var(--text-primary); }
:root[data-ui="v2"] .adm-email { display: block; font-size: 12.5px; color: var(--text-tertiary); }
:root[data-ui="v2"] .adm-last { display: table-cell; }
:root[data-ui="v2"] .adm-signin, :root[data-ui="v2"] .adm-load, :root[data-ui="v2"] .adm-away { display: block; font-size: 12.5px; color: var(--text-secondary); }
:root[data-ui="v2"] .adm-away { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 1px 7px; border-radius: 999px; background: var(--status-hold-bg); color: var(--status-hold-fg); font-weight: 600; }
:root[data-ui="v2"].admpg .user-actions-cell { white-space: nowrap; text-align: right; }
:root[data-ui="v2"].admpg .user-actions-cell .edit-btn { min-height: 32px; }
:root[data-ui="v2"] .adm-more { display: inline-block; position: relative; margin-left: 4px; vertical-align: middle; }
:root[data-ui="v2"] .adm-more .menu { position: absolute; right: 0; left: auto; top: calc(100% + 6px); min-width: 210px; z-index: 60; margin: 0; padding: 4px; list-style: none; text-align: left; background: var(--surface-overlay); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); }
:root[data-ui="v2"] .adm-more .menu .is-danger { color: var(--danger-text); }
:root[data-ui="v2"] .adm-more .menu-sep { height: 1px; margin: 4px 6px; background: var(--border-subtle); }
:root[data-ui="v2"] tr.user-main-row.is-inactive td { opacity: .6; }
/* Mailbox */
:root[data-ui="v2"] .mb-head { margin: 6px 0 16px; }
:root[data-ui="v2"] .mb-out { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:root[data-ui="v2"] .mb-sim { padding: 0; }
:root[data-ui="v2"] .mb-sim > summary { padding: 16px 20px; cursor: pointer; font-weight: 700; color: var(--text-primary); }
:root[data-ui="v2"] .mb-sim[open] > summary { border-bottom: 1px solid var(--border-subtle); }
:root[data-ui="v2"] .mb-sim > section { padding: 16px 20px 20px; margin: 0; box-shadow: none; border: 0; background: transparent; }
/* Recently deleted */
:root[data-ui="v2"] .adm-search { width: 100%; min-height: 42px; margin: 0 0 12px; }
:root[data-ui="v2"] .adm-days { width: 180px; height: 6px; margin-top: 6px; border-radius: 999px; background: var(--surface-sunken-grad); overflow: hidden; }
:root[data-ui="v2"] .adm-days i { display: block; height: 100%; background: var(--text-tertiary); border-radius: 999px; }
:root[data-ui="v2"] .adm-days.is-soon i { background: var(--sla-breached-fg); }
:root[data-ui="v2"] .deleted-row .restore-btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 700px) {
  :root[data-ui="v2"].admpg .user-table thead { display: none; }
  :root[data-ui="v2"].admpg .user-table tr.user-main-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
  :root[data-ui="v2"].admpg .user-table tr.user-main-row td { padding: 0; border: 0; }
  :root[data-ui="v2"].admpg .user-table tr.user-main-row td:first-child { grid-column: 1 / -1; order: 2; }
}
/* Admin pages: the sidebar replaces both back links (fix 2026-10-27) */
:root[data-ui="v2"] body.has-adm-side main > .back-row, :root[data-ui="v2"] body.has-adm-side .back-prev { display: none !important; }

/* My Time: "Touched but not logged" folds away (2026-10-27) */
:root[data-ui="v2"] .mt-gaps-fold > summary { list-style: none; cursor: pointer; position: relative; padding-left: 22px; }
:root[data-ui="v2"] .mt-gaps-fold > summary::-webkit-details-marker { display: none; }
:root[data-ui="v2"] .mt-gaps-fold > summary::before { content: "▸"; position: absolute; left: 2px; top: 2px; color: var(--text-tertiary); transition: transform var(--dur-fast) var(--ease); }
:root[data-ui="v2"] .mt-gaps-fold[open] > summary::before { transform: rotate(90deg); }
:root[data-ui="v2"] .mt-gaps-fold:not([open]) > summary p { display: none; }
:root[data-ui="v2"] .mt-gaps-ok { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--status-resolved-fg); }

/* Ticket page (2026-10-27): the Scenarios row is gone in v2 — scenarios run from
   the Macros menu — and merge suggestions fold into the AI Summary card. */
:root[data-ui="v2"] #scenario-bar { display: none !important; }
:root[data-ui="v2"] details.tk-dupes { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border-subtle); font-size: 13px; }
:root[data-ui="v2"] details.tk-dupes > summary { cursor: pointer; font-weight: 700; color: var(--brand-text); }
:root[data-ui="v2"] details.tk-dupes .tk-suggest-item { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 8px 0; border-bottom: 1px dashed var(--border-subtle); }
:root[data-ui="v2"] details.tk-dupes .tk-suggest-item:last-child { border-bottom: 0; }
:root[data-ui="v2"] details.tk-dupes .tk-dupe-subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
:root[data-ui="v2"] details.tk-dupes .tk-dupe-why, :root[data-ui="v2"] details.tk-dupes .tk-dupe-acts { grid-column: 2; font-size: 12px; }

/* Dashboard list header (2026-10-27, "updatesuiugly"): title + count, then
   "closed today" / updates pill / Select page pushed right and never wrapped;
   the scope note drops to its own small line underneath. */
:root[data-ui="v2"] .list-head { flex-wrap: wrap; row-gap: 4px; column-gap: 12px; }
:root[data-ui="v2"] .list-head h2 { white-space: nowrap; }
:root[data-ui="v2"] .list-head .list-closed-today { margin-left: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
:root[data-ui="v2"] .list-head .updates-pill { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 4px; }
:root[data-ui="v2"] .list-head .updates-pill[hidden] { display: none !important; }
:root[data-ui="v2"] .list-head .queue-select-all { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
:root[data-ui="v2"] .list-head:not(:has(.list-closed-today)) .queue-select-all { margin-left: auto; }
:root[data-ui="v2"] .list-head .list-scope-note { order: 10; flex-basis: 100%; font-size: 12px; }
:root[data-ui="v2"] .list-head:not(:has(.list-closed-today)) .updates-pill { margin-left: auto; }

/* Loading feedback (2026-10-27) — toast.js adds .net-busy to <html> while a
   request has been running > 350 ms (background polls excluded), and .is-busy
   to a form's submit button while it saves. Both looks. */
.net-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10000; pointer-events: none; opacity: 0; overflow: hidden; transition: opacity .15s ease; }
.net-progress::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, transparent, var(--brand, #7c3aed), var(--brand-hover, #6d28d9)); animation: net-slide 1.1s ease-in-out infinite; }
html.net-busy .net-progress { opacity: 1; }
html.net-busy, html.net-busy * { cursor: progress; }
@keyframes net-slide { from { left: -40%; } to { left: 100%; } }
button.is-busy { position: relative; color: transparent !important; }
button.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-color: rgba(255, 255, 255, .9) rgba(255, 255, 255, .9) rgba(255, 255, 255, .25) rgba(255, 255, 255, .25); animation: net-spin .7s linear infinite; }
.btn-secondary.is-busy::after, .tk-ghost.is-busy::after { border-color: var(--brand, #7c3aed) var(--brand, #7c3aed) transparent transparent; }
@keyframes net-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .net-progress::before { animation-duration: 2.5s; } button.is-busy::after { animation-duration: 1.6s; } }
.is-loading-text { display: flex; align-items: center; gap: 8px; color: var(--text-tertiary, #888); }
.is-loading-text::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--brand, #7c3aed); border-right-color: transparent; border-bottom-color: transparent; animation: net-spin .7s linear infinite; }
:root[data-ui="v2"] .list-head { justify-content: flex-start !important; }


/* =============================================================================
   ONE COLOUR SYSTEM (2026-10-27) — every colour comes from the theme tokens so
   light and dark mode match. The rule: words use the "-fg" colours, bars /
   edges / dots use the "-solid" colours, tinted backgrounds use "-bg".
     blue  = --status-open-*        amber = --priority-medium-*
     red   = --priority-critical-*  green = --status-resolved-*
   Earlier rules hard-coded #d97706 / #b45309 / #dc2626 / #16a34a (one shade in
   both modes) or used a text colour as a fill (pastel bars in dark mode).
   ============================================================================= */
/* Dark mode's solid blue: a richer, deeper blue than the old pastel #60a5fa. */
@media (prefers-color-scheme: dark) { html:root[data-ui="v2"]:not([data-theme="light"]) { --status-open-solid: #3b82f6; } }
html:root[data-ui="v2"][data-theme="dark"] { --status-open-solid: #3b82f6; }

/* blue fills and edges */
:root[data-ui="v2"] .sla-meter-bar i { background: var(--status-open-solid); }
:root[data-ui="v2"] .side-conv.is-their-word { border-color: var(--status-open-solid); }
:root[data-ui="v2"] .reply-card { border-top-color: var(--status-open-solid); }
:root[data-ui="v2"] .msg-in { border-left-color: var(--status-open-solid); }
:root[data-ui="v2"] .btn-reply-open { border-color: var(--status-open-solid); }
:root[data-ui="v2"] .mt-day.tone-ok .mt-fill { background: var(--status-open-solid); }
:root[data-ui="v2"] .mt-chip.kind-ticket { border-left-color: var(--status-open-solid); }
/* SLA meters */
:root[data-ui="v2"] .sla-meter-green .sla-meter-bar i { background: var(--status-resolved-solid); }
:root[data-ui="v2"] .sla-meter-yellow .sla-meter-bar i { background: var(--priority-medium-solid); }
:root[data-ui="v2"] .sla-meter-red .sla-meter-bar i, :root[data-ui="v2"] .sla-meter-late .sla-meter-bar i { background: var(--priority-critical-solid); }
:root[data-ui="v2"] .sla-meter-red .sla-meter-text, :root[data-ui="v2"] .sla-meter-late .sla-meter-text { color: var(--priority-critical-fg); }
/* amber (needs attention) */
:root[data-ui="v2"] .tk-glance.tone-warn { border-color: var(--priority-medium-solid); background: color-mix(in srgb, var(--priority-medium-solid) 10%, var(--surface-base)); }
:root[data-ui="v2"] .tk-seg.is-warn, :root[data-ui="v2"] .rule-stats.is-dead { color: var(--priority-medium-fg); }
:root[data-ui="v2"] .merge-warnings { background: var(--priority-medium-bg); color: var(--priority-medium-fg); }
:root[data-ui="v2"] .rule-row-card:has(.rule-stats.is-dead) { border-left-color: var(--priority-medium-solid); }
:root[data-ui="v2"] .t-close-badge { background: var(--priority-medium-bg); color: var(--priority-medium-fg); }
:root[data-ui="v2"] .fu-banner { border-color: var(--priority-medium-solid); background: color-mix(in srgb, var(--priority-medium-solid) 10%, var(--surface-base)); }
/* red (wrong / urgent) */
:root[data-ui="v2"] .tk-glance.tone-bad { border-color: var(--priority-critical-solid); background: color-mix(in srgb, var(--priority-critical-solid) 10%, var(--surface-base)); }
:root[data-ui="v2"] .tk-seg.is-bad { color: var(--priority-critical-fg); }
:root[data-ui="v2"] .tk-departed { border-color: var(--priority-critical-solid); background: color-mix(in srgb, var(--priority-critical-solid) 10%, var(--surface-base)); }
:root[data-ui="v2"] .hold-error { color: var(--danger-text); }
:root[data-ui="v2"] .adm-days.is-soon i { background: var(--priority-critical-solid); }
:root[data-ui="v2"] .adm-card.tone-bad { border-left-color: var(--priority-critical-solid); }
/* green */
:root[data-ui="v2"] .mt-gaps:has(.mt-gaps-ok) { border-left-color: var(--status-resolved-solid); }
/* popups: the same shadow and corners as every other menu */
:root[data-ui="v2"] .mc-menu, :root[data-ui="v2"] .mc-picker, :root[data-ui="v2"] .mention-pop { box-shadow: var(--shadow-overlay); border-radius: var(--radius-lg); }
:root[data-ui="v2"] .ct-chip:hover { border-color: var(--text-tertiary); }

/* ---- Dropdowns: one look everywhere --------------------------------------------
   The chosen value is always the normal text colour (a choice like "Remember
   where I left off" or "Keep the status" has an empty value and used to show in
   the faint placeholder grey). */
:root[data-ui="v2"] .select-value.placeholder { color: var(--text-primary); }
:root[data-ui="v2"] .select-trigger { color: var(--text-primary); }
:root[data-ui="v2"] .pf-row .select-native { justify-self: start; min-width: 220px; max-width: 360px; }
:root[data-ui="v2"] .pf-row .select-native > .select-trigger { width: 100%; min-height: 38px; font-size: 13.5px; font-weight: 600; }

/* ---- Ticket header: the fields stack (2026-10-27, "emptyspace") ----------------
   Category (+ Suggest) / Subcategory / Tags / Reporter / Cc'd, one labelled
   row each, then "Opened ... Updated ..." lined up under the values. */
:root[data-ui="v2"].tk-consolidated dl.fields { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 10px 14px; margin: 16px 0 8px; }
:root[data-ui="v2"].tk-consolidated dl.fields dt[data-field="category"],
:root[data-ui="v2"].tk-consolidated dl.fields dt[data-field="subcategory"],
:root[data-ui="v2"].tk-consolidated dl.fields dt[data-field="tags"] { display: block !important; }
:root[data-ui="v2"].tk-consolidated dl.fields dt { margin: 0; color: var(--text-tertiary); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
:root[data-ui="v2"].tk-consolidated dl.fields dt[data-field="reporter"] { margin-left: 0; }
:root[data-ui="v2"].tk-consolidated dl.fields dd { min-width: 0; flex-wrap: wrap; }
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="category"]::after,
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="subcategory"]::after,
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="tags"]::after { content: none; }
:root[data-ui="v2"].tk-consolidated dl.fields .tk-break { display: none; }
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="category"] .select-native,
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="subcategory"] .select-native { width: 280px; max-width: 100%; }
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="category"] .select-trigger,
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="subcategory"] .select-trigger { width: 100%; }
:root[data-ui="v2"].tk-consolidated dl.fields dd.tag-editor { justify-self: start; min-width: 280px; }
:root[data-ui="v2"].tk-consolidated dl.fields dd.tk-cc-full { grid-column: 2; }
:root[data-ui="v2"].tk-consolidated p.tk-when { margin: 4px 0 0 118px; }
@media (max-width: 700px) {
  :root[data-ui="v2"].tk-consolidated dl.fields { grid-template-columns: 1fr; gap: 4px; }
  :root[data-ui="v2"].tk-consolidated dl.fields dd { margin-bottom: 8px; }
  :root[data-ui="v2"].tk-consolidated dl.fields dd.tk-cc-full { grid-column: 1; }
  :root[data-ui="v2"].tk-consolidated p.tk-when { margin-left: 0; }
}
/* tidy-up: Suggest right beside the Category dropdown; both dropdowns one width */
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="category"] .select-native,
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="subcategory"] .select-native { width: auto; }
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="category"] .select-trigger,
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="subcategory"] .select-trigger { width: 260px; max-width: 100%; }
:root[data-ui="v2"].tk-consolidated dl.fields dd[data-field="category"] .ai-suggest-btn { margin-left: 6px; }
/* Preferences: every dropdown the same width */
:root[data-ui="v2"] .pf-row .select-native { width: 320px; min-width: 0; max-width: 100%; }

/* =============================================================================
   Knowledge Base (sweep pass 6, 2026-10-27) — kb-v2.js
   Rail · ranked list · docked reader · Insights. Classic look untouched.
   ============================================================================= */
:root[data-ui="v2"].kbx-on main { max-width: 1480px; }
:root[data-ui="v2"] .kbx-hidden { display: none !important; }
:root[data-ui="v2"] .kbx-head { display: flex; align-items: center; gap: 18px; margin: 4px 0 18px; flex-wrap: wrap; }
:root[data-ui="v2"] .kbx-head h2 { margin: 0; font-size: 24px; font-weight: 700; color: var(--text-primary); }
:root[data-ui="v2"] .kbx-tabs { display: inline-flex; gap: 4px; }
:root[data-ui="v2"] .kbx-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border: var(--card-border); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-raised-xs); }
:root[data-ui="v2"] .kbx-tab.is-on { background: var(--brand); color: var(--text-on-brand); box-shadow: none; }
:root[data-ui="v2"] .kbx-tab-n { font-weight: 500; opacity: .85; }
:root[data-ui="v2"] .kbx-search { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: var(--shadow-inset-sm); color: var(--text-tertiary); }
:root[data-ui="v2"] .kbx-search input { flex: 1; border: 0; background: transparent; box-shadow: none; padding: 0; min-height: 38px; font-size: 15px; color: var(--text-primary); outline: none; }
:root[data-ui="v2"] .kbx-search:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
:root[data-ui="v2"] .kbx-search kbd { font: 12px/1 ui-monospace, monospace; padding: 3px 6px; border-radius: 5px; background: var(--surface-raised); color: var(--text-tertiary); }
:root[data-ui="v2"] .kbx-new { position: relative; }
:root[data-ui="v2"] .kbx-new .menu li { white-space: nowrap; }
:root[data-ui="v2"] .kbx-from-ticket { margin: -6px 0 14px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-tint-text); font-size: 13.5px; }
:root[data-ui="v2"] .kbx-from-ticket a { color: inherit; font-weight: 700; }

:root[data-ui="v2"] .kbx-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
:root[data-ui="v2"] .kbx.has-reader .kbx-body { grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); }
:root[data-ui="v2"] .kbx-rail { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; }
:root[data-ui="v2"] .kbx-rail-sec { margin: 6px 10px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
:root[data-ui="v2"] .kbx-rail-sec:not(:first-child) { margin-top: 18px; }
:root[data-ui="v2"] .kbx-rail-item { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
:root[data-ui="v2"] .kbx-rail-item:hover { background: var(--surface-raised); color: var(--text-primary); }
:root[data-ui="v2"] .kbx-rail-item.is-on { background: var(--brand-tint); color: var(--brand-tint-text); font-weight: 700; }
:root[data-ui="v2"] .kbx-rail-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="v2"] .kbx-rail-n { font-size: 13px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
:root[data-ui="v2"] .kbx-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-disabled); }
:root[data-ui="v2"] .kbx-dot.dot-brand, :root[data-ui="v2"] .kbx-rail-item.is-on .kbx-dot { background: var(--success); }
:root[data-ui="v2"] .kbx-dot.tone-warn { background: var(--priority-medium-solid); }
:root[data-ui="v2"] .kbx-dot.tone-bad { background: var(--priority-critical-solid); }
:root[data-ui="v2"] .kbx-dot.tone-ok { background: var(--status-resolved-solid); }
:root[data-ui="v2"] .kbx-rail-n.tone-warn { color: var(--priority-medium-fg); font-weight: 700; }
:root[data-ui="v2"] .kbx-rail-n.tone-bad { color: var(--danger-text); font-weight: 700; }

:root[data-ui="v2"] .kbx-list { padding: 0; overflow: hidden; }
:root[data-ui="v2"] .kbx-list-head { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; font-size: 13.5px; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }
:root[data-ui="v2"] .kbx-list-head strong { color: var(--text-primary); }
:root[data-ui="v2"] .kbx-dym { margin: 0; padding: 10px 18px; font-size: 14px; background: var(--brand-tint); color: var(--brand-tint-text); }
:root[data-ui="v2"] .kbx-dym .btn-link { font-weight: 700; color: inherit; text-decoration: underline; }
:root[data-ui="v2"] .kbx-row { padding: 14px 18px; border-left: 3px solid transparent; border-bottom: 1px solid var(--border-subtle); cursor: pointer; outline: none; }
:root[data-ui="v2"] .kbx-row:last-child { border-bottom: 0; }
:root[data-ui="v2"] .kbx-row:hover { background: color-mix(in srgb, var(--brand-tint) 40%, transparent); }
:root[data-ui="v2"] .kbx-row.is-open, :root[data-ui="v2"] .kbx-row:focus-visible { background: var(--brand-tint); border-left-color: var(--brand); }
:root[data-ui="v2"] .kbx-row-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
:root[data-ui="v2"] .kbx-star { color: var(--priority-medium-solid); margin-right: 6px; }
:root[data-ui="v2"] .kbx-row-snip { margin: 4px 0 8px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
:root[data-ui="v2"] .kbx mark, :root[data-ui="v2"] .kbx-r-body mark { padding: 0 2px; border-radius: 3px; background: var(--priority-medium-bg); color: var(--priority-medium-fg); }
:root[data-ui="v2"] .kbx-row-title mark { color: inherit; }
:root[data-ui="v2"] .kbx-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-tertiary); }
:root[data-ui="v2"] .kbx-trust { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
:root[data-ui="v2"] .kbx-trust .av-xs, :root[data-ui="v2"] .kbx-r-owner .av-xs { width: 18px; height: 18px; font-size: 9px; }
:root[data-ui="v2"] .kbx-sep { color: var(--text-disabled); }
:root[data-ui="v2"] .kbx-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
:root[data-ui="v2"] .kbx-chip.chip-cat { background: var(--status-open-bg); color: var(--status-open-fg); }
:root[data-ui="v2"] .kbx-chip.chip-client { background: var(--status-resolved-bg); color: var(--status-resolved-fg); }
:root[data-ui="v2"] .kbx-chip.chip-internal { background: var(--status-hold-bg); color: var(--status-hold-fg); }
:root[data-ui="v2"] .kbx-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
:root[data-ui="v2"] .kbx-pill.pill-warn { background: var(--priority-medium-bg); color: var(--priority-medium-fg); }
:root[data-ui="v2"] .kbx-pill.pill-bad { background: var(--priority-critical-bg); color: var(--priority-critical-fg); }
:root[data-ui="v2"] .kbx-pill.pill-quiet { background: var(--status-hold-bg); color: var(--status-hold-fg); }
:root[data-ui="v2"] .kbx-helpful { font-weight: 700; }
:root[data-ui="v2"] .kbx-helpful.is-good { color: var(--status-resolved-fg); }
:root[data-ui="v2"] .kbx-helpful.is-bad { color: var(--danger-text); }
:root[data-ui="v2"] .kbx-row-bin { margin-top: 6px; font-size: 13px; color: var(--text-tertiary); }
:root[data-ui="v2"] .kbx-empty { padding: 36px 18px; text-align: center; }
:root[data-ui="v2"] .kbx-more { padding: 12px 18px; text-align: center; }
:root[data-ui="v2"] .kbx-more:empty { display: none; }

:root[data-ui="v2"] .kbx-reader { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; padding: 18px 20px; }
:root[data-ui="v2"] .kbx-r-top { display: flex; align-items: center; gap: 10px; }
:root[data-ui="v2"] .kbx-crumb { flex: 1; font-size: 13px; color: var(--text-tertiary); }
:root[data-ui="v2"] .kbx-r-close { min-height: 30px; padding: 0 8px; }
:root[data-ui="v2"] .kbx-r-title { margin: 8px 0 6px; font-size: 21px; line-height: 1.3; color: var(--text-primary); }
:root[data-ui="v2"] .kbx-r-owner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-secondary); }
:root[data-ui="v2"] .kbx-r-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 6px; }
:root[data-ui="v2"] .kbx-r-review { margin-left: auto; font-weight: 700; color: var(--brand-text); }
:root[data-ui="v2"] .kbx-toc { margin: 12px 0; padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 13.5px; }
:root[data-ui="v2"] .kbx-toc-t { margin-bottom: 4px; font-weight: 700; color: var(--text-secondary); }
:root[data-ui="v2"] .kbx-toc a { display: block; padding: 2px 0; color: var(--brand-text); text-decoration: none; }
:root[data-ui="v2"] .kbx-toc a.is-sub { padding-left: 14px; }
:root[data-ui="v2"] .kbx-toc a:hover { text-decoration: underline; }
:root[data-ui="v2"] .kbx-r-body { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--text-primary); }
:root[data-ui="v2"] .kbx-r-body code { padding: 1px 5px; border-radius: 4px; background: var(--surface-sunken); font-size: 13px; }
:root[data-ui="v2"] .kbx-r-use { margin-top: 20px; padding: 14px; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 14px; color: var(--text-primary); }
:root[data-ui="v2"] .kbx-use-bar { display: flex; height: 5px; margin: 8px 0 4px; border-radius: 999px; overflow: hidden; background: var(--surface-raised); }
:root[data-ui="v2"] .kbx-use-bar i.is-good { background: var(--status-resolved-solid); }
:root[data-ui="v2"] .kbx-use-bar i.is-bad { background: var(--priority-critical-bg); }
:root[data-ui="v2"] .kbx-fb { position: relative; margin-top: 10px; padding: 12px 130px 10px 14px; border-left: 3px solid var(--priority-critical-solid); border-radius: var(--radius-md); background: var(--surface-raised); }
:root[data-ui="v2"] .kbx-fb.is-done { border-left-color: var(--status-resolved-solid); opacity: .8; }
:root[data-ui="v2"] .kbx-fb-q { margin: 0 0 6px; }
:root[data-ui="v2"] .kbx-fb-who { font-size: 12.5px; color: var(--text-tertiary); }
:root[data-ui="v2"] .kbx-fb .btn-small, :root[data-ui="v2"] .kbx-fb-state { position: absolute; top: 10px; right: 10px; }
:root[data-ui="v2"] .kbx-fb-state { font-size: 12.5px; font-weight: 700; color: var(--status-resolved-fg); }
:root[data-ui="v2"] .kbx-r-sec { margin: 18px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); }
:root[data-ui="v2"] .kbx-link-row { display: block; padding: 4px 0; font-size: 14px; color: var(--text-primary); text-decoration: none; }
:root[data-ui="v2"] .kbx-link-row:hover { color: var(--brand-text); }
:root[data-ui="v2"] .kbx-id { font-weight: 700; color: var(--brand-text); }
:root[data-ui="v2"] .kbx-bin-note { margin: 12px 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--priority-medium-bg); color: var(--priority-medium-fg); }

/* History dialog + word diff */
:root[data-ui="v2"] .kbx-hist { width: min(980px, calc(100vw - 32px)); max-width: none; }
:root[data-ui="v2"] .kbx-hist-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; max-height: 60vh; }
:root[data-ui="v2"] .kbx-hist-list { margin: 0; padding: 0; list-style: none; overflow: auto; }
:root[data-ui="v2"] .kbx-hist-list li { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--radius-md); font-size: 13px; cursor: pointer; color: var(--text-secondary); }
:root[data-ui="v2"] .kbx-hist-list li strong { color: var(--text-primary); }
:root[data-ui="v2"] .kbx-hist-list li:hover, :root[data-ui="v2"] .kbx-hist-list li[aria-selected="true"] { background: var(--brand-tint); color: var(--brand-tint-text); }
:root[data-ui="v2"] .kbx-hist-view { overflow: auto; }
:root[data-ui="v2"] .kbx-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
:root[data-ui="v2"] .kbx-diff-h { margin-bottom: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); }
:root[data-ui="v2"] .kbx-diff-t { padding: 10px; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; color: var(--text-primary); }
:root[data-ui="v2"] .kbx-diff del { background: var(--priority-critical-bg); color: var(--priority-critical-fg); }
:root[data-ui="v2"] .kbx-diff ins { text-decoration: none; background: var(--status-resolved-bg); color: var(--status-resolved-fg); }

/* "Check before showing this to clients" */
:root[data-ui="v2"] .kbx-sens { border-top: 4px solid var(--priority-high-solid); }
:root[data-ui="v2"] .kbx-sens-list { margin: 10px 0; padding: 0; list-style: none; display: grid; gap: 6px; }
:root[data-ui="v2"] .kbx-sens-list li { padding: 9px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 14px; color: var(--text-primary); }
:root[data-ui="v2"] .kbx-sens-list code { padding: 1px 6px; border-radius: 4px; background: var(--priority-medium-bg); color: var(--priority-medium-fg); }
:root[data-ui="v2"] .kbx-sens-ok { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: 14px; color: var(--text-primary); }

/* Editor extras */
:root[data-ui="v2"] .kbx-ed-extra { margin-top: 4px; }
:root[data-ui="v2"] .kbx-ed-saved { margin-left: auto; align-self: center; font-size: 13px; }
:root[data-ui="v2"] .kbx-restore-bar { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--priority-medium-bg); color: var(--priority-medium-fg); font-size: 13.5px; }
:root[data-ui="v2"] .kbx-restore-bar .btn-link { color: inherit; font-weight: 700; text-decoration: underline; }

/* Insights */
:root[data-ui="v2"] .kbx-ins-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
:root[data-ui="v2"] .kbx-ins-card { padding: 18px 20px; border-left: 4px solid var(--border-card); }
:root[data-ui="v2"] .kbx-ins-card.tone-bad { border-left-color: var(--priority-critical-solid); }
:root[data-ui="v2"] .kbx-ins-card.tone-warn { border-left-color: var(--priority-medium-solid); }
:root[data-ui="v2"] .kbx-ins-card.tone-ok { border-left-color: var(--status-resolved-solid); }
:root[data-ui="v2"] .kbx-ins-card.tone-brand { border-left-color: var(--brand); }
:root[data-ui="v2"] .kbx-ins-k { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
:root[data-ui="v2"] .kbx-ins-v { margin: 6px 0 4px; font-size: 30px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
:root[data-ui="v2"] .kbx-ins-s { font-size: 13px; color: var(--text-secondary); }
:root[data-ui="v2"] .kbx-ins-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
:root[data-ui="v2"] .kbx-ins-grid h3 { margin: 0 0 2px; font-size: 17px; color: var(--text-primary); }
:root[data-ui="v2"] .kbx-ins-grid section > .muted { margin: 0 0 12px; font-size: 13px; }
:root[data-ui="v2"] .kbx-ins-wide { grid-column: 1 / -1; }
:root[data-ui="v2"] .kbx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
:root[data-ui="v2"] .kbx-table th, :root[data-ui="v2"] .kbx-table td { padding: 8px; text-align: left; vertical-align: middle; color: var(--text-primary); }
:root[data-ui="v2"] .kbx-table thead th { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); }
:root[data-ui="v2"] .kbx-table tbody th { font-weight: 600; }
:root[data-ui="v2"] .kbx-table tbody tr + tr > * { border-top: 1px solid var(--border-subtle); }
:root[data-ui="v2"] .kbx-table .num { text-align: right; font-variant-numeric: tabular-nums; }
:root[data-ui="v2"] .kbx-table .btn-link { font-weight: 600; color: var(--brand-text); text-align: left; }
:root[data-ui="v2"] .kbx-cmt { font-size: 12.5px; font-weight: 400; }
:root[data-ui="v2"] .kbx-good { color: var(--status-resolved-fg); font-weight: 600; }
:root[data-ui="v2"] .kbx-legend { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; color: var(--text-secondary); }
:root[data-ui="v2"] .kbx-legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
:root[data-ui="v2"] .kbx-legend .lg-a { margin-left: 10px; }
:root[data-ui="v2"] .lg-t, :root[data-ui="v2"] .kbx-bar-track .b-t { background: var(--status-open-solid); }
:root[data-ui="v2"] .lg-a, :root[data-ui="v2"] .kbx-bar-track .b-a { background: var(--status-resolved-solid); }
:root[data-ui="v2"] .kbx-bars { display: grid; gap: 8px; }
:root[data-ui="v2"] .kbx-bar-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 110px; align-items: center; gap: 10px; font-size: 14px; color: var(--text-primary); }
:root[data-ui="v2"] .kbx-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="v2"] .kbx-bar-track { display: flex; gap: 3px; height: 10px; }
:root[data-ui="v2"] .kbx-bar-track i { display: block; height: 100%; border-radius: 2px; min-width: 0; }
:root[data-ui="v2"] .kbx-bar-n { text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

@media (max-width: 1399px) {
  :root[data-ui="v2"] .kbx.has-reader .kbx-body { grid-template-columns: 1fr; }
  :root[data-ui="v2"] .kbx.has-reader .kbx-rail, :root[data-ui="v2"] .kbx.has-reader .kbx-list { display: none; }
  :root[data-ui="v2"] .kbx-reader { position: static; max-height: none; }
}
@media (max-width: 1100px) {
  :root[data-ui="v2"] .kbx-ins-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-ui="v2"] .kbx-ins-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root[data-ui="v2"] .kbx-body { grid-template-columns: 1fr; }
  :root[data-ui="v2"] .kbx-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  :root[data-ui="v2"] .kbx-rail-sec { display: none; }
  :root[data-ui="v2"] .kbx-rail-item { min-height: 30px; font-size: 13px; background: var(--surface-raised); }
  :root[data-ui="v2"] .kbx-list-head .kbx-keys { display: none; }
  :root[data-ui="v2"] .kbx-hist-body, :root[data-ui="v2"] .kbx-diff { grid-template-columns: 1fr; }
  :root[data-ui="v2"] .kbx-ins-cards { grid-template-columns: 1fr; }
  :root[data-ui="v2"] .kbx-bar-row { grid-template-columns: 100px minmax(0, 1fr) 90px; }
  :root[data-ui="v2"] .kbx-fb { padding-right: 14px; }
  :root[data-ui="v2"] .kbx-fb .btn-small { position: static; margin-top: 8px; }
}
:root[data-ui="v2"] .kbx-rail-item, :root[data-ui="v2"] .kbx-rail-item:hover, :root[data-ui="v2"] .kbx-rail-item.is-on { box-shadow: none; transform: none; }
:root[data-ui="v2"] .kbx-r-more { position: relative; }
:root[data-ui="v2"] .kbx-r-more .menu li.danger { color: var(--danger-text); }
:root[data-ui="v2"] .kbx-bar-row { grid-template-columns: 150px minmax(0, 1fr) auto; }
:root[data-ui="v2"] .kbx-bar-n { white-space: nowrap; }

/* =============================================================================
   Analytics (sweep pass 7, 2026-10-27) — analytics-v2.js
   Sticky bar · tabs · headline cards with deltas · charts with table twins.
   Colours from tokens only; every coloured value also has a word or arrow.
   ============================================================================= */
:root[data-ui="v2"].anx-on main { max-width: 1480px; }
:root[data-ui="v2"] .anx-hidden { display: none !important; }
:root[data-ui="v2"] .anx-title { margin: 6px 0 14px; font-size: 26px; font-weight: 700; color: var(--text-primary); }
:root[data-ui="v2"] .anx-bar { position: sticky; top: 62px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 -8px 10px; padding: 10px 8px; background: var(--surface-base); border-bottom: 1px solid var(--border-subtle); }
:root[data-ui="v2"] .anx-pick { display: inline-flex; align-items: center; gap: 8px; padding: 0 4px 0 12px; min-height: 36px; border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-raised-xs); font-size: 14px; color: var(--text-secondary); }
:root[data-ui="v2"] .anx-pick select { border: 0; background: transparent; box-shadow: none; min-height: 34px; padding: 0 6px; font-weight: 600; color: var(--text-primary); }
:root[data-ui="v2"] .anx-pick .select-native { min-width: 0; }
:root[data-ui="v2"] .anx-pick .select-trigger { border: 0; background: transparent; box-shadow: none; font-weight: 600; color: var(--text-primary); min-height: 34px; }
:root[data-ui="v2"] .anx-custom { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
:root[data-ui="v2"] .anx-custom input { min-height: 34px; }
:root[data-ui="v2"] .anx-bar-gap { flex: 1; }
:root[data-ui="v2"] .anx-export { position: relative; }
:root[data-ui="v2"] .anx-export .btn-secondary { display: inline-flex; align-items: center; gap: 6px; }
:root[data-ui="v2"] .anx-tabs { display: flex; gap: 4px; margin: 6px 0 18px; border-bottom: 1px solid var(--border-subtle); }
:root[data-ui="v2"] .anx-tab { min-height: 40px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-secondary); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: none; }
:root[data-ui="v2"] .anx-tab:hover { color: var(--text-primary); transform: none; }
:root[data-ui="v2"] .anx-tab.is-on { color: var(--brand-text); border-bottom-color: var(--brand); }
:root[data-ui="v2"] .anx.is-loading .anx-panel { opacity: .55; transition: opacity var(--dur-base, .2s); }
:root[data-ui="v2"] .anx-panel:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

/* Headline cards */
:root[data-ui="v2"] .anx-heads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
:root[data-ui="v2"] .anx-head-card { padding: 16px 18px; }
:root[data-ui="v2"] .anx-hc-top { display: flex; justify-content: space-between; gap: 8px; }
:root[data-ui="v2"] .anx-hc-top h3 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text-secondary); }
:root[data-ui="v2"] .anx-hc-right { font-size: 14px; color: var(--text-secondary); }
:root[data-ui="v2"] .anx-hc-right a { color: inherit; }
:root[data-ui="v2"] .anx-hc-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
:root[data-ui="v2"] .anx-hc-num { display: block; margin: 4px 0 2px; font-size: 34px; font-weight: 700; color: var(--text-primary); text-decoration: none; font-variant-numeric: tabular-nums; }
:root[data-ui="v2"] a.anx-hc-num:hover { color: var(--brand-text); }
:root[data-ui="v2"] .anx-hc-sub { font-size: 13px; color: var(--text-secondary); }
:root[data-ui="v2"] .anx-hc-sub a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-control); }
:root[data-ui="v2"] .anx-delta { font-size: 13px; font-weight: 600; }
:root[data-ui="v2"] .anx-delta.is-good, :root[data-ui="v2"] .anx-cell-d.is-good { color: var(--sla-ontrack-fg); }
:root[data-ui="v2"] .anx-delta.is-bad, :root[data-ui="v2"] .anx-cell-d.is-bad { color: var(--sla-breached-fg); }
:root[data-ui="v2"] .anx-delta.is-flat, :root[data-ui="v2"] .anx-cell-d.is-flat { color: var(--text-secondary); font-weight: 500; }
:root[data-ui="v2"] .anx-cell-d.is-warn { color: var(--sla-warning-fg); }
:root[data-ui="v2"] .anx-spark { flex: none; fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
:root[data-ui="v2"] .anx-spark.is-good { stroke: var(--sla-ontrack-fg); }
:root[data-ui="v2"] .anx-spark.is-bad { stroke: var(--sla-breached-fg); }
:root[data-ui="v2"] .anx-spark.is-brand, :root[data-ui="v2"] .anx-spark.is-flat { stroke: var(--brand); }
:root[data-ui="v2"] .anx-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 12px; padding: 14px 18px; }
:root[data-ui="v2"] .anx-strip > div { display: flex; flex-direction: column; gap: 2px; }
:root[data-ui="v2"] .anx-s-k { font-size: 13px; color: var(--text-secondary); }
:root[data-ui="v2"] .anx-s-v { font-size: 20px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
:root[data-ui="v2"] .anx-strip .anx-delta { font-size: 12px; }

/* Overview: attention + charts */
:root[data-ui="v2"] .anx-over-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
:root[data-ui="v2"] .anx-over-charts { display: grid; gap: 16px; min-width: 0; }
:root[data-ui="v2"] .anx-card { padding: 16px 18px; }
:root[data-ui="v2"] .anx-card h3 { margin: 0; font-size: 17px; color: var(--text-primary); }
:root[data-ui="v2"] .anx-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
:root[data-ui="v2"] .anx-card-head .muted, :root[data-ui="v2"] .anx-att > .muted { margin: 2px 0 0; font-size: 13px; }
:root[data-ui="v2"] .anx-att { border-top: 4px solid var(--sla-breached-fg); }
:root[data-ui="v2"] .anx-att-list { margin: 10px 0 0; padding: 0; list-style: none; }
:root[data-ui="v2"] .anx-att-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 15px; }
:root[data-ui="v2"] .anx-att-row:hover { background: var(--surface-raised); }
:root[data-ui="v2"] .anx-att-row:hover .anx-att-l { color: var(--brand-text); }
:root[data-ui="v2"] .anx-att-l { flex: 1; display: flex; flex-direction: column; }
:root[data-ui="v2"] .anx-att-sub { font-size: 12.5px; color: var(--text-secondary); }
:root[data-ui="v2"] .anx-att-n { flex: none; min-width: 34px; padding: 3px 8px; border-radius: 6px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
:root[data-ui="v2"] .anx-att-n.tone-bad { background: var(--sla-breached-bg); color: var(--sla-breached-fg); }
:root[data-ui="v2"] .anx-att-n.tone-warn { background: var(--sla-warning-bg); color: var(--sla-warning-fg); }
:root[data-ui="v2"] .anx-att-n.tone-info { background: var(--info-bg); color: var(--info-fg); }
:root[data-ui="v2"] .anx-att-n.tone-quiet { background: var(--surface-sunken); color: var(--text-secondary); }
:root[data-ui="v2"] .anx-kb-line { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-secondary); }
:root[data-ui="v2"] .anx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; font-size: 13px; color: var(--text-secondary); }
:root[data-ui="v2"] .anx-legend .lg { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-left: 8px; }
:root[data-ui="v2"] .anx-legend .lg:first-child { margin-left: 0; }
:root[data-ui="v2"] .anx-legend .lg-backlog, :root[data-ui="v2"] .anx-legend .lg-fr, :root[data-ui="v2"] .anx-legend .lg-res { height: 3px; width: 16px; }
:root[data-ui="v2"] .anx-legend .lg-target { height: 0; width: 16px; border-top: 2px dashed var(--text-tertiary); border-radius: 0; }
:root[data-ui="v2"] .lg-open, :root[data-ui="v2"] .anx-bar-open { background: var(--status-open-solid); fill: var(--status-open-solid); }
:root[data-ui="v2"] .lg-closed, :root[data-ui="v2"] .anx-bar-closed { background: var(--status-resolved-solid); fill: var(--status-resolved-solid); }
:root[data-ui="v2"] .lg-backlog { background: var(--priority-high-solid); }
:root[data-ui="v2"] .lg-fr { background: var(--brand); }
:root[data-ui="v2"] .lg-res { background: var(--status-open-solid); }
:root[data-ui="v2"] .anx-figure { margin: 0; }
:root[data-ui="v2"] .anx-chart { display: block; width: 100%; height: auto; }
:root[data-ui="v2"] .anx-chart-sm { max-height: 150px; }
:root[data-ui="v2"] .anx-grid { stroke: var(--border-subtle); stroke-width: 1; }
:root[data-ui="v2"] .anx-axis { fill: var(--text-tertiary); font-size: 12px; font-family: inherit; }
:root[data-ui="v2"] .anx-bar-link:hover rect, :root[data-ui="v2"] .anx-bar-link:focus rect { opacity: .8; }
:root[data-ui="v2"] .anx-bar-link:focus-visible { outline: 2px solid var(--focus-ring); }
:root[data-ui="v2"] .anx-line-backlog { fill: none; stroke: var(--priority-high-solid); stroke-width: 2.5; }
:root[data-ui="v2"] .anx-dot-backlog { fill: var(--surface-overlay); stroke: var(--priority-high-solid); stroke-width: 2; }
:root[data-ui="v2"] .anx-line-fr, :root[data-ui="v2"] .anx-line-res { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
:root[data-ui="v2"] .anx-line-fr { stroke: var(--brand); }
:root[data-ui="v2"] .anx-line-res { stroke: var(--status-open-solid); }
:root[data-ui="v2"] .anx-line-fr-dot { fill: var(--brand); }
:root[data-ui="v2"] .anx-line-res-dot { fill: var(--status-open-solid); }
:root[data-ui="v2"] .anx-end { font-size: 12.5px; font-weight: 700; font-family: inherit; fill: var(--text-primary); }
:root[data-ui="v2"] .anx-target { stroke: var(--text-tertiary); stroke-width: 1.5; stroke-dasharray: 6 5; }
:root[data-ui="v2"] .anx-foot { margin: 18px 0 8px; font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
:root[data-ui="v2"] .anx-foot .btn-link { font-weight: 700; color: var(--brand-text); }
:root[data-ui="v2"] .anx-note { margin: 10px 2px; font-size: 13px; color: var(--text-secondary); }

/* Tables */
:root[data-ui="v2"] .anx-table-card { padding: 6px 10px; overflow-x: auto; }
:root[data-ui="v2"] .anx-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
:root[data-ui="v2"] .anx-table th, :root[data-ui="v2"] .anx-table td { padding: 10px 8px; text-align: left; vertical-align: middle; color: var(--text-primary); }
:root[data-ui="v2"] .anx-table thead th { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; }
:root[data-ui="v2"] .anx-table tbody th { font-weight: 600; }
:root[data-ui="v2"] .anx-table tbody tr + tr > * { border-top: 1px solid var(--border-subtle); }
:root[data-ui="v2"] .anx-table tbody tr.is-on > * { background: var(--brand-tint); }
:root[data-ui="v2"] .anx-table .num { text-align: right; font-variant-numeric: tabular-nums; }
:root[data-ui="v2"] .anx-table a { color: var(--brand-text); text-decoration: none; font-weight: 600; }
:root[data-ui="v2"] .anx-table a:hover { text-decoration: underline; }
:root[data-ui="v2"] .anx-table a.btn-small { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
:root[data-ui="v2"] .anx-sort { padding: 0; border: 0; background: transparent; box-shadow: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
:root[data-ui="v2"] .anx-sort:hover, :root[data-ui="v2"] .anx-sort.is-on { color: var(--brand-text); transform: none; }
:root[data-ui="v2"] .anx-table .num .anx-sort { text-align: right; }
:root[data-ui="v2"] .anx-cell-v { display: block; font-weight: 600; }
:root[data-ui="v2"] .anx-cell-d { display: block; font-size: 12px; font-weight: 600; }
:root[data-ui="v2"] .anx-agent { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; box-shadow: none; font: inherit; font-weight: 600; color: var(--text-primary); cursor: pointer; }
:root[data-ui="v2"] .anx-agent:hover { color: var(--brand-text); transform: none; }
:root[data-ui="v2"] .anx-out { padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--status-hold-bg); color: var(--status-hold-fg); }
:root[data-ui="v2"] .anx-time { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
:root[data-ui="v2"] .anx-time-bar { display: inline-block; width: 50px; height: 6px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
:root[data-ui="v2"] .anx-time-bar i { display: block; height: 100%; border-radius: 999px; }
:root[data-ui="v2"] .anx-time-bar i.is-good, :root[data-ui="v2"] .anx-dist i.is-good { background: var(--sla-ontrack-fg); }
:root[data-ui="v2"] .anx-time-bar i.is-warn { background: var(--sla-warning-fg); }
:root[data-ui="v2"] .anx-time-bar i.is-bad, :root[data-ui="v2"] .anx-dist i.is-bad { background: var(--sla-breached-fg); }
:root[data-ui="v2"] .anx-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-sunken); color: var(--text-secondary); }
:root[data-ui="v2"] .anx-tag.is-bad { background: var(--sla-breached-bg); color: var(--sla-breached-fg); }
:root[data-ui="v2"] .anx-tag.is-warn { background: var(--sla-warning-bg); color: var(--sla-warning-fg); }
:root[data-ui="v2"] .anx-over { color: var(--sla-breached-fg); font-weight: 700; }
:root[data-ui="v2"] .anx-trend { margin-left: 4px; color: var(--text-secondary); }
:root[data-ui="v2"] .anx-chip { min-height: 32px; padding: 0 14px; border: var(--card-border); border-radius: 999px; background: var(--surface-raised); color: var(--text-secondary); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-raised-xs); }
:root[data-ui="v2"] .anx-chip.is-on { background: var(--brand-tint); color: var(--brand-tint-text); box-shadow: none; }
:root[data-ui="v2"] .anx-filters, :root[data-ui="v2"] .anx-sub-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* Team: agent panel */
:root[data-ui="v2"] .anx-team { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
:root[data-ui="v2"] .anx-team.has-panel { grid-template-columns: minmax(0, 1fr) 340px; }
:root[data-ui="v2"] .anx-agent-panel { position: sticky; top: 124px; max-height: calc(100vh - 140px); overflow: auto; }
:root[data-ui="v2"] .anx-ap-head { display: flex; align-items: center; gap: 12px; }
:root[data-ui="v2"] .anx-ap-head > div { flex: 1; min-width: 0; }
:root[data-ui="v2"] .anx-ap-head p { margin: 2px 0 0; font-size: 13px; }
:root[data-ui="v2"] .anx-ap-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 6px; }
:root[data-ui="v2"] .anx-ap-nums span { display: block; font-size: 12.5px; color: var(--text-secondary); }
:root[data-ui="v2"] .anx-ap-nums strong { font-size: 20px; color: var(--text-primary); }
:root[data-ui="v2"] .anx-ap-sec { margin: 14px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); }
:root[data-ui="v2"] .anx-ap-list { margin: 0; padding: 0; list-style: none; }
:root[data-ui="v2"] .anx-ap-list li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 14px; }
:root[data-ui="v2"] .anx-ap-list a { color: var(--text-primary); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="v2"] .anx-ap-list a:hover { color: var(--brand-text); }
:root[data-ui="v2"] .anx-id { font-weight: 700; color: var(--brand-text); font-family: ui-monospace, monospace; font-size: 13px; }
:root[data-ui="v2"] .anx-age { flex: none; font-weight: 600; color: var(--text-secondary); }
:root[data-ui="v2"] .anx-age.is-bad { color: var(--sla-breached-fg); }
:root[data-ui="v2"] .anx-quote { margin: 8px 0; padding: 10px 12px; border-left: 3px solid var(--sla-ontrack-fg); border-radius: var(--radius-md); background: var(--surface-raised); }
:root[data-ui="v2"] .anx-quote.is-bad { border-left-color: var(--sla-breached-fg); }
:root[data-ui="v2"] .anx-quote p { margin: 0 0 4px; color: var(--text-primary); }
:root[data-ui="v2"] .anx-quote footer { font-size: 12.5px; color: var(--text-secondary); }

/* Categories */
:root[data-ui="v2"] .anx-expand { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; box-shadow: none; font: inherit; font-weight: 600; color: var(--text-primary); cursor: pointer; }
:root[data-ui="v2"] .anx-expand:hover { color: var(--brand-text); transform: none; }
:root[data-ui="v2"] .anx-subrow th { padding-left: 32px; font-weight: 500; }
:root[data-ui="v2"] .anx-subrow > * { background: color-mix(in srgb, var(--surface-sunken) 45%, transparent); }
:root[data-ui="v2"] .anx-share { display: flex; align-items: center; gap: 8px; min-width: 150px; font-variant-numeric: tabular-nums; }
:root[data-ui="v2"] .anx-bar-track { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
:root[data-ui="v2"] .anx-bar-track i { display: block; height: 100%; border-radius: 999px; background: var(--status-open-solid); }

/* Satisfaction */
:root[data-ui="v2"] .anx-sat-top { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
:root[data-ui="v2"] .anx-dist { display: flex; height: 14px; margin: 12px 0 8px; border-radius: 999px; overflow: hidden; background: var(--surface-sunken); }
:root[data-ui="v2"] .anx-dist-l { display: flex; gap: 18px; margin: 0; font-size: 14px; color: var(--text-primary); }
:root[data-ui="v2"] .anx-neg { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-primary); }
:root[data-ui="v2"] .anx-comments { margin: 12px 0 0; padding: 0; list-style: none; }
:root[data-ui="v2"] .anx-comment { display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--border-subtle); }
:root[data-ui="v2"] .anx-comment > div { flex: 1; min-width: 0; }
:root[data-ui="v2"] .anx-comment p { margin: 0; color: var(--text-primary); }
:root[data-ui="v2"] .anx-c-meta { margin-top: 4px !important; font-size: 12.5px; color: var(--text-secondary) !important; }
:root[data-ui="v2"] .anx-c-meta a { color: var(--brand-text); font-weight: 700; }
:root[data-ui="v2"] .anx-rate { flex: none; font-size: 18px; }

/* How these are measured */
:root[data-ui="v2"] .anx-how { width: min(680px, calc(100vw - 32px)); max-width: none; }
:root[data-ui="v2"] .anx-how-list { margin: 0; max-height: 60vh; overflow: auto; }
:root[data-ui="v2"] .anx-how-list dt { margin-top: 10px; font-weight: 700; color: var(--text-primary); }
:root[data-ui="v2"] .anx-how-list dd { margin: 2px 0 0; color: var(--text-secondary); line-height: 1.5; }

/* Dashboard: "Showing tickets from Analytics · Clear" */
:root[data-ui="v2"] .url-filter-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 6px 12px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-tint-text); font-size: 13.5px; }
:root[data-ui="v2"] .url-filter-chip .btn-link { color: inherit; font-weight: 700; text-decoration: underline; }

@media (max-width: 1200px) {
  :root[data-ui="v2"] .anx-heads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-ui="v2"] .anx-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root[data-ui="v2"] .anx-over-grid, :root[data-ui="v2"] .anx-team.has-panel { grid-template-columns: minmax(0, 1fr); }
  :root[data-ui="v2"] .anx-agent-panel { position: static; max-height: none; }
}
@media (max-width: 700px) {
  :root[data-ui="v2"] .anx-bar { position: static; }
  :root[data-ui="v2"] .anx-heads, :root[data-ui="v2"] .anx-sat-top { grid-template-columns: 1fr; }
  :root[data-ui="v2"] .anx-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-ui="v2"] .anx-tabs { overflow-x: auto; }
  :root[data-ui="v2"] .anx-tab { flex: none; }
}
/* The top header scrolls away in v2 (it isn't sticky), so sticky bars pin to the window top. */
:root[data-ui="v2"] .anx-bar { top: 0; margin-top: 0; box-shadow: 0 6px 12px -10px color-mix(in srgb, var(--shadow-dark) 60%, transparent); }
:root[data-ui="v2"] .anx-agent-panel { top: 76px; max-height: calc(100vh - 92px); }
:root[data-ui="v2"] .kbx-rail, :root[data-ui="v2"] .kbx-reader { top: 16px; }
:root[data-ui="v2"] .kbx-reader { max-height: calc(100vh - 32px); }
:root[data-ui="v2"] .anx-line-fr-txt { fill: var(--brand-text); }
:root[data-ui="v2"] .anx-line-res-txt { fill: var(--status-open-fg); }