/* ===========================================================================
   Design tokens (C3.1 / C3.7) — Tailwind slate + blue scale, semantic mapping.
   - Light + dark themes share the same primitive scale; semantic vars switch.
   - Type / spacing / elevation / motion all use named tokens so a future
     refresh touches one place.
   =========================================================================== */
:root {
    /* Slate neutral (Tailwind exact) */
    --slate-50:  #f8fafc;  --slate-100: #f1f5f9;  --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;  --slate-400: #94a3b8;  --slate-500: #64748b;
    --slate-600: #475569;  --slate-700: #334155;  --slate-800: #1e293b;
    --slate-900: #0f172a;  --slate-950: #020617;

    /* Blue accent (Vercel-style) */
    --blue-400:  #60a5fa;  --blue-500:  #3b82f6;
    --blue-600:  #2563eb;  --blue-700:  #1d4ed8;

    /* Status hues — saturated for dark theme; light overrides per need. */
    --emerald-500: #10b981;   --emerald-tint:  rgba(16,185,129,.14);
    --amber-500:   #f59e0b;   --amber-tint:    rgba(245,158,11,.14);
    --red-500:     #ef4444;   --red-tint:      rgba(239,68,68,.14);
    --violet-500:  #8b5cf6;   --violet-tint:   rgba(139,92,246,.14);
    --cyan-500:    #06b6d4;   --cyan-tint:     rgba(6,182,212,.14);
    --orange-500:  #f97316;   --orange-tint:   rgba(249,115,22,.14);

    /* Type scale */
    --fs-caption: 11px;
    --fs-small:   12px;
    --fs-body:    14px;
    --fs-md:      15px;
    --fs-lg:      17px;
    --fs-h3:      18px;
    --fs-h2:      22px;
    --fs-h1:      28px;

    /* Spacing scale */
    --space-1:  4px;  --space-2:  8px;  --space-3:  12px;
    --space-4: 16px;  --space-5: 20px;  --space-6:  24px;
    --space-8: 32px;  --space-12: 48px;

    /* Motion — durations + easing curves */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
    --ease-emphasis: cubic-bezier(.2, .7, .3, 1);

    /* Geometry */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius:    10px;
    --radius-lg: 14px;
}

:root, [data-theme="dark"] {
    --bg:            var(--slate-950);
    --bg-elev:       var(--slate-900);
    --bg-card:       var(--slate-800);
    --bg-hover:      var(--slate-700);
    --border:        var(--slate-800);
    --border-strong: var(--slate-700);
    --text:          var(--slate-100);
    --text-dim:      var(--slate-400);
    --text-mute:     var(--slate-500);
    --accent:        var(--blue-500);
    --accent-strong: var(--blue-600);
    --accent-hover:  var(--blue-400);
    --accent-fg:     #ffffff;
    --green:         var(--emerald-500);
    --amber:         var(--amber-500);
    --red:           var(--red-500);
    --blue:          var(--blue-500);
    --purple:        var(--violet-500);
    --tint-amber:    var(--amber-tint);
    --tint-green:    var(--emerald-tint);
    --tint-purple:   var(--violet-tint);
    --tint-blue:     rgba(59,130,246,.14);
    --tint-accent:   rgba(59,130,246,.18);
    --tint-red:      var(--red-tint);
    --tint-mute:     rgba(100,116,139,.18);
    /* Archived-row background (Closed/Resolved when show_closed=1). Dark
       theme: very low-contrast white tint so the muted row reads as
       "faded" without glowing against the slate canvas. */
    --row-closed-bg: rgba(255,255,255,0.04);
    /* Three-tier elevation — card, raised, overlay. */
    --shadow-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 1px rgba(0,0,0,.18);
    --shadow-2: 0 4px 12px rgba(0,0,0,.34), 0 2px 4px rgba(0,0,0,.22);
    --shadow-3: 0 12px 36px rgba(0,0,0,.42), 0 4px 10px rgba(0,0,0,.28);
    --shadow:   var(--shadow-2);
}

[data-theme="light"] {
    --bg:            var(--slate-50);
    --bg-elev:       #ffffff;
    --bg-card:       #ffffff;
    --bg-hover:      var(--slate-100);
    --border:        var(--slate-200);
    --border-strong: var(--slate-300);
    --text:          var(--slate-900);
    --text-dim:      var(--slate-600);
    --text-mute:     var(--slate-500);   /* WCAG: 4.5:1 on slate-50 */
    --accent:        var(--blue-600);
    --accent-strong: var(--blue-700);
    --accent-hover:  var(--blue-500);
    --accent-fg:     #ffffff;
    --green:         #047857;
    --amber:         #b45309;
    --red:           #b91c1c;
    --blue:          var(--blue-600);
    --purple:        #6d28d9;
    --tint-amber:    #fef3c7;
    --tint-green:    #d1fae5;
    --tint-purple:   #ede9fe;
    --tint-blue:     #dbeafe;
    --tint-accent:   #dbeafe;
    --tint-red:      #fee2e2;
    --tint-mute:     var(--slate-100);
    /* Light theme: keep the original soft-grey panel surface so archived
       rows read as "filed away" without dimming the operator's contrast. */
    --row-closed-bg: #f4f6fa;
    --shadow-1: 0 1px 1px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.06);
    --shadow-2: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.05);
    --shadow-3: 0 12px 28px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.06);
    --shadow:   var(--shadow-2);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    /* C3.2: Inter for UI, system fallback if the CDN is unreachable. */
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", sans-serif;
    font-feature-settings: "cv11", "ss01", "ss03"; /* Inter alternates */
    font-size: var(--fs-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* Ticket IDs, timestamps, SLA countdowns get tabular numerics so the
   numbers line up vertically in dense lists. */
.mono, .num, code, kbd, samp, pre {
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    font-variant-numeric: tabular-nums;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; }

button, .btn {
    background: var(--accent);
    color: var(--accent-fg);
    border: none;
    border-radius: var(--radius-sm);
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s ease;
}
button:hover, .btn:hover { background: var(--accent-strong); }
button:disabled { background: var(--border); color: var(--text-mute); cursor: not-allowed; }

.btn-secondary {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border-strong);
}
.btn-secondary:hover { background: var(--bg-hover); }

.btn-ghost {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }

input[type="text"], input[type="number"], input[type="search"], textarea, select {
    background: var(--bg-elev);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 13px;
    font-family: inherit;
}
/* C3.3: keep visible focus for keyboard users — WCAG 2.4.7 needs a
   discernible ring on every focusable element. `:focus-visible` keeps it
   invisible for mouse-click interactions where the colour-change inside
   is already the cue. */
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--accent);
}
button:focus-visible, .btn:focus-visible, a:focus-visible,
.filter-pill:focus-visible,
.stats-tab:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}
/* Explicit focus rings for utility buttons that may render as non-<button>
   elements (e.g. <a class="btn-secondary">) or that sit on dense rows
   where the generic ring would be visually lost. Keep consistent with
   the global accent outline so keyboard nav reads uniformly. */
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.icon-btn:focus-visible,
.icon-btn-tiny:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}
/* Some elements (e.g. <a> inside the dashboard table) need the offset
   negative so the ring sits inside the row rather than overlapping the
   next row. */
tbody a:focus-visible {
    outline-offset: -2px;
}

/* Layout */
.app {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 100vh;
}
.sidebar {
    background: var(--bg-elev);
    border-right: 1px solid var(--border);
    padding: 20px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    /* Flex column so saved-views absorbs the middle space and env-pill
       lands at the bottom without absolute positioning (which used to
       cause saved-views to overlap the pills on short viewports). */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidebar nav { flex-shrink: 0; }
.sidebar h1 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-dim);
    margin: 0 0 4px 0;
}
.sidebar .product {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--text);
}
/* The wordmark is also a link to /dashboard. Reset link defaults so it
   reads as plain text; a tiny brightness bump signals hover/focus. */
.sidebar .product.logo-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    display: block;
}
.sidebar .product.logo-link:hover,
.sidebar .product.logo-link:focus-visible {
    filter: brightness(1.05);
    text-decoration: none;
}
.sidebar nav a {
    display: block;
    padding: 8px 10px;
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 500;
}
.sidebar nav a:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.sidebar nav a.active { background: var(--bg-card); color: var(--text); }

.sidebar .env-pill {
    margin-top: auto;       /* flex push to the bottom */
    flex-shrink: 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Round 6 (2026-06-05): operator reported the AI provider chip
       overflowed the sidebar viewport when the model name was long
       (e.g. "AI: claude-opus-4-7-20251015"). max-width:100% + nested
       overflow rules below keep every chip inside the column. */
    max-width: 100%;
    overflow: hidden;
}
/* Every pill inside the bottom strip caps at the parent column width,
   shrinks font + padding, and ellipsises when the label runs long. */
