/* Base */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

code { font-family: var(--font-mono); font-size: 0.9em; }

.muted { color: var(--text-muted); }

/* Top nav */
:root { --nav-w: 208px; }

.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-left: var(--nav-w);
}

/* Left sidebar navigation (fixed; content clears it via .app padding-left). */
.nav {
    background: var(--panel);
    border-right: var(--border-w) solid var(--border);
    padding: 16px 12px;
    width: var(--nav-w);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    overflow-y: auto;
    z-index: 50;
}

.nav .brand {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-primary);
    padding: 0 8px;
}

.nav .brand-secondary {
    display: block;
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    padding: 2px 8px 12px;
    margin-bottom: 6px;
    border-bottom: var(--border-w) solid var(--border);
}

.nav .nav-link {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
}

.nav .nav-link:hover {
    color: var(--text-primary);
    background: var(--card);
    text-decoration: none;
}

/* Section label inside the sidebar (currently the admin-only group). Sits on a
   rule that separates it from the links above; admins only, so a support user
   never sees the divider. */
.nav .nav-section-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 12px 12px 4px;
    margin-top: 8px;
    border-top: var(--border-w) solid var(--border);
}

/* Collapsible sidebar groups (Tools, Admin): a <details> whose summary is the
   section label, with a chevron that turns when open. */
.nav .nav-group { display: block; }
.nav .nav-group > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.nav .nav-group > summary::-webkit-details-marker { display: none; }
.nav .nav-group > summary::after {
    content: "\25B8";
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 150ms ease;
}
.nav .nav-group[open] > summary::after { transform: rotate(90deg); }
.nav .nav-group > summary:hover,
.nav .nav-group > summary:focus-visible { color: var(--text-primary); }
.nav .nav-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The spacer pushes the footer (utilities + account card) to the bottom of
   the sidebar; its rule is the one separator between navigation and footer. */
.nav .nav-spacer {
    border-bottom: var(--border-w) solid var(--border);
    margin-bottom: 10px;
}

/* Sidebar header (brand + collapse button) + the floating opener. */
.nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.nav-collapse-btn,
.nav-open-btn {
    background: none;
    border: var(--border-w) solid var(--border);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 4px 8px;
}
.nav-collapse-btn:hover,
.nav-open-btn:hover { color: var(--text-primary); background: var(--card); }

/* Floating opener — only shown when the sidebar is collapsed. */
.nav-open-btn {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 60;
    background: var(--panel);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.nav { transition: transform 200ms ease; }

/* Collapsed state (class set pre-paint on <html> from localStorage). */
html.nav-collapsed .nav { transform: translateX(-100%); }
html.nav-collapsed .app { padding-left: 0; }
html.nav-collapsed .nav-open-btn { display: flex; }

/* ── Sidebar footer (partials/nav.html) ─────────────────────────────────────
   Two parts on the sidebar's 8px grid: a utility row of equal 32px icon
   buttons (Documentation, Feedback, the notifications bell, the theme
   toggle), then the account card — avatar, name, role pill, and a status
   strip carrying the live indicator — whose <details> menu holds My account
   and Sign out. Icons are 16px line glyphs (partials/nav_icons.html) in
   currentColor; every colour is a token. */
.nav-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nav-tools {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    padding: 3px;
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
}
.nav-tools .theme-toggle-form { display: flex; margin: 0; }
.nav-tool {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.nav-tool:hover {
    color: var(--text-primary);
    background: var(--card);
    text-decoration: none;
}
.nav-tool.active { color: var(--accent); background: var(--card); }
.nav-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-icon { flex: none; display: block; }

.nav-account {
    position: relative;
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}
.nav-account.active { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.nav-user > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 10px;
    border-radius: var(--radius) var(--radius) 0 0;
    cursor: pointer;
    user-select: none;
}
.nav-user > summary::-webkit-details-marker { display: none; }
.nav-user > summary:hover,
.nav-user[open] > summary { background: color-mix(in srgb, var(--text-primary) 5%, var(--card)); }
.nav-user > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-avatar {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 13px/1 var(--font-sans);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: var(--border-w) solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.nav-user-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.nav-user-name {
    max-width: 100%;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-user-text .role-badge { font-size: 8.5px; padding: 1px 5px; line-height: 1.4; }
.nav-user-caret { color: var(--text-muted); width: 14px; height: 14px; }
.nav-user > summary:hover .nav-user-caret,
.nav-user[open] .nav-user-caret { color: var(--text-primary); }

/* The account menu — pops up above the card, the full width of the footer. */
.nav-user-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 5;
    padding: 4px;
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-float);
}
.nav-user-menu-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px 8px;
    margin-bottom: 4px;
    border-bottom: var(--border-w) solid var(--border);
}
.nav-user-menu-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.nav-user-menu-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-user-menu-role { display: none; }
.nav-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    color: var(--text-secondary);
}
.nav-menu-item .nav-icon { color: var(--text-muted); }
.nav-menu-item:hover { background: var(--card); color: var(--text-primary); text-decoration: none; }
.nav-menu-item:hover .nav-icon { color: var(--text-primary); }
.nav-menu-item.active, .nav-menu-item.active .nav-icon { color: var(--accent); }
.nav-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* A menu item that is a form button (the UI-version switch): the same row as
   a link, with the button chrome removed. */
.nav-menu-form { margin: 0; }
button.nav-menu-item {
    width: 100%;
    background: none;
    border: 0;
    font-family: var(--font-sans);
    text-align: left;
    cursor: pointer;
}

/* Status strip — the live indicator (static/live.js) when connected, the
   muted "Signed in" line until then. Fixed height, so a state change never
   moves the card. */
.nav-account-status {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-top: var(--border-w) solid var(--border);
}
.nav-account .live-indicator {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    align-self: center;
}
.nav-account .live-indicator[data-state="offline"]:hover,
.nav-account .live-indicator[data-state="paused"]:hover { border-color: transparent; }
.nav-account-idle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.nav-account-idle .live-dot { background: var(--border); }
.nav-account .live-indicator:not([hidden]) + .nav-account-idle { display: none; }

/* Body */
.body {
    padding: 32px 24px;
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.page-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 24px;
    color: var(--text-primary);
}

/* Cards */
.card {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

/* Section labels (ALL CAPS, letter-spaced — signature pattern) */
.label-caps {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Buttons */
.btn {
    background: var(--card);
    color: var(--text-secondary);
    border: var(--border-w) solid var(--border);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
    letter-spacing: 0.05em;
    transition: opacity 120ms ease;
}

.btn:hover { opacity: 0.85; }
.btn:active { opacity: 0.7; }

.btn-primary {
    background: var(--accent);
    color: #FFFFFF;
    border-color: var(--accent);
}

.btn-danger {
    background: transparent;
    color: var(--severity-critical);
    border-color: var(--severity-critical);
}
.btn-danger:hover { background: var(--severity-critical); color: #FFFFFF; opacity: 1; }

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
}
.checkbox-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.bundle-tools .analysis-options {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: var(--border-w) solid var(--border);
}

.settings-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 18px;
}

/* ── Per-tenant Collector build card ───────────────────────────────────── */
.tenant-build-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tenant-build-badge {
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 10px;
    border: var(--border-w) solid var(--border);
    color: var(--text-muted);
}
.tenant-build-badge.tb-ready { color: var(--severity-low); border-color: var(--severity-low); }
.tenant-build-badge.tb-error { color: var(--severity-critical); border-color: var(--severity-critical); }
.tenant-build-badge.tb-queued,
.tenant-build-badge.tb-building { color: var(--accent); border-color: var(--accent); }

/* ── Monitoring page ───────────────────────────────────────────────────── */
.mon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.mon-card { padding: 16px; }
.mon-card.mon-level-warn { border-left: 3px solid var(--severity-medium); }
.mon-card.mon-level-crit { border-left: 3px solid var(--severity-critical); }
.mon-bigval {
    font-size: 30px;
    font-weight: 700;
    margin: 6px 0 8px;
    font-family: var(--font-mono, monospace);
}
.mon-bar {
    height: 8px;
    background: var(--panel);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}
.mon-bar-fill { display: block; height: 100%; background: var(--severity-low); }
.mon-fill-warn { background: var(--severity-medium); }
.mon-fill-crit { background: var(--severity-critical); }

.mon-spend { margin-top: 14px; }
.mon-spend-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; }
.mon-spend-windows { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.mon-spend-body { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.mon-spend-custom { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.mon-spend-custom .input { padding: 6px 8px; }

.mon-alerts { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.mon-alert {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
}
.mon-alert.mon-warn { background: color-mix(in srgb, var(--severity-medium) 18%, transparent); color: var(--severity-medium); }
.mon-alert.mon-crit { background: color-mix(in srgb, var(--severity-critical) 18%, transparent); color: var(--severity-critical); }

/* App-wide alert banner (below the nav, admin-only) */
.mon-banner {
    display: block;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    color: #FFFFFF;
}
.mon-banner.mon-warn { background: var(--severity-medium); }
.mon-banner.mon-crit { background: var(--severity-critical); }
.mon-banner:hover { opacity: 0.92; }

/* ── Pre-filter / cleanup wizard ───────────────────────────────────────── */
.pf-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: color-mix(in srgb, var(--severity-medium) 22%, transparent);
    color: var(--severity-medium);
}
.pf-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 0, 0, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.pf-modal {
    background: var(--surface, var(--card));
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius, 10px);
    width: min(900px, 96vw); max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.pf-head, .pf-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-bottom: var(--border-w) solid var(--border);
}
.pf-foot { border-bottom: none; border-top: var(--border-w) solid var(--border); }
.pf-close { margin-left: auto; background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; }
.pf-summary {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    padding: 10px 18px; background: var(--panel);
}
.pf-arrow { color: var(--text-muted); }
.pf-chip { padding: 2px 8px; border-radius: 10px; font-weight: 700; }
.pf-chip.over { background: color-mix(in srgb, var(--severity-medium) 22%, transparent); color: var(--severity-medium); }
.pf-tabs { display: flex; gap: 4px; padding: 10px 18px 0; border-bottom: var(--border-w) solid var(--border); }
.pf-tab {
    background: none; border: none; cursor: pointer; padding: 8px 12px;
    color: var(--text-muted); font-weight: 600; font-size: 13px;
    border-bottom: 2px solid transparent;
}
.pf-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }
.pf-body { padding: 16px 18px; overflow: auto; }
.pf-reasons, .pf-cats, .pf-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-list { max-height: 260px; overflow: auto; border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); padding: 8px; }
.pf-files-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pf-tw-fields { display: flex; gap: 16px; margin: 10px 0; }
.pf-field { display: block; margin-top: 10px; }
@media (max-width: 680px) { .pf-files-cols { grid-template-columns: 1fr; } }

/* Inputs */
.input {
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    width: 100%;
}

.input:focus {
    outline: none;
    border-color: var(--accent);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.field label {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.15em;
    font-weight: 600;
}

/* Login page */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.login-card {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    width: 100%;
    max-width: 360px;
}

.login-card .logo-wrap {
    text-align: center;
    margin-bottom: 20px;
}

.login-card .logo-mark {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    background: var(--accent);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.login-card h1 {
    font-size: 11px;
    font-weight: 700;
    margin: 0 0 24px;
    text-align: center;
    color: var(--text-secondary);
    letter-spacing: 0.15em;
}

/* Separates the SSO button from the local password form when both are offered */
.login-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 14px;
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 0.15em;
}
.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Banners */
.error-banner {
    background: var(--error-bg);
    border: var(--border-w) solid var(--error-border);
    color: var(--error-fg);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 13px;
}

/* Settings → AI provider → Provider routing */
.routing-warn {
    border-left: 3px solid var(--severity-medium);
    background: color-mix(in srgb, var(--severity-medium) 12%, transparent);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    font-size: 13px;
    max-width: 680px;
}
.routing-quants {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}
.routing-quant {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}
.test-served { margin-top: 6px; }

/* Settings → Test connection → OpenRouter routing check */
.rc { margin-top: 10px; }
.rc-note { margin: 0 0 10px; }
.rc-head { margin: 16px 0 6px; }
.rc-line { display: block; margin-top: 4px; }
.rc-scroll { overflow-x: auto; }
.rc-table td { vertical-align: top; }
.rc-table .rc-nowrap { white-space: nowrap; }
.rc-table tr.rc-match > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.rc-table tr.rc-blocked td { color: var(--text-muted); }
.rc-chip {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    border: var(--border-w) solid var(--accent);
    border-radius: 999px;
    padding: 0 6px;
    margin-left: 4px;
}
.rc-ok   { color: var(--severity-low); }
.rc-warn { color: var(--severity-medium); }
.rc-bad  { color: var(--error-fg); }

/* Empty state */
.empty-state {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    padding: 64px 24px;
    text-align: center;
}

.empty-state .label-caps { color: var(--text-secondary); }
.empty-state p { font-size: 13px; margin: 8px 0 0; color: var(--text-muted); }
.empty-state code {
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-secondary);
}

/* Page header */
.page-header { margin-bottom: 20px; }
.page-header.dense { margin-bottom: 12px; }
.page-header.dense .page-title { font-size: 16px; margin-bottom: 4px; }
.page-subtitle {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 920px;
}
.page-header.dense .page-subtitle { font-size: 11px; margin: 2px 0 0; }

/* Stat strip — auto-fit so any card count fills the row and wraps evenly */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
    margin: 16px 0 24px;
}

@media (max-width: 880px) {
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
}

