/*
 * Orpheus design system. This file is plain CSS (uses CSS Cascade Layers
 * `@layer utilities` natively, no Tailwind directives like @apply / @tailwind),
 * so Propshaft serves it directly to the browser. Do NOT add `@import
 * "tailwindcss"` here unless you also wire it through @tailwindcss/cli
 * (package.json) — the browser can't resolve that import and will 404 it.
 */

@layer utilities {
    /* Orpheus Design System - Minimalist Dark Theme */
    :root {
        --orpheus-bg: #0a0f1a;
        --orpheus-bg-subtle: #111827;
        --orpheus-bg-card: #141c2b;
        --orpheus-border: rgba(255, 255, 255, 0.08);
        --orpheus-border-focus: rgba(59, 130, 246, 0.5);
        --orpheus-text: #f8fafc;
        --orpheus-text-secondary: #94a3b8;
        --orpheus-text-muted: #64748b;
        --orpheus-accent: #3b82f6;
        --orpheus-accent-soft: rgba(59, 130, 246, 0.15);
    }

    /* Light Mode Variables */
    [data-theme="light"] {
        --orpheus-bg: #f8fafc;
        --orpheus-bg-subtle: #f1f5f9;
        --orpheus-bg-card: #ffffff;
        --orpheus-border: #e2e8f0;
        --orpheus-border-focus: rgba(59, 130, 246, 0.5);
        --orpheus-text: #0f172a;
        --orpheus-text-secondary: #475569;
        --orpheus-text-muted: #94a3b8;
        --orpheus-accent: #3b82f6;
        --orpheus-accent-soft: rgba(59, 130, 246, 0.1);
    }

    /* Base Background */
    .orpheus-gradient-bg {
        background: var(--orpheus-bg);
        min-height: 100vh;
    }

    /* Typography */
    .orpheus-gradient-text {
        color: var(--orpheus-accent);
    }

    .orpheus-glow-text {
        color: var(--orpheus-text);
    }

    /* Buttons - Clean and Minimal */
    .orpheus-btn-primary {
        background: var(--orpheus-accent);
        color: white;
        padding: 0.625rem 1.25rem;
        border-radius: 0.375rem;
        font-weight: 500;
        font-size: 0.875rem;
        transition: opacity 0.15s ease;
        border: none;
        cursor: pointer;
    }

    .orpheus-btn-primary:hover {
        opacity: 0.9;
    }

    .orpheus-btn-secondary {
        background: transparent;
        color: var(--orpheus-text-secondary);
        padding: 0.625rem 1.25rem;
        border-radius: 0.375rem;
        border: 1px solid var(--orpheus-border);
        font-weight: 500;
        font-size: 0.875rem;
        transition: all 0.15s ease;
        cursor: pointer;
    }

    .orpheus-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.03);
        color: var(--orpheus-text);
        border-color: rgba(255, 255, 255, 0.15);
    }

    /* Cards - Subtle and Clean */
    .orpheus-card-light {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        padding: 1.5rem;
    }

    .orpheus-card {
        background: var(--orpheus-bg-card);
        border: 1px solid var(--orpheus-border);
        border-radius: 0.5rem;
        padding: 1.25rem;
    }

    .orpheus-card-stat {
        background: var(--orpheus-bg-card);
        border: 1px solid var(--orpheus-border);
        border-radius: 0.5rem;
        padding: 1.25rem;
    }

    /* Badges - Subtle */
    .orpheus-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.025em;
    }

    .orpheus-badge-success {
        background: rgba(34, 197, 94, 0.12);
        color: #4ade80;
    }

    .orpheus-badge-warning {
        background: rgba(251, 191, 36, 0.12);
        color: #fcd34d;
    }

    .orpheus-badge-error {
        background: rgba(239, 68, 68, 0.12);
        color: #f87171;
    }

    .orpheus-badge-critical {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }

    .orpheus-badge-info {
        background: var(--orpheus-accent-soft);
        color: var(--orpheus-accent);
    }

    /* Inputs */
    .orpheus-input-light {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.375rem;
        padding: 0.625rem 0.875rem;
        color: #0f172a;
        font-size: 0.875rem;
        transition: border-color 0.15s ease;
        width: 100%;
    }

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

    .orpheus-input-light::placeholder {
        color: #94a3b8;
    }

    .orpheus-input {
        background: var(--orpheus-bg-subtle);
        border: 1px solid var(--orpheus-border);
        border-radius: 0.375rem;
        padding: 0.625rem 0.875rem;
        color: var(--orpheus-text);
        font-size: 0.875rem;
        transition: border-color 0.15s ease;
        width: 100%;
    }

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

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

    /* Navigation */
    .orpheus-nav {
        background: var(--orpheus-bg);
        border-bottom: 1px solid var(--orpheus-border);
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .orpheus-nav-link {
        color: var(--orpheus-text-muted);
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        transition: all 0.15s ease;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.625rem;
        font-size: 0.875rem;
    }

    .orpheus-nav-link:hover {
        background: rgba(255, 255, 255, 0.04);
        color: var(--orpheus-text-secondary);
    }

    .orpheus-nav-link.active {
        background: rgba(30, 41, 59, 0.8);
        color: #ffffff;
        font-weight: 500;
    }

    .orpheus-nav-link.active svg {
        color: #60a5fa;
    }

    /* Tables */
    .orpheus-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .orpheus-table thead {
        background: rgba(255, 255, 255, 0.02);
    }

    .orpheus-table th {
        padding: 0.75rem 1rem;
        text-align: left;
        color: var(--orpheus-text-muted);
        font-weight: 500;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid var(--orpheus-border);
    }

    .orpheus-table td {
        padding: 0.875rem 1rem;
        border-bottom: 1px solid var(--orpheus-border);
        color: var(--orpheus-text-secondary);
        font-size: 0.875rem;
    }

    .orpheus-table tbody tr {
        transition: background 0.1s ease;
    }

    .orpheus-table tbody tr:hover {
        background: rgba(255, 255, 255, 0.02);
    }

    /* Code Blocks */
    .orpheus-code {
        background: var(--orpheus-bg-subtle);
        border: 1px solid var(--orpheus-border);
        border-radius: 0.375rem;
        padding: 0.875rem;
        font-family: 'SF Mono', 'Fira Code', monospace;
        font-size: 0.8125rem;
        color: var(--orpheus-text-secondary);
        overflow-x: auto;
    }

    /* Animations - Subtle */
    @keyframes orpheus-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .orpheus-slide-up {
        animation: orpheus-fade-in 0.3s ease-out;
    }

    /* Stats */
    .orpheus-stat-number {
        font-size: 1.875rem;
        font-weight: 600;
        color: var(--orpheus-text);
        line-height: 1;
        letter-spacing: -0.025em;
    }

    .orpheus-stat-label {
        font-size: 0.75rem;
        color: var(--orpheus-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.075em;
        margin-top: 0.375rem;
    }

    /* Verifier Status */
    .orpheus-verifier-active {
        width: 0.5rem;
        height: 0.5rem;
        background: #22c55e;
        border-radius: 50%;
        display: inline-block;
    }

    .orpheus-verifier-inactive {
        width: 0.5rem;
        height: 0.5rem;
        background: var(--orpheus-text-muted);
        border-radius: 50%;
        display: inline-block;
    }

    /* Progress Bars */
    .orpheus-progress {
        width: 100%;
        height: 0.25rem;
        background: var(--orpheus-bg-subtle);
        border-radius: 0.125rem;
        overflow: hidden;
    }

    .orpheus-progress-bar {
        height: 100%;
        background: var(--orpheus-accent);
        border-radius: 0.125rem;
        transition: width 0.3s ease;
    }

    /* Loading Spinner */
    .orpheus-spinner {
        width: 1.25rem;
        height: 1.25rem;
        border: 2px solid var(--orpheus-border);
        border-top-color: var(--orpheus-accent);
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* Sidebar */
    .orpheus-sidebar {
        background: var(--orpheus-bg);
        border-right: 1px solid var(--orpheus-border);
        height: 100vh;
        position: sticky;
        top: 0;
        overflow-y: auto;
    }

    .orpheus-sidebar::-webkit-scrollbar {
        width: 0;
    }

    /* Alerts */
    .orpheus-alert {
        padding: 0.875rem 1rem;
        border-radius: 0.375rem;
        font-size: 0.875rem;
    }

    .orpheus-alert-success {
        background: rgba(34, 197, 94, 0.08);
        border: 1px solid rgba(34, 197, 94, 0.2);
        color: #4ade80;
    }

    .orpheus-alert-warning {
        background: rgba(251, 191, 36, 0.08);
        border: 1px solid rgba(251, 191, 36, 0.2);
        color: #fcd34d;
    }

    .orpheus-alert-error {
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.2);
        color: #f87171;
    }

    .orpheus-alert-info {
        background: var(--orpheus-accent-soft);
        border: 1px solid rgba(59, 130, 246, 0.2);
        color: var(--orpheus-accent);
    }

    /* Feature Cards */
    .orpheus-feature-card {
        background: var(--orpheus-bg-card);
        border: 1px solid var(--orpheus-border);
        border-radius: 0.5rem;
        padding: 1.5rem;
        transition: border-color 0.15s ease;
        height: 100%;
    }

    .orpheus-feature-card:hover {
        border-color: rgba(255, 255, 255, 0.15);
    }

    .orpheus-feature-icon {
        width: 2.5rem;
        height: 2.5rem;
        background: var(--orpheus-accent-soft);
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
    }

    /* Hero Section */
    .orpheus-hero {
        padding: 4rem 0;
    }

    .orpheus-hero h1 {
        font-size: 2.5rem;
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 1rem;
        color: var(--orpheus-text);
        letter-spacing: -0.025em;
    }

    .orpheus-hero p {
        font-size: 1.125rem;
        color: var(--orpheus-text-secondary);
        max-width: 40rem;
        margin: 0 auto 1.5rem;
    }

    @media (max-width: 768px) {
        .orpheus-hero h1 {
            font-size: 1.75rem;
        }
        
        .orpheus-hero p {
            font-size: 1rem;
        }
    }

    /* Tooltip */
    .orpheus-tooltip {
        position: relative;
    }

    .orpheus-tooltip:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        padding: 0.375rem 0.625rem;
        background: var(--orpheus-bg-card);
        color: var(--orpheus-text-secondary);
        border: 1px solid var(--orpheus-border);
        border-radius: 0.25rem;
        font-size: 0.75rem;
        white-space: nowrap;
        z-index: 100;
        margin-bottom: 0.375rem;
    }

    /* Setup Required Modal Overlay */
    .orpheus-setup-modal-overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 256px; /* w-64 sidebar width */
        background: rgba(15, 23, 42, 0.90);
        backdrop-filter: blur(4px);
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    /* Adjust for collapsed sidebar */
    .orpheus-sidebar.collapsed ~ .flex-1 .orpheus-setup-modal-overlay {
        left: 80px;
    }

    /* "What's new" release-notes modal.

       Geometry copied from .orpheus-setup-modal-overlay rather than shared with it: that one is the
       blocking install gate and the two want different scrims, and a shared class would mean every
       future tweak to one silently moves the other. Both must be rendered INSIDE #main-content, or
       the collapsed-sidebar sibling selector below cannot reach them and the overlay covers the
       sidebar. */
    .orpheus-product-updates-overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 256px; /* w-64 sidebar width */
        background: rgba(15, 23, 42, 0.85);
        backdrop-filter: blur(4px);
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    .orpheus-sidebar.collapsed ~ .flex-1 .orpheus-product-updates-overlay {
        left: 80px;
    }

    /* Unread dot on the "What's new" nav item. A custom class rather than Tailwind utilities so it
       ships with this stylesheet, which stylesheet_link_tag :app serves raw -- no yarn build:css. */
    .orpheus-nav-dot {
        margin-left: auto;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 9999px;
        background: #60a5fa;
        flex-shrink: 0;
    }

    @media (max-width: 768px) {
        .orpheus-setup-modal-overlay {
            left: 0;
        }

        .orpheus-sidebar.collapsed ~ .flex-1 .orpheus-setup-modal-overlay {
            left: 0;
        }

        .orpheus-product-updates-overlay,
        .orpheus-sidebar.collapsed ~ .flex-1 .orpheus-product-updates-overlay {
            left: 0;
        }

        /* Responsive table wrapper */
        .orpheus-table {
            min-width: 600px;
        }

        /* Responsive stat numbers */
        .orpheus-stat-number {
            font-size: 1.5rem;
        }

        /* Responsive cards */
        .orpheus-card {
            padding: 1rem;
        }

        .orpheus-card-stat {
            padding: 1rem;
        }
    }

    /* ================================================================
       LIGHT MODE OVERRIDES
       ================================================================ */

    /* --- Design System Components --- */
    [data-theme="light"] .orpheus-card {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
    }
    [data-theme="light"] .orpheus-card-stat {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
    }
    [data-theme="light"] .orpheus-card-light {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
    }
    [data-theme="light"] .orpheus-feature-card {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
    }
    [data-theme="light"] .orpheus-feature-card:hover {
        border-color: #cbd5e1 !important;
    }
    [data-theme="light"] .orpheus-stat-number {
        color: #0f172a !important;
    }
    [data-theme="light"] .orpheus-stat-label {
        color: #64748b !important;
    }

    /* --- Navigation --- */
    [data-theme="light"] .orpheus-nav {
        background: #ffffff;
        border-bottom-color: #e2e8f0;
    }
    [data-theme="light"] .orpheus-nav-link {
        color: #64748b;
    }
    [data-theme="light"] .orpheus-nav-link:hover {
        background: #f1f5f9;
        color: #1e293b;
    }
    [data-theme="light"] .orpheus-nav-link.active {
        background: #eff6ff;
        color: #1e40af;
    }
    [data-theme="light"] .orpheus-nav-link.active svg {
        color: #3b82f6;
    }

    /* --- Tables --- */
    [data-theme="light"] .orpheus-table thead {
        background: #f8fafc;
    }
    [data-theme="light"] .orpheus-table th {
        color: #64748b;
        border-bottom-color: #e2e8f0;
    }
    [data-theme="light"] .orpheus-table td {
        color: #475569;
        border-bottom-color: #f1f5f9;
    }
    [data-theme="light"] .orpheus-table tbody tr:hover {
        background: #f8fafc;
    }

    /* --- Inputs --- */
    [data-theme="light"] .orpheus-input {
        background: #f8fafc !important;
        border-color: #e2e8f0 !important;
        color: #0f172a !important;
    }
    [data-theme="light"] .orpheus-input:focus {
        border-color: #3b82f6 !important;
    }
    [data-theme="light"] .orpheus-input::placeholder {
        color: #94a3b8 !important;
    }

    /* --- Code Blocks --- */
    [data-theme="light"] .orpheus-code {
        background: #f1f5f9;
        border-color: #e2e8f0;
        color: #334155;
    }

    /* --- Alerts --- */
    [data-theme="light"] .orpheus-alert-success {
        background: rgba(34, 197, 94, 0.06);
        border-color: rgba(34, 197, 94, 0.15);
    }
    [data-theme="light"] .orpheus-alert-warning {
        background: rgba(251, 191, 36, 0.06);
        border-color: rgba(251, 191, 36, 0.15);
    }
    [data-theme="light"] .orpheus-alert-error {
        background: rgba(239, 68, 68, 0.06);
        border-color: rgba(239, 68, 68, 0.15);
    }

    /* Danger zone card — readable contrast on a light background. The red
       utilities aren't remapped by the broad overrides above, but the muted
       gray description and light-red heading wash out in light mode. */
    [data-theme="light"] main .orpheus-danger-zone {
        background-color: rgba(239, 68, 68, 0.06) !important;
        border-color: rgba(239, 68, 68, 0.3) !important;
    }
    [data-theme="light"] main .orpheus-danger-zone h3 {
        color: #dc2626 !important;
    }
    [data-theme="light"] main .orpheus-danger-zone p {
        color: #64748b !important;
    }
    [data-theme="light"] main .orpheus-danger-zone button {
        color: #ffffff !important;
    }

    /* --- Sidebar --- */
    [data-theme="light"] .orpheus-sidebar {
        background: #ffffff;
        border-right-color: #e2e8f0;
    }

    /* --- Tooltip --- */
    [data-theme="light"] .orpheus-tooltip:hover::after {
        background: #ffffff;
        color: #334155;
        border-color: #e2e8f0;
    }

    /* --- Setup Modal --- */
    [data-theme="light"] .orpheus-setup-modal-overlay {
        background: rgba(241, 245, 249, 0.90);
    }

    /* --- What's New Modal --- */
    [data-theme="light"] .orpheus-product-updates-overlay {
        background: rgba(241, 245, 249, 0.85);
    }

    /* --- Progress Bars --- */
    [data-theme="light"] .orpheus-progress {
        background: #e2e8f0;
    }

    /* ================================================================
       LIGHT MODE: BROAD CONTENT OVERRIDES
       These target common Tailwind patterns used across views.
       Scoped to main content to avoid breaking colored badges/buttons.
       ================================================================ */

    /* Dark backgrounds → white/light */
    [data-theme="light"] main [class*="bg-gray-900"],
    [data-theme="light"] main [class*="bg-slate-900"],
    [data-theme="light"] main [class*="bg-slate-800"] {
        background-color: #ffffff !important;
    }
    [data-theme="light"] main [class*="bg-black\/"]:not(.bg-black\/60):not(.bg-black\/70) {
        background-color: #f8fafc !important;
    }

    /* Arbitrary fills and borders (bg-[#1e293b], bg-[#334155], bg-[rgba(0,0,0,0.2)], border-[#334155]),
       which no override above or in the layout reaches. The element keeps its dark classes, so the
       dark theme is unchanged, and adds one of these markers, which only repaints it in the light
       theme. One marker per kind of element. */
    /* CSS hover bubbles: the estimated-cost note, the "As of" label, heatmap cells. */
    [data-theme="light"] .orpheus-hover-note {
        background-color: #ffffff !important;
        color: #0f172a !important;
        box-shadow: 0 0 0 1px #e2e8f0, 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
    }
    /* Small inset fills: counts, "partial", source dates, fact tiles. */
    [data-theme="light"] .orpheus-chip {
        background-color: #f1f5f9 !important;
        border-color: #e2e8f0 !important;
    }
    /* The empty part of a bar or progress track. */
    [data-theme="light"] .orpheus-track,
    [data-theme="light"] .orpheus-skeleton {
        background-color: #e2e8f0 !important;
    }
    /* A divider line. */
    [data-theme="light"] .orpheus-rule {
        border-color: #e2e8f0 !important;
    }

    /* Team member rows: keep a soft, low-opacity fill in light mode instead of
       the generic solid-white override above, so the rectangles sit subtly
       behind the member details. Declared after the generic rule (equal
       specificity) so it wins. */
    [data-theme="light"] main .orpheus-member-row {
        background-color: rgba(148, 163, 184, 0.08) !important;
    }
    [data-theme="light"] main .orpheus-member-row:hover {
        background-color: rgba(148, 163, 184, 0.14) !important;
    }

    /* Fills its box, and below the variant's min-width keeps every column at its size and scrolls
       inside .orpheus-members-table-scroll: the overflow-x-auto + min-width treatment the other
       tables use (projects, suppression rules). Capped at 100% it squeezed instead — the roster
       shares a row with the sidebar, so a 1440px window left ROLE and SUB-TEAMS a few pixels. */
    .orpheus-members-table {
        width: 100%;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
    }
    /* select + member + role + status + actions, plus room for a line of sub-team chips. */
    .orpheus-members-table--admin {
        min-width: 60rem;
    }
    /* No select, status or actions columns. */
    .orpheus-members-table--member {
        min-width: 41rem;
    }
    .orpheus-members-table-scroll {
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Cards below 1280px viewport; table at 1280px+. Plain CSS avoids Tailwind
       `.hidden` + `lg:block` cascade conflicts across multiple :app stylesheets. */
    .orpheus-responsive-cards {
        display: block;
    }
    .orpheus-responsive-table {
        display: none;
        width: 100%;
    }
    @media (min-width: 1280px) {
        .orpheus-responsive-cards {
            display: none !important;
        }
        .orpheus-responsive-table {
            display: block !important;
        }
    }
    /* 1280px is sized for the ten-column members table. A two-column table fits
       a phone in landscape, so it switches far earlier. */
    @media (min-width: 640px) {
        .orpheus-responsive-cards--narrow {
            display: none !important;
        }
        .orpheus-responsive-table--narrow {
            display: block !important;
        }
    }

    .orpheus-members-table thead th,
    .orpheus-data-table thead th {
        padding: 0.5rem 0.625rem;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-align: left;
        color: rgb(148 163 184);
        background: rgba(15, 23, 42, 0.35);
        border-bottom: 1px solid rgb(51 65 85);
        white-space: nowrap;
    }
    .orpheus-members-table tbody tr,
    .orpheus-data-table tbody tr {
        transition: background-color 0.15s ease;
    }
    .orpheus-members-table tbody td,
    .orpheus-data-table tbody td {
        border-bottom: 1px solid rgba(51, 65, 85, 0.65);
    }
    .orpheus-members-table tbody tr:last-child td,
    .orpheus-data-table tbody tr:last-child td {
        border-bottom: 0;
    }
    .orpheus-members-table tbody tr:hover,
    .orpheus-data-table tbody tr:hover {
        background: rgba(30, 41, 59, 0.45);
    }
    .orpheus-members-table td,
    .orpheus-data-table td {
        padding: 0.5rem 0.625rem;
        vertical-align: middle;
        overflow: hidden;
    }
    .orpheus-members-table td.orpheus-members-table__truncate {
        max-width: 0;
    }
    .orpheus-members-table td.orpheus-members-table__sub-team {
        max-width: none;
    }

    .orpheus-members-table col.orpheus-members-table__select-col {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
    }
    .orpheus-members-table th.orpheus-members-table__select,
    .orpheus-members-table td.orpheus-members-table__select {
        width: 30px !important;
        max-width: 30px !important;
        min-width: 30px !important;
        padding: 0 !important;
        text-align: center;
        vertical-align: middle;
        overflow: hidden;
        line-height: 0;
    }
    .orpheus-members-table td.orpheus-members-table__select .orpheus-members-checkbox,
    .orpheus-members-table th.orpheus-members-table__select .orpheus-members-checkbox {
        display: block;
        margin: 0 auto;
    }

    .orpheus-members-checkbox {
        appearance: none;
        -webkit-appearance: none;
        width: 12px;
        height: 12px;
        min-width: 12px;
        min-height: 12px;
        margin: 0;
        padding: 0;
        border-radius: 2px;
        border: 1px solid rgb(71 85 105);
        background-color: rgb(15 23 42);
        cursor: pointer;
        flex-shrink: 0;
        box-sizing: border-box;
        vertical-align: middle;
    }
    .orpheus-members-checkbox:checked {
        background-color: rgb(59 130 246);
        border-color: rgb(59 130 246);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 10px 10px;
    }
    .orpheus-members-checkbox:indeterminate {
        background-color: rgb(59 130 246);
        border-color: rgb(59 130 246);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.5' y='5.25' width='7' height='1.5' rx='0.75' fill='white'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 10px 10px;
    }
    .orpheus-members-checkbox:focus-visible {
        outline: 2px solid rgb(59 130 246);
        outline-offset: 2px;
    }

    @media (min-width: 1280px) {
        .orpheus-members-table td,
        .orpheus-data-table td {
            padding: 0.625rem 0.75rem;
        }
        .orpheus-members-table thead th,
        .orpheus-data-table thead th {
            padding: 0.5rem 0.75rem;
        }
        .orpheus-members-table td.orpheus-members-table__select,
        .orpheus-members-table th.orpheus-members-table__select {
            padding: 0 !important;
            width: 30px !important;
            max-width: 30px !important;
            min-width: 30px !important;
        }
        .orpheus-members-table th.orpheus-members-table__enforce,
        .orpheus-members-table td.orpheus-members-table__enforce {
            padding-left: 0.375rem !important;
            padding-right: 0.75rem !important;
        }
    }

    .orpheus-members-table-legend {
        line-height: 1.5;
    }
    @media (min-width: 1280px) {
        .orpheus-members-table-legend {
            display: none;
        }
    }

    .orpheus-toggle-hit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.75rem;
        min-height: 2.75rem;
        margin: -0.5rem;
        padding: 0.5rem;
    }

    .orpheus-data-card {
        border: 1px solid rgb(51 65 85);
        border-radius: 0.75rem;
        background: rgba(30, 41, 59, 0.35);
        padding: 1rem;
    }

    /* Plain two/three-column data table (incident exclusions). Shares the
       members table's surface treatment via the grouped selectors above, so the
       two read identically in both themes, but carries none of its fixed column
       widths. Rows must NOT use a `hover:bg-*` utility — see _incident_ban_row. */
    .orpheus-data-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }
    .orpheus-data-table thead th.orpheus-data-table__right {
        text-align: right;
    }

    /* SIEM forwarding table. Under the default `auto` layout every column is
       sized from its widest cell, so the variable-length violation-type column
       decided where the switch and the count sat — and a page of long names put
       them at a different x than the page before it, which reads as the table
       jumping sideways as you page through. `fixed` sizes from the colgroup
       instead, leaving the name column the remainder and clipping it when the
       name is long. */
    .orpheus-siem-table {
        table-layout: fixed;
    }
    .orpheus-siem-table col.orpheus-siem-table__forwarded {
        width: 11rem;
    }
    .orpheus-siem-table col.orpheus-siem-table__withheld {
        width: 9rem;
    }

    [data-theme="light"] main .orpheus-data-card {
        background: rgba(248, 250, 252, 0.95) !important;
        border-color: rgb(226 232 240) !important;
    }

    .orpheus-members-table-empty {
        min-height: 8rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    [x-cloak] {
        display: none !important;
    }
    [data-theme="light"] main .orpheus-members-table thead th,
    [data-theme="light"] main .orpheus-data-table thead th {
        background: rgba(248, 250, 252, 0.95) !important;
        color: rgb(100 116 139) !important;
        border-bottom-color: rgb(226 232 240) !important;
    }
    [data-theme="light"] main .orpheus-members-table tbody td,
    [data-theme="light"] main .orpheus-data-table tbody td {
        border-bottom-color: rgb(226 232 240) !important;
    }
    [data-theme="light"] main .orpheus-members-table tbody tr.orpheus-member-row,
    [data-theme="light"] main .orpheus-data-table tbody tr.orpheus-data-row {
        background: #ffffff !important;
    }
    [data-theme="light"] main .orpheus-members-table tbody tr.orpheus-member-row:hover,
    [data-theme="light"] main .orpheus-data-table tbody tr.orpheus-data-row:hover {
        background: rgb(241 245 249) !important;
    }
    [data-theme="light"] main .orpheus-members-toolbox__dropup-trigger,
    [data-theme="light"] main .orpheus-members-table tbody .bg-slate-800\/80 {
        background-color: #ffffff !important;
        border-color: rgb(203 213 225) !important;
    }
    [data-theme="light"] main .orpheus-members-checkbox {
        background-color: #ffffff !important;
        border-color: #94a3b8 !important;
    }
    [data-theme="light"] main .orpheus-members-checkbox:checked,
    [data-theme="light"] main .orpheus-members-checkbox:indeterminate {
        background-color: rgb(59 130 246) !important;
        border-color: rgb(59 130 246) !important;
    }

    /* Switch tracks: daemon enforcement (member + team-wide), incident exclusions */
    .orpheus-toggle {
        position: relative;
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        width: 2rem;
        height: 1rem;
        border-radius: 9999px;
        vertical-align: middle;
        transition: background-color 200ms ease-in-out;
    }
    .orpheus-toggle--on {
        background: rgb(16 185 129);
    }
    .orpheus-toggle--off {
        background: rgb(71 85 105);
    }
    .orpheus-toggle__knob {
        position: absolute;
        top: 50%;
        left: 2px;
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 9999px;
        background: #ffffff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        transform: translateY(-50%);
        transition: left 200ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .orpheus-toggle--on .orpheus-toggle__knob {
        left: calc(100% - 0.75rem - 2px);
    }
    .orpheus-toggle--lg {
        width: 2.25rem;
        height: 1.25rem;
    }
    .orpheus-toggle--lg .orpheus-toggle__knob {
        width: 1rem;
        height: 1rem;
    }
    .orpheus-toggle--lg.orpheus-toggle--on .orpheus-toggle__knob {
        left: calc(100% - 1rem - 2px);
    }

    /* Severity floor for raising incidents (settings · SIEM Forwarding). Four
       PATCH buttons dressed as a horizontal stepper: the ladder runs critical to
       low, and the track fills up to the step that is selected — so the filled
       part is what becomes an incident, and Low fills all of it. The fill ratio
       is carried on the root as a custom property, so the selection is expressed
       by one class and nothing needs an inline style. */
    .orpheus-severity-stepper {
        position: relative;
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        /* Half a column: the distance from the edge of the list to the centre of
           the first (and last) marker, which is where the track has to start. */
        --orpheus-stepper-inset: 12.5%;
        --orpheus-stepper-fill: 0;
        --orpheus-stepper-marker: 1.75rem;
    }
    .orpheus-severity-stepper--at-critical { --orpheus-stepper-fill: 0; }
    .orpheus-severity-stepper--at-high     { --orpheus-stepper-fill: 0.3333; }
    .orpheus-severity-stepper--at-medium   { --orpheus-stepper-fill: 0.6667; }
    .orpheus-severity-stepper--at-low      { --orpheus-stepper-fill: 1; }

    .orpheus-severity-stepper::before,
    .orpheus-severity-stepper::after {
        content: "";
        position: absolute;
        top: calc(var(--orpheus-stepper-marker) / 2);
        left: var(--orpheus-stepper-inset);
        height: 2px;
        margin-top: -1px;
        border-radius: 9999px;
    }
    .orpheus-severity-stepper::before {
        width: calc(100% - (var(--orpheus-stepper-inset) * 2));
        background: rgb(51 65 85);
    }
    .orpheus-severity-stepper::after {
        width: calc((100% - (var(--orpheus-stepper-inset) * 2)) * var(--orpheus-stepper-fill));
        background: rgb(16 185 129);
        transition: width 200ms ease-in-out;
    }

    .orpheus-severity-stepper__step {
        flex: 1 1 0;
        min-width: 0;
    }
    .orpheus-severity-stepper__form {
        display: block;
    }
    /* The whole column is the hit target, not just the marker. */
    .orpheus-severity-stepper__cell {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .orpheus-severity-stepper__cell--action {
        cursor: pointer;
    }
    /* The cell has no border or background of its own, so without this a keyboard
       user has nothing to follow along the track. */
    .orpheus-severity-stepper__cell--action:focus-visible {
        outline: 2px solid rgb(16 185 129);
        outline-offset: 4px;
        border-radius: 0.5rem;
    }
    .orpheus-severity-stepper__cell--action:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }
    .orpheus-severity-stepper__marker {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--orpheus-stepper-marker);
        height: var(--orpheus-stepper-marker);
        border-radius: 9999px;
        border: 2px solid rgb(51 65 85);
        /* Opaque, so the track passes behind the marker rather than through it. */
        background: var(--orpheus-bg-card);
        font-size: 0.75rem;
        color: rgb(100 116 139);
        transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out, color 200ms ease-in-out;
    }
    .orpheus-severity-stepper__marker svg {
        width: 1rem;
        height: 1rem;
    }
    /* At or above the floor, so raised as an incident — filled and ticked. The
       floor itself belongs in here: it is the LOWEST severity that is forwarded,
       and drawing it hollow put it on the same footing as the ones that are
       withheld. */
    .orpheus-severity-stepper__step--stepped .orpheus-severity-stepper__marker,
    .orpheus-severity-stepper__step--current .orpheus-severity-stepper__marker {
        border-color: rgb(16 185 129);
        background: rgb(16 185 129);
        color: #ffffff;
    }
    /* Ringed on top of the fill, so the floor still reads as where it stops. */
    .orpheus-severity-stepper__step--current .orpheus-severity-stepper__marker {
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
    }
    .orpheus-severity-stepper__name {
        font-size: 0.8125rem;
        text-align: center;
        color: rgb(100 116 139);
    }
    .orpheus-severity-stepper__step--stepped .orpheus-severity-stepper__name,
    .orpheus-severity-stepper__step--current .orpheus-severity-stepper__name {
        color: rgb(16 185 129);
    }
    /* Weight rather than colour separates the floor from the rest of the
       forwarded set, so the colour can stay honest about what is forwarded. */
    .orpheus-severity-stepper__step--current .orpheus-severity-stepper__name {
        font-weight: 500;
    }
    .orpheus-severity-stepper__cell--action:hover .orpheus-severity-stepper__marker {
        border-color: rgb(16 185 129);
    }
    .orpheus-severity-stepper__cell--action:hover .orpheus-severity-stepper__name {
        color: var(--orpheus-text);
    }
    [data-theme="light"] main .orpheus-severity-stepper::before {
        background: rgb(203 213 225) !important;
    }
    [data-theme="light"] main .orpheus-severity-stepper__marker {
        border-color: rgb(203 213 225) !important;
        background: #ffffff !important;
        color: rgb(100 116 139) !important;
    }
    [data-theme="light"] main .orpheus-severity-stepper__step--stepped .orpheus-severity-stepper__marker,
    [data-theme="light"] main .orpheus-severity-stepper__step--current .orpheus-severity-stepper__marker {
        border-color: rgb(16 185 129) !important;
        background: rgb(16 185 129) !important;
        color: #ffffff !important;
    }

    .orpheus-toggle--mixed {
        background: rgb(100 116 139);
    }
    .orpheus-toggle--mixed .orpheus-toggle__knob {
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0.5rem;
        height: 0.125rem;
        border-radius: 1px;
    }

    .orpheus-members-table col.orpheus-members-table__member-col {
        width: 20rem;
        max-width: 20rem;
    }
    .orpheus-members-table col.orpheus-members-table__sub-team-col {
        width: auto;
    }
    .orpheus-members-table col.orpheus-members-table__hooks-col,
    .orpheus-members-table col.orpheus-members-table__daemon-col {
        width: 7.5rem;
    }
    .orpheus-members-table col.orpheus-members-table__role-col {
        width: 8.5rem;
    }
    .orpheus-members-table col.orpheus-members-table__enforce-col {
        width: 8rem;
        min-width: 8rem;
        max-width: 8rem;
    }
    .orpheus-members-table th.orpheus-members-table__enforce,
    .orpheus-members-table td.orpheus-members-table__enforce {
        width: 8rem;
        min-width: 8rem;
        max-width: 8rem;
        padding-left: 0.375rem;
        padding-right: 0.75rem;
        text-align: center;
        white-space: nowrap;
    }
    .orpheus-members-table th.orpheus-members-table__enforce {
        overflow: visible;
    }
    .orpheus-members-table td.orpheus-members-table__enforce {
        overflow: hidden;
    }
    .orpheus-members-table th.orpheus-members-table__hooks,
    .orpheus-members-table td.orpheus-members-table__hooks,
    .orpheus-members-table th.orpheus-members-table__daemon,
    .orpheus-members-table td.orpheus-members-table__daemon,
    .orpheus-members-table th.orpheus-members-table__role,
    .orpheus-members-table td.orpheus-members-table__role {
        white-space: nowrap;
    }
    .orpheus-members-table__enforce-cell {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .orpheus-members-table__enforce-cell .orpheus-toggle-hit--compact {
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
    }
    .orpheus-members-table__enforce-cell .orpheus-toggle {
        width: 1.625rem;
        height: 0.875rem;
    }
    .orpheus-members-table__enforce-cell .orpheus-toggle__knob {
        width: 0.625rem;
        height: 0.625rem;
    }
    .orpheus-members-table__enforce-cell .orpheus-toggle--on .orpheus-toggle__knob {
        left: calc(100% - 0.625rem - 2px);
    }

    .orpheus-members-per-page__trigger {
        padding: 0.125rem 0.25rem;
        border-radius: 0.375rem;
    }
    .orpheus-members-per-page__trigger:hover {
        background: rgba(51, 65, 85, 0.35);
    }
    .orpheus-members-per-page__trigger:focus-visible {
        outline: 2px solid rgb(59 130 246);
        outline-offset: 2px;
    }
    .orpheus-members-per-page__dropup {
        position: absolute;
        right: 0;
        bottom: calc(100% + 0.375rem);
        z-index: 50;
        width: 12rem;
        padding: 0.75rem 0.875rem 0.875rem;
        border-radius: 0.625rem;
        border: 1px solid rgb(71 85 105);
        background: rgb(30 41 59);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    }
    .orpheus-members-per-page__close {
        position: absolute;
        top: 0.375rem;
        right: 0.375rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        height: 1.25rem;
        border: 0;
        border-radius: 0.25rem;
        background: transparent;
        color: rgb(148 163 184);
        cursor: pointer;
    }
    .orpheus-members-per-page__close:hover {
        color: rgb(226 232 240);
        background: rgba(51, 65, 85, 0.55);
    }
    .orpheus-members-per-page__title {
        margin: 0 1.5rem 0.5rem 0;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: rgb(148 163 184);
    }
    .orpheus-members-per-page__value-row {
        display: flex;
        align-items: baseline;
        gap: 0.25rem;
        margin-bottom: 0.625rem;
    }
    .orpheus-members-per-page__value {
        font-size: 1.125rem;
        font-weight: 600;
        color: rgb(226 232 240);
        line-height: 1;
    }
    .orpheus-members-per-page__slider {
        width: 100%;
        margin: 0;
        accent-color: rgb(59 130 246);
        cursor: pointer;
    }
    .orpheus-members-per-page__ticks {
        display: flex;
        justify-content: space-between;
        margin-top: 0.375rem;
        font-size: 0.625rem;
        color: rgb(100 116 139);
    }
    [data-theme="light"] main .orpheus-members-per-page__dropup {
        background: rgb(255 255 255) !important;
        border-color: rgb(226 232 240) !important;
        box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12) !important;
    }
    [data-theme="light"] main .orpheus-members-per-page__title,
    [data-theme="light"] main .orpheus-members-per-page__ticks {
        color: rgb(100 116 139) !important;
    }
    [data-theme="light"] main .orpheus-members-per-page__value {
        color: rgb(15 23 42) !important;
    }
    [data-theme="light"] main .orpheus-members-per-page__close {
        color: rgb(100 116 139) !important;
    }
    [data-theme="light"] main .orpheus-members-per-page__close:hover {
        color: rgb(15 23 42) !important;
        background: rgb(241 245 249) !important;
    }
    [data-theme="light"] main .orpheus-members-per-page__trigger:hover {
        background: rgb(241 245 249) !important;
    }
    [data-theme="light"] main .orpheus-members-per-page__slider {
        accent-color: rgb(37 99 235);
    }

    [data-theme="dark"] .orpheus-members-toolbox__dropup-trigger,
    :root:not([data-theme="light"]) .orpheus-members-toolbox__dropup-trigger {
        background: rgb(30 41 59);
    }

    /* Floating bulk selection toolbox */
    .orpheus-members-toolbox {
        position: fixed;
        bottom: 1.75rem;
        left: 0;
        right: 0;
        z-index: 60;
        width: fit-content;
        max-width: calc(100vw - 2rem);
        margin-inline: auto;
        pointer-events: none;
        visibility: hidden;
    }
    .orpheus-members-toolbox.is-visible {
        visibility: visible;
    }
    .orpheus-members-toolbox__form {
        pointer-events: none;
    }
    .orpheus-members-toolbox__panel {
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: 0;
        padding: 0.375rem 0.375rem 0.375rem 0.625rem;
        border-radius: 0.875rem;
        border: 1px solid rgb(51 65 85);
        background: rgb(15 23 42);
        box-shadow:
            0 10px 40px rgba(0, 0, 0, 0.45),
            0 0 0 1px rgba(255, 255, 255, 0.04);
        overflow: visible;
        opacity: 0;
        transition: opacity 0.28s ease;
    }
    .orpheus-members-toolbox__panel.is-visible {
        opacity: 1;
    }
    .orpheus-members-toolbox__section {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0 0.625rem;
        white-space: nowrap;
    }
    .orpheus-members-toolbox__count {
        padding-left: 0;
    }
    .orpheus-members-toolbox__count-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.375rem;
        height: 1.375rem;
        border-radius: 0.375rem;
        background: rgb(59 130 246);
        color: #ffffff;
        flex-shrink: 0;
    }
    .orpheus-members-toolbox__count-label {
        font-size: 0.8125rem;
        font-weight: 500;
        color: rgb(226 232 240);
    }
    .orpheus-members-toolbox__divider {
        width: 1px;
        align-self: stretch;
        margin: 0.375rem 0;
        background: rgb(51 65 85);
        flex-shrink: 0;
    }
    .orpheus-members-toolbox__actions {
        gap: 0.5rem;
        flex-wrap: nowrap;
        overflow: visible;
    }
    .orpheus-members-toolbox__select {
        appearance: none;
        min-width: 6.5rem;
        max-width: 9rem;
        padding: 0.375rem 1.75rem 0.375rem 0.625rem;
        font-size: 0.75rem;
        font-weight: 500;
        color: rgb(226 232 240);
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E")
            no-repeat right 0.4rem center / 0.875rem,
            rgb(30 41 59);
        border: 1px solid rgb(71 85 105);
        border-radius: 0.5rem;
        cursor: pointer;
        transition: border-color 0.15s ease, background-color 0.15s ease;
    }
    .orpheus-members-toolbox__select:hover:not(:disabled) {
        border-color: rgb(100 116 139);
        background-color: rgb(51 65 85);
    }
    .orpheus-members-toolbox__select:focus-visible {
        outline: 2px solid rgb(59 130 246);
        outline-offset: 2px;
    }
    .orpheus-members-toolbox__select:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }
    .orpheus-members-toolbox__daemon {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    .orpheus-members-toolbox__daemon-label {
        font-size: 0.75rem;
        font-weight: 500;
        color: rgb(148 163 184);
    }
    .orpheus-members-toolbox__daemon-btn {
        display: inline-flex;
        align-items: center;
        padding: 0.125rem;
        border: 0;
        background: transparent;
        cursor: pointer;
        border-radius: 9999px;
        transition: opacity 0.15s ease;
    }
    .orpheus-members-toolbox__daemon-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
    .orpheus-members-toolbox__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        margin-right: 0.125rem;
        border: 0;
        border-radius: 0.5rem;
        background: transparent;
        color: rgb(148 163 184);
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease;
    }
    .orpheus-members-toolbox__close:hover {
        background: rgb(30 41 59);
        color: rgb(226 232 240);
    }
    .orpheus-members-toolbox__close:focus-visible {
        outline: 2px solid rgb(59 130 246);
        outline-offset: 2px;
    }

    .orpheus-members-toolbox-transition {
        transition:
            transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
            opacity 0.28s ease;
    }
    .orpheus-members-toolbox-transition--enter-start {
        opacity: 0;
        transform: scaleX(0.35) scaleY(0);
    }
    .orpheus-members-toolbox-transition--enter-end {
        opacity: 1;
        transform: scaleX(1) scaleY(1);
    }

    [data-theme="light"] main .orpheus-members-toolbox__panel {
        background: rgb(255 255 255) !important;
        border-color: rgb(226 232 240) !important;
        box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12) !important;
    }
    [data-theme="light"] main .orpheus-members-toolbox__count-label,
    [data-theme="light"] main .orpheus-members-toolbox__select {
        color: rgb(30 41 59) !important;
    }
    [data-theme="light"] main .orpheus-members-toolbox__select {
        background-color: rgb(248 250 252) !important;
        border-color: rgb(203 213 225) !important;
    }
    [data-theme="light"] main .orpheus-members-toolbox__divider {
        background: rgb(226 232 240) !important;
    }

    @media (max-width: 640px) {
        .orpheus-members-toolbox {
            bottom: 1rem;
            max-width: calc(100vw - 1rem);
        }
        .orpheus-members-toolbox__panel {
            flex-wrap: wrap;
            justify-content: center;
            padding: 0.5rem;
            border-radius: 0.75rem;
        }
        .orpheus-members-toolbox__daemon-label {
            display: none;
        }
        .orpheus-members-toolbox__select {
            min-width: 5.5rem;
            max-width: 7rem;
        }
    }

    /* Chart containers used in dashboard */
    [data-theme="light"] .chart-container {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
    }

    /* Stat cards in dashboard */
    [data-theme="light"] .stat-card {
        background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
        border-color: #e2e8f0 !important;
    }
    [data-theme="light"] .stat-card:hover {
        border-color: #cbd5e1 !important;
        box-shadow: 0 12px 40px -12px rgba(0,0,0,0.08) !important;
    }

    /* Skeleton loaders (orpheus/shared/_skeleton_card, the Events stat placeholder) */
    .skeleton-bar {
        position: relative;
        overflow: hidden;
        background: rgba(100, 116, 139, 0.18);
        border-radius: 0.5rem;
    }
    [data-theme="light"] .skeleton-bar {
        background: #e2e8f0;
    }
    /* Dashboard panel skeletons size from variables, so a chart can be one height below the lg
       breakpoint and another from it, as the real charts are (orpheus/shared/_skeleton_card). */
    .skeleton-chart {
        height: var(--skeleton-h);
    }
    @media (min-width: 1024px) {
        .skeleton-chart {
            height: var(--skeleton-h-lg, var(--skeleton-h));
        }
        .chart-container[style*="--skeleton-min-lg"] {
            min-height: var(--skeleton-min-lg);
        }
    }
    /* A highlight sweeping across, rather than the whole bar pulsing: reads as "working", and a
       row of bars sweeping in step reads as one thing loading, not many things blinking. */
    .skeleton-bar::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.14) 50%, transparent 100%);
        animation: async-shimmer 1.6s ease-in-out infinite;
    }
    [data-theme="light"] .skeleton-bar::after {
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
    }
    @keyframes async-shimmer {
        100% { transform: translateX(100%); }
    }

    /* ── Async card states (async_frame_controller.js) ─────────────────────────────────────────
       The frame carries data-async-state; these rules show the parts of its content that belong
       to that state. Plain display values, never Tailwind's hidden/flex, so landing.css (loaded
       after this file on some pages) cannot redefine them out from under the state. */
    .async-slow,
    .async-failed {
        display: none;
    }
    [data-async-state="slow"] .async-slow {
        display: flex;
    }
    [data-async-state="failed"] .async-failed,
    .async-failed.async-failed--shown {
        display: flex;
    }
    /* Failed: the skeleton goes, the notice takes its place at the same height. */
    [data-async-state="failed"] .async-skeleton {
        display: none;
    }
    /* Slow: the notice replaces the second skeleton line, so the card does not grow. */
    [data-async-state="slow"] .async-skeleton-sub {
        display: none;
    }

    /* Wraps rather than clips: the cards that show it set overflow: hidden, and a six-across KPI
       card is narrower than "Still loading" beside its spinner. Each slot leaves room for a second
       line (the KPI caption reserves it; on Events the notice takes the whole value row; a panel
       centres it over the skeleton). The spinner stays on the first line. */
    .async-slow {
        align-items: flex-start;
        gap: 0.375rem;
        min-width: 0;
        font-size: 0.75rem;
        line-height: 1rem;
        color: #fbbf24; /* amber-400 */
        white-space: normal;
    }
    .async-slow .async-spinner {
        margin-top: 0.125rem;
    }
    [data-theme="light"] .async-slow {
        color: #b45309; /* amber-700 */
    }
    .async-failed {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
        min-width: 0;
    }
    .async-failed__title {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.8125rem;
        line-height: 1.25rem;
        font-weight: 500;
        color: #fca5a5; /* red-300 */
    }
    [data-theme="light"] .async-failed__title {
        color: #b91c1c; /* red-700 */
    }
    .async-failed__row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
        max-width: 100%;
        /* Retry's height, with or without Retry: a row of cards where only the first has the button
           keeps every reason on the same line. */
        min-height: 1.75rem;
    }
    .async-failed__reason {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.75rem;
        line-height: 1rem;
        color: #94a3b8; /* slate-400 */
    }
    [data-theme="light"] .async-failed__reason {
        color: #475569; /* slate-600 */
    }
    .async-failed__retry {
        display: inline-flex;
        flex: none;
        align-items: center;
        height: 1.75rem;
        padding: 0 0.75rem;
        border-radius: 0.375rem;
        border: 1px solid rgba(100, 116, 139, 0.45);
        background: rgba(30, 41, 59, 0.6);
        font-size: 0.75rem;
        font-weight: 500;
        color: #e2e8f0;
        cursor: pointer;
        transition: background-color 0.15s, border-color 0.15s;
    }
    .async-failed__retry:hover {
        background: rgba(51, 65, 85, 0.8);
        border-color: rgba(148, 163, 184, 0.6);
    }
    .async-failed__retry:focus-visible {
        outline: 2px solid rgba(59, 130, 246, 0.6);
        outline-offset: 2px;
    }
    [data-theme="light"] .async-failed__retry {
        background: #ffffff;
        border-color: #cbd5e1;
        color: #1e293b;
    }
    .async-failed__title-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .async-failed__title svg {
        flex: none;
    }
    /* Compact: one line -- the heading and Retry side by side; the reason stays readable to a
       screen reader and sits in the tooltip, but takes no line of its own. */
    .async-failed--compact {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        height: 1.75rem;
    }
    .async-failed--compact .async-failed__title {
        min-width: 0;
    }
    .async-failed--compact .async-failed__row {
        flex: none;
    }
    .async-failed--compact .async-failed__reason {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .async-failed--compact .async-failed__retry {
        height: 1.5rem;
        padding: 0 0.5rem;
        flex: none;
    }
    /* Link: "Try again" runs on after the reason as text, so a long reason wraps to a second line
       instead of being cut short beside a button. (After the compact rules: same specificity.) */
    .async-failed--link .async-failed__row {
        display: block;
        min-height: 0;
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .async-failed--link .async-failed__reason {
        display: inline;
        white-space: normal;
    }
    .async-failed--link .async-failed__retry {
        display: inline;
        height: auto;
        padding: 0;
        /* No margin: the markup's own space separates it from the reason, and unlike a margin a
           space disappears when Try again wraps to the start of a line. */
        margin-left: 0;
        border: 0;
        border-radius: 0.125rem;
        background: none;
        font-size: inherit;
        line-height: inherit;
        font-weight: 500;
        color: #93c5fd; /* blue-300 */
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    .async-failed--link .async-failed__retry:hover {
        background: none;
        color: #bfdbfe; /* blue-200 */
    }
    [data-theme="light"] .async-failed--link .async-failed__retry {
        background: none;
        color: #1d4ed8; /* blue-700 */
    }
    [data-theme="light"] .async-failed--link .async-failed__retry:hover {
        color: #1e40af; /* blue-800 */
    }

    /* A panel (chart, list) keeps its skeleton's space when it fails: the skeleton turns invisible
       rather than going, and the notice sits centred over it, so the card is the same height in
       every state and the grid around it does not move. */
    .async-area {
        position: relative;
    }
    [data-async-state="failed"] .async-area > .async-skeleton {
        display: block;
        visibility: hidden;
    }
    .async-area > .async-failed {
        position: absolute;
        inset: 0;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    /* A panel's slow notice: centred over its skeleton, like its failure, rather than beside a title
       that already fills the header in a narrow column. The bars dim behind it. */
    .async-area > .async-slow {
        position: absolute;
        inset: 0;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 1rem;
    }
    /* Panels only: a KPI card's notice sits inside its skeleton (in the caption row) and would dim too. */
    [data-async-state="slow"] .async-area:not(.async-area--start) > .async-skeleton {
        opacity: 0.45;
    }
    /* A stat card's failure starts where its number would, rather than centring. */
    .async-area--start > .async-failed {
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        bottom: auto;
    }

    /* Small ring spinner: the slow notice, and the corner of a refreshing card. */
    .async-spinner {
        width: 0.75rem;
        height: 0.75rem;
        flex: none;
        border-radius: 9999px;
        border: 2px solid currentColor;
        border-right-color: transparent;
        animation: async-spin 0.9s linear infinite;
    }
    @keyframes async-spin {
        100% { transform: rotate(360deg); }
    }

    /* Refreshing: the previous numbers stay, dimmed, until the new ones land. */
    turbo-frame[data-async-state="refreshing"] {
        position: relative;
    }
    turbo-frame[data-async-state="refreshing"] > :not(template) {
        opacity: 0.45;
        transition: opacity 0.2s ease-out;
    }
    turbo-frame[data-async-state="refreshing"]::after {
        content: "";
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 9999px;
        border: 2px solid rgba(96, 165, 250, 0.9); /* blue-400 */
        border-right-color: transparent;
        animation: async-spin 0.9s linear infinite;
    }

    /* Loaded: the values fade in instead of popping. */
    turbo-frame[data-async-state="loaded"] > * {
        animation: async-fade-in 0.28s ease-out both;
    }
    @keyframes async-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
        .skeleton-bar::after { animation: none; display: none; }
        .async-spinner,
        turbo-frame[data-async-state="refreshing"]::after { animation-duration: 2.5s; }
        turbo-frame[data-async-state="loaded"] > * { animation: none; }
    }

    /* Dark borders → light borders */
    [data-theme="light"] main [class*="border-gray-800"],
    [data-theme="light"] main [class*="border-gray-700"],
    [data-theme="light"] main [class*="border-slate-800"],
    [data-theme="light"] main [class*="border-slate-700"],
    [data-theme="light"] main [class*="border-white\/"] {
        border-color: #e2e8f0 !important;
    }

    /* Divide colors */
    [data-theme="light"] main [class*="divide-gray-"],
    [data-theme="light"] main [class*="divide-slate-"],
    [data-theme="light"] main [class*="divide-white\/"] {
        --tw-divide-opacity: 1;
        border-color: #f1f5f9;
    }
    [data-theme="light"] main [class*="divide-"] > :not([hidden]) ~ :not([hidden]) {
        border-color: #f1f5f9;
    }
    /* Tailwind 4 draws each divider as the bottom (divide-y) or right (divide-x) border of every child
       but the last, so the first child's divider is one the sibling rule above never reaches. */
    [data-theme="light"] main [class*="divide-"] > :not([hidden]):first-child {
        border-bottom-color: #f1f5f9;
        border-right-color: #f1f5f9;
    }

    /* Text colors - only target text that should change */
    [data-theme="light"] main .text-white:not(.force-white-text):not([class*="bg-blue"]):not([class*="bg-green"]):not([class*="bg-red"]):not([class*="bg-emerald"]):not([class*="bg-cyan"]):not([class*="bg-yellow"]):not([class*="bg-purple"]):not([class*="bg-gradient"]):not(button):not([type="submit"]) {
        color: #0f172a !important;
    }
    [data-theme="light"] main .text-gray-100 { color: #1e293b !important; }
    [data-theme="light"] main .text-gray-200 { color: #334155 !important; }
    [data-theme="light"] main .text-gray-300 { color: #475569 !important; }
    [data-theme="light"] main .text-gray-400 { color: #64748b !important; }
    [data-theme="light"] main .text-gray-500 { color: #94a3b8 !important; }
    [data-theme="light"] main .text-gray-600 { color: #94a3b8 !important; }
    [data-theme="light"] main .text-slate-200 { color: #1e293b !important; }
    [data-theme="light"] main .text-slate-300 { color: #334155 !important; }
    /* The two slate shades the Live Ops history terminals are built from are
       exempt; see the `:where()` note under the Code/mono text rule below. */
    [data-theme="light"] main .text-slate-400:not(:where(.pip-boy, .pip-boy *, #fs-modal, #fs-modal *)) { color: #64748b !important; }
    [data-theme="light"] main .text-slate-500 { color: #94a3b8 !important; }
    [data-theme="light"] main .text-slate-600:not(:where(.pip-boy, .pip-boy *, #fs-modal, #fs-modal *)) { color: #94a3b8 !important; }

    /* Form elements */
    [data-theme="light"] main select,
    [data-theme="light"] main input[type="text"],
    [data-theme="light"] main input[type="email"],
    [data-theme="light"] main input[type="password"],
    [data-theme="light"] main input[type="number"],
    [data-theme="light"] main input[type="search"],
    [data-theme="light"] main textarea {
        background-color: #f8fafc !important;
        border-color: #e2e8f0 !important;
        color: #0f172a !important;
    }
    [data-theme="light"] main select:focus,
    [data-theme="light"] main input:focus,
    [data-theme="light"] main textarea:focus {
        border-color: #3b82f6 !important;
    }

    /* Checkboxes */
    [data-theme="light"] main input[type="checkbox"] {
        background-color: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
    }

    /* Code/mono text.
       The Live Ops terminals are exempt: they are deliberately identical in both
       themes, and renderScreen() writes the whole screen as <pre> carrying its
       own colours -- `main pre` is more specific than the text-* utility on the
       same element, so without this the screens grow light-grey bars. The same
       applies to every mono span in a terminal frame, which is nearly all of
       them. `:where()` carries no specificity, so `:not(:where(...))` exempts the
       terminals without changing how these rules rank on any other page. */
    [data-theme="light"] main code:not(:where(.pip-boy, .pip-boy *, #fs-modal, #fs-modal *)),
    [data-theme="light"] main pre:not(:where(.pip-boy, .pip-boy *, #fs-modal, #fs-modal *)) {
        background-color: #f1f5f9;
        color: #334155;
    }
    [data-theme="light"] main .font-mono:not(:where(.pip-boy, .pip-boy *, #fs-modal, #fs-modal *)) {
        color: #334155;
    }

    /* Hover rows */
    [data-theme="light"] main tr:hover,
    [data-theme="light"] main .hover\:bg-black\/20:hover,
    [data-theme="light"] main .hover\:bg-black\/30:hover,
    [data-theme="light"] main .hover\:bg-slate-800\/50:hover,
    [data-theme="light"] main .hover\:bg-slate-800\/70:hover,
    [data-theme="light"] main .hover\:bg-slate-700\/20:hover {
        background-color: #f8fafc !important;
    }

    /* Table headers */
    [data-theme="light"] main thead {
        background-color: #f8fafc !important;
    }
    [data-theme="light"] main thead th {
        color: #64748b !important;
    }

    /* Period buttons / filter pills */
    [data-theme="light"] .period-btn {
        border-color: #e2e8f0 !important;
        color: #64748b !important;
    }
    [data-theme="light"] .period-btn:hover {
        color: #0f172a !important;
        border-color: #cbd5e1 !important;
    }
    [data-theme="light"] .period-btn.active {
        background: rgba(59, 130, 246, 0.1) !important;
        border-color: #3b82f6 !important;
        color: #2563eb !important;
    }

    /* Heatmap */
    [data-theme="light"] .heatmap-level-0 { background: #f1f5f9 !important; }
    [data-theme="light"] .heatmap-cell { border-color: rgba(0,0,0,0.04) !important; }

    /* Chart toggle */
    [data-theme="light"] .chart-toggle {
        background: #f1f5f9 !important;
        border-color: #e2e8f0 !important;
    }
    [data-theme="light"] .chart-toggle-btn { color: #64748b !important; }
    [data-theme="light"] .chart-toggle-btn.active {
        background: rgba(59, 130, 246, 0.1) !important;
        color: #2563eb !important;
    }

    /* Colored tint backgrounds - strengthen for light mode.
       Use exact class selectors (not [class*=...] substring matches) so we
       don't accidentally fire on Tailwind variant classes like
       `has-[:checked]:bg-emerald-500/10` or `hover:bg-red-500/10`, which
       would otherwise apply the tint unconditionally regardless of state. */
    [data-theme="light"] main .bg-yellow-500\/10 {
        background-color: rgba(234, 179, 8, 0.12) !important;
        border-color: rgba(234, 179, 8, 0.3) !important;
    }
    [data-theme="light"] main .bg-yellow-500\/10 .text-yellow-400,
    [data-theme="light"] main .bg-yellow-500\/10 .text-yellow-300 {
        color: #a16207 !important;
    }
    [data-theme="light"] main .bg-green-500\/10,
    [data-theme="light"] main .bg-emerald-500\/10 {
        background-color: rgba(16, 185, 129, 0.1) !important;
        border-color: rgba(16, 185, 129, 0.25) !important;
    }
    [data-theme="light"] main .bg-red-500\/10 {
        background-color: rgba(239, 68, 68, 0.08) !important;
        border-color: rgba(239, 68, 68, 0.2) !important;
    }
    [data-theme="light"] main .bg-blue-500\/10 {
        background-color: rgba(59, 130, 246, 0.08) !important;
        border-color: rgba(59, 130, 246, 0.2) !important;
    }

    /* Filter pill groups (Events page, etc.). Exact class selectors, per the
       note above: the substring form also matched variant classes like
       `hover:bg-slate-800/50` paired with any `p-1*` padding, which painted the
       pill fill on elements that were only meant to take it on hover. */
    [data-theme="light"] main .bg-slate-800\/50.p-1 {
        background-color: #f1f5f9 !important;
    }
    [data-theme="light"] main [class*="bg-blue-500\/30"] {
        background-color: rgba(59, 130, 246, 0.15) !important;
    }

    /* ===== Verifiers Index - Light Mode ===== */

    /* The row CTA's `hover:bg-slate-800/50` is caught by the blanket
       bg-slate-800 → white overrides, which flatten the hover into the card.
       Qualified with `a` so it outranks them and the affordance survives. */
    [data-theme="light"] main a.orpheus-verifier-details-link {
        background-color: transparent !important;
    }
    [data-theme="light"] main a.orpheus-verifier-details-link:hover {
        background-color: #f1f5f9 !important;
    }

    /* Icon tiles. Both fills sit at 10–20% alpha, which separates custom
       (cyan → emerald gradient) from built-in (flat cyan) over the dark card
       but collapses to near-white over a light one, taking the cyan-400 stroke
       with it. Deepen each fill and drop the stroke to cyan-700 so the split
       survives on white. */
    [data-theme="light"] main .orpheus-verifier-icon--custom {
        background-image: linear-gradient(to bottom right, rgba(8, 145, 178, 0.22), rgba(5, 150, 105, 0.18)) !important;
    }
    [data-theme="light"] main .orpheus-verifier-icon--builtin {
        background-color: rgba(8, 145, 178, 0.14) !important;
    }
    [data-theme="light"] main .orpheus-verifier-icon svg {
        color: #0e7490 !important;
    }

    /* ===== Verifier Show Page - Light Mode ===== */

    /* VLE Rules section. text-slate-400 restates the broad override further up,
       so it needs the same Live Ops terminal exemption -- being declared later,
       it would otherwise win and repaint the history cards on its own. */
    [data-theme="light"] main .text-slate-100 { color: #0f172a !important; }
    [data-theme="light"] main .text-slate-300 { color: #475569 !important; }
    [data-theme="light"] main .text-slate-400:not(:where(.pip-boy, .pip-boy *, #fs-modal, #fs-modal *)) { color: #64748b !important; }
    [data-theme="light"] main .text-slate-500 { color: #94a3b8 !important; }

    /* Dark backgrounds become white cards */
    [data-theme="light"] main [class*="bg-slate-800\/40"],
    [data-theme="light"] main [class*="bg-slate-800\/50"],
    [data-theme="light"] main [class*="bg-slate-800\/30"],
    [data-theme="light"] main [class*="bg-slate-900\/50"] {
        background-color: #ffffff !important;
    }

    /* Borders */
    [data-theme="light"] main [class*="border-slate-700"],
    [data-theme="light"] main [class*="border-slate-800"] {
        border-color: #e2e8f0 !important;
    }
    [data-theme="light"] main [class*="divide-slate-700"] > * + * {
        border-color: #e2e8f0 !important;
    }

    /* Inputs */
    [data-theme="light"] main input[type="number"] {
        background-color: #ffffff !important;
        border-color: #cbd5e1 !important;
        color: #0f172a !important;
    }
    [data-theme="light"] main input[type="range"] {
        background-color: #e2e8f0 !important;
    }

    /* Inactive buttons in config */
    [data-theme="light"] main .bg-slate-800.border-slate-700 {
        background-color: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
    }

    /* Scrollbar light mode */
    [data-theme="light"] main::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.15);
    }
    [data-theme="light"] main::-webkit-scrollbar-track {
        background: transparent;
    }

    /* ===== Events + Violations index - Light Mode polish =====
       Scoped via the page-* hook on <main>. Covers the tones the global light
       block has no rule for. */

    /* Critical violation chips: text-red-200 on a faint tint vanishes on white,
       and these must stay the loudest chip in the row. */
    [data-theme="light"] .page-orpheus-events-index .border-red-500\/40.text-red-200,
    [data-theme="light"] .page-orpheus-violations-index .border-red-500\/40.text-red-200 {
        background: #fee2e2 !important;
        color: #991b1b !important;
        border-color: #fca5a5 !important;
    }

    /* Passed share badge. */
    [data-theme="light"] .page-orpheus-events-index .text-emerald-300,
    [data-theme="light"] .page-orpheus-violations-index .text-emerald-300 {
        color: #047857 !important;
    }

    /* Status / actor / MCP verdict / agent resource kind segmented controls: the dark translucent track has no
       light rule and shows through as grey bars between white segments. Light
       track, flat idle segments, raised white active segment. */
    [data-theme="light"] .page-orpheus-events-index .events-segmented,
    [data-theme="light"] .page-orpheus-violations-index .events-segmented,
    [data-theme="light"] .page-orpheus-mcp_directory .events-segmented,
    [data-theme="light"] .page-orpheus-agent_resources .events-segmented {
        background: #f1f5f9 !important;
        --tw-ring-color: #e2e8f0 !important;
    }
    [data-theme="light"] .page-orpheus-events-index .events-segmented > a,
    [data-theme="light"] .page-orpheus-violations-index .events-segmented > a,
    [data-theme="light"] .page-orpheus-mcp_directory .events-segmented > a,
    [data-theme="light"] .page-orpheus-agent_resources .events-segmented > a {
        background: transparent !important;
        color: #64748b !important;
    }
    [data-theme="light"] .page-orpheus-events-index .events-segmented > a:hover,
    [data-theme="light"] .page-orpheus-violations-index .events-segmented > a:hover,
    [data-theme="light"] .page-orpheus-mcp_directory .events-segmented > a:hover,
    [data-theme="light"] .page-orpheus-agent_resources .events-segmented > a:hover {
        background: #e2e8f0 !important;
        color: #0f172a !important;
    }
    [data-theme="light"] .page-orpheus-events-index .events-segmented > a[aria-current="page"],
    [data-theme="light"] .page-orpheus-violations-index .events-segmented > a[aria-current="page"],
    [data-theme="light"] .page-orpheus-mcp_directory .events-segmented > a[aria-current="page"],
    [data-theme="light"] .page-orpheus-agent_resources .events-segmented > a[aria-current="page"] {
        background: #ffffff !important;
        color: #0f172a !important;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.08), 0 0 0 1px #e2e8f0 !important;
    }

    /* Sparkline end dot: the ring separates it from the line, so it takes the
       card surface colour rather than a dark halo. */
    [data-theme="light"] .page-orpheus-events-index .ring-slate-900,
    [data-theme="light"] .page-orpheus-violations-index .ring-slate-900 {
        --tw-ring-color: #ffffff !important;
    }

    /* Violations severity labels, badges and share pills use -300 tones that
       read on slate but wash out on white. */
    [data-theme="light"] .page-orpheus-violations-index .text-red-300 { color: #b91c1c !important; }
    [data-theme="light"] .page-orpheus-violations-index .text-orange-300 { color: #c2410c !important; }
    [data-theme="light"] .page-orpheus-violations-index .text-yellow-300 { color: #a16207 !important; }
    [data-theme="light"] .page-orpheus-violations-index .text-amber-300 { color: #b45309 !important; }
    [data-theme="light"] .page-orpheus-violations-index .text-blue-300 { color: #1d4ed8 !important; }
    [data-theme="light"] .page-orpheus-violations-index .text-rose-300 { color: #be123c !important; }

    /* Reason row: the dark inset tint turns into a grey slab on white. */
    [data-theme="light"] .page-orpheus-violations-index .violations-reason-row {
        background: #f8fafc !important;
    }

    /* Row chevron: flat until hovered, like the other row actions. */
    [data-theme="light"] .page-orpheus-violations-index .violations-row-toggle {
        background: transparent !important;
        color: #64748b !important;
    }
    [data-theme="light"] .page-orpheus-violations-index .violations-row-toggle:hover {
        background: #e2e8f0 !important;
        color: #0f172a !important;
    }

    /* Reason detail list, secret cards and code blocks: white surfaces with a
       light hairline instead of dark translucent fills. */
    [data-theme="light"] .page-orpheus-violations-index .violations-reason-list,
    [data-theme="light"] .page-orpheus-violations-index .violations-reason-code {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
    }
    [data-theme="light"] .page-orpheus-violations-index .violations-reason-list > * {
        border-color: #e2e8f0 !important;
    }
    [data-theme="light"] .page-orpheus-violations-index .text-violet-300 { color: #6d28d9 !important; }

    /* ===== Projects pages - Light Mode polish =====
       Scoped to the projects controller via the page-* hook on <main>.
       Fills gaps the global light overrides miss on these pages. */

    /* Canonical status pills for the two tones the global block omits
       (Personal/Unclassified type badges, critical/low severity pills):
       pastel surface + AA-contrast text + defining border. */
    [data-theme="light"] .page-orpheus-projects .bg-purple-500\/20.text-purple-400 {
        background: #f3e8ff !important;
        color: #6b21a8 !important;
        border: 1px solid #d8b4fe !important;
    }
    [data-theme="light"] .page-orpheus-projects .bg-yellow-500\/20.text-yellow-400 {
        background: #fef9c3 !important;
        color: #854d0e !important;
        border: 1px solid #fde047 !important;
    }

    /* Inactive filter tabs: the global rule turns bg-slate-800 white, leaving
       them undefined on a light background. Give them a real surface, border
       and hover state. */
    [data-theme="light"] .page-orpheus-projects-index a.bg-slate-800 {
        background: #f1f5f9 !important;
        color: #475569 !important;
        border: 1px solid #e2e8f0 !important;
    }
    [data-theme="light"] .page-orpheus-projects-index a.bg-slate-800:hover {
        background: #e2e8f0 !important;
        color: #0f172a !important;
    }

    /* hover:text-white icons/links (edit/archive, row chevrons, breadcrumb)
       would turn invisible on a white surface; flip the hover target to dark. */
    [data-theme="light"] .page-orpheus-projects .hover\:text-white:hover {
        color: #0f172a !important;
    }

    /* Inner rows use bg-slate-900/50, which the global rule turns white -
       invisible inside white cards. Give them a subtle surface + border so
       they separate. Also stop the [class*="bg-slate-700/"] global rule from
       painting hover rows permanently grey, and restore a real hover. */
    [data-theme="light"] .page-orpheus-projects .bg-slate-900\/50 {
        background: #f8fafc !important;
        border: 1px solid #eef2f7 !important;
    }
    [data-theme="light"] .page-orpheus-projects .hover\:bg-slate-700\/30 {
        background: transparent !important;
    }
    [data-theme="light"] .page-orpheus-projects .hover\:bg-slate-700\/30:hover {
        background: #f1f5f9 !important;
    }

    /* Index table rows: the global [class*="bg-slate-700/"] rule matches the
       hover:bg-slate-700/20 utility and paints every row grey permanently.
       Keep rows transparent (white card shows through) with a real hover. */
    [data-theme="light"] .page-orpheus-projects .hover\:bg-slate-700\/20 {
        background: transparent !important;
    }
    [data-theme="light"] .page-orpheus-projects .hover\:bg-slate-700\/20:hover {
        background: #f1f5f9 !important;
    }

    /* Unclassified project rows carry bg-yellow-500/5 for a faint tint, but the
       transparency rule above also matches them (they share hover:bg-slate-700/20)
       and would clear it. Restore a very light yellow with higher specificity
       (element + class) so it wins for unclassified rows only. */
    [data-theme="light"] .page-orpheus-projects-index tr.bg-yellow-500\/5 {
        background: #fefce8 !important;
    }
    [data-theme="light"] .page-orpheus-projects-index tr.bg-yellow-500\/5:hover {
        background: #fef9c3 !important;
    }

    /* Index table row seams: the layout maps tbody tr / divide-slate-700/50 to
       light via an *unlayered* !important. A *layered* !important outranks that,
       so this guarantees the row dividers render light (no dark seam) even if
       another rule tries to win. */
    [data-theme="light"] .page-orpheus-projects-index table tbody tr,
    [data-theme="light"] .page-orpheus-projects-index .divide-slate-700\/50 > :not([hidden]) ~ :not([hidden]) {
        border-color: #e2e8f0 !important;
    }

    /* Recent Events / Recent Violations panels (detail page): the header uses a
       border-b border-slate-700 underline and the list uses a plain
       divide-slate-700 for row dividers. The first row's divider was still
       rendering dark in light mode. Force both seam types light, targeting the
       header underline and every direct row child (incl. the first - harmless,
       it carries no divider width). Scoped to these elements so intentional
       coloured borders (severity badges, status pills) are untouched. !important
       outranks Tailwind's normal divide/border utilities. */
    [data-theme="light"] .page-orpheus-projects .bg-slate-800\/50 > .border-b.border-slate-700,
    [data-theme="light"] .page-orpheus-projects .divide-slate-700 > * {
        border-color: #e2e8f0 !important;
    }

    /* "View All" CTAs on the project detail page: match the dashboard's
       "View All ->" styling by appending the arrow (decorative, both themes). */
    .page-orpheus-projects-show a.text-blue-400::after {
        content: " \2192";
    }

    /* ================================================================
       LIVE OPS — light mode

       The developer terminals and the fullscreen replay modal are deliberately
       identical in both themes, down to the frame and its glow: a pip-boy screen
       is the point of this page, and a light-mode terminal is just a worse
       terminal. That parity is not achieved here -- it is achieved by exempting
       `.pip-boy` and `#fs-modal` from the four broad overrides above that reached
       inside them (code/pre, .font-mono, and both .text-slate-400 plus
       .text-slate-600), so nothing below needs to select a terminal at all.

       Everything here is the chrome around the terminals, which those same broad
       overrides flatten into white-on-white.
       ================================================================ */

    /* The one thing an exemption cannot restore: descendants with no colour of
       their own inherit from `body`, which light mode repaints. Put the dark
       theme's base back on the terminal roots so the subtree inherits it --
       `border-*` utilities with no colour fall back to currentColor, so this is
       load-bearing for more than text. Mirrors `<body class="text-gray-100">`. */
    [data-theme="light"] .pip-boy,
    [data-theme="light"] #fs-modal {
        color: var(--color-gray-100) !important;
    }

    /* `hover:bg-slate-800/30` is matched by the [class*="bg-slate-800"] override
       near the top of this section, which forces the row white at all times and
       outranks the generic `main tr:hover`. Without this the Live Stream gives no
       feedback at all, on rows that are the page's main click target. */
    [data-theme="light"] .page-orpheus-ops #live-feed-body tr:hover {
        background-color: #f1f5f9 !important;
    }

    /* Flat white panels need an edge to read as panels. */
    [data-theme="light"] .page-orpheus-ops #active-empty,
    [data-theme="light"] .page-orpheus-ops #history-empty,
    [data-theme="light"] .page-orpheus-ops aside .bg-slate-900\/50 {
        background-color: #f8fafc !important;
        border-color: #e8edf3 !important;
    }

    /* `bg-slate-800 text-slate-400` resolves to slate-400 on white. Skip the
       paused state, which sets its own bg-cyan-600. */
    [data-theme="light"] .page-orpheus-ops #pause-btn:not(.bg-cyan-600) {
        background-color: #f1f5f9 !important;
        border: 1px solid #e2e8f0;
        color: #475569 !important;
    }
    [data-theme="light"] .page-orpheus-ops #pause-btn:not(.bg-cyan-600):hover {
        background-color: #e2e8f0 !important;
        color: #0f172a !important;
    }

    /* Pagers. Both palettes are defeated by the generic `.font-mono` colour
       rule, which is more specific than any single text-* utility, so every
       button came out the same slate grey. Restated here per pager, with the
       amber darkened to amber-700: amber-500 at 80% on white is not a colour
       anyone can read. */
    [data-theme="light"] .page-orpheus-ops #active-pager button,
    [data-theme="light"] .page-orpheus-ops #active-pager [aria-hidden="true"] {
        color: #b45309 !important;
        border-color: rgba(180, 83, 9, 0.35) !important;
    }
    [data-theme="light"] .page-orpheus-ops #active-pager button:hover:not(:disabled) {
        background-color: #fffbeb !important;
        color: #92400e !important;
    }
    [data-theme="light"] .page-orpheus-ops #active-pager [aria-current="page"] {
        background-color: #fef3c7 !important;
        border-color: rgba(180, 83, 9, 0.5) !important;
        color: #92400e !important;
    }
    [data-theme="light"] .page-orpheus-ops #history-pager button {
        color: #475569 !important;
        border-color: #e2e8f0 !important;
    }
    [data-theme="light"] .page-orpheus-ops #history-pager button:hover:not(:disabled) {
        background-color: #f1f5f9 !important;
        color: #0f172a !important;
    }
    [data-theme="light"] .page-orpheus-ops #history-pager [aria-current="page"] {
        background-color: #e0f2fe !important;
        border-color: #7dd3fc !important;
        color: #0369a1 !important;
    }

    /* slate-500 lands at #94a3b8, which is too faint for the line that reports
       how many developers a search matched. */
    [data-theme="light"] .page-orpheus-ops #active-page-summary,
    [data-theme="light"] .page-orpheus-ops #history-page-summary {
        color: #64748b !important;
    }

    /* ================================================================
       SETTINGS — section nav beside the panels
       ================================================================ */
    .orpheus-settings {
        display: flex;
        align-items: flex-start;
        gap: 1.75rem;
    }

    .orpheus-settings__nav {
        flex: 0 0 13.5rem;
        width: 13.5rem;
        position: sticky;
        top: 0;
        padding-right: 1.5rem;
        border-right: 1px solid var(--orpheus-border);
    }

    .orpheus-settings__group + .orpheus-settings__group {
        margin-top: 1.75rem;
    }

    .orpheus-settings__group-label {
        margin: 0 0 0.5rem 0.75rem;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--orpheus-text-muted);
    }

    .orpheus-settings__item {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid transparent;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--orpheus-text-secondary);
        text-decoration: none;
        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    .orpheus-settings__item + .orpheus-settings__item {
        margin-top: 0.125rem;
    }

    .orpheus-settings__item svg {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        color: var(--orpheus-text-muted);
    }

    .orpheus-settings__item:hover {
        background: rgba(255, 255, 255, 0.04);
        color: var(--orpheus-text);
    }

    .orpheus-settings__item:hover svg {
        color: var(--orpheus-text-secondary);
    }

    .orpheus-settings__item:focus-visible {
        outline: 2px solid var(--orpheus-accent);
        outline-offset: 2px;
    }

    .orpheus-settings__item.is-active {
        background: var(--orpheus-accent-soft);
        border-color: rgba(59, 130, 246, 0.25);
        color: var(--orpheus-text);
    }

    .orpheus-settings__item.is-active svg {
        color: var(--orpheus-accent);
    }

    .orpheus-settings__content {
        flex: 1 1 auto;
        min-width: 0;
    }

    .orpheus-settings__panel[hidden] {
        display: none;
    }

    /* Panels ship visible and settings_sections_controller.js hides all but one
       on connect, so this spacing is what the page looks like without scripting
       (and for the instant before Stimulus attaches): a flat stack of sections. */
    .orpheus-settings__panel + .orpheus-settings__panel {
        margin-top: 2rem;
    }

    /* Rows inside a panel: label + description on the left, control on the
       right, hairline between neighbours. */
    .orpheus-settings-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        padding: 1rem 0;
        border-top: 1px solid var(--orpheus-border);
    }

    .orpheus-settings-row:first-child {
        padding-top: 0;
        border-top: 0;
    }

    .orpheus-settings-row:last-child {
        padding-bottom: 0;
    }

    /* A checkbox that reads as a toggle track. Form semantics are untouched —
       the name/value pair and its hidden companion field still submit exactly
       as they did, so update_preferences sees the same params.

       The knob is a background gradient rather than an ::after, because
       pseudo-elements on form controls are not reliable across browsers; this
       is the same technique .orpheus-members-checkbox uses for its tick. */
    input.orpheus-switch {
        appearance: none;
        -webkit-appearance: none;
        flex-shrink: 0;
        width: 2.25rem;
        height: 1.25rem;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 9999px;
        background-color: rgb(71 85 105);
        background-image: radial-gradient(circle at center, #ffffff 0 49%, transparent 50%);
        background-repeat: no-repeat;
        background-size: 1rem 1rem;
        background-position: 2px center;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out,
                    background-position 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    input.orpheus-switch:checked {
        background-color: var(--orpheus-accent);
        background-position: calc(100% - 2px) center;
    }

    input.orpheus-switch:focus-visible {
        outline: 2px solid var(--orpheus-accent);
        outline-offset: 2px;
    }

    @media (max-width: 1023px) {
        .orpheus-settings {
            display: block;
        }
        .orpheus-settings__nav {
            display: flex;
            gap: 1.25rem;
            width: auto;
            position: static;
            padding: 0 0 1rem;
            margin-bottom: 1.75rem;
            overflow-x: auto;
            border-right: 0;
            border-bottom: 1px solid var(--orpheus-border);
        }
        .orpheus-settings__group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .orpheus-settings__group + .orpheus-settings__group {
            margin-top: 0;
        }
        .orpheus-settings__group-label {
            margin: 0;
            white-space: nowrap;
        }
        .orpheus-settings__item {
            white-space: nowrap;
        }
        .orpheus-settings__item + .orpheus-settings__item {
            margin-top: 0;
        }
    }

    @media (max-width: 640px) {
        .orpheus-settings-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.75rem;
        }
    }

    [data-theme="light"] main .orpheus-settings__nav {
        border-right-color: #e2e8f0 !important;
        border-bottom-color: #e2e8f0 !important;
    }
    [data-theme="light"] main .orpheus-settings__item:hover {
        background: #f1f5f9 !important;
    }
    [data-theme="light"] main .orpheus-settings__item.is-active {
        background: rgba(59, 130, 246, 0.1) !important;
        border-color: rgba(59, 130, 246, 0.3) !important;
        color: #0f172a !important;
    }
    [data-theme="light"] main .orpheus-settings-row {
        border-top-color: #e2e8f0 !important;
    }
    /* Outranks the blanket `main input[type="checkbox"]` light override, which
       would otherwise repaint the track on every state. */
    [data-theme="light"] main input[type="checkbox"].orpheus-switch {
        background-color: rgb(203 213 225) !important;
        border-color: transparent !important;
    }
    [data-theme="light"] main input[type="checkbox"].orpheus-switch:checked {
        background-color: #3b82f6 !important;
    }
}

/* Members table — select column width lives outside @layer so table-layout: fixed
   cannot redistribute leftover table width into this column. */
main .orpheus-members-table col.orpheus-members-table__select-col {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
}
main .orpheus-members-table col.orpheus-members-table__member-col {
    width: 20rem !important;
    max-width: 20rem !important;
}
main .orpheus-members-table th.orpheus-members-table__member,
main .orpheus-members-table td.orpheus-members-table__member {
    width: 20rem !important;
    max-width: 20rem !important;
    box-sizing: border-box !important;
}
main .orpheus-members-table col.orpheus-members-table__sub-team-col {
    width: auto !important;
}
main .orpheus-members-table th.orpheus-members-table__sub-team,
main .orpheus-members-table td.orpheus-members-table__sub-team {
    max-width: none !important;
    box-sizing: border-box !important;
}
/* Fixed, like ROLE: at 10% a 1366px window left them narrower than "Not connected". */
main .orpheus-members-table col.orpheus-members-table__hooks-col,
main .orpheus-members-table col.orpheus-members-table__daemon-col {
    width: 7.5rem !important;
}
/* Fixed, not a share of the table: 9% was narrower than the "Sub-team Admin" pill at any width. */
main .orpheus-members-table col.orpheus-members-table__role-col {
    width: 8.5rem !important;
}
main .orpheus-members-table th.orpheus-members-table__hooks,
main .orpheus-members-table td.orpheus-members-table__hooks,
main .orpheus-members-table th.orpheus-members-table__daemon,
main .orpheus-members-table td.orpheus-members-table__daemon,
main .orpheus-members-table th.orpheus-members-table__role,
main .orpheus-members-table td.orpheus-members-table__role {
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
main .orpheus-members-table col.orpheus-members-table__enforce-col {
    width: 8rem !important;
    min-width: 8rem !important;
    max-width: 8rem !important;
}
main .orpheus-members-table th.orpheus-members-table__enforce,
main .orpheus-members-table td.orpheus-members-table__enforce {
    width: 8rem !important;
    min-width: 8rem !important;
    max-width: 8rem !important;
    padding-left: 0.375rem !important;
    padding-right: 0.75rem !important;
    box-sizing: border-box !important;
}
main .orpheus-members-table th.orpheus-members-table__enforce {
    overflow: visible !important;
}
main .orpheus-members-table td.orpheus-members-table__enforce {
    overflow: hidden !important;
}
main .orpheus-members-table th.orpheus-members-table__select,
main .orpheus-members-table td.orpheus-members-table__select {
    width: 30px !important;
    max-width: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Company users roster — identity + hooks/daemon cols; memberships eat the rest. Below the
   min-width it scrolls in its overflow-x-auto wrapper rather than clipping Hooks and Daemon. */
.company-users-table {
    table-layout: fixed;
    width: 100%;
    min-width: 56rem;
}
.company-users-table__col-member { width: 15rem; }
.company-users-table__col-role { width: 8.75rem; }
.company-users-table__col-memberships { width: auto; }

.company-users-table td,
.company-users-table th {
    overflow: hidden;
}
.company-users-table__member {
    min-width: 0;
    overflow: visible;
}
.company-users-table__memberships {
    min-width: 0;
    overflow: visible;
}
.company-users-table__role {
    max-width: 8.75rem;
}

/* ---------------------------------------------------------------------------
   Members table: Status and actions columns.

   Status replaces the former Hooks and Daemon pair — two columns that answered
   one question, "is this person's tooling reporting in" — so the row can spend
   its width on who somebody is and what they hold. The actions column holds the
   row's ··· menu, which is now the only control on a row.

   Appended rather than folded into the blocks above so these land outside the
   @layer and win without another !important escalation. The Hooks, Daemon and
   Enforce rules that remain there are dead and go with the rest of the cleanup.
   --------------------------------------------------------------------------- */
.orpheus-members-table col.orpheus-members-table__status-col {
    width: 14rem;
}
.orpheus-members-table th.orpheus-members-table__status,
.orpheus-members-table td.orpheus-members-table__status {
    white-space: nowrap;
    box-sizing: border-box;
}
/* Two lines, hooks over daemon, each led by its label in a column of its own
   so the two states line up. Tight enough to keep the row one line taller than
   a single-line cell rather than two. */
.orpheus-members-table__status-stack {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.625rem;
    row-gap: 0.125rem;
    align-items: baseline;
    line-height: 1.25;
}
/* Same treatment as the card's HOOKS / DAEMON labels. */
.orpheus-members-table__status-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(148 163 184);
}
.orpheus-members-table col.orpheus-members-table__actions-col {
    width: 3.5rem;
    min-width: 3.5rem;
    max-width: 3.5rem;
}
.orpheus-members-table th.orpheus-members-table__actions,
.orpheus-members-table td.orpheus-members-table__actions {
    width: 3.5rem;
    min-width: 3.5rem;
    max-width: 3.5rem;
    padding-left: 0.375rem;
    padding-right: 0.75rem;
    text-align: right;
    white-space: nowrap;
    box-sizing: border-box;
}
/* The trigger is a target on a dense row, so it keeps a hit area even though it
   renders as three dots. */
.orpheus-members-table__actions-trigger {
    line-height: 1;
}

/* Segmented controls are <nav>s, and application.tailwind.css zeroes padding-top
   on every nav in body.dashboard-body, pinning the pills to the top of the track.
   That rule is an !important in @layer base, which outranks !important in any
   later layer, so the p-0.5 top inset is restored from base with a more specific
   selector. */
@layer base {
    body.dashboard-body nav.events-segmented {
        padding-top: 0.125rem !important;
    }
}