.sidebar .env-pill .pill {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    padding: 2px 8px;
    /* The dot lives inside the pill — `display:inline-flex` keeps it
       baseline-aligned with the ellipsised text. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sidebar .env-pill .pill .dot { flex-shrink: 0; }

/* Filter v6 (2026-06-05) — operator reported a "garip ok" (strange arrow)
   in the bottom-left of the sidebar. Root cause: leftover Firefox-native
   `<details>` disclosure triangle on any nested <details>/<summary> inside
   the sidebar (e.g. when a future component reuses a <details> here, or
   when an HTMX swap injects one mid-page). The webkit-marker rules
   scattered across the stylesheet (e.g. `.ai-drafts-summary::-webkit-
   details-marker { display: none; }`) only suppress the Chrome variant —
   Firefox uses `list-style` instead. This blanket rule on the sidebar
   subtree kills both, plus any inherited ::marker pseudo on <li>s or
   <summary>s that might creep in via inline styles. */
.sidebar details > summary,
.sidebar details > summary::-webkit-details-marker {
    list-style: none;
}
.sidebar details > summary::marker,
.sidebar details > summary::before {
    content: none !important;
    display: none !important;
}
.sidebar ::marker { content: none; }

.content {
    padding: 24px 32px;
    max-width: 1400px;
    /* Default grid item min-width is auto = intrinsic content width.
       Without overriding it, a wide table pushes the 1fr column wider
       than the viewport, which shifts the whole layout right. */
    min-width: 0;
}

/* Page header */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.page-header h2 { font-size: 22px; margin: 0; }
.page-header .crumb { color: var(--text-mute); font-size: 13px; margin-bottom: 4px; }

/* Stats row */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
/* Round 6 Bundle B (2026-06-05): stats strip cards use rem/clamp so the
   cards scale proportionally with the user's browser-zoom font size
   (Ctrl + / Ctrl -). `.stat-card` is an alias kept for downstream
   templates that prefer the more explicit class name; the smoke test
   in tests/test_round6_bundle_b_responsive_zoom.py pins both classes
   to a rem/clamp-shaped rule body. Border-radius stays in px on
   purpose (sharper visual baseline at high zoom). */
.stat,
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(0.625rem, 0.875rem, 1.125rem) clamp(0.75rem, 1rem, 1.25rem);
}
.stat .label,
.stat-card .label {
    color: var(--text-dim);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 0.375rem;
}
.stat .value,
.stat-card .value { font-size: clamp(1.25rem, 1.5rem, 1.875rem); font-weight: 700; }
.stat.warn .value { color: var(--amber); }
.stat.muted .value { color: var(--text-dim); }

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
}
.card h3 {
    margin: 0 0 12px 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Tables */
.table-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* Horizontal scroll on every viewport — the dashboard table has 8
       columns + an SLA ring widget, which overflows narrow laptop screens.
       overflow-x: auto stops clipping timestamps + SLA labels at the right
       edge. */
    overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 14px; text-align: left; }

/* Dashboard ticket table — narrow the wide-prone columns so all 8
   fit on a 1280-wide laptop without horizontal scrollbar. */
#dashboard-table th,
#dashboard-table td { padding: 8px 10px; }
#dashboard-table td.requester {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-small);
}
#dashboard-table td.subject {
    max-width: 360px;
    overflow: visible;
    padding-right: 6px;
}
#dashboard-table td.subject .subject-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
#dashboard-table td.subject .subject-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
th {
    background: var(--bg-elev);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-dim);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}
tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; }
tbody tr:hover { background: var(--bg-hover); }
tbody tr:last-child { border-bottom: none; }
/* Round-4 visual: closed/resolved rows are muted (lower opacity + slightly
   different surface) when show_closed=1 surfaces them, so the operator can
   see at a glance that the archive view is on. Full opacity on hover. */
tbody tr.row-closed-light { opacity: 0.55; background: var(--row-closed-bg); }
tbody tr.row-closed-light:hover { opacity: 0.95; }
td { font-size: 13px; }
td.ticket-id { font-family: ui-monospace, "SF Mono", monospace; color: var(--text-dim); }
td.subject { max-width: 380px; }
td.requester { color: var(--text-dim); font-size: 12px; }

/* Pills / badges */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.4;
}
.pill .dot {
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
/* Ticket-state pills. `.pending`, `.acked`, `.responded`, `.skipped` are
   retained as aliases for backward compat:
     • `.skipped` is reused for tag chips on ticket_detail.
     • `.pending`/`.acked`/`.responded` may appear in stale cached HTML
       across a deploy or in any user-provided snippet.                  */
.pill.unassigned,
.pill.pending           { background: var(--tint-amber);  color: var(--amber); }
.pill.ongoing,
.pill.acked             { background: var(--tint-green);  color: var(--green); }
.pill.vendor            { background: var(--tint-purple); color: var(--purple); }
.pill.billing           { background: var(--tint-amber);  color: var(--amber); }
/* Filter v5: vendor CC routing chip — amber "Forward to client" hint
   on vendor rows where the operator is alone on To/Cc. Mirrors the
   tone of the billing CC missing chip so the operator reads it as a
   routing prompt, not a hard error. */
.vendor-route-chip.escalate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--tint-amber);
    color: var(--amber);
}
.vendor-route-chip.escalate .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber);
}
.pill.responded         { background: var(--tint-mute);   color: var(--text-dim); }
.pill.skipped           { background: var(--tint-mute);   color: var(--text-dim); }
/* Round 9 — decorative dashboard chips removed: `.pill.substate-acked`,
   `.pill.substate-responded`, `.pill.last-customer`, `.pill.last-revolgy`.
   Last-responder chips (plan 07) were superseded by the "Last responder:
   …" textual label on the row, then dropped altogether in Round 6. */

/* Vendor confirm strip — plan 03. Inline next to the Vendor pill on
   dashboard rows. Two small buttons (close + dismiss) reuse the existing
   send-undo toast via showUndoToast on the confirm path.                 */
.vendor-confirm-strip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    font-size: 11px;
}
.btn-confirm-tiny, .btn-dismiss-tiny {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    font-size: 10px;
    cursor: pointer;
    line-height: 1.4;
}
.btn-confirm-tiny {
    background: var(--tint-amber);
    color: var(--amber);
    border-color: var(--tint-amber);
}
.btn-confirm-tiny:hover { filter: brightness(1.15); }
.btn-dismiss-tiny:hover { background: var(--bg-elev); }
.vendor-confirm-pending {
    font-size: 11px;
    margin-left: 6px;
    font-style: italic;
}

/* Plan 17: billing CC monitor chip + Reassign anchor. Green pill when one
   of {billing@, invoices@, biling@}@revolgy.com is on the To/Cc; amber when
   none of them are. The reassign anchor only appears in the amber path —
   green needs no nudge. Uses C3.1 tokens; no new palette. */
.billing-cc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    margin-left: 6px;
}
.billing-cc-chip.ok   { background: var(--tint-green); color: var(--green); }
.billing-cc-chip.warn { background: var(--tint-amber); color: var(--amber); }
.billing-cc-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.btn-reassign-tiny {
    font-size: 11px;
    padding: 2px 6px;
    margin-left: 4px;
    border: 1px solid var(--amber);
    color: var(--amber);
    border-radius: var(--radius-sm);
    text-decoration: none;
}
.btn-reassign-tiny:hover { background: var(--tint-amber); }

/* Fix #26: HubSpot inbound lead Reassign-to-Sales button. Same shape and
   sizing as `.btn-reassign-tiny` (Plan 17) so the row stays visually
   uniform, but blue rather than amber so the operator can tell at a glance
   that this is a Sales route, not a Billing route. */
.btn-reassign-sales-tiny {
    font-size: 11px;
    padding: 2px 6px;
    margin-left: 4px;
    border: 1px solid var(--blue);
    color: var(--blue);
    border-radius: var(--radius-sm);
    text-decoration: none;
}
.btn-reassign-sales-tiny:hover { background: var(--tint-blue); }

/* Plan 11: dashboard state-cell single-line guarantee + compact pills.
   The cell hosts the ticket_state pill plus optional dots/pills (urgent,
   risky, lang) and the vendor confirm strip. `white-space: nowrap` keeps
   it on one line at >=1100px viewports; future chip additions overflow
   horizontally inside the column instead of silently wrapping. */
#dashboard-table td.state-cell {
    white-space: nowrap;
}
/* Vendor confirm strip — plan 11 hover-reveal (mirrors .row-icons pattern).
   Strip starts faded so the row isn't visually screaming; on row hover or
   keyboard focus it lifts to full opacity. flex-wrap/no-wrap forces the
   icon-only buttons to a single line. */
.vendor-confirm-strip {
    opacity: 0.55;
    transition: opacity .12s;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 3px;
    margin-left: 4px;
}
tbody tr:hover .vendor-confirm-strip,
tbody tr:focus-within .vendor-confirm-strip {
    opacity: 1;
}

/* Notes card (plan 09). Lives between the detail grid and the
   description card; pure block flow, no grid participation.           */