.stat-card {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    text-decoration: none;
    color: inherit;
    transition: background 120ms ease, border-color 120ms ease;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-card:hover {
    background: var(--card-hover);
    text-decoration: none;
    border-color: var(--accent);
}

.stat-card.stat-info { cursor: default; }
.stat-card.stat-info:hover { background: var(--card); border-color: var(--border); }

.stat-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.stat-card.stat-critical  .stat-value { color: var(--severity-critical); }
.stat-card.stat-analyzing .stat-value { color: var(--severity-medium); }
.stat-card.stat-error     .stat-value { color: var(--error-fg); }

/* Filter row */
.filters {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filters.dense { padding: 8px 12px; gap: 6px; }
.filters.dense .filter-row { gap: 8px; }
.filters.dense .filter-row.chip-row { gap: 4px; row-gap: 6px; }
.filter-divider { width: 1px; height: 18px; background: var(--border); margin: 0 6px; }

.filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-row.chip-row { gap: 6px; }

.filter-label-caps {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--text-muted);
}

.filter-select {
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 12px;
    padding: 5px 10px;
    min-width: 200px;
    cursor: pointer;
}

.filter-select:focus { outline: none; border-color: var(--accent); }

.search-wrap { flex: 1; min-width: 220px; }

.filter-search {
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 12px;
    padding: 5px 10px;
    flex: 1;
    min-width: 240px;
}

.filter-search:focus { outline: none; border-color: var(--accent); }
.filter-search::placeholder { color: var(--text-muted); }

.filter-clear {
    font-size: 11px;
    color: var(--text-muted);
    border: var(--border-w) solid var(--border);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.05em;
}

.filter-clear:hover {
    color: var(--text-primary);
    background: var(--panel);
    text-decoration: none;
}

/* Filter chips (multi-select toggles) — dense, no-frills */
.chip {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    color: var(--text-muted);
    text-decoration: none;
    line-height: 1.5;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.chip:hover {
    background: var(--card-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.chip.active {
    background: var(--card-selected);
    color: var(--text-primary);
    border-color: var(--accent);
}

.chip-severity-critical.active { color: var(--severity-critical); border-color: var(--severity-critical); }
.chip-severity-high.active     { color: var(--severity-high);     border-color: var(--severity-high); }
.chip-severity-medium.active   { color: var(--severity-medium);   border-color: var(--severity-medium); }
.chip-severity-low.active      { color: var(--severity-low);      border-color: var(--severity-low); }

.chip-status-complete.active   { color: var(--severity-low);      border-color: var(--severity-low); }
.chip-status-error.active      { color: var(--error-fg);          border-color: var(--error-border); }
.chip-status-analyzing.active,
.chip-status-received.active   { color: var(--severity-medium);   border-color: var(--severity-medium); }

/* Tenant label — color-coded plain text, no chip/badge styling. The color
   identifies the tenant; the weight makes it readable alongside other table
   columns. No background, no border, no padding. */
.tenant-pill {
    font-size: 12px;
    font-weight: 600;
    /* The per-tenant colour identifies the tenant at a glance, but painting the
       name itself gave every row a different hue and a list of ten tenants read
       as a rainbow. The colour moves to a small dot; the name reads as text. */
    color: var(--text-secondary);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tenant-pill::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tenant-color);
}

/* Bundle table — dense, support-tool style */
.bundle-table-wrap {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.bundle-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.bundle-table thead th {
    text-align: left;
    background: var(--panel);
    border-bottom: var(--border-w) solid var(--border);
    padding: 7px 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.bundle-table thead th a {
    color: var(--text-muted);
    text-decoration: none;
}

.bundle-table thead th a:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.bundle-table tbody tr {
    border-bottom: var(--border-w) solid var(--border);
    cursor: pointer;
    transition: background 80ms ease;
}

.bundle-table tbody tr:last-child { border-bottom: none; }

.bundle-table tbody tr:hover { background: var(--card-hover); }

.bundle-table tbody td {
    padding: 6px 10px;
    color: var(--text-secondary);
    vertical-align: middle;
    line-height: 1.4;
}

.bundle-table .num { text-align: right; }
.bundle-table .mono,
.data-table .mono { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }

/* Severity-colored 3px left bar on the row's first cell — column-order-independent */
.bundle-table tbody tr > td:first-child {
    border-left: 3px solid var(--text-muted);
    padding-left: 8px;
}
.bundle-table tbody tr.sev-critical > td:first-child { border-left-color: var(--severity-critical); }
.bundle-table tbody tr.sev-high     > td:first-child { border-left-color: var(--severity-high); }
.bundle-table tbody tr.sev-medium   > td:first-child { border-left-color: var(--severity-medium); }
.bundle-table tbody tr.sev-low      > td:first-child { border-left-color: var(--severity-low); }
.bundle-table tbody tr.sev-unknown  > td:first-child { border-left-color: var(--text-muted); }

.bundle-table .col-sev { width: 90px; }

.severity-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.severity-bg-critical { background: var(--severity-critical); }
.severity-bg-high     { background: var(--severity-high); }
.severity-bg-medium   { background: var(--severity-medium); }
.severity-bg-low      { background: var(--severity-low); }

.sev-text {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.bundle-table .col-status   { width: 92px; }
.bundle-table .col-tenant   { width: 160px; }
.bundle-table .col-scenario { width: 80px; }
/* Type ("Frame · Non-Persistent Desktop") reads on one line; the column grows. */
.bundle-table td.col-scenario { white-space: nowrap; width: auto; }
.bundle-table .col-ticket   { width: 100px; }
.bundle-table .col-hostname {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bundle-table .col-component {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bundle-table .col-issues   { width: 56px; }
.bundle-table .col-created  { width: 130px; white-space: nowrap; }

.bundle-table .tenant-pill { font-size: 12px; }
.bundle-table .status-pill { font-size: 9px; padding: 2px 6px; }

/* Platform chips (Customers list) — which product a customer's tenants run.
   Frame reads in the brand accent, Horizon in the info blue; both tokens are
   defined for both themes. Chips wrap under each other at narrow widths. */
.platform-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.platform-chip {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    border: var(--border-w) solid var(--border);
    background: var(--panel);
    white-space: nowrap;
}
.platform-chip.platform-frame {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}
.platform-chip.platform-horizon {
    color: var(--level-info);
    border-color: color-mix(in srgb, var(--level-info) 55%, var(--border));
    background: color-mix(in srgb, var(--level-info) 10%, var(--panel));
}
.platform-unset { font-size: 10px; color: var(--text-muted); white-space: nowrap; }

.table-footer {
    margin-top: 6px;
    padding: 0 4px;
    font-size: 11px;
}

/* Legacy card-list styles kept here for the bundle-list classes still used
   in places (severity strip in summary card etc.). The list itself is gone. */
.bundle-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bundle-card {
    display: flex;
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: background 120ms ease;
}

.bundle-card:hover {
    background: var(--card-hover);
    text-decoration: none;
}

.bundle-card-accent {
    width: 3px;
    background: var(--text-muted);
    flex-shrink: 0;
}

.bundle-card.severity-critical .bundle-card-accent { background: var(--severity-critical); }
.bundle-card.severity-high     .bundle-card-accent { background: var(--severity-high); }
.bundle-card.severity-medium   .bundle-card-accent { background: var(--severity-medium); }
.bundle-card.severity-low      .bundle-card-accent { background: var(--severity-low); }

.bundle-card-body {
    flex: 1;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bundle-card-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bundle-card-summary {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.bundle-card-summary .component {
    color: var(--text-primary);
    font-weight: 600;
}

.bundle-card-summary.error-text { color: var(--error-fg); }

.bundle-card-row.tenant-row { margin-top: 0; }
.small { font-size: 11px; }
.host { font-size: 11px; }
.ts { font-size: 11px; }
.ticket { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); }

.status-pill {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--panel);
    color: var(--text-muted);
    border: var(--border-w) solid var(--border);
    /* A pill is one token — never let "IN REVIEW" break across two lines. */
    white-space: nowrap;
}

.status-pill.status-complete { color: var(--severity-low); border-color: var(--severity-low); }
.status-pill.status-error    { color: var(--error-fg); border-color: var(--error-border); }
.status-pill.status-analyzing,
.status-pill.status-received { color: var(--severity-medium); border-color: var(--severity-medium); }

.severity-chip {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--panel);
    border: var(--border-w) solid var(--border);
}

.severity-fg-critical { color: var(--severity-critical); border-color: var(--severity-critical); }
.severity-fg-high     { color: var(--severity-high);     border-color: var(--severity-high); }
.severity-fg-medium   { color: var(--severity-medium);   border-color: var(--severity-medium); }
.severity-fg-low      { color: var(--severity-low);      border-color: var(--severity-low); }

/* Bundle detail */
.back-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.back-link {
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    border: var(--border-w) solid var(--border);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
}

.back-link:hover {
    color: var(--text-primary);
    background: var(--card);
    text-decoration: none;
}

/* ── Collapsed analysis (the glanceable face of every AI result) ──────────
   One <details> per analysis surface — bundle, ticket roll-up, Frame capture,
   and the live panel each of them streams into. Collapsed it carries the
   severity, the count and a few sentences of gist; expanded it is the result
   exactly as it always rendered. See partials/analysis_macros.html. */
.analysis-details {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 20px;
}

.analysis-summary {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.analysis-summary::-webkit-details-marker { display: none; }
.analysis-summary:hover { background: var(--card-hover); }
.analysis-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.analysis-details[open] > .analysis-summary {
    border-bottom: var(--border-w) solid var(--border);
}

.analysis-caret {
    flex: none;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 22px;
}
.analysis-caret::before { content: "▸"; }
.analysis-details[open] > .analysis-summary .analysis-caret::before { content: "▾"; }
/* The spinner sits where the caret's severity chip would be on a finished run. */
.analysis-summary .progress-spinner { flex: none; margin-top: 3px; }

.analysis-summary-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.analysis-summary-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.analysis-summary-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.analysis-count {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

/* "No clear issue found" is a complete answer under the neutral analysis
   posture, so it reads as an outcome — not as an empty state. */
.analysis-clear {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--severity-low);
}

.analysis-summary-gist {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* Expanded, the gist would only repeat the executive summary sitting a few
   pixels below it. */
.analysis-details[open] > .analysis-summary .analysis-summary-gist { display: none; }

.analysis-summary-toggle {
    flex: none;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    color: var(--text-muted);
}
.analysis-summary:hover .analysis-summary-toggle { color: var(--accent); border-color: var(--accent); }
.analysis-toggle-less { display: none; }
.analysis-details[open] > .analysis-summary .analysis-toggle-more { display: none; }
.analysis-details[open] > .analysis-summary .analysis-toggle-less { display: inline; }

.analysis-body { padding: 20px; }
/* The wrapped panels already carry their own card chrome and bottom margin. */
.analysis-body > .summary-card:first-child,
.analysis-body > .card:first-child,
.analysis-body > .status-card:first-child { margin-top: 0; }
.analysis-body > :last-child { margin-bottom: 0; }

/* A live run: the header is the progress readout for anyone who leaves it shut. */
.analysis-live .analysis-live-stage { color: var(--text-primary); }
.analysis-live .analysis-live-elapsed,
.analysis-live .analysis-live-counters { color: var(--text-muted); }
/* Open, the panel's own head says the same thing a few pixels lower, and its
   counter row says it in more detail. */
.analysis-live[open] > .analysis-summary .analysis-live-counters { display: none; }
.analysis-live[open] > .analysis-body .status-head { display: none; }

/* Print the analysis, not its header. <details> hides its body rather than
   removing it, so forcing it visible is enough — the content is already there. */
@media print {
    .analysis-details > .analysis-body { display: block !important; }
    .analysis-summary-toggle, .analysis-caret { display: none; }
    .analysis-summary-gist { display: none; }
}

.summary-card {
    display: flex;
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 20px;
}

.summary-card.severity-critical .bundle-card-accent { background: var(--severity-critical); }
.summary-card.severity-high     .bundle-card-accent { background: var(--severity-high); }
.summary-card.severity-medium   .bundle-card-accent { background: var(--severity-medium); }
.summary-card.severity-low      .bundle-card-accent { background: var(--severity-low); }

.summary-body {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.summary-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.component-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.summary-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.stat {
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    min-width: 100px;
}

.stat-value {
    font-size: 16px;
    font-weight: 600;
    margin-top: 4px;
}

.summary-text {
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
    color: var(--text-secondary);
}

/* Issue grid (left list + right detail) */
.issues-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .issues-grid { grid-template-columns: 1fr; }
}

.issues-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.issues-list > .label-caps { margin-bottom: 6px; }

.issue-card {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    text-align: left;
    color: inherit;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background 120ms ease, border-color 120ms ease;
}

.issue-card:hover { background: var(--card-hover); }
.issue-card.active {
    background: var(--card-selected);
    border-color: var(--accent);
}

.issue-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.issue-card-title {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.issue-card.active .issue-card-title { color: var(--text-primary); }

/* Issue detail card */
.issue-detail-card {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

.issue-detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.category-pill {
    font-size: 11px;
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
}

.escalate-pill {
    font-size: 11px;
    background: var(--error-bg);
    border: var(--border-w) solid var(--error-border);
    border-radius: 4px;
    padding: 2px 8px;
    color: var(--error-fg);
    margin-left: auto;
    letter-spacing: 0.1em;
}

.issue-detail-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.issue-section { margin-bottom: 16px; }
.issue-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.issue-text { font-size: 12px; color: var(--text-secondary); line-height: 1.8; margin: 8px 0 0; }

.issue-impact {
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-bottom: 16px;
}

.fix-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fix-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.fix-step-num {
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--card-selected);
    border: var(--border-w) solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 1px;
}

.fix-step-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Recommendations */
.recommendations { padding: 20px 24px; }
.recommendations-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.recommendations-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.rec-chevron {
    color: var(--accent);
    font-size: 14px;
    margin-top: 1px;
    flex-shrink: 0;
}

/* Status card (when analysis isn't ready) */
.status-card {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
}

.status-card p { font-size: 13px; color: var(--text-secondary); margin: 8px 0 0; }
.status-card .error-text { color: var(--error-fg); }

/* Sidebar nav (active link, spacer) */
.nav-spacer { flex: 1; }
.nav-link.active {
    color: var(--accent);
    border-left-color: var(--accent);
    background: var(--card);
}

/* Narrow screens: fall back to a horizontal top bar. */
@media (max-width: 768px) {
    .app { padding-left: 0; }
    .nav {
        position: static;
        width: auto;
        bottom: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
        padding: 8px 16px;
        border-right: none;
        border-bottom: var(--border-w) solid var(--border);
    }
    .nav .brand-secondary { display: inline; border-bottom: none; margin-bottom: 0; padding: 0; }
    .nav .nav-link { display: inline-block; border-left: none; }
    .nav .nav-section-label {
        display: inline-block;
        border-top: none;
        margin-top: 0;
        padding: 7px 4px 7px 12px;
    }
    .nav .nav-spacer { border-bottom: none; margin-bottom: 0; }
    .nav .nav-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
    .nav .nav-group > summary { display: inline-flex; gap: 6px; }
    /* Collapse is a desktop-sidebar feature; keep the top bar fixed on mobile. */
    .nav-top { display: contents; }
    .nav-collapse-btn, .nav-open-btn { display: none !important; }
    html.nav-collapsed .nav { transform: none; }
    html.nav-collapsed .app { padding-left: 0; }
    /* Footer becomes the right end of the top bar: the icon row, then the
       avatar (menu drops down) with the live dot beside it. The bar must
       not clip the menu. */
    .nav { overflow: visible; }
    .nav-footer { flex-direction: row; align-items: center; gap: 6px; margin-left: auto; }
    .nav-tools { grid-auto-columns: 32px; padding: 0; border: 0; }
    .nav-account { display: flex; align-items: center; border: 0; background: none; }
    .nav-user > summary { padding: 2px; gap: 4px; border-radius: var(--radius-sm); }
    .nav-user-text { display: none; }
    .nav-avatar { width: 28px; height: 28px; font-size: 12px; }
    .nav-user-menu { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; width: 200px; z-index: 70; }
    .nav-account-status { min-height: 0; padding: 0 0 0 4px; border: 0; }
    .nav-account .live-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .nav-account-idle { display: none; }
    .nav-user-menu-role { display: inline-block; align-self: flex-start; margin-top: 4px; font-size: 8.5px; padding: 1px 5px; }
}

/* Role badge — small ALL-CAPS pill next to the username and in user tables.
   Admin reads on the brand accent; support stays muted. Tokens only. */
.role-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: var(--border-w) solid var(--border);
    color: var(--text-muted);
}
.role-badge.role-admin { color: var(--accent); border-color: var(--accent); }
.role-badge.role-support { color: var(--text-muted); border-color: var(--border); }

/* Inline form hints — caps-lock warning (amber) and password-mismatch (red).
   Token-only so both themes stay AA-readable. */
.input-warning {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--severity-medium);
    margin-bottom: 12px;
}
.input-error {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--error-fg);
    margin-top: 6px;
}

/* Tab nav (Analysis | Files on bundle detail) */
.tab-nav {
    display: flex;
    gap: 0;
    border-bottom: var(--border-w) solid var(--border);
    margin-bottom: 20px;
}

.tab {
    display: inline-block;
    padding: 10px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 120ms ease, border-color 120ms ease;
}

.tab:hover { color: var(--text-primary); text-decoration: none; }

.tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}

/* Settings tabs — same nav, but there are enough of them to wrap on a narrow
   window. Each tab holds one or more section cards, and each card is its own
   form (ui/settings.py::SETTINGS_SECTIONS). */
.settings-tab-nav { flex-wrap: wrap; }

.settings-tab-nav .tab { padding: 10px 14px; }

/* A tab holding a section with unsaved edits. */
.settings-tab-nav .tab.has-unsaved::after {
    content: "\25CF";
    color: var(--accent);
    margin-left: 6px;
    letter-spacing: 0;
}

[data-tab-panel][hidden] { display: none; }

/* Wider than the default form card — several tabs are two-column grids of
   connection details, and the tab strip already frames the page. */
.settings-panel { max-width: 860px; }

/* One settings section = one card = one form. */
.settings-section {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px 18px;
    margin-bottom: 18px;
    scroll-margin-top: 16px;
}
.settings-section > .section-heading:first-of-type { margin-top: 0; }
.settings-section h3.section-heading { font-size: 12px; margin-top: 20px; color: var(--text-secondary); }
.settings-section .error-banner { max-width: 680px; }

.settings-section-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: var(--border-w) solid var(--border);
}
.settings-unsaved { color: var(--accent); font-size: 12px; }
.settings-saved { color: var(--severity-low); font-size: 13px; font-weight: 600; }
.settings-notsaved { color: var(--error-fg); font-size: 13px; }

/* Lead-in paragraph under a settings section heading. */
.settings-intro {
    margin: -4px 0 10px;
    max-width: 680px;
}

/* The first heading of a tab panel sits right under the tab strip. */
.settings-panel > .settings-section:first-child,
.settings-panel > .section-heading:first-child { margin-top: 4px; }

/* Files tab — toolbar + split layout */
.files-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.files-toolbar .btn-sm {
    margin-left: auto;
    padding: 6px 14px;
    font-size: 11px;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 11px;
}

.files-layout {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 2fr;
    gap: 16px;
    min-height: 480px;
}

@media (max-width: 920px) {
    .files-layout { grid-template-columns: 1fr; }
}

/* File tree */
.file-tree {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    overflow-y: auto;
    max-height: 720px;
}

.tree-dir-header {
    color: var(--accent);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.05em;
    margin: 10px 0 4px;
    padding-bottom: 4px;
    border-bottom: var(--border-w) dashed var(--border);
}

.tree-dir-header:first-child { margin-top: 0; }

.tree-file {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 4px 0 4px 14px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.tree-file.root { padding-left: 0; }
.tree-file:hover { color: var(--text-primary); }

.tree-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-size {
    font-family: var(--font-mono);
    font-size: 10px;
    text-align: right;
    min-width: 56px;
}

.tree-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.action-link {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 3px;
    border: var(--border-w) solid transparent;
}

.action-link:hover {
    color: var(--accent);
    text-decoration: none;
    background: var(--card-hover);
}

/* File viewer */
.file-viewer {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.file-viewer-empty {
    padding: 40px 24px;
    text-align: center;
}

.file-viewer-empty p { font-size: 12px; margin-top: 8px; }
.file-viewer-empty code {
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
}

.file-viewer-loaded {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.file-viewer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: var(--border-w) solid var(--border);
    background: var(--panel);
}

.file-viewer-header .path {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.file-viewer-actions { margin-left: auto; }

.file-content {
    flex: 1;
    margin: 0;
    padding: 14px 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg);
    overflow: auto;
    max-height: 720px;
    white-space: pre;
    line-height: 1.5;
}

/* Bundle Explorer page */
.explorer-layout {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) 2fr;
    gap: 16px;
    min-height: 540px;
    align-items: start;
}

@media (max-width: 1100px) {
    .explorer-layout { grid-template-columns: 1fr; }
}

.explorer-tree-pane {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.explorer-tenant {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.explorer-tenant-header,
.explorer-month-header,
.explorer-bundle-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 120ms ease;
    flex-wrap: wrap;
}

.explorer-tenant-header:hover,
.explorer-month-header:hover,
.explorer-bundle-header:hover { background: var(--card-hover); }

.caret {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    width: 12px;
    flex-shrink: 0;
}

.explorer-months {
    border-top: var(--border-w) solid var(--border);
    padding: 4px 0;
}

.explorer-month {
    border-top: var(--border-w) solid var(--border);
}

.explorer-month:first-child { border-top: none; }

.explorer-month-header {
    padding-left: 28px;
    font-size: 12px;
}

.month-label {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 12px;
}

.explorer-bundles {
    background: var(--bg);
}

.explorer-bundle {
    border-top: var(--border-w) solid var(--border);
}

.explorer-bundle-header {
    padding-left: 44px;
    font-size: 12px;
}

.explorer-bundle-header .ticket {
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.explorer-bundle-header .action-link { margin-left: auto; }

.explorer-bundle-body {
    padding: 12px 18px 14px 44px;
    background: var(--panel);
    border-top: var(--border-w) solid var(--border);
}

.explorer-bundle-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.explorer-tree {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    max-height: 360px;
}

.explorer-empty-tenant {
    padding: 10px 14px 14px 28px;
}

.explorer-viewer {
    position: sticky;
    top: 16px;
    max-height: 80vh;
}

/* Re-analyze button on the analysis tab */
.reanalyze-form {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.reanalyze-form .muted { font-size: 11px; }

/* LLM I/O tab */
.llm-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.llm-card {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.llm-card.llm-error {
    border-color: var(--error-border);
}

.llm-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 8px;
    border-bottom: var(--border-w) solid var(--border);
}

.provider-pill {
    font-size: 10px;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: 3px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.llm-section {
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.llm-section > summary {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: center;
    user-select: none;
    list-style: none;
}

.llm-section > summary::-webkit-details-marker { display: none; }

.llm-section > summary::before {
    content: "▸";
    font-family: var(--font-mono);
    color: var(--text-muted);
    width: 12px;
}

.llm-section[open] > summary::before { content: "▾"; }

.llm-section > summary:hover { background: var(--card-hover); }

.llm-section .file-content {
    border-top: var(--border-w) solid var(--border);
    max-height: 480px;
    margin: 0;
}

.llm-error-block {
    background: var(--error-bg);
    border: var(--border-w) solid var(--error-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.llm-error-block .file-content {
    background: transparent;
    color: var(--error-fg);
    padding: 6px 0 0;
    margin: 0;
    max-height: 200px;
}

/* Chat tab */
.chat-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-messages {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    max-height: 580px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-empty {
    text-align: center;
    padding: 32px 16px;
}

.chat-message {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 85%;
}

.chat-message.chat-user {
    align-self: flex-end;
    align-items: flex-end;
}

.chat-message.chat-assistant {
    align-self: flex-start;
    align-items: flex-start;
}

.chat-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    /* One line at any width. Everything here is fixed-size except the model
       name, which is long and varies by provider — it absorbs the squeeze by
       truncating (full name on hover) so a narrow chat drawer never wraps the
       line into two. */
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
}
.chat-meta > * { flex: 0 0 auto; }
.chat-meta .chat-meta-model {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-bubble {
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    line-height: 1.55;
    font-size: 13px;
    color: var(--text-secondary);
}

.chat-message.chat-user .chat-bubble {
    background: var(--card-selected);
    border-color: var(--accent);
    color: var(--text-primary);
}

.chat-message.chat-error .chat-bubble {
    border-color: var(--error-border);
}

.chat-content {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--font-sans);
}

/* Markdown-rendered assistant content — drop pre-wrap (markdown handles
   paragraphs) and style common GFM elements inline with the chat bubble. */
.chat-content.chat-markdown {
    white-space: normal;
}

.chat-markdown > *:first-child { margin-top: 0; }
.chat-markdown > *:last-child  { margin-bottom: 0; }

.chat-markdown p {
    margin: 0 0 10px;
    line-height: 1.55;
}

.chat-markdown h1,
.chat-markdown h2,
.chat-markdown h3,
.chat-markdown h4 {
    color: var(--text-primary);
    margin: 14px 0 6px;
    line-height: 1.3;
    font-weight: 700;
}
.chat-markdown h1 { font-size: 16px; }
.chat-markdown h2 { font-size: 14px; }
.chat-markdown h3 { font-size: 13px; letter-spacing: 0.02em; }
.chat-markdown h4 { font-size: 12px; }

.chat-markdown ul,
.chat-markdown ol {
    margin: 4px 0 10px;
    padding-left: 22px;
}

.chat-markdown li { margin: 3px 0; }
.chat-markdown li > p { margin: 0; }

.chat-markdown strong { color: var(--text-primary); font-weight: 700; }
.chat-markdown em { color: var(--text-primary); }

.chat-markdown a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.chat-markdown code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--text-primary);
}

.chat-markdown pre {
    background: var(--bg);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin: 8px 0;
    overflow-x: auto;
}

.chat-markdown pre code {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre;
}

.chat-markdown blockquote {
    margin: 8px 0;
    padding: 4px 12px;
    border-left: 3px solid var(--accent);
    background: var(--panel);
    color: var(--text-secondary);
}

.chat-markdown hr {
    border: 0;
    border-top: var(--border-w) solid var(--border);
    margin: 12px 0;
}

.chat-markdown table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin: 8px 0;
}

.chat-markdown th,
.chat-markdown td {
    text-align: left;
    padding: 5px 8px;
    border-bottom: var(--border-w) solid var(--border);
}

.chat-markdown th {
    background: var(--panel);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.05em;
    font-size: 11px;
}

.chat-markdown del {
    text-decoration: line-through;
    color: var(--text-muted);
}

.chat-error-block {
    color: var(--error-fg);
    font-family: var(--font-mono);
    font-size: 12px;
    white-space: pre-wrap;
}

.chat-form {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.chat-input {
    flex: 1;
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    padding: 8px 10px;
    line-height: 1.5;
    resize: vertical;
    min-height: 56px;
}

.chat-input:focus { outline: none; border-color: var(--accent); }
.chat-input::placeholder { color: var(--text-muted); }

.chat-send {
    align-self: stretch;
    min-width: 96px;
}

.chat-busy.htmx-indicator { display: none; }
.chat-busy.htmx-indicator.htmx-request { display: inline-block; }
form.chat-form.htmx-request .chat-busy { display: inline-block; }

.htmx-request .chat-send { opacity: 0.6; cursor: wait; }

/* ── Chat drawer (right-side dock, replaces the old Chat tab) ──
   Default behavior is a DOCK: when open, the app content shrinks (margin-right)
   so the drawer sits beside it instead of overlapping — good for widescreens.
   Width is user-resizable via the left-edge handle and persisted (JS sets
   --chat-drawer-width). On narrow screens it falls back to a full-width overlay. */
:root { --chat-drawer-width: 460px; }

.app { transition: margin-right 240ms ease, padding-left 200ms ease; }
body.chat-open .app { margin-right: var(--chat-drawer-width); }
/* During a drag, drop transitions so the panel tracks the cursor 1:1. */
body.chat-resizing { user-select: none; cursor: ew-resize; }
body.chat-resizing .app,
body.chat-resizing .chat-drawer { transition: none; }

.chat-toggle {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.28);
}
.chat-toggle:hover { filter: brightness(1.1); }
.chat-toggle-icon { font-size: 14px; line-height: 1; }

.chat-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: var(--chat-drawer-width);
    background: var(--panel);
    border-left: var(--border-w) solid var(--border);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    transition: transform 240ms ease;
    z-index: 70;
    display: flex;
    flex-direction: column;
}
body.chat-open .chat-drawer { transform: none; }

/* Left-edge drag handle to resize the drawer width. */
.chat-drawer-resize {
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    cursor: ew-resize;
    background: transparent;
    z-index: 2;
}
.chat-drawer-resize:hover,
body.chat-resizing .chat-drawer-resize { background: var(--accent); opacity: 0.55; }

.chat-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: var(--border-w) solid var(--border);
    flex: 0 0 auto;
}
.chat-drawer-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.chat-drawer-close:hover { color: var(--text-primary); }

.chat-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    overflow: hidden;
}
.chat-drawer-empty { padding: 24px 4px; }

/* In the drawer the layout fills the height: messages scroll, form pinned. */
.chat-drawer-layout {
    flex: 1 1 auto;
    min-height: 0;
}
.chat-drawer-layout .chat-messages {
    flex: 1 1 auto;
    max-height: none;   /* override the full-page 580px cap */
    min-height: 0;
}
.chat-drawer-layout .chat-form {
    flex-direction: column;
    align-items: stretch;   /* override base flex-start so the textarea fills the drawer width */
    flex: 0 0 auto;
}
.chat-drawer-layout .chat-input {
    flex: 0 0 auto;         /* keep ~2 rows; don't grow vertically */
    width: 100%;            /* span the drawer; tracks the resizable width automatically */
}
.chat-drawer-layout .chat-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.chat-drawer-layout .chat-send { align-self: auto; }

/* Narrow screens: don't crush the content — overlay instead of dock. */
@media (max-width: 900px) {
    body.chat-open .app { margin-right: 0; }
    .chat-drawer { width: min(var(--chat-drawer-width), 100vw); }
}
@media (max-width: 520px) {
    .chat-drawer { width: 100vw; }
    .chat-drawer-resize { display: none; }
}

/* ── Event-log table viewer (EventLog_<channel>.json) ── */
.evt-table {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.evt-head,
.evt-summary {
    display: grid;
    grid-template-columns: 168px 96px 70px minmax(110px, 1fr) minmax(160px, 2fr);
    gap: 10px;
    align-items: center;
    padding: 7px 12px;
}
.evt-head {
    background: var(--panel);
    border-bottom: var(--border-w) solid var(--border);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    position: sticky;
    top: 0;
    z-index: 1;
}
.evt-row {
    border-bottom: var(--border-w) solid var(--border);
    border-left: 3px solid transparent;
}
.evt-row:last-child { border-bottom: none; }
.evt-summary { cursor: pointer; list-style: none; }
.evt-summary::-webkit-details-marker { display: none; }
.evt-summary::marker { content: ""; }
.evt-summary:hover { background: var(--panel); }
.evt-row[open] { background: var(--panel); }
.evt-row[open] > .evt-summary { border-bottom: var(--border-w) dashed var(--border); }

.evt-row.evt-critical { border-left-color: var(--severity-critical); }
.evt-row.evt-error    { border-left-color: var(--severity-high); }
.evt-row.evt-warning  { border-left-color: var(--severity-medium); }

.evt-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--card);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.evt-badge-critical { color: var(--severity-critical); }
.evt-badge-error    { color: var(--severity-high); }
.evt-badge-warning  { color: var(--severity-medium); }

.evt-time, .evt-id { white-space: nowrap; }
.evt-source, .evt-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.evt-detail { padding: 8px 14px 14px; }
.evt-detail-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11px; }
.evt-message {
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin: 4px 0 0;
    max-height: 360px;
    overflow: auto;
    font-size: 12px;
}

/* ── Splunk log browser (bundle Logs tab) ── */
.log-controls { margin-bottom: 12px; }
/* Severity/order pills are real radios so the toolbar submits without JS; the
   chip itself carries the checked styling. */
.chip-radio { cursor: pointer; user-select: none; }
.chip-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-radio:has(input:checked) {
    background: var(--card-selected);
    color: var(--text-primary);
    border-color: var(--accent);
}
.chip-radio.chip-severity-critical:has(input:checked) { color: var(--severity-critical); border-color: var(--severity-critical); }
.chip-radio.chip-severity-medium:has(input:checked)   { color: var(--severity-medium);   border-color: var(--severity-medium); }

.log-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.log-stat {
    flex: 0 0 auto;
    min-width: 96px;
    padding: 8px 14px;
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius-sm);
}
.log-stat-span { flex: 1 1 260px; }
.log-stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.log-stat-value { font-size: 18px; font-weight: 600; margin-top: 2px; }
.log-stat-span .log-stat-value { font-size: 12px; font-weight: 500; }
.log-stat-error { border-left-color: var(--severity-critical); }
.log-stat-error .log-stat-value { color: var(--severity-critical); }
.log-stat-warning { border-left-color: var(--severity-medium); }
.log-stat-warning .log-stat-value { color: var(--severity-medium); }

.log-count-row { display: flex; gap: 6px; align-items: baseline; margin-bottom: 6px; }

.log-table {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.log-head,
.log-summary {
    display: grid;
    grid-template-columns: 168px minmax(90px, 130px) minmax(90px, 150px) minmax(240px, 3fr);
    gap: 10px;
    align-items: center;
    padding: 6px 12px;
}
.log-head {
    background: var(--panel);
    border-bottom: var(--border-w) solid var(--border);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    position: sticky;
    top: 0;
    z-index: 1;
}
.log-row {
    border-bottom: var(--border-w) solid var(--border);
    border-left: 3px solid transparent;
}
.log-row:last-child { border-bottom: none; }
.log-summary { cursor: pointer; list-style: none; }
.log-summary::-webkit-details-marker { display: none; }
.log-summary::marker { content: ""; }
.log-summary:hover { background: var(--panel); }
.log-row[open] { background: var(--panel); }
.log-row[open] > .log-summary { border-bottom: var(--border-w) dashed var(--border); }
.log-row.log-error   { border-left-color: var(--severity-critical); }
.log-row.log-warning { border-left-color: var(--severity-medium); }

.log-time { white-space: nowrap; color: var(--text-muted); }
.log-index, .log-host, .log-message {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.log-hit {
    background: var(--accent);
    color: #FFFFFF;
    border-radius: 2px;
    padding: 0 1px;
}

.log-detail { padding: 10px 14px 14px; }
.log-raw {
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin: 4px 0 0;
    max-height: 360px;
    overflow: auto;
    font-size: 12px;
}
.log-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 4px;
}
.log-field {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    max-width: 100%;
    padding: 2px 8px;
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 11px;
}
.log-field-key {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.log-field-val { word-break: break-all; }
.log-internal { margin-top: 10px; }
.log-internal > summary { cursor: pointer; color: var(--text-muted); }

.log-pager {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
.log-pager .btn[disabled] { opacity: 0.45; cursor: default; }

@media (max-width: 900px) {
    .log-head, .log-summary { grid-template-columns: 150px minmax(180px, 1fr); }
    .log-head > span:nth-child(2), .log-head > span:nth-child(3),
    .log-summary > .log-index, .log-summary > .log-host { display: none; }
}

/* ── Wiki browser (/wiki) ── */
.wiki-layout {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
.wiki-sidebar {
    position: sticky;
    top: 14px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    font-size: 12px;
}
.wiki-group { margin-bottom: 16px; }
.wiki-group-label { margin-bottom: 6px; }
.wiki-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

/* Curated collapsible tree (from index.md): sections → subsections → links. */
.wiki-sec { margin-bottom: 4px; }
.wiki-sec[open] { margin-bottom: 10px; }
.wiki-sec-label {
    cursor: pointer;
    padding: 4px 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    user-select: none;
}
.wiki-subsec { margin: 2px 0 2px 4px; }
.wiki-subsec-label {
    cursor: pointer;
    padding: 3px 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    user-select: none;
}
.wiki-sec-label:hover, .wiki-subsec-label:hover { color: var(--text-primary); }
.wiki-sec ul, .wiki-subsec ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0 14px;   /* indent children under their section/subsection */
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.wiki-link {
    display: block;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
}
.wiki-link:hover { color: var(--text-primary); background: var(--panel); text-decoration: none; }
.wiki-link.active { color: var(--text-primary); background: var(--panel); border-left-color: var(--accent); }

/* Rendered markdown prose */
.wiki-content { padding: 22px 26px; max-width: 900px; overflow-wrap: anywhere; }
.wiki-content > :first-child { margin-top: 0; }
.wiki-content h1, .wiki-content h2, .wiki-content h3, .wiki-content h4 {
    line-height: 1.25; margin: 1.4em 0 0.5em;
}
.wiki-content h1 { font-size: 22px; }
.wiki-content h2 { font-size: 18px; padding-bottom: 4px; border-bottom: var(--border-w) solid var(--border); }
.wiki-content h3 { font-size: 15px; }
.wiki-content h4 { font-size: 13px; }
.wiki-content p, .wiki-content li { line-height: 1.6; }
.wiki-content ul, .wiki-content ol { padding-left: 22px; }
.wiki-content li { margin: 3px 0; }
.wiki-content a { color: var(--accent); }
.wiki-content code {
    font-family: var(--font-mono); font-size: 0.9em;
    background: var(--panel); border: var(--border-w) solid var(--border);
    border-radius: 4px; padding: 1px 5px;
}
.wiki-content pre {
    background: var(--panel); border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm); padding: 12px 14px; overflow-x: auto;
}
.wiki-content pre code { background: none; border: none; padding: 0; }
.wiki-content blockquote {
    margin: 12px 0; padding: 6px 14px; border-left: 3px solid var(--accent);
    background: var(--panel); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-muted);
}
.wiki-content table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 12px; }
.wiki-content th, .wiki-content td { border: var(--border-w) solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
.wiki-content th { background: var(--panel); }
/* The first column is almost always a short key/label (Label, Field, Component,
   …). Don't let the wide prose columns squeeze it into ugly wraps — keep it on
   one line; the remaining columns absorb the width and wrap their long text. */
.wiki-content th:first-child, .wiki-content td:first-child { white-space: nowrap; }
/* Very wide tables scroll horizontally instead of squishing every column. */
.wiki-content table { display: block; overflow-x: auto; }
.wiki-content .mermaid { margin: 14px 0; text-align: center; background: var(--panel); border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); padding: 12px; }

@media (max-width: 860px) {
    .wiki-layout { grid-template-columns: 1fr; }
    .wiki-sidebar { position: static; max-height: none; }
}

/* Comments (Jira-style — used on bundle detail and tenant detail) */
.section-heading {
    font-size: 13px;
    font-weight: 700;
    margin: 28px 0 10px;
    color: var(--text-primary);
    letter-spacing: 0.05em;
}

.comments-section {
    margin-top: 28px;
    border-top: var(--border-w) solid var(--border);
    padding-top: 16px;
}

.comments-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.comments-header .section-heading { margin: 0; }

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.comment {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
}

.comment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
    font-size: 11px;
}

.comment-author {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 12px;
}

.comment-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.mention {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    padding: 0 4px;
    border-radius: 3px;
    font-weight: 600;
}

.comments-empty { padding: 8px 0 14px; }

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-input {
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    padding: 10px 12px;
    line-height: 1.55;
    resize: vertical;
    min-height: 78px;
}

.comment-input:focus { outline: none; border-color: var(--accent); }
.comment-input::placeholder { color: var(--text-muted); }

.comment-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comment-form-actions .btn { margin-left: auto; }

/* Tenant pages — form + nav improvements */
.tenant-form {
    max-width: 560px;
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

/* Per-tenant Collector build card on the tenant detail page */
.build-card {
    background: var(--card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 24px;
}

.build-cmd-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin: 6px 0 12px;
}

.build-cmd {
    flex: 1;
    background: var(--bg);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-all;
}

.build-cmd-row .btn {
    align-self: stretch;
    min-width: 70px;
}

button[data-copied] { color: var(--severity-low); }

.build-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 6px 16px;
    padding: 8px 0;
    border-top: var(--border-w) dashed var(--border);
}

.build-meta .label-caps { margin-right: 6px; }
.build-meta code {
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
}

/* ── Multi-file correlated analysis ─────────────────────────────────── */

.root-cause {
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--panel);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
}

.root-cause p {
    margin: 4px 0 0;
}

.submission-note {
    border-left: 3px solid var(--accent);
}

.submission-note-text {
    margin: 6px 0 8px;
    white-space: pre-wrap;
    word-break: break-word;
}

.correlated-issues {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.correlated-issue {
    padding: 16px 18px;
    border-left-width: 3px;
    border-left-style: solid;
}

.correlated-issue.severity-critical { border-left-color: var(--severity-critical); }
.correlated-issue.severity-high     { border-left-color: var(--severity-high); }
.correlated-issue.severity-medium   { border-left-color: var(--severity-medium); }
.correlated-issue.severity-low      { border-left-color: var(--severity-low); }

.correlated-issue-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.correlated-issue-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
}

.correlated-issue-description {
    margin: 0 0 12px;
    color: var(--text-primary);
}

.correlation-explanation,
.correlated-issue .impact {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--panel);
    border-radius: var(--radius-sm);
}

.correlation-explanation p,
.correlated-issue .impact p {
    margin: 4px 0 0;
}

.correlated-issue .fix-steps {
    margin-top: 12px;
}

.correlated-issue .fix-steps ol {
    list-style: none;
    padding: 0;
    margin: 6px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.correlated-issue .fix-steps li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.correlated-issue .fix-meta {
    margin-top: 8px;
}

.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.affected-components {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 4px;
}

.component-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Component health table */

.component-health {
    margin-top: 24px;
}

.component-health-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.component-health-table th,
.component-health-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: var(--border-w) solid var(--border);
    vertical-align: top;
}

.component-health-table th {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}

.component-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    letter-spacing: 0.12em;
    font-weight: 600;
}

.component-status-healthy  { background: rgba(74, 222, 128, 0.12); color: var(--severity-low); }
.component-status-warning  { background: rgba(245, 196, 0, 0.14);  color: var(--severity-medium); }
.component-status-degraded { background: rgba(255, 122, 0, 0.14);  color: var(--severity-high); }
.component-status-critical { background: rgba(239, 68, 68, 0.14);  color: var(--severity-critical); }

/* Missing-items manifest card */

.missing-items {
    margin-top: 24px;
}

.missing-items-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.missing-items-table {
    width: 100%;
    border-collapse: collapse;
}

.missing-items-table th,
.missing-items-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: var(--border-w) solid var(--border);
    vertical-align: top;
    font-size: 13px;
}

.missing-items-table th {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}

.missing-items-table code {
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
}

.missing-reason {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 9px;
    letter-spacing: 0.12em;
    font-weight: 600;
    border: var(--border-w) solid var(--border);
    background: var(--panel);
    color: var(--text-muted);
}

.missing-reason-not_present  { color: var(--text-muted); }
.missing-reason-access_denied { color: var(--severity-high); border-color: var(--severity-high); }
.missing-reason-timed_out    { color: var(--severity-medium); border-color: var(--severity-medium); }
.missing-reason-parse_error  { color: var(--severity-critical); border-color: var(--severity-critical); }

/* Tenant archive */
.archived-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    background: transparent;
    vertical-align: middle;
}

.archived-row td {
    opacity: 0.55;
}

.archive-banner {
    border: 1px solid var(--severity-critical);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: var(--card);
    padding: 12px 14px;
    margin: 0 0 18px;
}

.archive-banner-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.archive-banner-head .label-caps {
    color: var(--severity-critical);
}

.archive-banner-reason {
    margin: 4px 0 0;
    color: var(--text-primary);
    font-size: 13px;
    white-space: pre-wrap;
}

.archive-banner-note {
    margin: 8px 0 0;
}

.danger-heading {
    color: var(--severity-critical);
    margin-top: 28px;
}

.danger-card {
    border: 1px solid var(--severity-critical);
    border-radius: var(--radius-sm);
    background: var(--card);
    padding: 10px 14px;
    margin-top: 8px;
}

.danger-card > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--severity-critical);
    letter-spacing: 0.05em;
    list-style: none;
    user-select: none;
}

.danger-card > summary::-webkit-details-marker { display: none; }

.btn-danger {
    background: var(--severity-critical);
    border-color: var(--severity-critical);
    color: #FFFFFF;
}

/* ── Manual & ephemeral analysis ─────────────────────────────────────────── */

/* Bundle tools: scenario correction + add-files (on any retained bundle) */
.bundle-tools { display: flex; flex-direction: column; gap: 12px; }
.bundle-tools-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.scenario-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.scenario-form .input { width: auto; min-width: 180px; }
/* Scenario + machine-type picker (partials/scenario_type_picker.html). */
.scenario-type-picker { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.scenario-type-picker .stp-field { display: inline-flex; gap: 8px; align-items: center; }
.scenario-type-picker .input { width: auto; min-width: 180px; }
.scenario-type-picker .stp-desc { flex-basis: 100%; margin: 0; }
.scenario-type-picker.stacked { align-items: flex-end; }
.scenario-type-picker.stacked .stp-field { flex-direction: column; align-items: flex-start; gap: 2px; }
.scenario-type-picker [hidden] { display: none !important; }
/* Inside the bundle page's form the fields sit beside the submit button and the
   type's description takes the line below them. */
.scenario-form > .scenario-type-picker { display: contents; }
.scenario-form .stp-desc { order: 1; }
.scenario-detected { margin: 6px 0 0; }
.add-files-details > summary {
    cursor: pointer;
    list-style: none;
    padding: 6px 0;
    display: inline-flex;
    gap: 8px;
    align-items: center;
}
.add-files-details > summary::-webkit-details-marker { display: none; }
.add-files-details > summary::before { content: "▸"; color: var(--text-muted); }
.add-files-details[open] > summary::before { content: "▾"; }

.upload-card-inner { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.upload-card-inner .upload-ok { color: var(--severity-low); }
.upload-file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; }
.upload-file-list li .mono { overflow-wrap: anywhere; }
.upload-file-list li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 8px; background: var(--panel); border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); }
.upload-form, .upload-analyze-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.upload-form .input { width: auto; flex: 1 1 240px; }

/* Recommended additional data to collect */
.suggested-data-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.suggested-data-list li { padding: 8px 10px; background: var(--panel); border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); }
.suggested-data-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.suggested-item { font-weight: 600; }
.suggested-why { margin-top: 2px; }

/* Ephemeral (no-retention) banner */
.ephemeral-banner { border-left: 3px solid var(--severity-medium); }

/* Generic data table (feedback list, metric tables). Pin the base size —
   unsized cells (title links, priority) otherwise inherit the 16px browser
   default and tower over the 11px .small cells beside them. */
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th, .data-table td { text-align: left; padding: 8px 10px; border-bottom: var(--border-w) solid var(--border); }
.data-table th { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }

/* ── Analysis progress (in-progress status card) ─────────────────────────── */
.status-head { display: flex; align-items: center; gap: 10px; }
.progress-message { margin: 8px 0 4px; font-weight: 600; }
.progress-spinner {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    display: inline-block;
    animation: dz-spin 0.8s linear infinite;
}
@keyframes dz-spin { to { transform: rotate(360deg); } }

/* ── Settings page ───────────────────────────────────────────────────────── */
.ok-banner {
    padding: 10px 14px;
    margin-bottom: 16px;
    border: var(--border-w) solid var(--severity-low);
    border-radius: var(--radius-sm);
    color: var(--severity-low);
    background: color-mix(in srgb, var(--severity-low) 10%, transparent);
}
.test-result { font-size: 13px; }
.test-ok  { color: var(--severity-low); }
.test-err { color: var(--error-fg); }

/* Upload error (size violations surfaced in the add-files card) */
.upload-err { color: var(--error-fg); font-weight: 600; }

/* Disabled buttons (data-busy submit hook, hx-disabled-elt) read as inert. */
.btn:disabled { opacity: 0.55; cursor: default; pointer-events: none; }

/* Frame Session tool — capture-source cards. Overwatch spans the row; the
   Splunk/Gateway placeholders sit beside each other, dimmed until wired. */
.source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; }
.source-grid .source-span { grid-column: 1 / -1; }
.source-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.source-chip {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 3px 8px;
    border-radius: 4px;
    border: var(--border-w) solid var(--border);
    background: var(--panel);
    white-space: nowrap;
}
.source-chip.chip-live    { color: var(--severity-low); border-color: var(--severity-low); }
.source-chip.chip-pending { color: var(--severity-medium); border-color: var(--severity-medium); }
.source-chip.chip-off     { color: var(--text-muted); }
.source-placeholder { border-style: dashed; }
.source-placeholder .input:disabled, .source-placeholder .btn:disabled { opacity: 0.55; }

/* Lookup form (Frame session) — each field is a label/input/hint column and the
   row top-aligns, so inputs sit on one line regardless of how far the hint
   text wraps; the action column pads down to meet the input row. */
.lookup-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.lookup-field {
    flex: 1;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* The reported-issue editor on a capture: a plain disclosure, so the text
   itself leads and the form only appears when somebody wants to change it. */
.issue-editor { margin-top: 12px; }
.issue-editor > summary {
    cursor: pointer;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    user-select: none;
}
.issue-editor > summary:hover { color: var(--accent); }
.issue-editor textarea.input { resize: vertical; }

/* A paragraph of reported-issue context doesn't belong beside a one-line
   session ID — it takes its own full-width row in the same flex form. */
.lookup-field-wide { flex-basis: 100%; }
.lookup-field-wide textarea.input { resize: vertical; min-height: 68px; }

.lookup-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 22px;
}

/* Inline busy indicator — appended by the data-busy submit hook in base.html,
   and reusable as an htmx-indicator next to hx-post buttons. */