.notes-list { list-style: none; padding: 0; margin: 0 0 12px 0; }
.note-row {
    border-left: 2px solid var(--border);
    padding: 6px 10px;
    margin-bottom: 8px;
}
.note-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-dim);
}
.note-body {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    font-size: 13px;
    margin: 4px 0 0 0;
}
.note-actions { display: flex; gap: 8px; margin-top: 8px; }
.note-footer { margin-top: 4px; font-size: 11px; }
.note-flash {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    font-size: 12px;
}
.note-flash-empty,
.note-flash-guardrail_block { background: var(--tint-amber); color: var(--amber); }
.note-flash-push_failed     { background: var(--tint-red);   color: var(--red); }
#note-form textarea {
    width: 100%;
    resize: vertical;
    font-family: inherit;
    font-size: 13px;
}

/* Shared AI side panel — plan 04 chrome + plan 05 research region.
   Plan 15: floating bottom-right widget with 3 states (closed / minimised
   / expanded). Closed-class drives `display:none`; the old `[hidden]`
   attribute-orphan rule was deleted because the new state model never
   sets the attribute, and leaving the orphan would silently re-hide the
   panel if any future caller set `hidden`. */
.ai-panel {
    position: fixed;
    right: 16px;
    bottom: 16px;
    /* AI panel rework: 380px → 480px → 560px (Round 8) so the chat
       surface breathes and the model dropdown row doesn't truncate; the
       viewport guards below keep it inside small screens. */
    width: 560px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    /* Round 8: operator can drag the bottom-right corner (which visually
       appears as the top-left of the panel since the panel is anchored
       bottom-right) to resize. Min sizes keep the chrome usable. */
    resize: both;
    min-width: 380px;
    min-height: 360px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    z-index: 50;
    padding: 12px 14px;
}
.ai-panel.ai-panel-closed { display: none; }
.ai-panel.ai-panel-minimised {
    max-height: none;
    height: auto;
    padding: 6px 10px;
    /* Round 8: minimised state isn't resizable — only the docked bar is
       visible so the resize handle would be misleading. */
    resize: none;
}
.ai-panel.ai-panel-minimised .research-card,
.ai-panel.ai-panel-minimised .chat-region { display: none; }
/* AI panel rework: expanded panel is now 72vh-tall (Round 8 bump),
   internally scrolling its chat history. The panel itself drops vertical
   overflow so its header/composer stay pinned while only `.chat-messages`
   scrolls. `resize: both` survives so the operator can override the
   default height. */
.ai-panel.ai-panel-expanded {
    display: flex;
    flex-direction: column;
    height: 72vh;
    overflow-y: hidden;
    resize: both;
}
/* Round 8: research card gets its own scroll region so a long research
   payload doesn't push the chat composer off-screen. The max-height is
   computed relative to the panel's 72vh so the card stays inside the
   visible chrome. */
.ai-panel.ai-panel-expanded .research-card {
    max-height: calc(72vh - 200px);
    overflow-y: auto;
}
.ai-panel.ai-panel-expanded .chat-region { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ai-panel.ai-panel-expanded .chat-messages { flex: 1; max-height: none; min-height: 0; }
.ai-panel-minimised .ai-panel-head { cursor: pointer; margin-bottom: 0; }
.ai-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
}
.ai-panel-close,
.ai-panel-min-btn {
    background: transparent;
    border: 0;
    color: var(--text-dim);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.ai-panel-turn-count { color: var(--text-dim); }

/* Plan 15 launcher — visible only when the panel is in the closed state
   (chat.js toggles the `hidden` attribute on it). Sits at the same
   bottom-right anchor as the panel so it visually replaces it. Round 5:
   scaled 1.5x from the prior 52px pill to ~78px tall so the entry-point
   reads as a primary affordance from across the dashboard. Icon + label
   were scaled proportionally; colors + shadow + anchor unchanged. */
.ai-launcher {
    position: fixed;
    right: 16px;
    bottom: 16px;
    min-height: 78px;
    padding: 0 27px 0 21px;
    border-radius: 39px;
    background: var(--blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: 0.02em;
    border: 0;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    z-index: 50;
    transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}
.ai-launcher[hidden] { display: none; }
.ai-launcher:hover {
    filter: brightness(1.10);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.40);
}
.ai-launcher:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.ai-launcher-icon { flex-shrink: 0; }
.ai-launcher-label { white-space: nowrap; }

/* Narrow viewport guard: keep the expanded panel inside the viewport on
   small screens (defence-in-depth — operator is on desktop). */
@media (max-width: 540px) {
    .ai-panel.ai-panel-expanded {
        right: 8px;
        left: 8px;
        width: auto;
    }
}
.research-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-bottom: 10px;
}
.research-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.research-meta { font-size: 11px; margin-bottom: 6px; }
.research-section { margin-top: 8px; }
.research-section h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-dim);
    margin: 0 0 4px 0;
}
.research-reply {
    white-space: pre-wrap;
    font-family: inherit;
    background: var(--bg);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 13px;
    margin: 0;
}
.research-sources { list-style: none; padding: 0; margin: 0; }
.research-sources li {
    font-size: 12px;
    padding: 2px 0;
    border-bottom: 1px dashed var(--border);
}
.research-sources li:last-child { border-bottom: 0; }
.chat-region { padding-top: 6px; border-top: 1px dashed var(--border); }
.chat-region-head { display: flex; align-items: center; margin-bottom: 6px; }
/* AI panel rework: model dropdown row under the chat header. Compact so
   it doesn't compete with the chat itself; the toast slides in next to
   the select after a successful change. */
.chat-model-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.chat-model-select {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    padding: 4px 6px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.chat-model-toast {
    font-size: 11px;
    color: var(--blue);
    background: var(--tint-blue);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: opacity 160ms ease;
}
.chat-model-toast[hidden] { display: none; }
.chat-messages {
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    margin-bottom: 6px;
}
.chat-bubble {
    padding: 4px 8px;
    margin-bottom: 4px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.chat-bubble-user      { background: var(--tint-blue);  color: var(--blue); }
.chat-bubble-assistant { background: var(--tint-mute);  color: var(--text); }
.chat-cost { font-size: 11px; margin: 2px 0 6px 0; }
.chat-composer { display: flex; flex-direction: column; gap: 6px; }
.chat-input {
    width: 100%;
    resize: vertical;
    font-family: inherit;
    font-size: 13px;
}
.chat-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.icon-btn.ai-btn {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.04em;
    background: var(--tint-blue);
    color: var(--blue);
    border-color: transparent;
    padding: 1px 6px;
}
.icon-btn.ai-btn:hover { filter: brightness(1.15); }
.pill.aws       { background: var(--tint-amber);  color: var(--amber); }
.pill.gcp       { background: var(--tint-blue);   color: var(--blue); }
/* Round 6 (2026-06-05) — the dashboard GROUP column was removed.
   The associated `#dashboard-table td.group-cell` and `.pill.group-pill`
   rules went with it. */
.pill.ai-mock      { background: var(--tint-amber);  color: var(--amber); }
.pill.ai-anthropic { background: var(--tint-accent); color: var(--accent); }
.pill.ai-openai    { background: var(--tint-blue);   color: var(--blue); }
.pill.live      { background: var(--tint-red);    color: var(--red); }
.pill.dryrun    { background: var(--tint-green);  color: var(--green); }
.pill.sla-red   { background: var(--tint-red);    color: var(--red); }
.pill.sla-amber { background: var(--tint-amber);  color: var(--amber); }
.pill.sla-green { background: var(--tint-green);  color: var(--green); }
.pill.sla-none  { background: var(--tint-mute);   color: var(--text-mute); }
.pill.urgent    { background: var(--tint-red);    color: var(--red); }
.pill.risky     { background: var(--tint-amber);  color: var(--amber); }
.pill.lang-cs   { background: var(--tint-blue);   color: var(--blue); }
.pill.lang-tr   { background: var(--tint-purple); color: var(--purple); }

/* Guide + Reference doc pages.
   Round 7 trimmed the sticky-TOC sidebar — `.doc-layout`, `.doc-toc`,
   `.guide-layout`, `.guide-toc` (and the related media-query overrides)
   were removed along with the markup. The article now uses
   `.doc-content-full` and lays out as a single column. */
.doc-content { min-width: 0; }
.doc-content pre,
.doc-content .ascii-diagram { overflow-x: auto; white-space: pre; }
.doc-content table { width: 100%; }
/* doc-content-full: the article occupies the whole content width when
   no TOC sidebar is rendered (guide/reference were trimmed in v2). */
.doc-content-full { max-width: 960px; }
.doc-content details { margin-bottom: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 16px; }
.doc-content details summary { cursor: pointer; padding: 4px 0; list-style: none; }
.doc-content details summary::-webkit-details-marker { display: none; }
.doc-content details summary h3 { margin: 0; font-size: 16px; }
.doc-content h4 { margin: 10px 0 4px 0; }
.doc-content p, .doc-content ul, .doc-content ol { font-size: 14px; line-height: 1.5; }
.doc-content table { font-size: 12px; }
.doc-content table th { background: var(--bg-elev); padding: 6px 8px; }
.doc-content table td { padding: 5px 8px; vertical-align: top; border-bottom: 1px solid var(--border); }
/* /guide layout fix (#152): long inline tokens (JWTs, AWS keys, env-var
   names) and dense table cells were pushing the .doc-content-full
   column past its 960px max, which in narrow viewports clipped the
   article and made the page look truncated. `overflow-wrap: anywhere`
   lets the browser break inside opaque strings; `word-break: break-word`
   keeps multi-word cells wrapping rather than forcing horizontal scroll.
   The table itself also gets a horizontal scroll fallback so a future
   wider row can never push the article off-screen. */
.doc-content code,
.doc-content td,
.doc-content th { overflow-wrap: anywhere; word-break: break-word; }
.doc-content pre { overflow-wrap: anywhere; }
.doc-content pre code { white-space: pre-wrap; }
.doc-content table { display: block; max-width: 100%; overflow-x: auto; }
/* Guide v3: tier-cards definition list (#162). Replaces the wide
   Support tier matrix table that was unreadable on narrow screens. */
.tier-cards { margin: 12px 0 0; }
.tier-cards dt { font-weight: 600; font-size: 14px; margin: 14px 0 4px; color: var(--text); }
.tier-cards dd { margin: 0 0 8px; padding: 8px 12px; background: var(--bg-elev); border-left: 3px solid var(--accent); border-radius: 4px; font-size: 13px; }
.tier-cards dd p { margin: 4px 0; }
.tier-cards dd p:first-child { margin-top: 0; }
.tier-cards dd p:last-child { margin-bottom: 0; }

/* Stats page */
.stats-card { margin-bottom: 14px; }
/* Round 9 — bar-row / donut / stat-big / stat-mini / stats-row / kv-list
   removed alongside the response-time histogram + provider donut. The
   stats page renders OverviewBundle counters using `.stats-card-head`
   and inline numbers; no other consumer remained. */

/* ── Stats page — Round 9 single-scroll layout ───────────────────────── */
.stats-section { margin-bottom: var(--space-4); }
.stats-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.stats-card-head h3 { margin: 0; }
.stats-source {
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 400;
}
.stats-source code {
    font-family: ui-monospace, "JetBrains Mono", monospace;
    background: var(--bg-elev);
    padding: 1px 4px;
    border-radius: 3px;
}
.stats-grid {
    display: grid;
    gap: var(--space-4);
}
.stats-grid-overview {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.stat-tile {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}
.stat-tile-value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
}
.stat-tile-label {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-dim);
}
.tabnums { font-variant-numeric: tabular-nums; }
.stats-status {
    margin: var(--space-3) 0 0 0;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    display: inline-block;
}
.stats-status-ok {
    background: color-mix(in srgb, var(--green) 18%, transparent);
    color: var(--green);
}
.stats-status-warn {
    background: color-mix(in srgb, var(--amber) 18%, transparent);
    color: var(--amber);
}

/* AI cost — simplified card */
.ai-headline {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-3) 0 var(--space-2) 0;
}
.ai-headline-label {
    font-size: 13px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ai-headline-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--accent);
}
.ai-subrows {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-3) 0;
    border-top: 1px solid var(--border);
}
.ai-subrows li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.ai-subrows li > span:first-child { color: var(--text-dim); }
.ai-model-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: var(--space-2);
}
.ai-model-table th,
.ai-model-table td {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
}
.ai-model-table th {
    font-weight: 500;
    color: var(--text-dim);
    background: var(--bg-elev);
}
.ai-model-table .num { text-align: right; }
.ai-empty { font-size: 12px; margin: var(--space-2) 0 0 0; }