.busy-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Large-bundle compaction notice + upload progress ────────────────────── */
.compacted-notice { border-left: 3px solid var(--severity-medium); }
.upload-progress-wrap { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.upload-progress { width: 240px; height: 10px; }

/* ── Feedback ticket status pills ────────────────────────────────────────── */
.status-pill.ticket-status-open      { color: var(--severity-medium); border-color: var(--severity-medium); }
.status-pill.ticket-status-in_review { color: var(--level-info); border-color: var(--level-info); }
.status-pill.ticket-status-planned   { color: var(--accent); border-color: var(--accent); }
.status-pill.ticket-status-done      { color: var(--severity-low); border-color: var(--severity-low); }
.status-pill.ticket-status-declined  { color: var(--text-muted); border-color: var(--border); }

/* ── Dashboard ───────────────────────────────────────────────────────────── */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.dash-grid > .card { min-width: 0; }
.dash-card { padding: 18px 20px 12px; }

/* Row lists inside the dashboard cards. Each row is a single link laid out as
   flex lines so long names ellipsize instead of overflowing the card, with the
   signature 3px severity accent on the left edge. */
.dash-list { margin-top: 10px; }
.dash-row {
    display: block;
    min-width: 0;
    padding: 9px 2px 9px 10px;
    border-left: 3px solid var(--border);
    border-bottom: var(--border-w) solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: background 120ms ease, border-bottom-color 120ms ease;
}
.dash-row:last-child { border-bottom: none; }
.dash-row:hover { background: var(--card-hover); text-decoration: none; }
.dash-row.sev-critical { border-left-color: var(--severity-critical); }
.dash-row.sev-high     { border-left-color: var(--severity-high); }
.dash-row.sev-medium   { border-left-color: var(--severity-medium); }
.dash-row.sev-low      { border-left-color: var(--severity-low); }

.dash-row-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.dash-row-line + .dash-row-line { margin-top: 3px; }
.dash-row-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--link);
}
.dash-row-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.dash-row-sub .tenant-pill {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-dot { flex-shrink: 0; }
.dash-sev {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
}
.dash-row .status-pill { flex-shrink: 0; white-space: nowrap; }

/* Recently-viewed rows: a fixed-width type chip on the left so the labels line
   up down the card whatever mix of pages the history holds. */
.recent-type {
    flex-shrink: 0;
    width: 82px;            /* fixed, not min — so every label starts at the same x */
    text-align: center;
    overflow: hidden;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 2px 4px;
    border-radius: 4px;
    background: var(--panel);
    color: var(--text-muted);
    border: var(--border-w) solid var(--border);
}
.recent-when { flex-shrink: 0; }
/* Second line sits under the label, clear of the chip. */
.dash-row-line.recent-sub { padding-left: 92px; }

/* Case status pills (open exists via the feedback block; the rest were unstyled) */
.status-pill.ticket-status-in_progress { color: var(--accent); border-color: var(--accent); }
.status-pill.ticket-status-resolved    { color: var(--severity-low); border-color: var(--severity-low); }
.status-pill.ticket-status-closed      { color: var(--text-muted); border-color: var(--border); }

/* ── Agentic analysis live panel + transcript ───────────────────────────── */
/* The panel reuses .status-card, which is center-aligned for the tiny spinner
   card — force left alignment for the rich live content. */
#agentic-panel { text-align: left; }
#agentic-panel .status-head { justify-content: flex-start; }
#agentic-panel .progress-message { text-align: left; }
.ap-counters { margin-top: 8px; text-align: left; }
.ap-counters b { color: var(--text-primary); }
.ap-plan { margin: 6px 0 0; padding-left: 22px; text-align: left; }
.ap-plan li { margin: 2px 0; overflow-wrap: anywhere; }
.ap-plan li.done { color: var(--text-muted); text-decoration: line-through; }
.ap-plan li.current { color: var(--accent); font-weight: 600; }
.ap-think {
    font-family: var(--font-mono), monospace; font-size: 12px;
    color: var(--text-muted); text-align: left;
    white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
    margin: 6px 0; max-height: 120px; overflow: auto;
}
.ap-log {
    max-height: 360px; overflow: auto; margin: 4px 0 10px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 10px; text-align: left;
    font-family: var(--font-mono), monospace; font-size: 12px;
    white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}
.ap-log > div { padding: 1px 0; }
.ap-l-step { color: var(--accent); font-weight: 600; }
.ap-l-tool { color: var(--text-primary); }
.ap-l-think { color: var(--text-muted); }
.ap-l-result { color: var(--severity-low); font-weight: 600; }
.ap-l-err { color: var(--severity-high); }
.ap-l-plan { color: var(--text-muted); }

/* ── Live model-output panel (single-call AI runs) ───────────────────────── */
/* Shares .status-card, which centers its tiny spinner card — the streamed
   content needs to read left-aligned like the agentic panel does. */
.llm-stream-panel { text-align: left; }
.llm-stream-panel .status-head { justify-content: flex-start; }
.llm-stream-panel .progress-message { text-align: left; }
.llm-stream-panel .ls-counters { margin-top: 8px; }
.llm-stream-panel .ls-counters b { color: var(--text-primary); }
.ls-tool-line {
    font-family: var(--font-mono), monospace; font-size: 12px;
    color: var(--text-muted); text-align: left; padding: 1px 0;
}
.ls-tool-line.ls-tool-error { color: var(--severity-high); }

/* Streaming chat bubble — the placeholder the answer lands in before the
   persisted, markdown-rendered message swaps in over it. */
.chat-message.chat-streaming .chat-bubble { border-color: var(--accent); }
.chat-stream-text { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
/* The assistant's working (reasoning + lookups) — one collapsed line while it
   streams, expandable on demand, so the answer is what holds the screen. */
.chat-work { margin: 0 0 8px; }
.chat-work-summary {
    display: flex; align-items: baseline; gap: 6px; min-width: 0;
    cursor: pointer; list-style: none; user-select: none;
    font-size: 12px; color: var(--text-muted);
}
.chat-work-summary::-webkit-details-marker { display: none; }
.chat-work-summary::before { content: '▸'; font-size: 10px; flex: none; }
.chat-work[open] > .chat-work-summary::before { content: '▾'; }
.chat-work-summary:hover, .chat-work-summary:focus-visible { color: var(--text-primary); }
.chat-work-title { flex: none; }
.chat-work-count { flex: none; }
.chat-work-now {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-mono), monospace; font-size: 11px; opacity: 0.8;
}
.chat-work-body {
    margin-top: 6px; max-height: 240px; overflow: auto;
    border-left: 2px solid var(--border); padding-left: 8px;
}
.chat-think {
    font-family: var(--font-mono), monospace; font-size: 11px;
    color: var(--text-muted); white-space: pre-wrap; word-break: break-word;
    margin: 0 0 6px; max-height: 120px; overflow: auto;
    border-left: 2px solid var(--border); padding-left: 8px;
}
.chat-work-body .chat-think { max-height: none; overflow: visible; border-left: 0; padding-left: 0; }
.chat-tool-line {
    font-family: var(--font-mono), monospace; font-size: 11px;
    color: var(--text-muted); padding: 1px 0;
}
.chat-tool-line.chat-tool-error { color: var(--severity-high); }

/* ── Product documentation site (/docs) ──────────────────────────────────────
   The human-facing manual. Deliberately its own component set (not the /wiki
   browser's): a persistent section tree, a reading column, and an on-page
   contents rail. Every color reads from a token, so both themes come for free. */
.docs-body { max-width: 1340px; padding-top: 24px; }

.docs-layout {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr) 196px;
    gap: 28px;
    align-items: start;
}

/* Section tree */
.docs-sidebar {
    position: sticky;
    top: 14px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    font-size: 12px;
    padding-right: 4px;
    border-right: var(--border-w) solid var(--border);
}
.docs-brandline { padding: 0 0 12px; margin-bottom: 12px; border-bottom: var(--border-w) solid var(--border); }
.docs-home-link {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    text-decoration: none;
}
.docs-home-link:hover { color: var(--accent); text-decoration: none; }
.docs-home-link.active { color: var(--accent); }
.docs-brandline-sub {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--text-muted);
}
.docs-filter {
    width: 100%;
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 12px;
    padding: 6px 9px;
    margin-bottom: 14px;
}
.docs-filter::placeholder { color: var(--text-muted); }
.docs-filter:focus { outline: none; border-color: var(--accent); }

.docs-sec { margin-bottom: 4px; }
.docs-sec[open] { margin-bottom: 12px; }
.docs-sec-label {
    cursor: pointer;
    padding: 4px 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    user-select: none;
}
.docs-sec-label:hover { color: var(--text-primary); }
.docs-sec ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.docs-link {
    display: block;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    line-height: 1.35;
}
.docs-link:hover { color: var(--text-primary); background: var(--panel); text-decoration: none; }
.docs-link.active {
    color: var(--text-primary);
    background: var(--panel);
    border-left-color: var(--accent);
    font-weight: 600;
}
.docs-nav-empty { padding: 6px 8px; }
.docs-sidebar-foot {
    margin-top: 18px;
    padding-top: 10px;
    border-top: var(--border-w) solid var(--border);
    font-size: 11px;
}
.docs-sidebar-foot a { color: var(--text-muted); }
.docs-sidebar-foot a:hover { color: var(--accent); }

/* Reading column */
.docs-main { min-width: 0; padding-bottom: 40px; }
.docs-crumbs {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
}
.docs-crumbs a { color: var(--text-muted); }
.docs-crumbs a:hover { color: var(--accent); text-decoration: none; }
.docs-crumb-sep { padding: 0 6px; opacity: 0.6; }
.docs-crumb-current { color: var(--text-secondary); }

.docs-page-head { margin-bottom: 22px; }
.docs-eyebrow { color: var(--accent); margin-bottom: 6px; }
.docs-title { font-size: 26px; font-weight: 700; margin: 0; line-height: 1.2; }
.docs-summary {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 46em;
}

.docs-content { max-width: 46em; overflow-wrap: anywhere; font-size: 14px; }
.docs-content > :first-child { margin-top: 0; }
.docs-content h2, .docs-content h3, .docs-content h4 {
    line-height: 1.3;
    scroll-margin-top: 20px;
}
.docs-content h2 {
    font-size: 19px;
    margin: 2em 0 0.6em;
    padding-bottom: 6px;
    border-bottom: var(--border-w) solid var(--border);
}
.docs-content h3 { font-size: 15px; margin: 1.7em 0 0.5em; }
.docs-content h4 {
    font-size: 11px; margin: 1.5em 0 0.4em;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.docs-content p { line-height: 1.7; margin: 0.9em 0; }
.docs-content ul, .docs-content ol { padding-left: 22px; margin: 0.9em 0; }
.docs-content li { margin: 5px 0; line-height: 1.65; }
.docs-content a { color: var(--accent); }
.docs-content strong { color: var(--text-primary); font-weight: 600; }
.docs-content hr { border: none; border-top: var(--border-w) solid var(--border); margin: 2em 0; }
.docs-content code {
    font-family: var(--font-mono); font-size: 0.87em;
    background: var(--panel); border: var(--border-w) solid var(--border);
    border-radius: 4px; padding: 1px 5px;
}
.docs-content pre.doc-code {
    position: relative;
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    overflow-x: auto;
    font-size: 12.5px;
    line-height: 1.55;
}
.docs-content pre.doc-code[data-lang]::before {
    content: attr(data-lang);
    position: absolute;
    top: 0; right: 0;
    padding: 3px 8px;
    font-family: var(--font-sans);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-left: var(--border-w) solid var(--border);
    border-bottom: var(--border-w) solid var(--border);
    border-radius: 0 var(--radius-sm) 0 var(--radius-sm);
}
.docs-content pre.doc-code code { background: none; border: none; padding: 0; font-size: inherit; }
.docs-content table {
    border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 12.5px;
    display: block; overflow-x: auto;
}
.docs-content th, .docs-content td {
    border: var(--border-w) solid var(--border);
    padding: 7px 11px; text-align: left; vertical-align: top;
}
.docs-content th {
    background: var(--panel);
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary);
}
.docs-content td:first-child { white-space: nowrap; }

/* Callouts — a blockquote opening with **Note:** / **Warning:** / … */
.docs-content blockquote {
    margin: 1.2em 0; padding: 10px 16px;
    border-left: 3px solid var(--border);
    background: var(--panel);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
}
.docs-content blockquote p { margin: 0.4em 0; }
.docs-content blockquote > :first-child { margin-top: 0; }
.docs-content blockquote > :last-child { margin-bottom: 0; }
.docs-content .admonition-note { border-left-color: var(--accent); }
.docs-content .admonition-tip { border-left-color: var(--severity-low); }
.docs-content .admonition-important { border-left-color: var(--accent-strong); }
.docs-content .admonition-warning,
.docs-content .admonition-caution {
    border-left-color: var(--severity-high);
    background: var(--card-hover);
}
.docs-content .admonition strong:first-child { color: var(--text-primary); }

/* Section-overview child cards */
.docs-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin: 26px 0 0;
    max-width: 46em;
}
.docs-card {
    display: block;
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    padding: 12px 14px;
    text-decoration: none;
}
.docs-card:hover { border-color: var(--accent); background: var(--card-hover); text-decoration: none; }
.docs-card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.docs-card-sum { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }

/* Embedded video (```video``` blocks — analyzer/docs.py::render_video) */
.docs-video {
    margin: 18px 0 22px;
    max-width: 46em;
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    padding: 10px;
}
.docs-video video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--radius) - 2px);
    background: var(--bg);
}
.docs-video-meta { margin: 9px 4px 2px; font-size: 11.5px; color: var(--text-muted); }
.docs-video-meta code { font-size: 11px; }
.docs-video-chapters-label { color: var(--text-muted); margin: 14px 4px 6px; }
.docs-video-chapters {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 4px 10px;
}
.docs-video-chapters li { margin: 0; }
.docs-video-chapter {
    display: flex;
    gap: 10px;
    align-items: baseline;
    width: 100%;
    text-align: left;
    background: none;
    border: var(--border-w) solid transparent;
    border-radius: 6px;
    padding: 4px 6px;
    color: var(--text-primary);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}
.docs-video-chapter:hover,
.docs-video-chapter:focus-visible { border-color: var(--border); background: var(--card-hover); }
.docs-video-chapter.active { border-color: var(--accent); }
.docs-video-time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    min-width: 3.4em;
}
.docs-video-missing { padding: 18px 20px; border-style: dashed; }
.docs-video-missing .label-caps { color: var(--text-muted); margin-bottom: 6px; }
.docs-video-missing p { margin: 0; }

/* Prev / next */
.docs-pager {
    display: flex;
    gap: 12px;
    margin-top: 40px;
    padding-top: 18px;
    border-top: var(--border-w) solid var(--border);
    max-width: 46em;
}
.docs-pager-side { flex: 1; min-width: 0; }
.docs-pager-side.right { text-align: right; }
.docs-pager-link {
    display: inline-block;
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    text-decoration: none;
    max-width: 100%;
}
.docs-pager-link:hover { border-color: var(--accent); background: var(--card-hover); text-decoration: none; }
.docs-pager-link .label-caps { display: block; color: var(--text-muted); }
.docs-pager-title {
    display: block; margin-top: 3px;
    font-size: 13px; color: var(--text-primary); font-weight: 600;
}

/* On this page */
.docs-toc {
    position: sticky;
    top: 14px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    font-size: 11.5px;
}
.docs-toc-label { color: var(--text-muted); margin-bottom: 8px; }
.docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc li { margin: 0; }
.docs-toc a {
    display: block;
    padding: 3px 8px;
    color: var(--text-muted);
    border-left: 2px solid var(--border);
    text-decoration: none;
    line-height: 1.4;
}
.docs-toc a:hover { color: var(--text-primary); text-decoration: none; }
.docs-toc a.active { color: var(--accent); border-left-color: var(--accent); }
.docs-toc .docs-toc-l3 a { padding-left: 18px; font-size: 11px; }

@media (max-width: 1180px) {
    .docs-layout { grid-template-columns: 220px minmax(0, 1fr); }
    .docs-toc { display: none; }
}
@media (max-width: 860px) {
    .docs-layout { grid-template-columns: 1fr; }
    .docs-sidebar { position: static; max-height: none; border-right: none; }
}

/* ── Prompt management (/settings/prompts) ───────────────────────────────────
   The catalog of AI instructions and its editor. Card grid + a monospace
   editing surface; every colour reads from a token so both themes come free. */
.prompt-warning {
    max-width: 760px;
    margin: 0 0 20px;
    padding: 12px 14px;
    border: var(--border-w) solid var(--severity-medium);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--severity-medium) 8%, transparent);
}
.prompt-warning .label-caps { color: var(--severity-medium); }
.prompt-warning p { margin: 6px 0 0; font-size: 12px; color: var(--text-secondary); }