/* Bot activity table */
.bot-activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.bot-activity-table th,
.bot-activity-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.bot-activity-table th {
    font-weight: 500;
    color: var(--text-dim);
    background: var(--bg-elev);
    font-size: 12px;
}
.bot-activity-table .num { text-align: right; }

/* Activity log collapsible */
.stats-details {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    padding: var(--space-2) var(--space-3);
}
.stats-details summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: 6px 0;
}
.stats-details summary::-webkit-details-marker { display: none; }
.stats-details summary::before {
    content: "▸";
    color: var(--text-dim);
    margin-right: 4px;
    transition: transform .15s;
    display: inline-block;
}
.stats-details[open] summary::before { transform: rotate(90deg); }
.stats-details-title { font-weight: 600; }
.stats-details-hint { font-size: 11px; color: var(--text-dim); }
.audit-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-3);
    font-size: 12px;
}
.audit-table th,
.audit-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.audit-table th {
    background: var(--bg-elev);
    color: var(--text-dim);
    font-weight: 500;
}
.audit-detail {
    color: var(--text-dim);
    word-break: break-word;
    font-size: 11px;
}
.audit-footer {
    margin: var(--space-2) 0 0 0;
    font-size: 12px;
}

/* Engineering footer — muted, slim cards */
.stats-eng-heading {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin: var(--space-4) 0 var(--space-2) 0;
}
.stats-eng-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}
.stats-eng-card {
    min-height: 70px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--text-dim);
    text-decoration: none;
    background: var(--bg-elev);
    transition: border-color .15s;
}
.stats-eng-card:hover {
    border-color: var(--accent);
    color: var(--text);
}
.stats-eng-card-title {
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 13px;
    color: var(--text);
}
.stats-eng-card-body {
    margin-top: 2px;
    font-size: 11px;
}

/* Settings page */
.test-mode-banner {
    border-width: 2px;
    border-style: solid;
    margin-bottom: 18px;
}
.test-mode-banner.test  { border-color: var(--green); background: var(--tint-green); }
.test-mode-banner.live  { border-color: var(--red); background: var(--tint-red); }
.test-mode-banner h3 { margin: 0 0 6px 0; }
.test-mode-header { margin-bottom: 8px; }
.test-mode-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-live { background: var(--red); color: #fff; }
.btn-live:hover { background: var(--red); filter: brightness(0.9); }

.settings-card { margin-bottom: 14px; }
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.settings-form label {
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 480px;
}
.settings-form label.toggle {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    max-width: none;
}
.settings-form input[type="number"] { width: 100px; }
.settings-form textarea {
    width: 100%;
    font-family: ui-monospace, monospace;
    font-size: 12px;
}
.settings-form button { align-self: flex-start; margin-top: 6px; }
.source-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px 12px;
    margin: 0 0 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
.source-fieldset > legend {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 0 6px;
}
.source-fieldset input[type="text"] { width: 160px; }

/* AI advisor card (TASK-85) */
.advisor-card {
    border-left: 3px solid var(--accent);
    margin-bottom: 14px;
}
.advisor-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px 0;
}
.advisor-rationale {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}
.advisor-action {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
}
.advisor-action-reply              { background: var(--tint-green);  color: var(--green);  }
.advisor-action-troubleshoot       { background: var(--tint-green);  color: var(--green);  }
.advisor-action-request_more_info  { background: var(--tint-amber);  color: var(--amber);  }
.advisor-action-wait               { background: var(--tint-mute);   color: var(--text-dim); }
.advisor-action-escalate           { background: var(--tint-red);    color: var(--red);    }
.advisor-action-close              { background: var(--tint-blue);   color: var(--blue);   }
.advisor-confidence {
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
}

/* Plan 12: advisor banner (full-width, compact, top-of-page) */
.advisor-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    margin-bottom: 14px;
    min-height: 56px;
    border-left-width: 4px;
}
.advisor-banner h3 { margin: 0; font-size: 14px; gap: 8px; }
.advisor-banner .advisor-rationale {
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.advisor-banner.advisor-reply             { border-left-color: var(--green); }
.advisor-banner.advisor-troubleshoot      { border-left-color: var(--green); }
.advisor-banner.advisor-request_more_info { border-left-color: var(--amber); }
.advisor-banner.advisor-wait              { border-left-color: var(--text-dim); }
.advisor-banner.advisor-escalate          { border-left-color: var(--red); }
.advisor-banner.advisor-close             { border-left-color: var(--blue); }

/* Plan 12: collapsed AI drafts (right column, default-closed details) */
.ai-drafts-details {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    background: var(--bg-elev);
}
.ai-drafts-details[open] { padding-bottom: 12px; }
.ai-drafts-summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    padding: 4px 0;
    user-select: none;
}
.ai-drafts-summary::-webkit-details-marker { display: none; }
.ai-drafts-summary::before { content: "\25B8  "; }
.ai-drafts-details[open] .ai-drafts-summary::before { content: "\25BE  "; }

/* Plan 12: demoted metadata strip (bottom of page, compact horizontal) */
.meta-chip-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    padding: 10px 12px;
    margin-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
}
.meta-chip { white-space: nowrap; }
.meta-chip-key { color: var(--text-mute); margin-right: 4px; }

.env-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    margin: 0;
    font-size: 12px;
}
.env-grid dt { color: var(--text-dim); }
.env-grid dd { margin: 0; word-break: break-all; }