.prompt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.prompt-card {
    display: block;
    padding: 14px 16px;
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.prompt-card:hover { background: var(--card-hover); border-color: var(--accent); }
.prompt-card-schema { border-left: 3px solid var(--severity-medium); }

.prompt-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.prompt-card-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.prompt-card-desc {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.prompt-card-meta { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.prompt-card-foot {
    margin-top: 8px;
    padding-top: 8px;
    border-top: var(--border-w) solid var(--border);
}

.prompt-badge {
    flex: none;
    padding: 2px 8px;
    border: var(--border-w) solid var(--border);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.prompt-badge-edited { color: var(--accent); border-color: var(--accent); }

.prompt-tag {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--severity-medium);
    border: var(--border-w) solid var(--severity-medium);
    white-space: nowrap;
}
.prompt-req {
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 10px;
}

.prompt-editor-meta { margin-bottom: 6px; }
.prompt-textarea {
    width: 100%;
    max-width: 900px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.55;
    /* Soft wrap: long prompt lines stay readable without a horizontal scroll.
       `wrap="soft"` (the default) never inserts newlines into the submitted
       value, so the text round-trips byte-for-byte. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    resize: vertical;
}

/* An "activate" control that has to be a form button but must read as a link. */
.action-link-btn {
    background: none;
    border: none;
    padding: 0 0 0 6px;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
}
.action-link-btn:hover { color: var(--accent); }

/* ── Model pricing card (partials/model_prices.html) ─────────────────────── */
.price-card { margin-top: 6px; }
.price-card .price-gap {
    border: var(--border-w) solid var(--border);
    border-left: 3px solid var(--severity-medium);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--panel);
}
.price-card .price-actions { display: flex; gap: 6px; align-items: center; }
.price-card .price-form { margin-top: 4px; }
.price-missing {
    color: var(--severity-medium);
    text-decoration: none;
    border-bottom: 1px dotted var(--severity-medium);
}
.price-missing:hover { color: var(--severity-high); text-decoration: none; }

/* ── Frame Browser (partials/frame_browser_level.html) ───────────────────── */
/* Columns lay out in one row, but each level nests its child so a swap
   replaces everything deeper; `display: contents` keeps the nesting invisible
   to the flex row. */
.fb-columns { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.fb-level { display: contents; }
.fb-column {
    flex: 1 1 260px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fb-column-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* Sessions carry five columns of their own, so they wrap onto their own full
   width row under the three name-only levels rather than being squeezed. */
.fb-column-wide { flex: 1 1 100%; min-width: 100%; }
.fb-column-empty { color: var(--text-muted); }
.fb-column-error { border-left: 3px solid var(--severity-high); }
/* An automatic platform access request happened on the engineer's behalf —
   informational, not a warning, but never silent, so it takes primary text
   rather than the muted grey the rest of the column's asides use. */
.fb-access {
    margin: 0 0 8px;
    padding: 6px 8px;
    border-left: 3px solid var(--accent);
    background: var(--panel);
    color: var(--text-primary);
}
.fb-scroll { max-height: 420px; overflow-y: auto; }
.fb-list { list-style: none; margin: 0; padding: 0; }
.fb-list li[hidden] { display: none; }
.fb-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: var(--border-w) solid var(--border);
    padding: 7px 4px;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
}
.fb-item:hover { color: var(--accent); background: var(--panel); }
.fb-item-name { overflow-wrap: anywhere; }
.fb-sessions th[data-fb-sort] { cursor: pointer; user-select: none; }
.fb-sessions th[data-fb-sort]:hover { color: var(--accent); }
.fb-sessions tr[hidden] { display: none; }
.fb-getinfo { margin: 0; }

/* ── Zendesk ────────────────────────────────────────────────────────────────
   The ticket card and the customer's organization link. Every colour reads a
   token, so both themes come out right without a second set of rules. */
.zendesk-card { border-left: 3px solid var(--accent); }
.ok-note { color: var(--severity-low); font-weight: 600; margin: 6px 0 0; }
.zendesk-subject {
    margin: 8px 0 2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.zendesk-meta { margin: 0 0 8px; }
.zendesk-body { margin-top: 8px; }
.zendesk-body > summary { cursor: pointer; color: var(--text-muted); }
.zendesk-body > summary:hover { color: var(--accent); }
.zendesk-text {
    margin: 6px 0 0;
    padding: 8px 10px;
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 320px;
    overflow-y: auto;
}
.zendesk-comments { list-style: none; margin: 8px 0 0; padding: 0; }
.zendesk-comments > li {
    padding: 8px 0;
    border-top: var(--border-w) solid var(--border);
}
.zendesk-comments > li:first-child { border-top: none; }
.zendesk-author { font-weight: 600; color: var(--text-primary); margin-right: 6px; }
.zendesk-org-tickets { margin-top: 10px; }
/* "Send summary to Zendesk" at the end of an analysis (bundle result, roll-up). */
.zendesk-send {
    margin: 10px 0;
    padding: 10px 12px;
    border: var(--border-w) solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--card);
}
.zendesk-send .ok-note, .zendesk-send .upload-err { margin: 0 0 8px; }
.zendesk-send-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.zendesk-send-row form { margin: 0; }
.zendesk-send-preview { margin-top: 8px; }
.zendesk-send-preview > summary { cursor: pointer; }
.zendesk-send-preview > summary:hover { color: var(--accent); }

/* Frame capture — the per-source collection card. One tile per source, accented
   by outcome, with a distinct treatment for artifacts a re-capture kept rather
   than refreshed (an expired Overwatch token is the ordinary case). Every
   colour reads from a token, so both themes follow automatically. */
.collection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.collection-source {
    border: var(--border-w) solid var(--border);
    border-left: 3px solid var(--text-muted);
    border-radius: 6px;
    background: var(--panel);
    padding: 10px 12px;
}
.collection-source .label-caps { margin-bottom: 4px; }
.collection-source strong { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; }
.collection-ok { border-left-color: var(--severity-low); }
.collection-error { border-left-color: var(--severity-critical); }
.collection-empty, .collection-skipped { border-left-color: var(--severity-medium); }
.collection-not_configured { border-left-color: var(--border); }
.collection-retained { border-left-style: dashed; }

/* Re-capture sits inside the collection card, collapsed until wanted — the
   same disclosure idiom the danger zone uses. */
.recapture > summary { cursor: pointer; color: var(--accent); }
.recapture[open] > summary { margin-bottom: 4px; }

/* Endpoint Agent — the fleet pages (devices list, device page, the per-tenant
   and per-customer cards). Every colour is a token so both themes follow. The
   online dot is the one new mark: a small filled circle, green when the device
   has reported within the offline window, muted otherwise. */
.online-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-muted);
    vertical-align: middle;
    flex-shrink: 0;
}
.online-dot.online { background: var(--severity-low); box-shadow: 0 0 0 3px color-mix(in srgb, var(--severity-low) 22%, transparent); }
.online-dot.offline { background: var(--text-muted); }
.stat-card.stat-online .stat-value { color: var(--severity-low); }
.status-pill.device-status-active   { color: var(--severity-low); border-color: var(--severity-low); }
.status-pill.device-status-disabled { color: var(--text-muted); border-color: var(--border); }
.status-pill.task-status-queued,
.status-pill.task-status-claimed    { color: var(--severity-medium); border-color: var(--severity-medium); }
.status-pill.task-status-running    { color: var(--accent); border-color: var(--accent); }
.status-pill.task-status-succeeded  { color: var(--severity-low); border-color: var(--severity-low); }
.status-pill.task-status-failed     { color: var(--error-fg); border-color: var(--error-border); }
.status-pill.task-status-cancelled,
.status-pill.task-status-expired    { color: var(--text-muted); border-color: var(--border); }
.device-table .col-online { width: 22px; }
.device-table .col-os { width: 90px; }
.device-table .col-version { width: 110px; }
.device-table .col-seen { width: 110px; white-space: nowrap; }
.device-table .col-warn, .device-table .col-tasks { width: 56px; }
.device-table .col-tenant { width: 240px; }
.chip.service-running { color: var(--severity-low); border-color: var(--severity-low); }
.chip.service-stopped { color: var(--severity-critical); border-color: var(--severity-critical); }
/* idle: stopped by design until a session starts; missing: not found under the names the agent knows — neither is a fault. */
.chip.service-idle, .chip.service-missing { color: var(--text-muted); border-color: var(--border); }
/* Frame publish readiness (device page card, list + tenant chips). Tokens only. */
.chip.frame-pub { font-size: 10px; letter-spacing: 0.1em; padding: 1px 7px; vertical-align: middle; }
.chip.frame-pub-ok { color: var(--severity-low); border-color: var(--severity-low); }
.chip.frame-pub-warn { color: var(--severity-high); border-color: var(--severity-high); }
.chip.frame-pub-off { color: var(--text-muted); border-color: var(--border); }
.frame-pub-card { border-left: 3px solid var(--border); }
.frame-pub-card-ok { border-left-color: var(--severity-low); }
.frame-pub-card-warn { border-left-color: var(--severity-high); }
.frame-pub-value-ok { color: var(--severity-low); }
.frame-pub-value-warn { color: var(--severity-high); }
.frame-pub-value-off { color: var(--text-muted); }
.sparkline { display: block; margin: 6px 0 8px; background: var(--panel); border-radius: 4px; }

/* Clickable table rows (class "row-link", navigated by a data-href): show the
   pointer and a hover highlight so it is obvious the whole row opens. */
tr.row-link { cursor: pointer; }
tr.row-link > td { transition: background-color 120ms ease; }
tr.row-link:hover > td { background: var(--card-hover); }
tr.row-link:active > td { background: var(--card-selected); }

/* In-page tabs on detail pages (tenant): same look as the Settings tabs, sitting
   under the page header and above the content. */
.page-tab-nav { margin: 4px 0 18px; }
.page-tab-nav .tab { padding: 10px 14px; }
.page-tab-nav .tab-count { color: var(--text-muted); font-weight: 400; }
.page-tab-nav .tab.active .tab-count { color: var(--text-primary); }

/* Bundle header: the device a bundle was collected on. */
.device-chip {
    display: inline-flex; align-items: center; gap: 6px; margin-left: 6px;
    padding: 1px 8px; border-radius: 3px; text-decoration: none;
    background: var(--panel); border: var(--border-w) solid var(--border);
    color: var(--text-primary);
}
.device-chip .label-caps { color: var(--text-muted); }
.device-chip:hover { border-color: var(--accent); background: var(--card-hover); text-decoration: none; }

/* Device page → Bundles tab pager. */
.device-bundles-pager { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.tab-panel > .section-heading:first-child,
.tab-panel > .card:first-child { margin-top: 0; }

/* Label / value grid for Info tabs. */
.info-grid { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; align-items: baseline; }
.info-grid dt { margin: 0; color: var(--text-muted); }
.info-grid dd { margin: 0; color: var(--text-primary); word-break: break-all; }

/* Info badge (partials/info_tip.html): a small "i" that explains a control
   before you use it. Hover/focus open it; static/info-tip.js adds click-to-pin. */
.info-tip { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
.info-tip-btn {
    width: 18px; height: 18px; border-radius: 50%; padding: 0; margin: 0 2px;
    display: inline-flex; align-items: center; justify-content: center;
    font: 600 11px/1 var(--font-mono, ui-monospace, monospace); font-style: italic;
    color: var(--text-muted); background: transparent; border: 1px solid var(--border);
    cursor: help; transition: color .12s, border-color .12s, background .12s;
}
.info-tip-btn:hover, .info-tip-btn:focus-visible, .info-tip.open .info-tip-btn {
    color: var(--accent); border-color: var(--accent); outline: none;
}
.info-tip-pop {
    position: absolute; top: calc(100% + 8px); left: -10px; z-index: 60;
    width: max-content; max-width: min(360px, calc(100vw - 32px));
    padding: 12px 14px; border-radius: 8px;
    background: var(--panel); color: var(--text-primary);
    border: 1px solid var(--border); border-left: 3px solid var(--accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    font-size: 13px; line-height: 1.5; text-align: left; white-space: normal;
    text-transform: none; letter-spacing: normal; font-weight: 400;
    visibility: hidden; opacity: 0; transform: translateY(-2px);
    transition: opacity .12s, transform .12s, visibility 0s linear .12s;
    pointer-events: none;
}
.info-tip[data-align="end"] .info-tip-pop, .info-tip.flip .info-tip-pop { left: auto; right: -10px; }
.info-tip:hover .info-tip-pop, .info-tip:focus-within .info-tip-pop, .info-tip.open .info-tip-pop {
    visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s;
}
.info-tip-title {
    display: block; margin-bottom: 4px; color: var(--text-muted);
    font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.info-tip-body { display: block; }
@media (prefers-reduced-motion: reduce) { .info-tip-pop { transition: none; } }

/* Tenant header: disabled "Push to UAT / Push to prod" placeholders. */
.promote-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.promote-action { display: inline-flex; align-items: center; gap: 4px; }
.promote-action .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Live task banner on the device page (partials/device_task_banner.html). */
.task-pulse { color: var(--accent); margin-right: 6px; animation: task-pulse 1.2s ease-in-out infinite; }
@keyframes task-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .task-pulse { animation: none; } }
/* Pending: neutral, never success-coloured — it hasn't succeeded yet. */
.task-banner-pending {
    padding: 10px 14px; margin-bottom: 16px; border-radius: var(--radius-sm);
    border: var(--border-w) solid var(--border); background: var(--card); color: var(--text-primary);
}

/* ── Tickets list: search, filters, table ──────────────────────────────── */
.tickets-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 260px;
}
.tickets-search .filter-search {
    width: 100%;
    padding-left: 26px;
    padding-right: 84px;
    font-size: 13px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.tickets-search-icon {
    position: absolute;
    left: 9px;
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
}
.tickets-kbd {
    position: absolute;
    right: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    border: var(--border-w) solid var(--border);
    border-radius: 3px;
    padding: 0 5px;
    line-height: 16px;
    background: var(--card);
    pointer-events: none;
}
.tickets-search-busy {
    position: absolute;
    right: 30px;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    pointer-events: none;
}
.tickets-search-busy.htmx-indicator { opacity: 0; transition: opacity 120ms ease; }
.tickets-search-busy.htmx-request,
.htmx-request .tickets-search-busy.htmx-indicator { opacity: 1; }
.tickets-filter-chips .chip-row { row-gap: 6px; }
.tickets-filter-chips .tickets-clear { margin-left: auto; padding: 3px 9px; }
.chip-ticket-status-open.active        { color: var(--severity-medium); border-color: var(--severity-medium); }
.chip-ticket-status-in_progress.active { color: var(--accent); border-color: var(--accent); }
.chip-ticket-status-resolved.active    { color: var(--severity-low); border-color: var(--severity-low); }

.tickets-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 4px 6px;
    font-size: 11px;
}
.tickets-meta .tickets-count { color: var(--text-primary); }

.tickets-list-table .col-ticket  { min-width: 120px; max-width: 360px; }
.tickets-list-table tbody .col-ticket a { font-size: 12px; }
.tickets-list-table .col-tenant  { width: auto; min-width: 200px; }
.tickets-list-table .col-bundles { width: 70px; }
.tickets-list-table .col-status  { width: 124px; }
.tickets-list-table .status-pill { white-space: nowrap; }
.tickets-list-table .col-date    { width: 118px; white-space: nowrap; }
.tickets-list-table .match-snippet {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 340px;
}

mark.search-hit {
    background: var(--highlight-bg);
    color: var(--highlight-fg);
    border-radius: 2px;
    padding: 0 1px;
}

.tickets-empty-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }

@media (max-width: 900px) {
    .tickets-list-table .col-date:nth-of-type(6),
    .tickets-list-table .col-date:nth-of-type(7) { display: none; }
}
/* A themed clear button replaces the browser's own (blue in WebKit). The "/"
   hint shows only while the box is empty; the clear button only while it isn't. */
.tickets-search .filter-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.tickets-search-clear {
    position: absolute;
    right: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}
.tickets-search-clear:hover { color: var(--text-primary); }
.tickets-search .filter-search:placeholder-shown ~ .tickets-search-clear { display: none; }
.tickets-search .filter-search:not(:placeholder-shown) ~ .tickets-kbd { display: none; }

/* Endpoint Agent — the device-state gauge (dashboard, customer and tenant
   strips, the Needs-attention list, the state chips on the device list and
   device page). Every colour is a token. Critical and Warning are loud when
   their count is above zero and deliberately calm at zero ("All clear"), so a
   glance says whether anyone has to act. A card whose count changed since the
   last refresh flashes once (static outline under prefers-reduced-motion). */
.ds-cards { display: contents; }
.ds-card .ds-count { display: inline-block; font-variant-numeric: tabular-nums; }
.ds-card .ds-calm-note {
    margin-left: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--severity-low);
    vertical-align: middle;
}
.ds-card.is-calm .stat-value { color: var(--text-muted); }
.ds-card.ds-total .stat-value { color: var(--text-primary); }
.ds-card.ds-critical.is-hot {
    border-color: var(--severity-critical);
    background: color-mix(in srgb, var(--severity-critical) 14%, var(--card));
    box-shadow: inset 3px 0 0 var(--severity-critical);
}
.ds-card.ds-critical.is-hot .stat-label,
.ds-card.ds-critical.is-hot .stat-value { color: var(--severity-critical); }
.ds-card.ds-warning.is-hot {
    border-color: var(--severity-medium);
    background: color-mix(in srgb, var(--severity-medium) 12%, var(--card));
    box-shadow: inset 3px 0 0 var(--severity-medium);
}
.ds-card.ds-warning.is-hot .stat-label,
.ds-card.ds-warning.is-hot .stat-value { color: var(--severity-medium); }
.ds-card.ds-offline.is-hot .stat-value { color: var(--text-primary); }
.ds-card.ds-healthy.is-hot .stat-value { color: var(--severity-low); }
.ds-card.ds-tasks.is-hot .stat-value { color: var(--accent); }
.ds-card.stat-analyzing.is-hot .stat-value { color: var(--severity-medium); }
.ds-card.stat-error.is-hot .stat-value { color: var(--error-fg); }
.ds-card.ds-critical.is-hot .stat-label::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--severity-critical);
    vertical-align: 1px;
    animation: ds-beacon 1.6s ease-in-out infinite;
}
@keyframes ds-beacon {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--severity-critical) 60%, transparent); }
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--severity-critical) 0%, transparent); }
}
@keyframes ds-flash {
    0% { outline: 2px solid var(--accent); outline-offset: 0; }
    100% { outline: 2px solid transparent; outline-offset: 6px; }
}
.ds-card.ds-flash { animation: ds-flash 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .ds-card.ds-flash { animation: none; outline: 2px solid var(--accent); outline-offset: 1px; }
    .ds-card.ds-critical.is-hot .stat-label::before { animation: none; }
}

/* State chips. */
.ds-chip {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding: 2px 7px;
    border-radius: 999px;
    border: var(--border-w) solid var(--border);
    color: var(--text-muted);
    white-space: nowrap;
    line-height: 1.4;
    vertical-align: middle;
}
.ds-chip-lg { font-size: 11px; padding: 3px 10px; }
.ds-chip-critical { color: var(--severity-critical); border-color: var(--severity-critical); background: color-mix(in srgb, var(--severity-critical) 12%, transparent); }
.ds-chip-warning  { color: var(--severity-medium);   border-color: var(--severity-medium);   background: color-mix(in srgb, var(--severity-medium) 12%, transparent); }
.ds-chip-healthy  { color: var(--severity-low);      border-color: var(--severity-low); }
.ds-chip-offline  { color: var(--text-muted);        border-color: var(--text-muted); }
.ds-chip-disabled { color: var(--text-muted);        border-style: dashed; }
.device-table .col-state { width: 92px; }
.ds-filter-critical.active { color: var(--severity-critical); border-color: var(--severity-critical); }
.ds-filter-warning.active  { color: var(--severity-medium);   border-color: var(--severity-medium); }
.ds-filter-healthy.active  { color: var(--severity-low);      border-color: var(--severity-low); }
.ds-count-link { font-weight: 700; text-decoration: none; }
.ds-fg-critical { color: var(--severity-critical); }
.ds-fg-warning  { color: var(--severity-medium); }
.ds-fg-offline  { color: var(--text-primary); }
.ds-fg-healthy  { color: var(--severity-low); }

/* The device page's reasons under the header. */
.ds-reasons { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ds-reasons li { padding-left: 10px; border-left: 3px solid var(--border); color: var(--text-primary); }
.ds-reasons li.ds-reason-critical { border-left-color: var(--severity-critical); }
.ds-reasons li.ds-reason-warning  { border-left-color: var(--severity-medium); }
.ds-reasons li.ds-reason-offline  { border-left-color: var(--text-muted); }

/* Needs attention. */
.ds-attention { margin: 0 0 8px; }
.ds-attention-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ds-row.sev-unknown { border-left-color: var(--text-muted); }
.ds-row .ds-reason { color: var(--text-primary); }
.ds-for { white-space: nowrap; flex-shrink: 0; }
.ds-all-clear {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--severity-low) 8%, transparent);
    border: var(--border-w) solid color-mix(in srgb, var(--severity-low) 35%, transparent);
}
.ds-all-clear-mark {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--severity-low);
    border: 2px solid var(--severity-low);
    font-weight: 700;
}
.ds-all-clear-title { font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }

/* ── Live pages (static/live.js) ─────────────────────────────────────────────
   Every colour reads from a token, so both themes follow. Motion is decoration:
   under prefers-reduced-motion the highlights become a short static tint and
   nothing slides. */

/* Connection indicator — sidebar bottom cluster. */
.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    margin: 4px 0 2px;
    padding: 3px 8px 3px 6px;
    border: var(--border-w) solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: default;
    max-width: 100%;
    text-align: left;
}
.live-indicator[hidden] { display: none; }
.live-indicator .live-label { white-space: normal; line-height: 1.3; }
.live-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: background-color 300ms ease, box-shadow 300ms ease;
}
.live-indicator[data-state="live"] { color: var(--text-secondary); }
.live-indicator[data-state="live"] .live-dot {
    background: var(--severity-low);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--severity-low) 22%, transparent);
    animation: live-breathe 2.8s ease-in-out infinite;
}
.live-indicator[data-state="connecting"] .live-dot,
.live-indicator[data-state="reconnecting"] .live-dot {
    background: var(--severity-medium);
    animation: live-blink 1.1s ease-in-out infinite;
}
.live-indicator[data-state="reconnecting"] { color: var(--severity-medium); }
.live-indicator[data-state="offline"],
.live-indicator[data-state="paused"] { color: var(--text-muted); cursor: pointer; }
.live-indicator[data-state="offline"] { border-color: var(--border); }
.live-indicator[data-state="offline"]:hover,
.live-indicator[data-state="paused"]:hover { color: var(--text-primary); border-color: var(--accent); }
.live-indicator:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes live-breathe {
    0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--severity-low) 26%, transparent); }
    50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--severity-low) 8%, transparent); }
}
@keyframes live-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* A row that just appeared, a row that changed, a number that ticked over. */
@keyframes live-arrive {
    0%   { background-color: color-mix(in srgb, var(--accent) 18%, transparent); }
    70%  { background-color: color-mix(in srgb, var(--accent) 7%, transparent); }
    100% { background-color: transparent; }
}
@keyframes live-edge {
    0%, 70% { box-shadow: inset 3px 0 0 var(--accent); }
    100%    { box-shadow: inset 3px 0 0 transparent; }
}
@keyframes live-flash {
    0%   { background-color: color-mix(in srgb, var(--accent) 14%, transparent); }
    100% { background-color: transparent; }
}
@keyframes live-tick {
    0%   { transform: translateY(-3px); color: var(--accent); }
    60%  { transform: translateY(0); color: var(--accent); }
    100% { transform: translateY(0); }
}
@keyframes live-dot-pop {
    0%   { transform: scale(1.9); }
    100% { transform: scale(1); }
}
.live-new     { animation: live-arrive 2.4s ease-out both; }
tr.live-new > td { animation: live-arrive 2.4s ease-out both; }
tr.live-new > td:first-child { animation: live-arrive 2.4s ease-out both, live-edge 2.4s ease-out both; }
.live-changed { animation: live-flash 1.6s ease-out both; }
tr.live-changed > td { animation: live-flash 1.6s ease-out both; }
.live-tick    { display: inline-block; animation: live-tick 0.9s ease-out both; }
.live-dot-change { animation: live-dot-pop 0.6s ease-out both; }

/* "N new — show": floats over the list instead of moving it. */
.live-pill {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    padding: 6px 14px;
    border-radius: 999px;
    border: var(--border-w) solid var(--accent);
    background: var(--panel);
    color: var(--accent);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--bg) 70%, transparent);
    animation: live-drop 220ms ease-out both;
}
.live-pill[hidden] { display: none; }
.live-pill:hover { background: var(--card-selected); }
.live-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes live-drop { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* "This changed since you opened it — Reload" (cards holding an edit form). */
.live-notice[hidden] { display: none; }
.live-notice-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    padding: 10px 14px;
    border: var(--border-w) solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--text-primary);
    font-size: 13px;
}