/* Sidebar search */
.sidebar-search-wrap {
    position: relative;
    margin: 12px 0;
}
.sidebar-search-wrap input {
    width: 100%;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 12px;
}
.search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    max-height: 320px;
    overflow: auto;
    margin-top: 4px;
}
.search-dropdown.open { display: block; }
.search-hit {
    display: block;
    padding: 6px 10px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.search-hit:hover { background: var(--bg-hover); color: var(--accent); }
.search-hit-id { font-size: 11px; color: var(--text-dim); }
.search-hit-subject { font-size: 12px; }
.search-empty {
    padding: 10px;
    font-size: 12px;
    color: var(--text-dim);
}
.search-meta {
    padding: 6px 10px;
    font-size: 11px;
    color: var(--text-mute);
    border-top: 1px solid var(--border);
    background: var(--bg-elev);
}
/* Plan 19: distinguish Freshdesk-fallback hits from local-cache hits. */
.search-hit-freshdesk .search-hit-id::before { content: "📡 "; opacity: 0.7; }
.search-empty-hint {
    padding: 4px 10px 8px;
    font-size: 11px;
    color: var(--text-dim);
}

/* Similar tickets row */
.similar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    align-items: center;
    font-size: 12px;
}
.similar-label {
    color: var(--text-dim);
    font-weight: 600;
}
.similar-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    color: var(--text);
}
.similar-chip:hover { background: var(--bg-hover); color: var(--accent); }

/* Filter toolbar (TASK-74)
   Round 6 Bundle B (2026-06-05): gaps and pill paddings use rem/clamp
   so the toolbar scales proportionally with browser zoom. Border-radius
   stays in px so the pill shape remains crisp at extreme zoom. */
.filter-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(0.5rem, 0.625rem, 0.875rem) clamp(0.625rem, 0.875rem, 1.125rem);
    margin: -0.75rem -0.25rem 1.125rem -0.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}
.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}
.filter-label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    margin-right: 4px;
}
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: clamp(0.1875rem, 0.25rem, 0.375rem) clamp(0.625rem, 0.75rem, 1rem);
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text);
    font-size: clamp(0.6875rem, 0.75rem, 0.875rem);
    font-weight: 500;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.filter-pill:hover { background: var(--bg-hover); text-decoration: none; }
.filter-pill.active {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
}
.filter-pill.active:hover { background: var(--accent-strong); color: var(--accent-fg); }
/* Filter v5 (operator decision 2026-06-04): zero-count pills stay visible
   on the source/status axes — both rows render their full pill set
   unconditionally so the toolbar shape doesn't shift with the data. The
   prior round-4 `display: none` rule is reverted; zero-count pills are
   visually muted via opacity instead. */
.filter-pill.zero { opacity: 0.5; }
.filter-count {
    font-family: ui-monospace, monospace;
    font-size: 0.6875rem;
    background: rgba(255,255,255,.12);
    border-radius: 6px;
    padding: 0 0.3125rem;
}
.filter-pill.active .filter-count { background: rgba(0,0,0,.15); }
.filter-lookback label {
    font-size: 0.6875rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.filter-lookback select {
    padding: clamp(0.125rem, 0.1875rem, 0.3125rem) clamp(0.375rem, 0.5rem, 0.75rem);
    font-size: 0.75rem;
    min-height: 1.75rem;
}
/* Filter v5 (operator decision 2026-06-04): contextual "Closed" sub-toggle.
   Sits below the three filter rows as a small right-aligned link — NOT a
   pill. Muted color when inactive (show_closed=0), accent color when
   active (show_closed=1). Visually subordinate to the pill rows so it
   reads as a contextual sub-control on the active Source+Status combo. */
.filter-subtoggle {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}
.closed-toggle {
    font-size: 11px;
    color: var(--text-dim);
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color .12s, background .12s;
}
.closed-toggle:hover {
    color: var(--text);
    background: var(--bg-hover);
    text-decoration: underline;
}
.closed-toggle.is-active {
    color: var(--accent);
    font-weight: 500;
}
.closed-toggle.is-active:hover { color: var(--accent-strong); }

/* Row icons (Freshdesk link + copy) */
.row-icons {
    display: inline-flex;
    gap: 4px;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 0.15s ease;
}
tbody tr:hover .row-icons,
tbody tr:focus-within .row-icons { opacity: 1; }
.icon-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }

/* Toast */
.toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    color: var(--text);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    font-size: 13px;
    z-index: 10000;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.toast-out { opacity: 0; transform: translateY(8px); }

/* Recipients metadata chip */
.recipients-chip {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 8px;
}
.recipients-chip summary {
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
}
.recipients-chip summary:hover { color: var(--text); }
.recipients-list {
    margin: 6px 0 0 14px;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2px 12px;
    font-size: 12px;
}
.recipients-list dt { font-weight: 600; color: var(--text-dim); }
.recipients-list dd { margin: 0; word-break: break-all; }

/* Noise-filter "Show raw" toggle */
details.raw-toggle {
    margin-top: 6px;
    font-size: 12px;
}
details.raw-toggle summary {
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
}
details.raw-toggle summary:hover { color: var(--text); }
details.raw-toggle pre.raw-body {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 10px;
    margin-top: 6px;
    max-height: 280px;
    overflow: auto;
    white-space: pre-wrap;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
}

/* Attachments */
.attachments-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.attach-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    text-decoration: none;
    color: var(--text);
}
.attach-link:hover { background: var(--bg-hover); }
.attach-thumb {
    border: 1px solid var(--border);
    background: var(--bg-elev);
    padding: 4px;
    border-radius: var(--radius-sm);
    cursor: zoom-in;
    overflow: hidden;
    max-width: 130px;
    max-height: 110px;
}
.attach-thumb img {
    display: block;
    max-width: 120px;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.attach-thumb:hover { border-color: var(--accent); }
.desc-html img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

/* Lightbox modal */
.lightbox {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    max-width: min(95vw, 1400px);
    max-height: 95vh;
    width: auto;
}
.lightbox::backdrop { background: rgba(0,0,0,.72); }
.lightbox-form {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.lightbox img {
    max-width: 100%;
    max-height: calc(95vh - 50px);
    height: auto;
    width: auto;
    display: block;
    margin: 0 auto;
    background: var(--bg);
}
.lightbox-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-dim);
}
.lightbox-actions { display: flex; gap: 10px; }
.lightbox-actions a, .lightbox-actions button {
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border-strong);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
}

/* Guardrails findings panel */
.guardrail-panel {
    margin: 6px 0;
}
.guardrail-panel:empty { display: none; }
.guardrail-finding {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 4px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
}
.guardrail-finding.block {
    background: var(--tint-red);
    color: var(--red);
    border-left: 3px solid var(--red);
}
.guardrail-finding.warn {
    background: var(--tint-amber);
    color: var(--amber);
    border-left: 3px solid var(--amber);
}
.guardrail-finding input[type="checkbox"] {
    margin: 0;
}

/* Diff confirm modal */
.diff-modal {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 22px;
    max-width: 800px;
    width: 90%;
    box-shadow: var(--shadow);
}
.diff-modal::backdrop {
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
}
.diff-summary {
    display: flex;
    gap: 10px;
    font-size: 12px;
    margin-bottom: 10px;
}
.diff-stat {
    padding: 2px 8px;
    border-radius: 999px;
    font-family: ui-monospace, monospace;
}
.diff-stat.ins { background: var(--tint-green); color: var(--green); }
.diff-stat.del { background: var(--tint-red); color: var(--red); }
.diff-stat.eq  { background: var(--tint-mute); color: var(--text-dim); }
.diff-render {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    max-height: 360px;
    overflow: auto;
    font-family: inherit;
    font-size: 13px;
    white-space: pre-wrap;
    line-height: 1.5;
}
.diff-ins { background: var(--tint-green); color: var(--green); text-decoration: none; }
.diff-del { background: var(--tint-red); color: var(--red); text-decoration: line-through; }
.diff-eq  { color: var(--text); }
.diff-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* Confirm modal meta row + mode banners */
.confirm-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.confirm-mode-pill {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .02em;
}
.live-confirm-banner {
    background: #c8202b;
    color: #fff;
    border: 1px solid #a01620;
}
.test-confirm-banner {
    background: var(--tint-green);
    color: var(--green);
    border: 1px solid var(--green);
}
.confirm-meta-text {
    font-size: 12px;
    color: var(--text-dim);
}
.diff-render.diff-plain {
    color: var(--text);
    background: var(--bg);
    white-space: pre-wrap;
}

/* Keyboard-shortcut row focus (TASK-62) */
tr[data-shortcut-focused] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: var(--tint-accent);
}

/* Per-page help button + modal — moved up + tighter so it no longer
   overlaps the page-header's right-side controls (save-view popover,
   action buttons). 12 px from each edge with a smaller hit area. */
.help-button {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 30;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--bg-card);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, border-color .12s;
}
/* Reserve room on the right side of any page-header so action buttons
   don't slam into the help-button. */
.page-header { padding-right: 44px; }
.help-button:hover {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
}
.help-modal { max-width: 640px; }
.help-modal-content h3 { margin: 0 0 6px 0; font-size: 14px; }
.help-modal-content ul { padding-left: 20px; margin: 6px 0 10px; }
.help-modal-content li { margin-bottom: 6px; line-height: 1.45; font-size: 13px; }
.help-modal-content p  { font-size: 13px; margin: 6px 0; }
.help-modal-content code { background: var(--tint-mute); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.help-modal-content a { color: var(--accent); }
.content { position: relative; }

/* Detail page */
.detail-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}
@media (max-width: 1024px) {
    .detail-grid { grid-template-columns: 1fr; }
    .app { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; }
}