/* Toasts — bottom-right, stacking upward, polite. */
.live-toasts {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
    width: min(380px, calc(100vw - 32px));
}
.live-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 11px 10px 11px 14px;
    background: var(--panel);
    color: var(--text-primary);
    border: var(--border-w) solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--bg) 65%, transparent);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease;
}
.live-toast.live-toast-in { opacity: 1; transform: translateY(0); }
.live-toast.live-toast-out { opacity: 0; transform: translateX(16px); }
.live-toast:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.live-toast-body { flex: 1; min-width: 0; }
.live-toast-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}
.live-toast-text {
    margin-top: 3px;
    font-size: 13px;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.live-toast-link {
    align-self: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.live-toast-link:hover { color: var(--accent-strong); text-decoration: underline; }
.live-toast-close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.live-toast-close:hover { color: var(--text-primary); background: var(--card); }
.live-toast-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 600px) {
    .live-toasts { left: 16px; right: 16px; bottom: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .live-indicator .live-dot { animation: none !important; }
    .live-new, tr.live-new > td, tr.live-new > td:first-child {
        animation: none;
        background-color: color-mix(in srgb, var(--accent) 12%, transparent);
    }
    .live-changed, tr.live-changed > td { animation: none; background-color: color-mix(in srgb, var(--accent) 8%, transparent); }
    .live-tick, .live-dot-change, .live-pill { animation: none; }
    .live-toast, .live-toast.live-toast-in, .live-toast.live-toast-out { transition: none; transform: none; }
}

/* ── Notifications: bell, panel, toasts, history ───────────────────────────
   static/notifications.js + partials/notification_*.html. Every colour is a
   token; levels map to the severity family (error → critical, warning →
   medium, success → low) plus --level-info. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* The bell's unread badge — pinned to the icon's top-right corner inside the
   sidebar footer's bell button (see "Sidebar footer"), ringed in the panel
   colour so it reads as sitting on top of the icon. */
.notif-badge {
    position: absolute; top: 2px; left: calc(50% + 2px);
    box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
    border: 2px solid var(--panel);
    background: var(--accent); color: var(--on-accent);
    font: 700 9.5px/14px var(--font-sans); text-align: center; letter-spacing: 0;
    pointer-events: none;
}
.notif-badge[hidden] { display: none; }

.notif-icon {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 12px/1 var(--font-sans); color: var(--on-accent);
    background: var(--level-info);
}
.notif-icon-success { background: var(--severity-low); }
.notif-icon-warning { background: var(--severity-medium); }
.notif-icon-error { background: var(--severity-critical); }
.notif-count { color: var(--text-muted); font-weight: 400; font-size: 0.9em; }

/* Panel: pops out beside the sidebar's bottom cluster. */
.notif-panel {
    position: fixed; left: calc(var(--nav-w) + 10px); bottom: 16px; z-index: 60;
    width: 380px; max-width: calc(100vw - var(--nav-w) - 26px); max-height: min(72vh, 640px);
    display: flex; flex-direction: column;
    background: var(--panel); border: var(--border-w) solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-float);
}
.notif-panel[hidden] { display: none; }
html.nav-collapsed .notif-panel { left: 16px; max-width: calc(100vw - 32px); }
.notif-panel-head, .notif-panel-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 14px;
}
.notif-panel-head { border-bottom: var(--border-w) solid var(--border); }
.notif-panel-foot { border-top: var(--border-w) solid var(--border); font-size: 12px; }
.notif-panel-actions { display: inline-flex; align-items: center; gap: 6px; }
.notif-panel-close {
    background: none; border: 0; color: var(--text-muted); font-size: 18px; line-height: 1;
    cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm);
}
.notif-panel-close:hover, .notif-panel-close:focus-visible { color: var(--text-primary); background: var(--card); outline: none; }
.notif-panel-body { overflow-y: auto; flex: 1; padding: 4px 0; }
.notif-group-label {
    font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-muted); padding: 10px 14px 4px;
}
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px;
    color: var(--text-secondary); border-left: 3px solid transparent;
}
.notif-item:hover { background: var(--card); text-decoration: none; color: var(--text-primary); }
.notif-item.unread { color: var(--text-primary); }
.notif-item.notif-level-error.unread { border-left-color: var(--severity-critical); }
.notif-item.notif-level-warning.unread { border-left-color: var(--severity-medium); }
.notif-item.notif-level-success.unread { border-left-color: var(--severity-low); }
.notif-item.notif-level-info.unread { border-left-color: var(--level-info); }
.notif-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.notif-item-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.notif-item:not(.unread) .notif-item-title { font-weight: 400; }
.notif-item-body {
    font-size: 12px; color: var(--text-muted); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-item-meta { font-size: 10.5px; color: var(--text-muted); }
.notif-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; }
.notif-empty { padding: 22px 14px; text-align: center; }

/* Notification toasts share live.js's stack (.live-toasts) — one component,
   two sources. A notification toast carries its level: a coloured left bar
   and glyph, and the whole toast opens the notification. */
.live-toast.live-toast-level { padding-left: 12px; }
.live-toast.live-toast-info { border-left-color: var(--level-info); }
.live-toast.live-toast-success { border-left-color: var(--severity-low); }
.live-toast.live-toast-warning { border-left-color: var(--severity-medium); }
.live-toast.live-toast-error { border-left-color: var(--severity-critical); }
.live-toast.live-toast-level .live-toast-title {
    font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: var(--text-primary);
}
.live-toast.live-toast-level .live-toast-text {
    font-size: 12px; color: var(--text-secondary);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.live-toast.live-toast-clickable { cursor: pointer; }
.live-toast.live-toast-clickable:hover { border-color: var(--text-muted); }

/* History page. */
.notif-bulk { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }
.notif-bulk-actions { display: inline-flex; gap: 8px; }
.notif-bulk-actions form { margin: 0; }
.notif-unread-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.notif-table td { vertical-align: top; }
.notif-table .notif-cell-icon { width: 34px; }
.notif-table .notif-cell-when { white-space: nowrap; color: var(--text-muted); font-size: 12px; }
.notif-table .notif-cell-actions { text-align: right; white-space: nowrap; }
.notif-row td:first-child { border-left: 3px solid transparent; }
.notif-row.unread td:first-child { border-left-color: var(--accent); }
.notif-row-title { font-weight: 400; }
.notif-row.unread .notif-row-title { font-weight: 600; color: var(--text-primary); }
.notif-row-body { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.notif-row-meta { margin-top: 5px; font-size: 11px; color: var(--text-muted); }

@media (max-width: 768px) {
    .notif-panel { left: 16px; right: 16px; top: 64px; bottom: auto; width: auto; max-width: none; }
}

/* ── Live device health (partials/device_health.html, static/device-live.js) ──
   The Health card's "● LIVE · every 10 s" chip, the in-tile two-minute
   sparkline, and the bars easing between samples. Tokens only. */
.dl-heading { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dl-source[hidden] { display: none; }
.dl-indicator {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--text-muted);
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    white-space: normal;
}
.dl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.dl-indicator[data-state="live"] { color: var(--severity-low); border-color: color-mix(in srgb, var(--severity-low) 45%, var(--border)); }
.dl-indicator[data-state="live"] .dl-dot { background: var(--severity-low); animation: dl-pulse 2s ease-in-out infinite; }
.dl-indicator[data-state="waiting"] .dl-dot,
.dl-indicator[data-state="reconnecting"] .dl-dot { background: var(--accent); animation: dl-pulse 1.2s ease-in-out infinite; }
.dl-indicator[data-state="stale"],
.dl-indicator[data-state="reconnecting"] { color: var(--severity-medium); }
.dl-indicator[data-state="stale"] .dl-dot { background: var(--severity-medium); }
.dl-indicator[data-state="upgrade"] { color: var(--severity-medium); border-color: color-mix(in srgb, var(--severity-medium) 45%, var(--border)); }
.dl-indicator[data-state="upgrade"] .dl-dot { background: var(--severity-medium); }
@keyframes dl-pulse { 50% { opacity: .35; } }
.dl-spark { display: block; width: 100%; height: 28px; margin: 0 0 8px; background: var(--panel); border-radius: 4px; }
.dl-spark[hidden] { display: none; }
.device-health[data-dl-active="true"] .mon-bar-fill { transition: width .6s ease; }
@media (prefers-reduced-motion: reduce) {
    .dl-indicator .dl-dot { animation: none !important; }
    .device-health .mon-bar-fill { transition: none !important; }
}

/* Agent versions — the "update available" chip on the fleet lists and the
   Agent version card on the device page. Tokens only. */
.version-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-muted);
}
.version-chip.vc-outdated    { color: var(--severity-medium); border-color: var(--severity-medium); }
.version-chip.vc-in_progress { color: var(--accent); border-color: var(--accent); }
.version-chip.vc-failed      { color: var(--error-fg); border-color: var(--error-border); }
.version-chip.vc-up_to_date  { color: var(--severity-low); border-color: var(--severity-low); }
.device-table .col-version.with-chip { width: 200px; }
/* The Agent update section of the device page's Actions card. */
.agent-update { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.agent-version-grid { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end; }
.agent-version-grid .mon-bigval { font-size: 20px; margin: 2px 0 0; }
.agent-version-grid .agent-update-go { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.agent-update-manual { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--severity-medium); background: var(--panel); border-radius: 6px; }
.agent-update-manual .build-cmd { margin: 6px 0 0; }
/* Tenant Devices card: fleet version summary, bulk update, auto-update switch. */
.agent-update-row { display: flex; gap: 10px 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.agent-update-row:first-of-type { padding-top: 10px; border-top: 1px solid var(--border); }
.agent-update-row .agent-update-bulk { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.agent-update-auto { margin-top: 8px; }
a.version-chip { text-decoration: none; }
a.version-chip:hover { border-color: var(--accent); }
.agent-version-log {
    max-height: 220px;
    overflow: auto;
    margin: 8px 0 0;
    padding: 8px;
    font-size: 11px;
    white-space: pre-wrap;
    color: var(--text-primary);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
}

/* Agent version: the build commit lives in the tooltip (templating.agent_ver). */
.agent-ver[title] { cursor: help; text-decoration: underline dotted var(--border); text-underline-offset: 3px; }

/* The device page's Agent running / Latest hosted values: body-sized, not the 30px health-tile number. */
.agent-ver-val { font-size: 15px; font-weight: 600; margin: 4px 0 6px; color: var(--text-primary); }

/* ── Remote investigations (templates/investigation.html) ──────────────────
   The workspace: header, device context | conversation | output. Every colour
   is a token, so both themes work; below 1100px the panes become tabs. */
.inv-body { max-width: none; padding: 20px 20px 16px; }
.inv-header {
    background: var(--panel); border: var(--border-w) solid var(--border);
    border-radius: var(--radius); padding: 14px 18px; margin: 10px 0 12px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; align-items: start;
}
.inv-header-closed { border-left: 3px solid var(--text-muted); }
.inv-header-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inv-header-sub { margin-top: 4px; }
.inv-reason { margin: 8px 0 0; font-size: 13px; color: var(--text-primary); max-width: 80ch; }
.inv-reason .label-caps { margin-right: 6px; }
.inv-chip {
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    border: var(--border-w) solid var(--border); color: var(--text-secondary); background: var(--card);
}
.inv-header-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.inv-countdown { display: flex; align-items: center; gap: 8px; }
.inv-countdown-value { font-size: 20px; color: var(--text-primary); min-width: 4.5ch; text-align: right; }
.inv-countdown-warn .inv-countdown-value { color: var(--severity-medium); }
.inv-inline-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.inv-mode {
    display: inline-flex; align-items: center; gap: 0; border: var(--border-w) solid var(--border);
    border-radius: 999px; padding: 2px; background: var(--card);
}
.inv-mode .label-caps { padding: 0 8px 0 10px; }
.inv-mode-opt {
    border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px;
    padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
.inv-mode-opt.active { background: var(--accent); color: var(--on-accent); }
.inv-mode-opt.inv-mode-auto.active { background: var(--severity-high); }
.inv-mode-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.inv-banner { grid-column: 1 / -1; font-size: 12px; padding: 8px 12px; border-radius: var(--radius-sm); }
.inv-banner-warn { background: color-mix(in srgb, var(--severity-medium) 16%, transparent); color: var(--text-primary); border-left: 3px solid var(--severity-medium); }
.inv-banner-auto { background: color-mix(in srgb, var(--severity-high) 12%, transparent); color: var(--text-primary); border-left: 3px solid var(--severity-high); }
.inv-summary { grid-column: 1 / -1; }
.inv-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.inv-summary-grid > div { background: var(--card); border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.inv-summary-grid strong { font-size: 16px; color: var(--text-primary); }
.status-pill.inv-status-open { color: var(--severity-low); border-color: var(--severity-low); }
.status-pill.inv-status-ended { color: var(--text-muted); border-color: var(--border); }
.status-pill.inv-status-expired, .status-pill.inv-status-cancelled { color: var(--severity-medium); border-color: var(--severity-medium); }

.inv-pane-tabs { display: none; gap: 4px; margin-bottom: 8px; }
.inv-pane-tabs button {
    flex: 1; font: inherit; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    background: var(--card); color: var(--text-secondary); border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm); padding: 7px;
}
.inv-pane-tabs button.active { border-color: var(--accent); color: var(--text-primary); }
.inv-workspace {
    display: grid; grid-template-columns: 260px minmax(0, 1fr) minmax(320px, 420px); gap: 12px;
    height: calc(100vh - 260px); min-height: 520px;
}
.inv-workspace.inv-ctx-collapsed { grid-template-columns: 34px minmax(0, 1fr) minmax(320px, 420px); }
.inv-workspace.inv-ctx-collapsed .inv-context { display: none; }
.inv-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
.inv-pane-context { background: var(--panel); border: var(--border-w) solid var(--border); border-radius: var(--radius); }
.inv-collapse {
    position: absolute; top: 6px; right: 6px; z-index: 1; width: 22px; height: 22px; padding: 0;
    border: var(--border-w) solid var(--border); background: var(--card); color: var(--text-muted);
    border-radius: 50%; cursor: pointer; line-height: 1;
}
.inv-ctx-collapsed .inv-collapse { transform: rotate(180deg); right: 5px; }
.inv-context { overflow-y: auto; padding: 12px 14px; font-size: 12px; }
.inv-pane-title { margin: 12px 0 6px; font-size: 10px; }
.inv-pane-title:first-child { margin-top: 0; }
.inv-ctx-block { display: flex; flex-direction: column; gap: 6px; }
.inv-ctx-row { display: flex; justify-content: space-between; gap: 8px; }
.inv-ctx-row .label-caps { font-size: 9px; }
.inv-meter { display: grid; grid-template-columns: 54px minmax(0, 1fr) 62px; gap: 6px; align-items: center; }
.inv-services, .inv-ctx-list { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.inv-svc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--text-muted); }
.inv-svc-running { background: var(--severity-low); }
.inv-svc-stopped { background: var(--severity-critical); }
.inv-text-error { color: var(--severity-critical); }
.inv-text-warn { color: var(--severity-medium); }
.inv-text-ok { color: var(--severity-low); }

.inv-pane-conversation { background: var(--panel); border: var(--border-w) solid var(--border); border-radius: var(--radius); }
.inv-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: var(--border-w) solid var(--border); flex-wrap: wrap; }
.inv-scroll { flex: 1; overflow-y: auto; padding: 14px; scroll-behavior: auto; }
.inv-timeline { display: flex; flex-direction: column; gap: 12px; }
.inv-timeline .chat-message { max-width: 88%; }
.inv-timeline[data-filter="commands"] > .inv-item:not(.inv-cmd) { display: none; }
.inv-timeline[data-filter="rejected"] > .inv-item:not([data-state="rejected"]) { display: none; }
.inv-timeline[data-filter="failed"] > .inv-item:not([data-state="failed"]):not([data-state="timed_out"]):not([data-state="refused_by_device"]) { display: none; }
.inv-empty { margin: 30px auto; max-width: 520px; text-align: center; }
.inv-action-error { background: var(--error-bg); color: var(--error-fg); border: var(--border-w) solid var(--error-border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12px; }
.inv-closed-note { border-top: var(--border-w) dashed var(--border); padding-top: 10px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.inv-stream { margin-top: 12px; display: flex; flex-direction: column; }
.inv-dots::after { content: "…"; animation: inv-dots 1.2s steps(4, end) infinite; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; }
@keyframes inv-dots { 0% { width: 0; } 100% { width: 1.2em; } }
.inv-composer { border-top: var(--border-w) solid var(--border); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.inv-composer textarea { resize: vertical; min-height: 44px; font: inherit; }
.inv-composer-row { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.inv-composer-row #inv-busy-note { margin-right: auto; }

/* Command card */
.inv-cmd {
    background: var(--card); border: var(--border-w) solid var(--border); border-left: 3px solid var(--border);
    border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; outline: none;
}
.inv-cmd:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.inv-cmd.inv-selected { box-shadow: 0 0 0 1px var(--accent); }
.inv-cmd.inv-cmd-changes { border-left-color: var(--severity-high); }
.inv-cmd.inv-cmd-pending { border-left-color: var(--accent); animation: inv-pulse 1.8s ease-in-out infinite; }
@keyframes inv-pulse {
    0%, 100% { box-shadow: inset 3px 0 0 0 var(--accent); }
    50% { box-shadow: inset 3px 0 0 0 transparent, 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
}
.inv-cmd.inv-tone-ok { border-left-color: var(--severity-low); }
.inv-cmd.inv-tone-error { border-left-color: var(--severity-critical); }
.inv-cmd.inv-cmd-superseded { opacity: .72; border-left-style: dashed; }
.inv-cmd-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-cmd-title { font-weight: 600; color: var(--text-primary); font-size: 13px; }
.inv-shell {
    font-family: var(--font-mono); font-size: 10px; font-weight: 700; min-width: 26px; text-align: center;
    padding: 2px 5px; border-radius: 4px; background: var(--panel); border: var(--border-w) solid var(--border); color: var(--text-secondary);
}
.inv-revised-from { color: var(--link); }
.inv-risk, .inv-readonly-chip, .inv-changes-chip {
    font-size: 9px; letter-spacing: .12em; padding: 2px 7px; border-radius: 999px; border: var(--border-w) solid currentColor;
}
.inv-risk-low { color: var(--severity-low); }
.inv-risk-medium { color: var(--severity-medium); }
.inv-risk-high { color: var(--severity-critical); }
.inv-risk-unrated { color: var(--text-muted); }
.inv-readonly-chip { color: var(--text-muted); }
.inv-changes-chip { color: var(--severity-high); background: color-mix(in srgb, var(--severity-high) 10%, transparent); }
.inv-state { margin-left: auto; font-size: 11px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.inv-state-pending { color: var(--accent); }
.inv-state-info { color: var(--level-info); }
.inv-state-ok { color: var(--severity-low); }
.inv-state-error { color: var(--severity-critical); }
.inv-state-muted { color: var(--text-muted); }
.inv-cmd-code { position: relative; }
.inv-cmd-code pre {
    margin: 0; padding: 10px 70px 10px 12px; background: var(--bg); border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-primary); font-size: 12px; white-space: pre-wrap; word-break: break-word;
}
.inv-copy { position: absolute; top: 6px; right: 6px; }
.inv-just { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 12px; }
.inv-just dt { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); padding-top: 2px; }
.inv-just dd { margin: 0; color: var(--text-secondary); }
.inv-diff { border: var(--border-w) dashed var(--accent); border-radius: var(--radius-sm); padding: 6px 10px; }
.inv-diff summary { cursor: pointer; }
.inv-diff-code { margin: 6px 0; font-size: 12px; background: var(--bg); padding: 6px 8px; border-radius: 4px; white-space: pre-wrap; }
.inv-diff-line { display: block; }
.inv-diff-del { color: var(--severity-critical); background: color-mix(in srgb, var(--severity-critical) 10%, transparent); text-decoration: line-through; }
.inv-diff-add { color: var(--severity-low); background: color-mix(in srgb, var(--severity-low) 10%, transparent); }
.inv-diff-same { color: var(--text-muted); }
.inv-diff-field { font-size: 12px; margin: 4px 0; }
.inv-diff-field del { color: var(--severity-critical); }
.inv-diff-field ins { color: var(--severity-low); text-decoration: none; }
.inv-thread { border-left: 2px solid var(--border); margin-left: 10px; padding-left: 12px; display: flex; flex-direction: column; gap: 8px; }
.inv-thread-msg { font-size: 12px; }
.inv-thread-msg > div { margin-top: 2px; color: var(--text-secondary); }
.inv-thread-user > div { color: var(--text-primary); }
.inv-progress { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.inv-progress-bar { display: block; height: 100%; width: 0; background: var(--level-info); transition: width 1s linear; }
.inv-state-why { margin: 0; }
.inv-decide { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.inv-decide details > summary, .inv-ask-after > summary { list-style: none; cursor: pointer; }
.inv-decide details > summary::-webkit-details-marker { display: none; }
.inv-decide details[open] { flex-basis: 100%; order: 2; }
.inv-ask-form, .inv-decide form.inv-inline-form { margin-top: 6px; }
.inv-ask-form .input, .inv-decide .input { min-width: 280px; flex: 1; }
.inv-keys { margin-left: auto; align-self: center; }
.inv-show-output { align-self: flex-start; }
.inv-superseded-body > summary { cursor: pointer; }
.inv-superseded-body[open] { display: flex; flex-direction: column; gap: 8px; }

/* Diagnostic card */
.inv-diag { background: var(--card); border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); font-size: 12px; }
.inv-diag > summary { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; list-style: none; }
.inv-diag > summary::-webkit-details-marker { display: none; }
.inv-diag-icon { color: var(--level-info); }
.inv-diag-tool { color: var(--text-primary); font-weight: 600; }
.inv-diag-args { color: var(--text-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.inv-diag-meta { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-diag-body { padding: 4px 10px 10px; border-top: var(--border-w) solid var(--border); }
.inv-diag-table-wrap { max-height: 320px; overflow: auto; border: var(--border-w) solid var(--border); border-radius: 4px; }
.inv-diag-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.inv-diag-table th { position: sticky; top: 0; background: var(--panel); text-align: left; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 4px 6px; }
.inv-diag-table td { padding: 3px 6px; border-top: var(--border-w) solid var(--border); color: var(--text-secondary); vertical-align: top; }
.inv-json { max-height: 320px; overflow: auto; background: var(--bg); padding: 8px; border-radius: 4px; font-size: 11px; margin: 6px 0 0; }

/* Output pane */
.inv-output {
    background: var(--panel); border: var(--border-w) solid var(--border); border-radius: var(--radius);
    display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden;
}
.inv-output-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: var(--border-w) solid var(--border); flex-wrap: wrap; }
.inv-output-head .inv-state { margin-left: 0; }
.inv-output-actions { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.inv-output-search { width: 130px; padding: 4px 8px; font-size: 12px; }
.inv-output-meta { padding: 6px 10px; }
.inv-output-progress { margin: 0 10px; }
.inv-terminal {
    flex: 1; margin: 6px 10px; padding: 10px 12px; background: var(--bg); border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm); overflow: auto; font-size: 12px; line-height: 1.5; color: var(--text-primary);
    white-space: pre; min-height: 120px;
}
.inv-terminal.wrap { white-space: pre-wrap; word-break: break-word; }
.inv-terminal .inv-stderr { color: var(--severity-critical); }
.inv-terminal mark { background: var(--highlight-bg); color: var(--highlight-fg); }
.inv-output-foot { padding: 0 10px 8px; }
a.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* Start form, device list, tenant switch */
.inv-actions-start { margin-top: 14px; padding-top: 14px; border-top: var(--border-w) solid var(--border); }
.inv-start { display: flex; flex-direction: column; gap: 8px; }
.inv-start-intro { margin: 0; max-width: 90ch; }
.inv-start-reason textarea { width: 100%; font: inherit; resize: vertical; }
.inv-start-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.inv-start-mode { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.inv-start-mode legend { padding: 0; margin-bottom: 3px; }
.inv-start-go { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.inv-start-state, .inv-start-why { margin: 0; }
.inv-start-why { color: var(--severity-medium); }
.inv-start-disabled .inv-start-reason, .inv-start-disabled .inv-start-row label, .inv-start-disabled .inv-start-mode { opacity: .55; }
.inv-start-open { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.inv-list-reason { max-width: 420px; }
.inv-row-action { margin-left: 8px; font-size: 11px; }
.inv-tenant-switch { border-left: 3px solid var(--border); }
.inv-tenant-switch-on { border-left-color: var(--severity-high); }
.inv-switch-state { font-family: var(--font-mono); font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: var(--radius-sm); border: var(--border-w) solid var(--border); color: var(--text-muted); }
.inv-tenant-switch-on .inv-switch-state { color: var(--severity-high); border-color: var(--severity-high); }
/* A chat's hand-off link renders as a button. */
.chat-markdown a[href*="/investigations/new"] {
    display: inline-block; margin-top: 6px; padding: 6px 12px; border-radius: var(--radius-sm);
    background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 600; font-size: 12px;
}
.chat-markdown a[href*="/investigations/new"]:hover { background: var(--accent-strong); color: var(--on-accent); }

@media (max-width: 1100px) {
    .inv-pane-tabs { display: flex; }
    .inv-workspace, .inv-workspace.inv-ctx-collapsed { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
    .inv-workspace .inv-pane { display: none; }
    .inv-workspace[data-pane="context"] .inv-pane-context,
    .inv-workspace[data-pane="conversation"] .inv-pane-conversation,
    .inv-workspace[data-pane="output"] .inv-pane-output { display: flex; }
    .inv-workspace.inv-ctx-collapsed .inv-context { display: block; }
    .inv-collapse { display: none; }
    .inv-scroll { max-height: 65vh; }
    .inv-terminal { min-height: 50vh; }
    .inv-header { grid-template-columns: minmax(0, 1fr); }
    .inv-header-controls { align-items: flex-start; }
    .inv-just { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .inv-cmd.inv-cmd-pending { animation: none; box-shadow: inset 3px 0 0 0 var(--accent); }
    .inv-dots::after { animation: none; }
    .inv-progress-bar { transition: none; }
}

/* ── Feedback tracker (list, ticket page, new-ticket form) ─────────────────
   Built from the Tickets list's pieces (search, chips, meta, bundle-table with
   the severity bar — here the bar is the priority). Every colour is a token. */
.nowrap { white-space: nowrap; }
.fb-page-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }

.fb-chip { white-space: nowrap; }
.fb-chip-count { font-weight: 500; letter-spacing: 0.04em; opacity: 0.85; }
.chip-fb-status-open.active      { color: var(--severity-medium); border-color: var(--severity-medium); }
.chip-fb-status-in_review.active { color: var(--level-info);      border-color: var(--level-info); }
.chip-fb-status-planned.active   { color: var(--accent);          border-color: var(--accent); }
.chip-fb-status-done.active      { color: var(--severity-low);    border-color: var(--severity-low); }
.chip-fb-status-declined.active  { color: var(--text-secondary);  border-color: var(--text-muted); }
.chip:focus-visible,
.fb-title-link:focus-visible,
.bundle-table thead th a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.fb-table tbody td { padding-top: 9px; padding-bottom: 9px; vertical-align: middle; }
/* The title column takes whatever is left (max-width: 0 lets the snippet's
   ellipsis work instead of pushing the table wider than the page). */
.fb-table td.col-title { width: 100%; max-width: 0; min-width: 220px; }
.fb-table .col-kind { width: 84px; }
.fb-table .col-priority { width: 96px; white-space: nowrap; }
.fb-table .col-status { width: 112px; white-space: nowrap; }
.fb-table .col-by { width: 150px; white-space: nowrap; }
.fb-table .col-date { width: 120px; white-space: nowrap; color: var(--text-muted); font-size: 11px; }

.fb-title-link {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}
.fb-title-link:hover,
.fb-title-link:focus-visible,
tr.row-link:hover .fb-title-link { color: var(--accent); text-decoration: none; }
.fb-row-closed .fb-title-link { color: var(--text-secondary); }
.fb-snippet {
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fb-meta { display: flex; align-items: center; gap: 10px; margin-top: 5px; flex-wrap: wrap; }
.fb-icon { width: 12px; height: 12px; flex: none; }
.fb-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
    padding: 1px 7px 1px 5px;
    border-radius: 999px;
    border: var(--border-w) solid var(--border);
    background: var(--panel);
    color: var(--text-secondary);
}
.fb-tag-assistant { color: var(--level-info); border-color: color-mix(in srgb, var(--level-info) 45%, var(--border)); }
.fb-comment-count { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); white-space: nowrap; }

.fb-kind { color: var(--text-secondary); white-space: nowrap; }
.fb-kind-bug { color: var(--error-fg); border-color: color-mix(in srgb, var(--error-fg) 40%, var(--border)); }
.fb-priority { display: inline-flex; align-items: center; white-space: nowrap; }
.fb-status { font-size: 9px; }

.fb-user { display: inline-flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
.fb-user-name { overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.fb-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    background: var(--card-selected);
    border: var(--border-w) solid color-mix(in srgb, var(--accent) 35%, var(--border));
}

/* Ticket page */
.fb-detail { max-width: 1180px; }
.fb-head { padding: 20px 24px; margin-bottom: 16px; }
.fb-head-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fb-title { margin: 0 0 10px; font-size: 22px; line-height: 1.3; overflow-wrap: anywhere; }
.fb-byline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.fb-byline strong { color: var(--text-secondary); font-weight: 600; }
.fb-sep { color: var(--border); }
.fb-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.fb-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.fb-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.fb-body { padding: 20px 24px; }
.fb-section-label { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.fb-section-gap { margin-top: 18px; }
.fb-prose { font-size: 14px; line-height: 1.6; color: var(--text-primary); overflow-wrap: anywhere; }
.fb-affected { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-secondary); font-size: 13px; }
.fb-empty-details { margin: 0; font-size: 13px; line-height: 1.5; }
.fb-body .issue-editor { margin-top: 18px; padding-top: 14px; border-top: var(--border-w) solid var(--border); }
.issue-editor > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-form { margin-top: 12px; }
.fb-form textarea.input { resize: vertical; line-height: 1.5; }
.fb-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.fb-form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.fb-facts, .fb-triage { padding: 16px 18px; }
.fb-dl { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 9px 10px; margin: 4px 0 0; font-size: 12px; align-items: center; }
.fb-dl dt { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.fb-dl dd { margin: 0; color: var(--text-secondary); min-width: 0; overflow-wrap: anywhere; }
.fb-admin-badge {
    font-size: 8px; letter-spacing: 0.14em; padding: 1px 5px; border-radius: 3px;
    color: var(--accent); border: var(--border-w) solid color-mix(in srgb, var(--accent) 45%, var(--border));
}
.fb-triage .field { margin-bottom: 12px; }
.fb-triage .input { padding: 7px 10px; font-size: 13px; }
.fb-triage-form .btn { width: 100%; }
.fb-danger { margin-top: 16px; padding-top: 14px; border-top: var(--border-w) solid var(--border); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* New-ticket form */
.fb-form-card { max-width: 720px; }
.fb-form-card.card { padding: 22px 24px; }
.fb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fb-optional { font-weight: 500; letter-spacing: 0.08em; text-transform: none; color: var(--text-muted); margin-left: 4px; }

@media (max-width: 1000px) {
    .fb-detail-grid { grid-template-columns: minmax(0, 1fr); }
    .fb-side { position: static; }
}
@media (max-width: 1100px) {
    .fb-table .col-kind { display: none; }
    .fb-table .col-by { width: 40px; }
    .fb-table .fb-user-name { display: none; }
}
/* Narrow: the table becomes stacked cards — title first, then a row of
   pills (each on one line), then who and when. */
@media (max-width: 760px) {
    .fb-table thead { display: none; }
    .fb-table, .fb-table tbody { display: block; }
    .fb-table tbody tr {
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
        padding: 10px 12px; border-left: 3px solid var(--text-muted);
    }
    .fb-table tbody tr.sev-high   { border-left-color: var(--severity-high); }
    .fb-table tbody tr.sev-medium { border-left-color: var(--severity-medium); }
    .fb-table tbody tr.sev-low    { border-left-color: var(--severity-low); }
    .fb-table tbody td { display: block; padding: 0; width: auto; border: 0; }
    .fb-table tbody tr > td:first-child { border-left: 0; padding-left: 0; }
    .fb-table tbody td.col-title { flex: 1 0 100%; min-width: 0; }
    .fb-table .col-kind { display: block; }
    .fb-table .fb-snippet { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .fb-table td.col-date { margin-left: auto; }
    .fb-table td.col-title { max-width: none; width: auto; }
    .fb-table .fb-user-name { display: inline; }
    .fb-form-row { grid-template-columns: 1fr; }
    .fb-head { padding: 16px; }
    .fb-title { font-size: 19px; }
}

/* ── Device page: top card + live-screen monitor (agent-spec.md §4.11) ──────
   Layout inspired by the Frame Sandbox page — a drawn monitor on the left, the
   existing facts in label/value columns, an Actions link column — rendered in
   Dizzion's own visual language (tokens only, both themes). No colour is
   hard-coded; the monitor is CSS, and the live frame is the only image. */
.device-topcard { padding: 22px 24px 24px; margin: 4px 0 22px; }
.dz-topcard-title {
    display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
    padding-bottom: 16px; margin-bottom: 20px; border-bottom: var(--border-w) solid var(--border);
}
.dz-topcard-name { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 20px; min-width: 0; }
.dz-topcard-name .mono { overflow-wrap: anywhere; }
.dz-topcard-tenant { margin-left: auto; font-size: 13px; text-decoration: none; padding: 4px 10px; border-radius: 999px; border: var(--border-w) solid var(--border); }
.dz-topcard-tenant:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.dz-topcard-tenant:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dz-topcard-grid {
    display: grid;
    grid-template-columns: clamp(220px, 24vw, 380px) minmax(0, 1fr) minmax(170px, 210px);
    gap: 28px;
    align-items: center;
}
.dz-topcard-facts { min-width: 0; }
.dz-topcard-links {
    align-self: stretch;
    display: flex; flex-direction: column; gap: 10px;
    padding-left: 22px; border-left: var(--border-w) solid var(--border);
}
.dz-topcard-links > .label-caps { padding: 0 10px; }
.dz-links { list-style: none; margin: 0; padding: 0 0 10px; display: flex; flex-direction: column; gap: 1px; border-bottom: var(--border-w) solid var(--border); }
.dz-links:last-child { border-bottom: 0; padding-bottom: 0; }
.dz-link {
    display: flex; align-items: center; gap: 8px;
    min-height: 32px; padding: 5px 10px;
    font-size: 13px; color: var(--text-primary); text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color 120ms ease, background-color 120ms ease;
}
.dz-link::before { content: "\203A"; color: var(--accent); font-size: 16px; line-height: 1; width: 8px; transition: transform 120ms ease; }
.dz-link:hover, .dz-link:focus-visible { color: var(--accent); background: var(--card-hover); text-decoration: none; }
.dz-link:hover::before { transform: translateX(2px); }
.dz-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.dz-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.dz-fact { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: var(--border-w) solid var(--border); min-width: 0; }
.dz-facts > .dz-fact:nth-last-child(-n+2) { border-bottom: 0; }
.dz-fact dt { margin: 0; }
.dz-fact dd { margin: 0; color: var(--text-primary); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.dz-fact dd code { color: var(--text-primary); }
.dz-topcard-facts .ds-reasons { margin-top: 14px; }

.dz-monitor { display: flex; flex-direction: column; align-items: center; }
.dz-monitor-bezel {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    box-shadow: inset 0 0 0 1px var(--border);
}
.dz-monitor-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--bg);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dz-screen-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 12px; }
.dz-os-glyph { color: var(--text-muted); opacity: .85; }
.dz-os-name { color: var(--text-primary); font-weight: 600; letter-spacing: .02em; }
.dz-screen-pill {
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted);
}
.dz-screen-pill.is-online { color: var(--severity-low); border-color: var(--severity-low); }
.dz-screen-pill.is-offline { color: var(--text-muted); }
.dz-screen-reason { margin-top: 2px; max-width: 90%; }
.dz-screen-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--screen-letterbox); }
.dz-screen-frame.dz-fade { animation: dz-screen-fade .35s ease; }
@keyframes dz-screen-fade { from { opacity: .35; } to { opacity: 1; } }
.dz-screen-badge {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px;
    background: var(--card); border: 1px solid var(--border); color: var(--accent);
}
.dz-screen-badge[hidden] { display: none; }
/* A kept frame whose fresh captures are failing: one quiet line under the
   monitor (never over the picture), and the LIVE badge turns PAUSED. */
.dz-screen-stale { margin-top: 6px; text-align: center; color: var(--severity-medium); max-width: 100%; }
.dz-screen-stale[hidden] { display: none; }
.dz-screen-badge.is-paused { color: var(--severity-medium); }
.dz-screen-badge.is-paused .dz-screen-dot { background: var(--severity-medium); animation: none; }
.dz-screen-frame[hidden] { display: none; }
.dz-screen-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: dz-screen-pulse 1.4s ease-in-out infinite; }
@keyframes dz-screen-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.dz-monitor-stand { display: flex; flex-direction: column; align-items: center; }
.dz-monitor-neck { width: 10px; height: 16px; background: var(--border); }
.dz-monitor-foot { width: 90px; height: 6px; border-radius: 3px; background: var(--border); }

.dz-monitor-caption { margin-top: 10px; text-align: center; }
.dz-monitor-controls { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.dz-screen-toggle { display: inline-flex; align-items: center; gap: 7px; }
.dz-screen-toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.dz-screen-toggle.is-on .dz-screen-toggle-dot { background: var(--accent); }
.dz-screen-why { flex-basis: 100%; text-align: center; }

.dz-screen-overlay {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    background: var(--screen-scrim); padding: 24px;
}
.dz-screen-overlay[hidden] { display: none; }
.dz-screen-overlay-img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: var(--shadow-float); background: var(--screen-letterbox); }
.dz-screen-overlay-close {
    position: absolute; top: 16px; right: 20px;
    background: none; border: none; color: var(--on-accent); font-size: 32px; line-height: 1; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
    .dz-screen-frame.dz-fade { animation: none; }
    .dz-screen-dot { animation: none; }
}

/* ── Device page: Overview sections (Health, Warnings, Actions, Frame) ─────
   One rhythm for the whole page: section headings 28px above / 12px below,
   cards on --card with a 1px border, 20px padding inside the Actions cards.
   Tokens only, both themes. */
.device-health > .section-heading:first-child { margin-top: 0; }
.dl-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dl-heading .dl-source { color: var(--text-secondary); }
.dl-heading .dl-indicator { margin-left: auto; }

.device-health .mon-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.device-health .mon-card { display: flex; flex-direction: column; min-width: 0; padding: 16px 18px; }
.device-health .mon-bigval { font-size: 26px; margin: 6px 0 10px; line-height: 1.1; }
.device-health .mon-bar { height: 6px; margin-bottom: 10px; background: color-mix(in srgb, var(--border) 70%, transparent); }
.device-health .mon-card > .muted:last-child { margin-top: auto; color: var(--text-secondary); overflow-wrap: anywhere; }
/* The live sparkline: no box, just the line over a faint baseline. Its slot is
   kept while it waits for a second sample, so the tiles never jump. */
.device-health .dl-spark {
    height: 26px; margin: 0 0 10px; background: transparent; border-radius: 0;
    border-bottom: var(--border-w) dashed color-mix(in srgb, var(--border) 80%, transparent);
    overflow: visible;
}
.device-health .dl-spark[hidden] { display: block; visibility: hidden; }
.device-health[data-live-state="disabled"] .dl-spark[hidden],
.device-health[data-live-state="upgrade"] .dl-spark[hidden] { display: none; }
.device-health .dz-session-val {
    font-size: 17px; margin: 8px 0 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.dz-services { margin-top: 12px; padding: 16px 18px; }
.dz-service-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

.dz-warn-none {
    display: flex; align-items: center; gap: 6px;
    margin-top: 12px; font-size: 13px; color: var(--text-secondary);
}
.dz-warn-ok {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700;
    color: var(--severity-low); border: var(--border-w) solid var(--severity-low);
}
.dz-count {
    display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
    font-size: 11px; line-height: 18px; vertical-align: 1px;
    color: var(--severity-medium); border: var(--border-w) solid var(--severity-medium);
}
.dz-warn-card { padding: 6px 0; }
/* Installed components (device Overview) and the tenant Devices card's
   Versions list (app-volumes-spec.md §2.3). Tokens only. */
.dz-comp-card { padding: 8px 12px; }
.dz-comp-table td { color: var(--text-primary); }
.dz-comp-table td.mono { color: var(--text-secondary); }
.dz-comp-table tr:last-child td { border-bottom: 0; }
.dz-comp-role { margin-left: 8px; font-size: 9px; }
.tenant-versions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.tenant-versions-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.tenant-versions-list li { font-size: 12px; color: var(--text-primary); }
.tenant-versions-list .tv-vers { color: var(--text-secondary); }
.tenant-versions-list .tv-mixed { color: var(--severity-medium); }
.dz-warn-list { list-style: none; margin: 0; padding: 0; }
.dz-warn {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin: 0 18px; padding: 10px 0 10px 12px;
    border-left: 3px solid var(--severity-medium);
    font-size: 13px; color: var(--text-primary);
}
.dz-warn + .dz-warn { border-top: var(--border-w) solid var(--border); }
.dz-warn-icon { color: var(--severity-medium); }
.dz-warn-code { font-size: 11px; letter-spacing: .04em; color: var(--severity-medium); }
.dz-warn-msg { flex: 1 1 260px; min-width: 0; }
.dz-warn-since { margin-left: auto; white-space: nowrap; color: var(--text-secondary); }

.dz-act-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dz-act-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dz-act-wide { grid-column: 1 / -1; }
.dz-act-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; min-width: 0; scroll-margin-top: 16px; }
.dz-act-head { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.dz-act-title {
    margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--text-primary);
}
.dz-act-head .info-tip { margin-left: auto; }
.dz-act-form { display: flex; flex-direction: column; gap: 12px; }
.dz-fields { display: grid; gap: 12px; }
.dz-fields-collect { grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); }
.dz-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dz-field-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.dz-field-label .muted { font-weight: 400; }
.dz-act-card .input { height: 38px; padding: 8px 12px; font-size: 13px; }
.dz-act-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.dz-act-foot .btn { margin-left: auto; flex: 0 0 auto; min-height: 34px; }
.dz-act-hint { margin: 0; color: var(--text-secondary); line-height: 1.45; }
.dz-act-warn { margin: 0; color: var(--severity-medium); line-height: 1.45; }
.dz-act-error { margin: 0; }
.dz-act-quick { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: var(--border-w) solid var(--border); }
.dz-quick-row { display: flex; gap: 8px 14px; flex-wrap: wrap; }
.dz-quick { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.dz-quick .btn { min-height: 32px; }
.dz-act-card .btn:focus-visible,
.dz-act-card .input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Agent card: the version partial (#device-version, live-swapped) sits inside. */
.dz-act-agent .agent-update { margin: 0; padding: 0; border-top: 0; }
.dz-act-agent .agent-version-grid { gap: 14px 28px; align-items: center; }
.dz-act-agent .agent-ver-val { font-size: 15px; margin-top: 6px; color: var(--text-primary); }
.dz-act-agent .agent-update > p.muted { color: var(--text-secondary); line-height: 1.45; }

/* Investigation card: the shared start form, laid out for the card. */
.dz-act-card.inv-actions-start { margin-top: 0; padding-top: 18px; border-top: var(--border-w) solid var(--border); }
.dz-act-card .inv-start { gap: 12px; }
.dz-act-card .inv-start-intro { color: var(--text-secondary); line-height: 1.5; max-width: 100ch; }
.dz-act-card .inv-start-reason { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--text-secondary); }
.dz-act-card .inv-start-reason br { display: none; }
.dz-act-card .inv-start-reason textarea { font-weight: 400; font-size: 13px; padding: 8px 12px; }
.dz-act-card .inv-start-row { gap: 14px 28px; align-items: center; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--panel); border: var(--border-w) solid var(--border); }
.dz-act-card .inv-start-row > label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--text-secondary); }
.dz-act-card .inv-start-row > label br { display: none; }
.dz-act-card .inv-start-row select.input { height: 36px; padding: 6px 10px; font-size: 13px; width: auto; min-width: 110px; }
.dz-act-card .inv-start-mode legend { font-weight: 600; color: var(--text-secondary); }
.dz-act-card .inv-start-state { color: var(--text-secondary); }
.dz-act-card .inv-start-open { padding: 4px 0; }
.dz-act-card .inv-start-open .btn { margin-left: auto; }

/* Frame publish readiness (Sandbox only). */
.dz-frame-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dz-frame-value { margin: 0; font-size: 20px; }
.dz-frame-pool { margin-left: auto; }
.dz-frame-why { margin: 10px 0 16px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.dz-frame-facts {
    margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 24px;
    padding: 14px 0; border-top: var(--border-w) solid var(--border); border-bottom: var(--border-w) solid var(--border);
}
.dz-frame-facts > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dz-frame-facts dd { margin: 0; font-size: 13px; color: var(--text-primary); overflow-wrap: anywhere; }
.dz-frame-note { margin: 12px 0 0; color: var(--text-secondary); line-height: 1.5; }

/* Other tabs: the same rhythm. */
[data-tab-panel="metrics"] .sparkline {
    background: transparent; border-radius: 0;
    border-bottom: var(--border-w) dashed color-mix(in srgb, var(--border) 80%, transparent);
}
[data-tab-panel="metrics"] .mon-card .muted,
[data-tab-panel="notes"] .muted { color: var(--text-secondary); }
#device-notes textarea { width: 100%; font: inherit; font-size: 13px; resize: vertical; }

/* The device tab strip scrolls sideways on a phone instead of widening the page. */
#device-tabs { overflow-x: auto; scrollbar-width: none; }
#device-tabs::-webkit-scrollbar { display: none; }
#device-tabs .tab { white-space: nowrap; flex: 0 0 auto; }

@media (max-width: 1100px) {
    .dz-topcard-grid { grid-template-columns: clamp(220px, 28vw, 340px) minmax(0, 1fr); }
    .dz-topcard-links { grid-column: 1 / -1; padding: 16px 0 0; border-left: 0; border-top: var(--border-w) solid var(--border); flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 4px 18px; }
    .dz-topcard-links > .label-caps { flex-basis: 100%; }
    .dz-links { flex-direction: row; flex-wrap: wrap; border-bottom: 0; padding: 0; gap: 2px 4px; }
    .dz-act-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .dz-fields-collect { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    /* No sideways page scroll on a phone: the breadcrumb wraps, and hidden
       info-badge popovers near the edge no longer widen the page. */
    .body:has(> #device-header) { overflow-x: clip; }
    .body:has(> #device-header) > .back-row { flex-wrap: wrap; gap: 8px 10px; }
    .device-topcard { padding: 16px; }
    .dz-topcard-name { font-size: 17px; }
    .dz-topcard-tenant { margin-left: 0; }
    .dz-topcard-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .dz-topcard-monitor { width: min(100%, 340px); margin: 0 auto; }
    .dz-facts { grid-template-columns: minmax(0, 1fr); }
    .dz-facts > .dz-fact:nth-last-child(2) { border-bottom: var(--border-w) solid var(--border); }
    .dz-topcard-links { padding-top: 14px; }
    .dz-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .dz-act-card { padding: 16px; }
    .dz-act-foot { flex-direction: column; align-items: stretch; }
    .dz-act-foot .btn { margin-left: 0; width: 100%; }
    .dz-warn { margin: 0 14px; }
    .dz-warn-since { margin-left: 0; }
    .dz-frame-pool { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .dz-link, .dz-link::before { transition: none; }
    .dz-link:hover::before { transform: none; }
}

/* Tasks tab: a spinner and a count while tasks are queued or running. */
.tab-activity { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; vertical-align: middle; }
.tab-activity:empty { display: none; }
.tab-spinner { width: 11px; height: 11px; border-width: 2px; }
.tab-badge {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; letter-spacing: 0;
    background: var(--accent); color: var(--bg);
}
@media (prefers-reduced-motion: reduce) { .tab-spinner { animation: none; } }

/* ── Device Environment tab (env-vars-spec.md §3) ────────────────────────
   Tokens only: both themes come from tokens.css. Rows are a CSS grid (not a
   <table>) so they stack cleanly at phone width. */
.env-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.env-subnav { margin-left: auto; display: inline-flex; gap: 6px; }
.env-subnav .chip { cursor: pointer; font: inherit; font-size: 11px; }
.env-view { margin-top: 14px; }
.env-live-card, .env-hist-card, .env-at-card, .env-recs-card { padding: 14px 16px; }
.env-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.env-search { flex: 1 1 260px; max-width: 420px; }
.env-search .input { width: 100%; }
.env-live-state { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.env-table-meta { margin: 0 0 10px; }
.env-offline { color: var(--severity-medium); }
.env-group { margin-top: 14px; }
.env-group:first-of-type { margin-top: 4px; }
.env-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: var(--border-w) solid var(--border); }
.env-group-label { font-weight: 600; color: var(--text-primary); font-size: 13px; }
.env-group-source { margin-left: auto; overflow-wrap: anywhere; font-size: 10px; }
.env-group-state { margin: 8px 0 0; }
.env-user-chip, .env-frame-chip {
    display: inline-block; font-size: 9px; letter-spacing: 0.14em; padding: 1px 6px; border-radius: 999px;
    border: var(--border-w) solid var(--border); color: var(--text-muted); vertical-align: 1px;
}
.env-frame-chip { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); margin-left: 4px; }
.env-rows { display: grid; grid-template-columns: minmax(140px, 28%) minmax(0, 1fr); }
.env-row { display: contents; }
.env-row > span { padding: 6px 10px; border-bottom: var(--border-w) solid var(--border); min-width: 0; font-size: 12px; }
.env-row-head > span { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding-top: 8px; }
.env-name { color: var(--text-primary); overflow-wrap: anywhere; }
.env-value-text { color: var(--text-secondary); overflow-wrap: anywhere; white-space: pre-wrap; }
.env-row.is-recent > span { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.env-row.is-recent > .env-name { box-shadow: inset 3px 0 0 var(--accent); }
.env-changed-tag {
    display: inline-block; margin-left: 8px; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent); font-family: var(--font-sans);
}
.env-secret { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); cursor: help; }
.env-lock { color: var(--text-muted); flex: none; }
.env-trunc { font-size: 10px; color: var(--severity-medium); margin-left: 6px; }
.env-empty { display: flex; align-items: center; gap: 10px; padding: 18px 4px; color: var(--text-secondary); }
.env-empty p { margin: 0; }
.env-footnote { margin: 12px 0 0; }
.env-why { margin-left: 4px; }

.env-rec-card { margin-top: 12px; padding: 14px 16px; border-left: 3px solid var(--border); }
.env-rec-card.is-on { border-left-color: var(--severity-critical); }
.env-rec-head { display: flex; align-items: center; gap: 8px; }
.env-rec-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.env-rec-head .info-tip { margin-left: auto; }
.env-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); flex: none; }
.env-rec-dot.is-on { background: var(--severity-critical); box-shadow: 0 0 0 3px color-mix(in srgb, var(--severity-critical) 22%, transparent); animation: env-pulse 1.6s ease-in-out infinite; }
@keyframes env-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--severity-critical) 8%, transparent); } }
.env-rec-line { margin: 8px 0 10px; font-size: 12px; color: var(--text-secondary); }
.env-rec-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.env-rec-stop { border-color: color-mix(in srgb, var(--severity-critical) 55%, var(--border)); }
.env-rec-msg { margin: 8px 0 0; }
.env-rec-ok { color: var(--severity-low); }

.env-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.env-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.env-f .input { width: 100%; }
.env-f-btn { justify-content: flex-end; }
.env-hist-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.env-hist-list { display: grid; grid-template-columns: max-content max-content minmax(120px, 22%) minmax(0, 1fr); }
.env-hist-row { display: contents; }
.env-hist-row > span { padding: 6px 10px; border-bottom: var(--border-w) solid var(--border); min-width: 0; font-size: 12px; }
.env-hist-head > span { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.env-hist-change { overflow-wrap: anywhere; }
.env-op {
    display: inline-block; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; padding: 1px 6px;
    border-radius: 999px; margin-right: 6px; border: var(--border-w) solid var(--border); color: var(--text-secondary);
}
.env-op-created { color: var(--severity-low); border-color: color-mix(in srgb, var(--severity-low) 45%, transparent); }
.env-op-changed { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.env-op-unset { color: var(--severity-critical); border-color: color-mix(in srgb, var(--severity-critical) 45%, transparent); }
.env-old { color: var(--text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-muted) 60%, transparent); white-space: pre-wrap; }
.env-new { color: var(--text-primary); white-space: pre-wrap; }
.env-arrow { color: var(--text-muted); margin: 0 4px; }
.env-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.env-at-heading { margin-top: 22px; }
.env-recs { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); }
.env-recs-row { display: contents; }
.env-recs-row > span { padding: 6px 10px; border-bottom: var(--border-w) solid var(--border); font-size: 12px; }
.env-recs-head > span { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 640px) {
    .env-subnav { margin-left: 0; }
    .env-rows { grid-template-columns: minmax(0, 1fr); }
    .env-row > .env-name { border-bottom: 0; padding-bottom: 0; font-weight: 600; }
    .env-row-head { display: none; }
    .env-group-source { margin-left: 0; }
    .env-hist-list { grid-template-columns: minmax(0, 1fr); }
    .env-hist-row > span { border-bottom: 0; padding: 2px 10px; }
    .env-hist-row > span:last-child { border-bottom: var(--border-w) solid var(--border); padding-bottom: 8px; }
    .env-hist-head { display: none; }
    .env-recs { grid-template-columns: minmax(0, 1fr); }
    .env-recs-head { display: none; }
    .env-recs-row > span { border-bottom: 0; padding: 2px 10px; }
    .env-recs-row > span:last-child { border-bottom: var(--border-w) solid var(--border); padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .env-rec-dot.is-on { animation: none; }
}

/* ── Knowledge-base grounding (kb-grounding-spec.md) ─────────────────────────
   The Sources receipt under an assistant answer, and the read-only /kb viewer.
   Token-only colours, so both themes come for free. */
.kb-sources {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-top: 10px; padding-top: 8px; border-top: var(--border-w) solid var(--border);
}
.kb-sources .label-caps { font-size: 10px; margin-right: 2px; }
.kb-source-chip {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    font-size: 11px; line-height: 1.4; padding: 2px 8px; border-radius: 999px;
    border: var(--border-w) solid var(--border); background: var(--panel);
    color: var(--text-secondary); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-source-chip:hover { border-color: var(--accent); color: var(--text-primary); text-decoration: none; }
.kb-source-kb { font-family: var(--font-mono), monospace; color: var(--accent); }
.kb-source-sep { color: var(--text-muted); }
.kb-id-pill {
    font-family: var(--font-mono), monospace; font-size: 11px; padding: 1px 7px;
    border-radius: 999px; border: var(--border-w) solid var(--border); color: var(--text-secondary);
}
.kb-stale { color: var(--severity-medium); }
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.kb-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; color: var(--text-primary); text-decoration: none; }
.kb-card:hover { border-color: var(--accent); text-decoration: none; }
.kb-card p { margin: 0; }
.kb-card-head { display: flex; justify-content: space-between; align-items: center; }
.kb-card-title { font-weight: 600; }
.kb-page { margin-top: 4px; }
.kb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kb-table th, .kb-table td { text-align: left; padding: 6px 8px; border-bottom: var(--border-w) solid var(--border); vertical-align: top; }
.kb-table th { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.kb-failures { color: var(--severity-high); }

/* Golden images (tenant Overview card, customer summary, device access card).
   Discovery records, read-only. Colours are tokens only; the flags (old image,
   UAT ≠ prod) stay muted on purpose — they are things to know, not alarms. */
.gi-section { margin-bottom: 8px; }
.gi-card { padding: 18px 20px; margin-bottom: 12px; border-left: 3px solid var(--accent); min-width: 0; overflow-wrap: anywhere; }
.gi-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.gi-chip { color: var(--accent); border-color: var(--accent); }
.gi-chip:hover { color: var(--accent); background: var(--panel); }
.gi-name { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.gi-state.gi-state-ok { color: var(--severity-low); border-color: var(--severity-low); }
.gi-stale {
    font-size: 9px; font-weight: 700; letter-spacing: 0.12em; padding: 2px 7px;
    border-radius: 3px; border: var(--border-w) solid var(--severity-medium);
    color: var(--severity-medium); background: var(--panel); white-space: nowrap;
}
.gi-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 14px; }
.gi-fact dt { margin: 0 0 3px; }
.gi-fact dd { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--text-primary); font-size: 14px; }
.gi-fact dd code { font-size: 14px; }
.gi-copy { padding: 1px 8px; font-size: 10px; }
.gi-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 10px; }
.gi-side {
    background: var(--panel); border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm); padding: 10px 12px;
}
.gi-side-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gi-side-label { min-width: 36px; color: var(--text-secondary); }
.gi-arrow { color: var(--text-muted); }
.gi-image { color: var(--text-primary); font-size: 13px; word-break: break-all; }
.gi-side-meta { margin-top: 4px; line-height: 1.6; }
.gi-flag { margin: 6px 0 0; font-style: italic; }
.gi-access {
    margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm);
    border: var(--border-w) dashed var(--border); background: var(--bg);
}
.gi-access-line { margin: 6px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text-primary); }
.gi-access-line code { word-break: break-all; }
.gi-steps { margin: 8px 0 0; padding-left: 20px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.gi-notes { margin: 12px 0 0; color: var(--text-secondary); font-size: 13px; white-space: pre-line; }
.gi-footer { margin-top: 12px; padding-top: 10px; border-top: var(--border-w) solid var(--border); }
.gi-empty { padding: 14px 18px; }
.gi-gone { margin: 4px 0 0; }
.gi-gone summary { cursor: pointer; }
.gi-gone-list { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.gi-summary { padding: 12px 18px; }
.gi-summary-list { list-style: none; margin: 0; padding: 0; }
.gi-summary-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
.gi-summary-list li + li { border-top: var(--border-w) solid var(--border); }
.gi-summary-link { color: var(--link); text-decoration: none; }
.gi-summary-link .mono { font-size: 13px; }
.gi-summary-link:hover { color: var(--link-hover); text-decoration: underline; }
.gi-held { padding: 12px 18px; margin-top: 12px; border-left: 3px solid var(--accent); }
.gi-held-line { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.gi-held-line + .gi-held-line { margin-top: 6px; }
@media (max-width: 640px) {
    .gi-card { padding: 14px; }
    .gi-facts { gap: 10px 18px; }
}

/* ── Global search results (GET /search; partials/search_results.html) ──
   Shared by the /search page in both UI versions and by the V2 command
   palette. Every row is a link; the keyboard-selected one carries
   .is-active (static/v2.js). */
.search-page-form { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; max-width: 680px; }
.search-page-form .input { flex: 1; }
.search-results { display: flex; flex-direction: column; gap: 12px; }
.search-group { display: flex; flex-direction: column; gap: 2px; }
.search-group-label { padding: 0 10px 4px; display: flex; gap: 8px; align-items: baseline; }
.search-more { font-size: 10px; letter-spacing: 0.04em; text-transform: none; font-weight: 600; }
.search-result {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    color: var(--text-primary); border: var(--border-w) solid transparent;
}
.search-result:hover, .search-result.is-active {
    background: var(--card-selected); border-color: var(--border);
    color: var(--text-primary); text-decoration: none;
}
.search-result:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.search-result-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.search-result-title { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.search-result-kind {
    font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--text-muted); flex: none;
}
.search-result-sub { font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; }
.search-result-jump { border-color: var(--accent); }
.search-result-jump .search-result-kind, .search-result-action .search-result-kind { color: var(--accent); }
.search-results kbd {
    font-family: var(--font-mono); font-size: 10px; padding: 0 5px;
    border: var(--border-w) solid var(--border); border-radius: 4px; color: var(--text-muted);
}
.search-empty { font-size: 12px; color: var(--text-muted); padding: 4px 10px; margin: 0; }

/* ── Knowledge-base assistant (/kb, /kb/c/{id}) ─────────────────────────────
   The landing page's recent conversations and example prompts, the inline
   thread (full width — this page is the conversation, so it does not use the
   chat drawer), and the composer pinned to the foot of the viewport. Rich
   content inside .chat-markdown (tables, diagrams) is styled elsewhere. */
.kb-body { padding-bottom: 0; }
.kb-surface { display: flex; flex-direction: column; min-height: calc(100vh - 32px); }
.kb-surface > .kb-composer { margin-top: auto; }

.kb-recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kb-recent-item {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px 14px; background: var(--card);
    border: var(--border-w) solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-primary); text-decoration: none;
}
.kb-recent-item:hover, .kb-recent-item:focus-visible { border-color: var(--accent); text-decoration: none; }
.kb-recent-title { font-size: 13px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.kb-recent-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; flex: none; max-width: 50%; }

.kb-ask .section-heading { margin-bottom: 8px; }
.kb-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.kb-examples[hidden] { display: none; }
.kb-example {
    font: inherit; font-size: 12px; line-height: 1.4; text-align: left; cursor: pointer;
    padding: 6px 12px; border-radius: 999px; max-width: 100%;
    background: var(--card); color: var(--text-secondary);
    border: var(--border-w) solid var(--border);
}
.kb-example:hover, .kb-example:focus-visible { border-color: var(--accent); color: var(--text-primary); outline: none; }

/* The thread grows with the page instead of scrolling in a box. */
.chat-messages.kb-thread {
    max-height: none; overflow: visible; background: transparent;
    border: none; padding: 4px 0 12px; gap: 16px;
}
.kb-thread[hidden] { display: none; }
.kb-thread .chat-message { max-width: min(760px, 85%); }
.kb-thread .chat-message.chat-assistant { max-width: 100%; width: 100%; }
.kb-thread .chat-message.chat-assistant .chat-bubble { width: 100%; box-sizing: border-box; padding: 14px 18px; font-size: 14px; }
.kb-thread .chat-empty { border: var(--border-w) dashed var(--border); border-radius: var(--radius); }

.kb-conversation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kb-conversation-title { margin: 0; overflow-wrap: anywhere; }
.kb-conversation-delete { margin: 0; flex: none; }
.kb-conversation-scope .kb-id-pill { margin-right: 2px; }

.kb-composer {
    position: sticky; bottom: 0; z-index: 5;
    margin: 12px 0 0; padding: 12px 0 16px;
    background: var(--bg);
    border-top: var(--border-w) solid var(--border);
}
.kb-composer-fields { border: none; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.kb-scope { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-scope-chip {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
    padding: 3px 10px; border-radius: 999px;
    font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
    background: var(--card); border: var(--border-w) solid var(--border);
}
.kb-scope-chip.kb-scope-all { font-family: var(--font-sans); }
.kb-scope-chip input { margin: 0; accent-color: var(--accent); }
.kb-scope-chip:has(input:checked) { color: var(--text-primary); border-color: var(--accent); background: var(--card-selected); }
.kb-scope-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.kb-composer-row { display: flex; gap: 10px; align-items: stretch; }
.kb-composer-input {
    flex: 1; min-width: 0; resize: vertical; min-height: 64px; max-height: 40vh;
    padding: 10px 12px; line-height: 1.5; font-family: var(--font-sans); font-size: 14px;
    color: var(--text-primary); background: var(--panel);
    border: var(--border-w) solid var(--border); border-radius: var(--radius-sm);
}
.kb-composer-input:focus { outline: none; border-color: var(--accent); }
.kb-composer-input::placeholder { color: var(--text-muted); }
.kb-send { min-width: 96px; }
.kb-composer-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kb-busy { display: none; color: var(--accent); }
.kb-composer.htmx-request .kb-busy { display: inline; }
.kb-composer.htmx-request .kb-send { opacity: 0.6; cursor: wait; }
.kb-composer.is-disabled .kb-composer-input, .kb-composer.is-disabled .kb-send { cursor: not-allowed; opacity: 0.6; }
.kb-composer-reason { color: var(--severity-medium); }

@media (max-width: 640px) {
    .kb-recent-item { flex-direction: column; align-items: flex-start; }
    .kb-recent-meta { max-width: 100%; justify-content: flex-start; }
    .kb-composer-row { flex-direction: column; }
    .kb-send { width: 100%; }
    .kb-thread .chat-message { max-width: 100%; }
    .kb-thread .chat-message.chat-assistant .chat-bubble { padding: 12px; }
}

/* ── Deployment banner (Settings.environment_name) ─────────────────────────
   Shown on every page of a non-production deployment (staging) so it is never
   mistaken for production: a thin bar along the top edge with a pill at top
   centre. Fixed and click-through, so it never moves the layout. Tokens only. */
.env-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    border-top: 3px solid var(--severity-medium);
    pointer-events: none;
}
.env-banner-pill {
    padding: 1px 12px 3px;
    border: 1px solid var(--severity-medium);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: var(--panel);
    color: var(--severity-medium);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}