.suggestion {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-bottom: 10px;
    background: var(--bg-elev);
}
.suggestion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.suggestion-kind { font-weight: 600; font-size: 13px; }
.suggestion-actions {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Plan 16 — conversation history rendering. Card-per-message with avatar
   chip, sender chip, timestamp, collapsible long body. Visually distinct
   sticky-note background for private notes and Freshdesk-auto rows. */
.conv-card-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.conv-card-head h3 { margin: 0; }
.conv-count { color: var(--text-dim); font-weight: 400; font-size: 13px; }
.conv-source-hint {
    font-size: 12px;
    font-style: italic;
}
.conv-older {
    margin: 0 0 12px;
    padding: 6px 10px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elev);
}
.conv-older > summary {
    cursor: pointer;
    color: var(--text-dim);
    font-size: 12px;
    padding: 4px 0;
    list-style: none;
}
.conv-older[open] > summary { margin-bottom: 8px; }

.conv {
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--bg-elev);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.conv.conv-incoming { border-left-color: var(--blue); }
.conv.conv-outgoing { border-left-color: var(--green); }
.conv.conv-private {
    background: var(--tint-amber);
    border-left: 3px solid var(--amber);
    /* Sticky-note look — clearly distinct from a regular email card. */
}
.conv.conv-fd-auto {
    background: var(--tint-mute);
    border-left: 3px solid var(--text-dim);
    opacity: .85;
    /* Autogenerated Freshdesk forwarder notes — even more muted. */
}
.conv-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: 12px;
}
.conv-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tint-accent);
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}
.conv-sender { font-weight: 600; color: var(--text); }
.conv-from { font-size: 11px; }
.conv-dot { color: var(--text-dim); }
.conv-time {
    color: var(--text-dim);
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 11px;
}
.conv-body {
    font-size: 13px;
    white-space: pre-wrap;
    line-height: 1.5;
    overflow: hidden;
    position: relative;
}
.conv-body-collapsed {
    max-height: 8em;
}
.conv-body-collapsed::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2em;
    background: linear-gradient(to bottom, transparent, var(--bg-elev));
    pointer-events: none;
}
.conv.conv-private .conv-body-collapsed::after {
    background: linear-gradient(to bottom, transparent, var(--tint-amber));
}
.conv.conv-fd-auto .conv-body-collapsed {
    max-height: 4em;  /* Collapsed harder by default. */
}
.conv.conv-fd-auto .conv-body-collapsed::after {
    background: linear-gradient(to bottom, transparent, var(--tint-mute));
}
.conv-more-btn {
    margin-top: 6px;
    background: none;
    border: none;
    color: var(--blue);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 0;
}
.conv-more-btn:hover { text-decoration: underline; }

/* Description block */
.desc {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    max-height: 320px;
    overflow: auto;
    font-size: 13px;
    white-space: pre-wrap;
}

/* Toast / notice */
.notice {
    background: var(--tint-accent);
    border: 1px solid var(--tint-accent);
    color: var(--accent);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    font-size: 13px;
}
.notice.warn  { background: var(--tint-amber); border-color: var(--tint-amber); color: var(--amber); }
.notice.error { background: var(--tint-red);   border-color: var(--tint-red);   color: var(--red); }

/* Theme toggle */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
}
.theme-toggle button {
    background: transparent;
    color: var(--text-dim);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}
.theme-toggle button.active {
    background: var(--accent);
    color: var(--accent-fg);
}
.theme-toggle button:hover:not(.active) {
    background: var(--bg-hover);
    color: var(--text);
}

/* Misc */
.empty {
    text-align: center;
    color: var(--text-dim);
    padding: 40px;
    font-size: 14px;
}

.muted { color: var(--text-mute); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.row-link {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
}
.row-link:hover { color: var(--accent); text-decoration: none; }

/* ---------------------------------------------------------------------------
   Send + Undo toast (C4.1)

   Sits bottom-right above the page, visible across all routes. The SVG ring
   uses stroke-dasharray to draw a depleting arc tied to the JS countdown.
   Sent / cancelled / failed states swap the accent colour and remove the
   undo button instead of unmounting the toast — the operator gets a clear
   trailing 1.5 s of feedback before it slides out.
   --------------------------------------------------------------------------- */
.undo-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    min-width: 320px;
    max-width: 420px;
    background: var(--bg-card, #1a1f2e);
    border: 1px solid var(--border-strong, #2a3144);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.35),
                0 2px 6px rgba(0,0,0,0.2);
    color: var(--text, #e4e7ec);
    font-size: 14px;
    z-index: 9999;
    transition: transform 220ms cubic-bezier(.2,.7,.3,1), opacity 220ms;
    transform: translateY(20px);
    opacity: 0;
}
.undo-toast.shown {
    display: flex;
    transform: translateY(0);
    opacity: 1;
}

.undo-ring {
    width: 40px;
    height: 40px;
    transform: rotate(-90deg);
    flex-shrink: 0;
}
.undo-ring-track {
    fill: none;
    stroke: var(--border, #2a3144);
    stroke-width: 2.5;
}
.undo-ring-fill {
    fill: none;
    stroke: var(--accent, #3b82f6);
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke-dasharray 80ms linear;
}

.undo-body {
    flex: 1;
    min-width: 0;
}
.undo-message {
    font-weight: 500;
    line-height: 1.3;
}
.undo-countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--accent, #3b82f6);
    padding: 0 2px;
}
.undo-meta {
    font-size: 12px;
    color: var(--text-mute, #94a3b8);
    margin-top: 2px;
}

.undo-btn {
    background: transparent;
    border: 1px solid var(--accent, #3b82f6);
    color: var(--accent, #3b82f6);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
.undo-btn:hover:not(:disabled) {
    background: var(--accent, #3b82f6);
    color: var(--accent-fg, #ffffff);
}
.undo-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.undo-toast.cancelled .undo-ring-fill { stroke: var(--text-mute, #94a3b8); }
.undo-toast.cancelled .undo-countdown { color: var(--text-mute, #94a3b8); }
.undo-toast.sent {
    border-color: rgba(16,185,129,0.55);
}
.undo-toast.sent .undo-ring-fill { stroke: #10b981; }
.undo-toast.sent .undo-countdown { color: #10b981; }
.undo-toast.failed {
    border-color: rgba(239,68,68,0.55);
}
.undo-toast.failed .undo-ring-fill { stroke: #ef4444; }
.undo-toast.dry-run {
    border-color: rgba(34,197,94,0.45);
}
.undo-toast.dry-run .undo-ring-fill { stroke: #22c55e; }
.undo-toast.dry-run .undo-btn { display: none; }

@media (prefers-reduced-motion: reduce) {
    .undo-toast { transition: none; }
    .undo-ring-fill { transition: none; }
}

/* Stats tabs (C4.5 / C4.6) */
.stats-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 18px 0;
    border-bottom: 1px solid var(--border, #2a3144);
}
.stats-tab {
    display: inline-block;
    padding: 9px 14px;
    color: var(--text-dim, #94a3b8);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms, border-color 120ms;
}
.stats-tab:hover { color: var(--text, #e4e7ec); text-decoration: none; }
.stats-tab.active {
    color: var(--accent, #3b82f6);
    border-bottom-color: var(--accent, #3b82f6);
}

/* Round 9 — Saved-views sidebar block + Save-view popover removed
   (.saved-views{,-label,-row}, .saved-view-{link,del}, .save-view{,-form}).
   The dashboard header dropped the "Save view" affordance in Round 6 and
   the sidebar list was removed alongside it; only orphan CSS remained. */

/* Draft autosave restored banner (C4.4) */
.draft-restored {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding: 7px 10px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.32);
    border-radius: 5px;
    font-size: 12px;
    color: var(--text, #e4e7ec);
}
.draft-restored-revert {
    background: transparent;
    border: 1px solid var(--text-mute, #64748b);
    color: var(--text-dim, #94a3b8);
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: color 100ms, border-color 100ms;
}
.draft-restored-revert:hover {
    color: var(--accent, #3b82f6);
    border-color: var(--accent, #3b82f6);
}

/* Empty-state polish (C4.7) — dead-end empties become next-action prompts */
.empty-state {
    text-align: center;
    padding: 56px 32px;
}
.empty-state .empty-icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 14px;
    opacity: 0.7;
}
.empty-state .empty-title {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text, #e4e7ec);
}
.empty-state .muted {
    margin: 0 auto 18px;
    max-width: 560px;
    font-size: 13px;
}
.empty-state .empty-ctas {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* ===========================================================================
   Filter v6 — active-modifier chip (2026-06-05)
   Surfaces when a single-axis modifier (currently just `awaiting_first_reply`)
   is active. Clicking the ✕ strips just that param; the rest of the filter
   state is preserved by the canonical pill_href merge in main.py.
   =========================================================================== */
.active-modifiers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px 0;
}
.active-modifier-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    border-radius: 999px;
    background: var(--tint-amber, rgba(245, 158, 11, 0.12));
    border: 1px solid rgba(245, 158, 11, 0.32);
    color: var(--amber, #f59e0b);
    font-size: var(--fs-small, 12px);
    font-weight: 500;
    text-decoration: none;
    transition: background 100ms, color 100ms;
}
.active-modifier-chip:hover {
    background: rgba(245, 158, 11, 0.22);
    color: var(--amber, #f59e0b);
    text-decoration: none;
}
.active-modifier-x {
    font-size: 14px;
    line-height: 1;
    opacity: 0.75;
}
.active-modifier-chip:hover .active-modifier-x { opacity: 1; }

/* ===========================================================================
   LIVE sticky banner (C3.4)
   Sits above the app shell so the highest-stakes setting can never be
   below the fold. Pulsing dot draws the eye on each render.
   =========================================================================== */
/* Fixed (not sticky) so the sidebar's own sticky-top doesn't fight with
   the banner over the y=0 slot. .has-live-banner on <body> reserves
   space so the app shell doesn't slide under it. */
.live-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 36px;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, var(--red-500) 0%, #d83a3a 100%);
    color: #ffffff;
    padding: 0 16px;
    text-align: center;
    font-size: var(--fs-small);
    box-shadow: 0 1px 0 rgba(0,0,0,.18);
}
body.has-live-banner { padding-top: 36px; }
body.has-live-banner .sidebar { top: 36px; height: calc(100vh - 36px); }
.live-banner strong { letter-spacing: 0.06em; }
.live-banner a { color: #fff; text-decoration: underline; }
.live-banner-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    margin-right: 8px;
    vertical-align: middle;
    animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
    .live-banner-dot { animation: none; }
}

/* ===========================================================================
   Mobile-responsive table (C3.5)
   Below 720 px the table-wrap scrolls horizontally instead of clipping;
   below 560 px the low-priority columns hide so SLA + Ack-state remain
   visible without horizontal scroll.
   =========================================================================== */
.table-wrap { overflow-x: auto; }
@media (max-width: 720px) {
    .app { grid-template-columns: 1fr !important; }
    .sidebar { display: none; }
    .content { padding: 12px !important; }
    .table-wrap table { font-size: var(--fs-small); }
}
@media (max-width: 560px) {
    .table-wrap table thead th:nth-child(2),  /* Group */
    .table-wrap table tbody td:nth-child(2),
    .table-wrap table thead th:nth-child(4),  /* Requester */
    .table-wrap table tbody td:nth-child(4),
    .table-wrap table thead th:nth-child(6),  /* Updated */
    .table-wrap table tbody td:nth-child(6) {
        display: none;
    }
}

/* ===========================================================================
   SLA countdown ring (C3.6)
   Replaces the previous flat colour bubble. The SVG donut's fill is a
   percentage of the configured red/amber band (data-sla-pct), and a
   pulse animation kicks in under 10 minutes (data-sla-pulse).
   =========================================================================== */
.sla-ring {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
.sla-ring svg { width: 22px; height: 22px; flex-shrink: 0; }
.sla-ring .sla-ring-track { fill: none; stroke: var(--border); stroke-width: 3.2; }
.sla-ring .sla-ring-fill {
    fill: none;
    stroke-width: 3.2;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: stroke-dasharray var(--duration-base) var(--ease-standard);
}
.sla-ring[data-sla="green"] .sla-ring-fill { stroke: var(--green); }
.sla-ring[data-sla="amber"] .sla-ring-fill { stroke: var(--amber); }
.sla-ring[data-sla="red"]   .sla-ring-fill { stroke: var(--red); }
.sla-ring[data-sla="breached"] .sla-ring-fill { stroke: var(--red); }
.sla-ring .sla-ring-label { font-size: var(--fs-small); color: var(--text-dim); }
.sla-ring[data-sla="red"] .sla-ring-label,
.sla-ring[data-sla="breached"] .sla-ring-label { color: var(--red); font-weight: 600; }
.sla-ring[data-sla-pulse="1"] svg { animation: sla-pulse 1.2s ease-in-out infinite; }
@keyframes sla-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
    .sla-ring[data-sla-pulse="1"] svg { animation: none; }
}

/* ===========================================================================
   Motion language (C3.7) — subtle press/hover/success states.
   Button :active translateY(1px) for tactile feedback, row-success sweep
   on the dashboard when a send completes.
   =========================================================================== */
button:active, .btn:active, .filter-pill:active {
    transform: translateY(1px);
}
button, .btn, .filter-pill, a.filter-pill, .stats-tab {
    transition:
        background var(--duration-fast) var(--ease-standard),
        color      var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        transform  var(--duration-fast) var(--ease-emphasis);
}
.card {
    transition: box-shadow var(--duration-base) var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) {
    button, .btn, .filter-pill, .stats-tab, .card {
        transition: none !important;
        animation: none !important;
    }
}

/* Features page table styling */
.feature-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
}
.feature-table th, .feature-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.feature-table th {
    color: var(--text-mute);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
}
.feature-table td:nth-child(1) { width: 200px; font-weight: 500; color: var(--text); }
.feature-table td:nth-child(2) { color: var(--text-dim); }
.feature-table td:nth-child(3) { width: 220px; color: var(--text-dim); font-size: var(--fs-caption); }
.feature-table td a { color: var(--accent); }
.feature-table code { font-size: 11px; padding: 1px 5px; background: var(--tint-mute); border-radius: 3px; }

/* ---- Features page (Round 9 simplification) -------------------------- */
/* Tight one-line rows, tiny status pills, grouped cards. Layout tokens
   only — colours come from the existing semantic vars. */
.feat-group {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    display: grid;
    gap: var(--space-3);
}
.feat-intro p { margin: 0 0 var(--space-2) 0; }
.feat-intro p:last-child { margin-bottom: 0; }
.feat-meta { font-size: var(--fs-small); }
.feat-subtitle {
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-mute);
    font-weight: 600;
}
.feat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
}
.feat-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    line-height: 1.45;
}
.feat-table tr:last-child td { border-bottom: 0; }
.feat-table td:nth-child(1) {
    width: 180px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}
.feat-table td:nth-child(2) { color: var(--text-dim); }
.feat-table td:nth-child(3) {
    width: 140px;
    color: var(--text-dim);
    font-size: var(--fs-caption);
    white-space: nowrap;
}
.feat-table td a { color: var(--accent); }
.feat-table code {
    font-size: 11px;
    padding: 1px 5px;
    background: var(--tint-mute);
    border-radius: 3px;
}
.feat-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.5;
}
.feat-pill.live { background: var(--tint-green); color: var(--green); }
.feat-pill.off  { background: var(--tint-amber); color: var(--amber); }
.feat-group h4 {
    margin: var(--space-3) 0 var(--space-1) 0;
    font-size: var(--fs-body);
    color: var(--text);
}
.feat-group h4:first-of-type { margin-top: 0; }
.feat-group p {
    margin: 0;
    color: var(--text-dim);
    font-size: var(--fs-small);
    line-height: 1.55;
}
.feat-todo {
    margin: 0;
    padding-left: var(--space-4);
    color: var(--text-dim);
    font-size: var(--fs-small);
    line-height: 1.6;
}

/* --------------------------------------------------------------------- */
/* Tier 4 UX additions                                                    */
/* --------------------------------------------------------------------- */

/* About-to-breach SLA banner (dashboard top).                            */
.breach-banner {
    background: var(--tint-red);
    color: var(--red);
    border: 1px solid var(--red);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin: 0 0 14px 0;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.breach-banner .breach-link {
    color: var(--red);
    text-decoration: underline;
    font-weight: 600;
}
.breach-banner .breach-link:hover { color: var(--text); }
.breach-banner .breach-mins {
    background: var(--red);
    color: var(--bg);
    border-radius: 999px;
    padding: 1px 6px;
    margin-left: 4px;
    font-size: 11px;
    font-weight: 700;
}

/* "NEW since last visit" row indicator.                                  */
tr.row-new td.ticket-id { position: relative; }
.row-new-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--blue);
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
    box-shadow: 0 0 0 2px var(--tint-blue);
}

/* Filter v5 (NEW badge): brand-new tickets in Open/Pending that nobody
   has replied to yet. Round 6 Bundle D bump: solid red fill + white text +
   thicker padding + soft shadow so brand-new rows are unmissable. Still
   borrows the same urgency cue as SLA-red and URGENT pills.            */
.new-badge {
    display: inline-block;
    min-width: 36px;
    padding: 4px 10px;
    margin-left: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    color: #ffffff;
    background: var(--red);
    border: 1px solid var(--red);
    border-radius: 3px;
    vertical-align: middle;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.35);
}

/* Round 6 Bundle D: tickets awaiting their first reply (no responder has
   touched them yet) get an unmissable 4px red left-edge stripe plus a
   subtle red row tint. Pairs with the `.new-badge` chip in the ticket-id
   cell so brand-new tickets stand out at a glance. Class flips off the
   moment first_responded_at gets populated. Dark default + light override
   so the tint stays subtle on both themes.                              */
tbody tr.row-awaiting-new {
    background: rgba(239, 68, 68, 0.12);
    box-shadow: inset 4px 0 0 0 var(--red);
}
[data-theme="light"] tbody tr.row-awaiting-new {
    background: rgba(239, 68, 68, 0.06);
}

/* Tiny copy button next to ticket-id cell.                               */
.icon-btn-tiny {
    font-size: 11px;
    padding: 1px 4px;
    margin-left: 4px;
    opacity: 0.6;
}
.icon-btn-tiny:hover { opacity: 1; }

/* Sortable headers.                                                      */
.sortable-table th[data-sort] {
    user-select: none;
    position: relative;
}
.sortable-table th.th-sort-asc::after,
.sortable-table th.th-sort-desc::after {
    content: '';
    display: inline-block;
    margin-left: 4px;
    border: 4px solid transparent;
    vertical-align: middle;
}
.sortable-table th.th-sort-asc::after {
    border-bottom-color: var(--accent);
    transform: translateY(-2px);
}
.sortable-table th.th-sort-desc::after {
    border-top-color: var(--accent);
    transform: translateY(2px);
}

/* Sidebar health strip.                                                  */
.health-strip {
    display: flex;
    gap: 6px;
    margin: 10px 0 8px 0;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.health-chip {
    font-size: 11px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.4;
}
.health-chip.health-green { background: var(--tint-green); color: var(--green); border-color: var(--green); }
.health-chip.health-amber { background: var(--tint-amber); color: var(--amber); border-color: var(--amber); }
.health-chip.health-red   { background: var(--tint-red);   color: var(--red);   border-color: var(--red); }

/* /actions day-pill quick-link group.                                    */
.day-quicklinks {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.day-pill {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-mute);
    text-decoration: none;
    background: var(--bg-elev);
}
.day-pill.active {
    background: var(--tint-accent);
    color: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}
.day-pill:hover { color: var(--text); }

/* /actions date-header rows (groups runs by day).                        */
tr.date-header td {
    padding: 6px 10px !important;
    border-bottom: 1px solid var(--border);
}

/* Plan 14: group-wide historical view affordances.
   - .muted-control greys the lookback select on the History view so it
     reads as a managed preset, not a free-form filter combo.
     pointer-events:none blocks click; tab-focus still works.
   - .history-banner is the inline header strip with the Back to default
     exit. Uses bg-elev/border so it reads as part of the page chrome.
   - td.owner styles the History-only "Owner" cell — denser type, muted
     colour to defer to the subject + status signals. */
.muted-control {
    opacity: 0.5;
    pointer-events: none;
}
.history-banner {
    padding: 6px 10px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    margin-bottom: var(--space-2);
    color: var(--text-mute);
}
td.owner {
    font-size: var(--fs-small);
    color: var(--text-mute);
}

/* Filter v6 (2026-06-05): the .lookback-overflow-hint amber banner and
   the .show-everything-reset escape-hatch link were both removed from
   dashboard.html as redundant controls. The Lookback dropdown and the
   Closed/Resolved sub-toggle already cover those affordances, and the
   parallel ~2y overflow probe that powered the count was burning half
   the search-API budget. Removing the CSS rules with the markup so the
   stylesheet doesn't accumulate orphan selectors. */

/* ----------------------------------------------------------------------
   Light-theme contrast polish
   ----------------------------------------------------------------------
   The dark-theme pill backgrounds resolve to ~14% rgba tints which read
   as solid swatches on the slate-950 canvas. The light theme remaps
   those tokens to pale hex blocks (#fef3c7 etc.), but a handful of pills
   sit on the white card surface (--bg-elev: #ffffff) where the very
   pale fill drops below WCAG AA against the page background. The
   overrides below nudge those pills to slightly denser tints derived
   from the same accent family so the chip outline stays readable
   without losing the soft pastel feel.                                */
[data-theme="light"] .pill.vendor   { background: #ddd6fe; color: var(--purple); }
[data-theme="light"] .pill.billing  { background: #fde68a; color: var(--amber); }
[data-theme="light"] .pill.urgent   { background: #fecaca; color: var(--red); }
[data-theme="light"] .pill.risky    { background: #fde68a; color: var(--amber); }
[data-theme="light"] .pill.lang-cs  { background: #bfdbfe; color: var(--blue); }
[data-theme="light"] .pill.lang-tr  { background: #ddd6fe; color: var(--purple); }

/* SLA ring track: in dark mode `var(--border)` is slate-800 which sits
   visibly behind the colored fill arc. In light mode `var(--border)` is
   slate-200 which is nearly invisible against the white card, so the
   ring reads as a floating arc with no track. Bump to slate-400 in
   light mode so operators see the full donut. */
[data-theme="light"] .sla-ring-track { stroke: var(--slate-400); }

/* ──────────────────────────────────────────────────────────────────────
   /reference page — modernised layout (Round 9).
   Replaces the wall-of-tables look with section cards, chip clouds for
   audit verbs, and a card-per-entity grid for the schema + module map.
   All colours flow through existing tokens so dark + light themes
   inherit automatically.
   ────────────────────────────────────────────────────────────────────── */

/* Anchor pills row sitting under the page header. */
.ref-anchors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-5) 0;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.ref-anchors a {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--text-dim);
    text-decoration: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
}
.ref-anchors a:hover,
.ref-anchors a:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--tint-accent);
}

/* A reference section card — used for every block on the page. */
.ref-section {
    margin: 0 0 var(--space-6) 0;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    line-height: 1.55;
}
.ref-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin: 0 0 var(--space-1) 0;
}
.ref-heading {
    margin: 0 0 var(--space-4) 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text);
}
.ref-caption {
    color: var(--text-dim);
    font-size: var(--fs-small);
    margin: var(--space-3) 0 0 0;
    line-height: 1.55;
}
.ref-section-sub {
    margin: var(--space-5) 0 var(--space-2) 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text);
}

/* ASCII diagram in its own subdued frame. */
.ref-diagram {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.4;
}

/* Generic 2-3 column grid for module map + schema + runbook tiles. */
.ref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
}
.ref-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.ref-card {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-width: 0;
}
.ref-card-title {
    display: inline-block;
    margin: 0 0 var(--space-2) 0;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg-elev);
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
    overflow-wrap: anywhere;
}
.ref-card p {
    margin: 0;
    font-size: var(--fs-small);
    color: var(--text-dim);
    line-height: 1.55;
}
.ref-card p + p {
    margin-top: var(--space-2);
}
.ref-card-cols {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--text);
    overflow-wrap: anywhere;
}
.ref-card-cols code {
    background: transparent;
    padding: 0;
}
.ref-card-note {
    color: var(--text-mute);
    font-size: var(--fs-small);
}
.ref-card-h4 {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text);
}
.ref-card pre {
    margin: 0;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: var(--space-2) var(--space-3);
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
}

/* What's-new banner cards — same grid but a touch louder. */
.ref-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-3);
}
.ref-news-card {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
}
.ref-news-card h4 {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text);
}
.ref-news-card p {
    margin: 0;
    color: var(--text-dim);
    font-size: var(--fs-small);
    line-height: 1.55;
}

/* Endpoint list — verb pill + path + one-line purpose. */
.ref-endpoints {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-2) var(--space-3);
}
.ref-endpoint {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-width: 0;
}
.ref-endpoint code {
    font-size: 12.5px;
    color: var(--text);
    overflow-wrap: anywhere;
}
.ref-endpoint p {
    flex-basis: 100%;
    margin: 2px 0 0 0;
    font-size: var(--fs-small);
    color: var(--text-dim);
    line-height: 1.5;
}
.ref-verb {
    display: inline-block;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.4;
    text-transform: uppercase;
}
.ref-verb.verb-get  { background: var(--tint-green);  color: var(--green); border-color: var(--green); }
.ref-verb.verb-post { background: var(--tint-blue);   color: var(--blue);  border-color: var(--blue); }
.ref-verb.verb-mix  { background: var(--tint-purple); color: var(--purple); border-color: var(--purple); }

/* Audit-verb chip cloud, grouped by writer. */
.ref-verbs-group {
    margin: var(--space-4) 0 0 0;
}
.ref-verbs-heading {
    margin: 0 0 var(--space-2) 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.ref-verbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-2) var(--space-3);
}
.ref-verb-chip {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-width: 0;
}
.ref-verb-chip code {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg-elev);
    padding: 1px 7px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
    overflow-wrap: anywhere;
}
.ref-verb-chip span {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-small);
    color: var(--text-mute);
    line-height: 1.5;
}

/* Common-errors list inside runbook. */
.ref-errors {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-2);
}
.ref-errors li {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--amber);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    color: var(--text-dim);
    line-height: 1.55;
}
.ref-errors li strong { color: var(--text); }

/* Narrow viewport: tighten the section padding so cards don't bleed. */
@media (max-width: 720px) {
    .ref-section { padding: var(--space-3) var(--space-3); }
    .ref-anchors { padding: var(--space-2) var(--space-3); }
}