/* ========================================
           CLINICAL BRUTALIST DARK THEME
           Hank Claim Cleaner - 2025
           ======================================== */

        :root {
            /* Fleet light/dark standard (admin-webui docs/plans/2026-07-05-fleet-theme-standard.html):
               where a token's DARK value matches the console-served --hank- vocabulary (defined in
               {console}/embed/chrome.css, linked BEFORE this file), the local name now ALIASES the
               fleet token. chrome.css flips every --hank- token under [data-theme="light"], so the
               aliased tokens flip automatically -- do NOT add a local light block for them. Dark is
               the baseline (no cookie = dark, exactly the classic look), so aliasing is a zero-change
               refactor for those tokens.
               CC deliberately DIVERGES on the backgrounds (deepened for the "precision instrument
               console" pass), the borders, the muted text tier, and the -dim/-soft accent washes --
               these keep their LOCAL literals and take explicit [data-theme="light"] overrides at the
               bottom of this file, per the design law (neon glows to soft real shadows, translucent-
               white toplines to dark hairlines, dark surfaces to light surfaces).
               COMMENT LANDMINE (bit M3): never let an asterisk touch a following slash inside a CSS
               comment -- it closes the comment early and the parser silently eats the NEXT rule whole.
               That is why every token here is spelled out, never globbed. */

            /* Core palette -- deepened past the fleet dark values, so LOCAL + light overrides below. */
            --bg-primary: #06090e;
            --bg-secondary: #0b1016;
            --bg-elevated: #111823;
            --bg-card: #161e2a;

            /* Text -- primary/secondary match the fleet exactly -> ALIAS (light flips free). muted
               is deeper than the fleet -> LOCAL + light override. */
            --text-primary: var(--hank-text-primary);
            --text-secondary: var(--hank-text-secondary);
            --text-muted: #4d5560;

            /* Accents -- base hues match the fleet exactly -> ALIAS (dark unchanged, light AA values
               flip free). cyan-dim/-glow have fleet twins -> ALIAS. The success/error/warning -dim
               washes and cyan-soft are CC-local (no fleet equivalent) -> LOCAL + light override. */
            --accent-cyan: var(--hank-accent-cyan);
            --accent-cyan-dim: var(--hank-accent-cyan-dim);
            --accent-cyan-soft: rgba(0, 217, 255, 0.08);
            --accent-cyan-glow: var(--hank-accent-cyan-glow);
            --accent-success: var(--hank-accent-success);
            --accent-success-dim: rgba(0, 245, 160, 0.15);
            --accent-error: var(--hank-accent-error);
            --accent-error-dim: rgba(255, 107, 107, 0.15);
            --accent-warning: var(--hank-accent-warning);
            --accent-warning-dim: rgba(255, 217, 61, 0.15);

            /* Panel surface accents -- translucent-white topline (design law: dark hairline in light). */
            --panel-topline: rgba(255, 255, 255, 0.03);

            /* Borders -- CC values are deeper/different than the fleet -> LOCAL + light overrides. */
            --border-subtle: #1a212b;
            --border-default: #28303b;
            --border-emphasis: #484f58;

            /* Shadows */
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
            --shadow-glow-cyan: 0 0 20px rgba(0, 217, 255, 0.3);
            --shadow-glow-success: 0 0 20px rgba(0, 245, 160, 0.3);
            --shadow-glow-error: 0 0 20px rgba(255, 107, 107, 0.3);

            /* Typography */
            --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
            --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
            --font-display: 'Archivo', sans-serif;

            /* Corner radii */
            --radius-card: 8px;
            --radius-input: 5px;
            --radius-chip: 3px;

            /* Motion */
            --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
            --dur-fast: 120ms;
            --dur-panel: 260ms;

            /* Spacing */
            --space-xs: 4px;
            --space-sm: 8px;
            --space-md: 16px;
            --space-lg: 24px;
            --space-xl: 32px;
        }

        /* Condensed-wide display utility: Archivo pushed to its widest axis for
           the console-title voice (panel titles reuse the same idea inline). */
        .u-display {
            font-family: var(--font-display);
            font-variation-settings: 'wdth' 125;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        /* Base reset and body */
        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-sans);
            background: var(--bg-primary);
            color: var(--text-primary);
            margin: 0;
            line-height: 1.5;
            /* Full-bleed page shell. No body padding, so the console-served chrome
               header/footer span edge to edge (the app content keeps its own
               horizontal inset via the #cc-app > .panel margins). A flex column
               with min-height:100vh keeps the footer pinned to the viewport bottom
               on short pages while the app column (#cc-app) grows to fill. */
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            /* Crisper text rendering on macOS / Retina (the dark bg makes the
               default sub-pixel smoothing look heavy). */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Noise texture overlay */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
            opacity: 0.03;
            pointer-events: none;
            z-index: 9999;
        }

        /* Atmosphere: a huge, soft cyan glow bleeding down from the top center.
           Sits above the solid --bg-primary fill (z-index -1) but below all page
           content, so panels read as lit instruments on a dark deck. */
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: -1;
            background: radial-gradient(ellipse 900px 480px at 50% -140px, rgba(0, 217, 255, 0.05), transparent 70%);
        }

        /* ========================================
           PANEL PRIMITIVES (precision instrument console)
           The whole page is now a stack of .panel instruments whose head carries
           the same visual language the operator panel block-heads already speak:
           a cyan tick, a condensed-wide title, a fading rule, a mono count.
           ======================================== */
        /* The app column grows to fill the flex shell, pinning the footer to the
           viewport bottom on short pages. Internal spacing (below the header, above
           the footer) is unchanged: the first panel/op-panel keeps its top margin,
           the last panel its bottom margin. */
        #cc-app { position: relative; z-index: 1; flex: 1 0 auto; width: 100%; }

        /* Align the panel stack with the operator panel's horizontal inset. */
        #cc-app > .page-subtitle,
        #cc-app > .panel {
            margin-left: var(--space-lg);
            margin-right: var(--space-lg);
        }
        #cc-app > .panel { margin-bottom: var(--space-lg); }

        .panel {
            background: var(--bg-secondary);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-card);
            box-shadow: inset 0 1px 0 var(--panel-topline);
            padding: var(--space-lg);
        }

        .panel-head {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: var(--space-md);
        }
        .panel-tick {
            flex: 0 0 auto;
            width: 3px;
            height: 14px;
            background: var(--accent-cyan);
            border-radius: 1px;
        }
        .panel-title {
            flex: 0 0 auto;
            font-family: var(--font-display);
            font-variation-settings: 'wdth' 125;
            font-size: 12.5px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--text-secondary);
        }
        .panel-rule {
            flex: 1 1 auto;
            height: 1px;
            background: linear-gradient(90deg, var(--border-default), transparent);
        }
        .panel-count {
            flex: 0 0 auto;
            font-family: var(--font-mono);
            font-size: 10.5px;
            letter-spacing: 0.04em;
            color: var(--text-muted);
        }

        /* Panel C rides the action cluster in its head, pushed right by the rule. */
        .panel-head .action-buttons {
            flex: 0 0 auto;
            margin: 0;
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        /* Panel A: the two search fields dock side by side on wide viewports. */
        .search-dock {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-md) var(--space-lg);
        }
        @media (min-width: 760px) {
            .search-dock { grid-template-columns: 1fr 1fr; }
        }
        .search-field {
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
            min-width: 0;
        }

        /* Endpoint hint, restyled as a slim mono chip above the panels. The long
           URL can outrun a phone viewport, so the chip caps to the content width
           and scrolls internally rather than pushing the page sideways. */
        .page-subtitle {
            display: inline-flex;
            align-items: center;
            max-width: calc(100% - 2 * var(--space-lg));
            overflow-x: auto;
            white-space: nowrap;
            margin-top: var(--space-md);
            margin-bottom: var(--space-md);
            padding: 4px 10px;
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: 0.02em;
            color: var(--text-muted);
            background: var(--bg-elevated);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-chip);
        }

        /* ========================================
           MOTION -- load stagger + reveal
           ======================================== */
        @keyframes fade-rise {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* fill-mode is BACKWARDS, not both: we need the hidden pre-start state
           held during the stagger delay (so a panel does not flash before its
           turn), but NOT a held end state. A forwards/both fill would pin the
           `to { transform: translateY(0) }` permanently, and translateY(0) is a
           real transform (not none), so every panel would stay a stacking
           context forever, trapping the search typeahead's z-index under the
           next panel. Backwards reverts each panel to a clean, transform-free
           box once it has animated in. */
        .reveal {
            animation: fade-rise 320ms var(--ease-out) backwards;
            animation-delay: calc(var(--reveal-i, 0) * 60ms);
        }

        /* Typography */
        h1, h2, h3, h4 {
            font-family: var(--font-mono);
            font-weight: 600;
            letter-spacing: -0.02em;
            /* Even out multi-line headings so the last line isn't a lone word. */
            text-wrap: balance;
        }

        a {
            color: var(--accent-cyan);
            text-decoration: none;
            transition: color 0.2s ease;
        }

        a:hover {
            color: var(--text-primary);
            text-shadow: 0 0 10px var(--accent-cyan-glow);
        }

        /* Generic table styles */
        .issues-table {
            border-collapse: collapse;
            border: 1px solid var(--border-default);
            background: var(--bg-card);
        }

        .issues-table th {
            border-bottom: 2px solid var(--accent-cyan);
            font-family: var(--font-mono);
            font-weight: 600;
            padding: var(--space-sm);
            white-space: nowrap;
            color: var(--accent-cyan);
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 0.1em;
        }

        .issues-table td {
            border-bottom: 1px solid var(--border-subtle);
            padding: var(--space-sm);
            font-family: var(--font-mono);
            font-size: 13px;
        }

        .centeralign { text-align: center; }
        .leftalign { text-align: left; }

        /* ========================================
           SUMMARY CARDS - Results Display
           ======================================== */

        .summary-card {
            background: var(--bg-card);
            border: 1px solid var(--accent-cyan);
            border-left: 4px solid var(--accent-cyan);
            color: var(--text-primary);
            padding: var(--space-lg);
            margin-bottom: var(--space-lg);
            box-shadow: var(--shadow-md), var(--shadow-glow-cyan);
            position: relative;
        }

        .summary-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, var(--accent-cyan), transparent);
        }

        .summary-card h3 {
            font-family: var(--font-mono);
            margin: 0 0 var(--space-md) 0;
            color: var(--accent-cyan);
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .summary-stats {
            display: flex;
            justify-content: space-around;
            margin-top: var(--space-md);
            gap: var(--space-lg);
        }

        .stat-item {
            text-align: center;
            padding: var(--space-md);
            background: var(--bg-secondary);
            border: 1px solid var(--border-default);
            flex: 1;
        }

        .stat-number {
            font-family: var(--font-mono);
            font-size: 32px;
            font-weight: 700;
            color: var(--accent-cyan);
            text-shadow: 0 0 20px var(--accent-cyan-glow);
            /* Lock digit width so the count never reflows between renders. */
            font-variant-numeric: tabular-nums;
        }

        .stat-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--text-secondary);
            margin-top: var(--space-xs);
        }

        /* Error card variant */
        .summary-card.error-card {
            background: var(--bg-card);
            border-color: var(--accent-error);
            box-shadow: var(--shadow-md), var(--shadow-glow-error);
        }

        .summary-card.error-card::before {
            background: linear-gradient(90deg, var(--accent-error), transparent);
        }

        .summary-card.error-card h3 {
            color: var(--accent-error);
        }

        .error-list {
            margin-top: var(--space-md);
        }

        .error-item {
            background: var(--accent-error-dim);
            border: 1px solid var(--accent-error);
            border-left: 3px solid var(--accent-error);
            padding: var(--space-md);
            margin-bottom: var(--space-sm);
            font-family: var(--font-mono);
            font-size: 13px;
        }

        .error-item:last-child { margin-bottom: 0; }

        .error-item strong {
            color: var(--accent-error);
        }

        /* Success/unchanged card variant */
        .summary-card.unchanged-card {
            border-color: var(--accent-success);
            box-shadow: var(--shadow-md), var(--shadow-glow-success);
        }

        .summary-card.unchanged-card::before {
            background: linear-gradient(90deg, var(--accent-success), transparent);
        }

        .summary-card.unchanged-card h3 {
            color: var(--accent-success);
        }

        .summary-card.unchanged-card .stat-number {
            color: var(--accent-success);
            text-shadow: 0 0 20px var(--accent-success);
        }

        /* ========================================
           COMPARISON VIEW
           ======================================== */

        .comparison-container {
            display: flex;
            gap: var(--space-lg);
            margin-bottom: var(--space-lg);
        }

        .comparison-side {
            flex: 1;
            background: var(--bg-card);
            border: 1px solid var(--border-default);
            padding: var(--space-md);
            box-shadow: var(--shadow-sm);
        }

        .comparison-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-sm);
            font-family: var(--font-mono);
            font-weight: 600;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: var(--space-md);
            padding-bottom: var(--space-sm);
            border-bottom: 2px solid var(--border-default);
        }

        .claim-copy-btn {
            flex: none;
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 3px 10px;
            color: var(--accent-cyan);
            background: var(--accent-cyan-dim);
            border: 1px solid var(--accent-cyan);
            border-radius: 3px;
            cursor: pointer;
            transition: background-color .15s ease, color .15s ease, transform .12s ease;
        }
        .claim-copy-btn:hover {
            background: var(--accent-cyan);
            color: var(--bg-primary);
        }
        .claim-copy-btn:active { transform: scale(0.96); }

        .original-header {
            color: var(--accent-error);
            border-color: var(--accent-error);
        }

        .cured-header {
            color: var(--accent-success);
            border-color: var(--accent-success);
        }

        .line-item-comparison {
            margin-bottom: var(--space-md);
            padding: var(--space-md);
            background: var(--bg-secondary);
            border: 1px solid var(--border-subtle);
        }

        .field-row {
            display: flex;
            margin: var(--space-xs) 0;
            font-family: var(--font-mono);
            font-size: 13px;
        }

        .field-label {
            font-weight: 600;
            width: 80px;
            color: var(--text-secondary);
            text-transform: uppercase;
            font-size: 10px;
            letter-spacing: 0.05em;
        }

        .field-value {
            flex: 1;
            color: var(--text-primary);
        }

        .removed-item {
            color: var(--accent-error);
            text-decoration: line-through;
            opacity: 0.7;
        }

        .added-item {
            color: var(--accent-success);
            font-weight: 600;
        }

        .unchanged-item {
            color: var(--text-secondary);
        }

        /* ========================================
           TIMELINE
           ======================================== */

        .timeline-container {
            background: var(--bg-card);
            border: 1px solid var(--border-default);
            padding: var(--space-lg);
            box-shadow: var(--shadow-sm);
        }

        .timeline-container h4 {
            margin: 0 0 var(--space-md) 0;
            color: var(--text-secondary);
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        .iteration-card {
            border-left: 3px solid var(--accent-cyan);
            margin-bottom: var(--space-md);
            padding-left: var(--space-lg);
            position: relative;
        }

        .iteration-card::before {
            content: '';
            position: absolute;
            left: -6px;
            top: 12px;
            width: 9px;
            height: 9px;
            background: var(--accent-cyan);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--accent-cyan);
        }

        .iteration-header {
            cursor: pointer;
            padding: var(--space-md);
            background: var(--bg-secondary);
            border: 1px solid var(--border-subtle);
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background-color 0.2s ease, border-color 0.2s ease;
        }

        .iteration-header:hover {
            background: var(--bg-elevated);
            border-color: var(--accent-cyan);
        }

        .iteration-title {
            font-family: var(--font-mono);
            font-weight: 600;
            color: var(--text-primary);
            font-size: 13px;
        }

        .iteration-badges {
            display: flex;
            gap: var(--space-sm);
        }

        .badge {
            padding: var(--space-xs) var(--space-sm);
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .badge-fixes {
            background: var(--accent-success-dim);
            color: var(--accent-success);
            border: 1px solid var(--accent-success);
        }

        .badge-cleaner {
            background: var(--bg-elevated);
            color: var(--text-secondary);
            border: 1px solid var(--border-default);
        }

        .iteration-details {
            display: none;
            padding: var(--space-md);
            background: var(--bg-secondary);
            border: 1px solid var(--border-subtle);
            border-top: none;
            margin-top: -1px;
        }

        .iteration-details.expanded {
            display: block;
        }

        .fix-item {
            padding: var(--space-sm);
            margin: var(--space-xs) 0;
            background: var(--bg-card);
            border-left: 2px solid var(--accent-cyan);
        }

        .fix-description {
            color: var(--text-secondary);
            margin: var(--space-xs) 0;
            font-size: 13px;
        }

        .fix-changes {
            font-family: var(--font-mono);
            font-size: 12px;
            color: var(--text-muted);
        }

        .expand-icon {
            transition: transform 0.3s ease;
            display: inline-block;
            color: var(--accent-cyan);
        }

        .expanded .expand-icon {
            transform: rotate(90deg);
        }

        .clean-indicator {
            color: var(--accent-success);
            font-weight: 600;
        }

        /* ========================================
           FINDING ENVELOPE (Phase-0 provenance chips)
           Every issue/info carries severity + cure-safety + source provenance,
           rendered as a chip row. Band/wash colors ride the existing flip-safe
           accent tokens (the same dim-bg + accent-text + accent-border idiom as
           .badge-fixes), so light mode needs almost no per-band override.
           ======================================== */

        .findings-container {
            background: var(--bg-card);
            border: 1px solid var(--border-default);
            padding: var(--space-lg);
            box-shadow: var(--shadow-sm);
            margin-top: var(--space-md);
            /* Break the 0px seam against the .timeline-container that follows. */
            margin-bottom: var(--space-md);
        }

        .findings-title {
            margin: 0 0 var(--space-md) 0;
            color: var(--text-secondary);
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .findings-count {
            font-family: var(--font-mono);
            font-variant-numeric: tabular-nums;
            font-size: 11px;
            color: var(--text-muted);
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-chip);
            padding: 0 var(--space-xs);
        }

        .finding-row {
            padding: var(--space-sm) var(--space-md);
            margin: var(--space-xs) 0;
            background: var(--bg-secondary);
            border: 1px solid var(--border-subtle);
            border-left: 2px solid var(--border-emphasis);
        }

        .finding-row.finding-issue { border-left-color: var(--accent-warning); }
        .finding-row.finding-info { border-left-color: var(--accent-cyan); }
        /* An issue the audit trail already cured: success-token left border. */
        .finding-row.finding-fixed { border-left-color: var(--accent-success); }

        .finding-head {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            flex-wrap: wrap;
        }

        .finding-kind {
            font-family: var(--font-mono);
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
        }

        .finding-issue .finding-kind { color: var(--accent-warning); }
        .finding-info .finding-kind { color: var(--accent-cyan); }
        /* FIXED label: same size/tracking/uppercase idiom as ISSUE/INFO, in the
           success token (legible in both themes -- light pins it to #096b44). */
        .finding-fixed .finding-kind { color: var(--accent-success); }

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

        .finding-line {
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
        }

        .finding-desc {
            color: var(--text-secondary);
            font-size: 13px;
            margin: var(--space-xs) 0;
        }

        .finding-limitation {
            color: var(--text-muted);
            font-size: 12px;
            font-style: italic;
            margin: var(--space-xs) 0;
        }

        .finding-chips {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--space-xs);
            margin-top: var(--space-xs);
        }

        .finding-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px var(--space-sm);
            font-family: var(--font-mono);
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            border-radius: var(--radius-chip);
            border: 1px solid var(--border-default);
            background: var(--bg-elevated);
            color: var(--text-secondary);
            white-space: nowrap;
            line-height: 1.6;
        }

        .finding-chip-num {
            font-variant-numeric: tabular-nums;
            opacity: 0.85;
        }
        /* On the solid critical chip the dimmed numeral falls just under AA in
           light mode; render it at full opacity there. */
        .finding-chip.sev-critical .finding-chip-num { opacity: 1; }

        /* Severity bands -- all via flip-safe accent tokens. */
        .finding-chip.sev-info {
            background: var(--accent-cyan-soft);
            color: var(--accent-cyan);
            border-color: var(--accent-cyan);
        }
        .finding-chip.sev-low {
            background: var(--bg-elevated);
            color: var(--text-secondary);
            border-color: var(--border-emphasis);
        }
        .finding-chip.sev-medium {
            background: var(--accent-warning-dim);
            color: var(--accent-warning);
            border-color: var(--accent-warning);
        }
        .finding-chip.sev-high {
            background: var(--accent-error-dim);
            color: var(--accent-error);
            border-color: var(--accent-error);
        }
        .finding-chip.sev-critical {
            background: var(--accent-error);
            color: var(--bg-primary);
            border-color: var(--accent-error);
        }

        /* Cure-safety chips: neutral by default; a positive tint for a safe
           auto-fix, a muted tone for a missing-source limitation report. Labels
           are sentence case (not shouty uppercase). */
        .finding-chip.cure-chip {
            text-transform: none;
            letter-spacing: 0.02em;
        }
        .finding-chip.cure-chip.cure-safe {
            background: var(--accent-success-dim);
            color: var(--accent-success);
            border-color: var(--accent-success);
        }
        .finding-chip.cure-chip.cure-missing {
            /* --text-secondary (not -muted): the dashed idiom + sentence case
               already de-emphasize; muted was ~2.5:1 for load-bearing text. */
            color: var(--text-secondary);
            border-color: var(--border-default);
            opacity: 0.9;
        }

        /* Heuristic marker: advisory, not an official edit -> dashed outline.
           Text at --text-secondary (dashed border carries the de-emphasis). */
        .finding-chip.chip-heuristic {
            background: transparent;
            color: var(--text-secondary);
            border: 1px dashed var(--border-emphasis);
        }

        /* Source provenance chip / link. The label truncates via its own child
           span (.finding-source-label) -- text-overflow is inert on this
           inline-flex container, so the chip clips and the span ellipsizes. */
        .finding-chip.finding-source {
            text-transform: none;
            letter-spacing: 0.01em;
            font-weight: 500;
            max-width: 100%;
            overflow: hidden;
        }
        .finding-source-label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
        }
        a.finding-chip.finding-source {
            color: var(--accent-cyan);
            border-color: var(--accent-cyan-dim);
            text-decoration: none;
            transition: border-color var(--dur-fast, .15s) ease, background-color var(--dur-fast, .15s) ease;
        }
        a.finding-chip.finding-source:hover {
            border-color: var(--accent-cyan);
            background: var(--accent-cyan-soft);
        }
        .finding-source-icon { font-size: 9px; }
        .finding-source-plain { color: var(--text-secondary); }

        /* ========================================
           CLAIM INPUT CARDS
           ======================================== */

        .claims-container {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
            max-width: 100%;
        }

        .claim-card {
            background: var(--bg-card);
            border: 1px solid var(--border-subtle);
            border-left: none;
            border-radius: var(--radius-card);
            padding: var(--space-lg);
            margin-bottom: var(--space-md);
            box-shadow: var(--shadow-md);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            position: relative;
        }

        /* Medical chart tab effect */
        .claim-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(180deg, var(--accent-cyan) 0%, var(--accent-cyan) 30px, var(--border-default) 30px);
        }

        .claim-card::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 30px;
            height: 30px;
            background: var(--accent-cyan);
            clip-path: polygon(0 0, 100% 0, 0 100%);
        }

        .claim-card:hover {
            border-color: var(--accent-cyan);
            box-shadow: var(--shadow-lg), var(--shadow-glow-cyan);
        }

        .claim-card:last-child {
            margin-bottom: 0;
        }

        .claim-badge {
            display: inline-block;
            background: var(--accent-cyan);
            color: var(--bg-primary);
            font-family: var(--font-mono);
            font-weight: 700;
            font-size: 11px;
            padding: var(--space-xs) var(--space-md);
            margin-bottom: var(--space-md);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        .claim-header {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-md);
            align-items: flex-end;
            margin-bottom: var(--space-md);
            padding-bottom: var(--space-md);
            border-bottom: 1px solid var(--border-subtle);
        }

        .claim-header label {
            font-family: var(--font-mono);
            font-weight: 600;
            font-size: 10px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        .claim-header .field-group {
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
        }

        .claim-header input,
        .claim-header select {
            padding: var(--space-sm) var(--space-md);
            border: 1px solid var(--border-default);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-family: var(--font-mono);
            font-size: 13px;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .claim-header input:focus,
        .claim-header select:focus {
            outline: none;
            border-color: var(--accent-cyan);
            box-shadow: 0 0 0 2px var(--accent-cyan-dim);
        }

        /* Line items table */
        .line-items-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: var(--space-md);
        }

        .line-items-table th {
            background: var(--bg-secondary);
            padding: var(--space-sm) var(--space-md);
            text-align: left;
            font-family: var(--font-mono);
            font-size: 10.5px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            white-space: nowrap;
            border-bottom: 1px solid var(--border-default);
        }

        /* Faint wash on row hover so the eye tracks the line being edited. */
        .line-items-table tbody tr {
            transition: background-color var(--dur-fast) var(--ease-out);
        }
        .line-items-table tbody tr:hover {
            background: rgba(255, 255, 255, 0.015);
        }

        /* Dense data-entry grid scrolls within its own track on narrow viewports
           instead of scrolling the whole page sideways. */
        .line-items-scroll {
            overflow-x: auto;
            margin-bottom: var(--space-md);
        }
        .line-items-scroll .line-items-table {
            min-width: 640px;
            margin-bottom: 0;
        }

        .line-items-table td {
            padding: var(--space-sm);
            border-bottom: 1px solid var(--border-subtle);
            vertical-align: middle;
        }

        .line-items-table input {
            width: 100%;
            padding: var(--space-sm) var(--space-md);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-input);
            background: var(--bg-elevated);
            color: var(--text-primary);
            font-family: var(--font-mono);
            font-size: 13px;
            box-sizing: border-box;
            min-height: 36px;
            transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
        }

        .line-items-table input:focus {
            outline: none;
            border-color: var(--accent-cyan);
            box-shadow: 0 0 0 3px var(--accent-cyan-dim);
        }

        .line-items-table input::placeholder {
            color: var(--text-muted);
        }

        /* ========================================
           BUTTONS
           ======================================== */

        .btn-delete-claim {
            background: transparent;
            border: 1px solid var(--accent-error);
            color: var(--accent-error);
            padding: var(--space-sm) var(--space-md);
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            cursor: pointer;
            margin-left: auto;
            transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
            min-width: 110px;
            text-align: center;
        }

        .btn-delete-claim:hover {
            background: var(--accent-error-dim);
            box-shadow: var(--shadow-glow-error);
        }

        .btn-delete-claim:active { transform: scale(0.96); }

        .btn-delete-claim.confirming {
            background: var(--accent-error);
            color: var(--bg-primary);
            transform: scale(1.02);
            box-shadow: var(--shadow-glow-error);
        }

        .btn-delete-line {
            background: transparent;
            border: 1px solid var(--accent-error);
            color: var(--accent-error);
            padding: var(--space-xs) var(--space-sm);
            font-family: var(--font-mono);
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: background-color 0.2s ease, color 0.2s ease, transform 0.12s ease;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        /* The glyph is 28px but the tap target needs ~40px (touch + a11y). A
           centered pseudo extends the hit area without changing the layout; it
           stays inside the cell padding so it never overlaps the row's input. */
        .btn-delete-line::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40px;
            height: 40px;
            transform: translate(-50%, -50%);
        }

        .btn-delete-line:hover {
            background: var(--accent-error);
            color: var(--bg-primary);
        }

        .btn-delete-line:active { transform: scale(0.96); }

        .btn-add-line {
            background: transparent;
            border: 1px solid var(--accent-success);
            color: var(--accent-success);
            padding: var(--space-sm) var(--space-md);
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            cursor: pointer;
            transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
        }

        .btn-add-line:hover {
            background: var(--accent-success-dim);
            box-shadow: var(--shadow-glow-success);
        }

        .btn-add-line:active { transform: scale(0.96); }

        /* ========================================
           TAG INPUTS
           ======================================== */

        .tag-container {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-xs);
            align-items: center;
            padding: var(--space-xs) var(--space-sm);
            border: 1px solid var(--border-default);
            background: var(--bg-secondary);
            min-height: 36px;
            cursor: text;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .tag-container:focus-within {
            border-color: var(--accent-cyan);
            box-shadow: 0 0 0 2px var(--accent-cyan-dim);
        }

        .search-spinner {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            width: 14px;
            height: 14px;
            border: 2px solid var(--border-default);
            border-top-color: var(--accent-cyan);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            pointer-events: none;
        }

        @keyframes spin {
            to { transform: translateY(-50%) rotate(360deg); }
        }

        .tag {
            background: var(--accent-cyan-dim);
            color: var(--accent-cyan);
            border: 1px solid var(--accent-cyan);
            border-radius: var(--radius-chip);
            padding: 2px var(--space-sm);
            font-family: var(--font-mono);
            font-size: 11.5px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
            animation: tag-in 140ms var(--ease-out);
        }
        @keyframes tag-in {
            from { opacity: 0; transform: scale(0.92); }
            to { opacity: 1; transform: scale(1); }
        }

        .tag-remove {
            margin-left: var(--space-xs);
            cursor: pointer;
            color: var(--accent-cyan);
            font-weight: bold;
            font-size: 14px;
            line-height: 1;
            opacity: 0.7;
            transition: color 0.2s ease, opacity 0.2s ease;
            position: relative;
        }

        /* Grow the tap target of the tiny × glyph. Horizontal growth is held to
           2px (< the 4px inter-tag gap) so it never overlaps a neighbouring tag;
           full 40px isn't possible inside a wrapping tag row without overlap. */
        .tag-remove::after {
            content: '';
            position: absolute;
            inset: -8px -2px;
        }

        .tag-remove:hover {
            color: var(--accent-error);
            opacity: 1;
        }

        .tag-input {
            border: none !important;
            outline: none !important;
            background: transparent !important;
            min-width: 80px;
            flex: 1;
            font-family: var(--font-mono) !important;
            font-size: 13px !important;
            color: var(--text-primary) !important;
            padding: 2px var(--space-xs) !important;
            box-shadow: none !important;
        }

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

        /* ========================================
           TYPEAHEAD DROPDOWN (signature element)
           Styles BOTH the new .typeahead-dropdown hook and the legacy
           .autocomplete alias app.js stamps on the same element. Rows carry
           .typeahead-item + .autocomplete-item; the structured trio is
           .ti-code / .ti-type / .ti-desc. Local-dict rows collapse to a single
           .item-text; crosswalk-suggestion rows stay a plain block.
           ======================================== */

        .autocomplete-wrapper {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        .line-items-table .autocomplete-wrapper { position: relative; }

        /* Container -- both classes land on the same element. */
        .typeahead-dropdown,
        .autocomplete {
            position: absolute;
            z-index: 1000;
            min-width: 100%;
            max-height: 320px;
            overflow: hidden auto;
            background: #0e141d;
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 217, 255, 0.06);
            transform-origin: top;
            animation: ta-drop calc(var(--dur-fast) + 20ms) var(--ease-out);
        }
        @keyframes ta-drop {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* Inline table cells are narrow -- keep a legible fixed min there. */
        .line-items-table .typeahead-dropdown,
        .line-items-table .autocomplete { min-width: 380px; }

        /* Row -- structured three-column grid. */
        .typeahead-item,
        .autocomplete-item {
            display: grid;
            grid-template-columns: auto auto 1fr;
            gap: 10px;
            align-items: center;
            padding: 8px 12px;
            cursor: pointer;
            color: var(--text-primary);
            border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 50%, transparent);
            transition: background-color var(--dur-fast) var(--ease-out);
        }
        .typeahead-item:last-child,
        .autocomplete-item:last-child { border-bottom: none; }

        .typeahead-item:hover,
        .typeahead-item.selected,
        .autocomplete-item:hover,
        .autocomplete-item.selected {
            background: var(--accent-cyan-soft);
            box-shadow: inset 2px 0 0 var(--accent-cyan);
        }
        .typeahead-item:hover .ti-desc,
        .typeahead-item.selected .ti-desc,
        .autocomplete-item:hover .ti-desc,
        .autocomplete-item.selected .ti-desc { color: var(--text-primary); }

        .ti-code {
            font-family: var(--font-mono);
            font-size: 12px;
            font-weight: 600;
            color: var(--accent-cyan);
            background: var(--accent-cyan-dim);
            padding: 2px 7px;
            border-radius: var(--radius-chip);
            white-space: nowrap;
        }
        .ti-type {
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            padding: 2px 6px;
            border-radius: var(--radius-chip);
        }
        .ti-type[data-type="CPT"] { color: var(--accent-cyan); background: var(--accent-cyan-dim); }
        .ti-type[data-type="ICD"] { color: var(--accent-success); background: var(--accent-success-dim); }
        .ti-type[data-type="MOD"] { color: var(--accent-warning); background: var(--accent-warning-dim); }
        .ti-type[data-type="HCC"] { color: var(--accent-error); background: var(--accent-error-dim); }
        .ti-desc {
            font-size: 12.5px;
            color: var(--text-secondary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ti-desc mark {
            background: rgba(0, 217, 255, 0.18);
            color: var(--text-primary);
            border-radius: 2px;
            padding: 0 2px;
        }

        /* Local-dict rows (modifier / anes modes) collapse to one span. */
        .item-text {
            grid-column: 1 / -1;
            font-size: 12.5px;
            color: var(--text-secondary);
            line-height: 1.3;
        }

        /* Non-interactive footer hint (harmless if JS never renders it). */
        .typeahead-hint {
            padding: 6px 12px;
            font-family: var(--font-mono);
            font-size: 10px;
            color: var(--text-muted);
            border-top: 1px solid var(--border-subtle);
        }

        /* Crosswalk-suggestion rows are a plain text block, not the grid trio. */
        .autocomplete-item.crosswalk-suggestion {
            display: block;
            padding: 8px 12px;
            font-family: var(--font-mono);
            font-size: 12px;
            color: var(--accent-success);
            background: var(--accent-success-dim);
            box-shadow: inset 2px 0 0 var(--accent-success);
        }
        .autocomplete-item.crosswalk-suggestion:hover,
        .autocomplete-item.crosswalk-suggestion.selected {
            background: var(--accent-success);
            color: var(--bg-primary);
        }

        .crosswalk-header {
            padding: 6px 12px;
            font-family: var(--font-mono);
            font-size: 10px;
            font-weight: 600;
            color: var(--accent-success);
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-subtle);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        /* Crosswalk mismatch warning */
        .anescpt-mismatch {
            background-color: var(--accent-warning-dim) !important;
            border-color: var(--accent-warning) !important;
        }

        /* ========================================
           SEARCH INPUTS (top browse boxes)
           40px field with a leading magnifier and a cyan focus ring; the
           placeholder speaks mono so the field reads like a command line.
           ======================================== */
        .search-box-input {
            width: 100%;
            height: 40px;
            padding-left: 36px;
            color: var(--text-primary);
            font-family: var(--font-sans);
            font-size: 13px;
            background-color: var(--bg-elevated);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: 12px center;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-input);
            transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
        }
        .search-box-input::placeholder {
            font-family: var(--font-mono);
            font-size: 11.5px;
            color: var(--text-muted);
        }
        .search-box-input:focus {
            outline: none;
            border-color: var(--accent-cyan);
            box-shadow: 0 0 0 3px var(--accent-cyan-dim);
        }

        /* ========================================
           ICD SUGGESTIONS
           ======================================== */

        .icd-suggestions-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 3px 6px;
            font-size: 12px;
            color: var(--accent-cyan);
            background: var(--accent-cyan-dim);
            border: 1px solid var(--accent-cyan);
            margin-right: var(--space-xs);
            flex-shrink: 0;
            transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
        }

        .icd-suggestions-icon:hover {
            background: var(--accent-cyan);
            color: var(--bg-primary);
            box-shadow: var(--shadow-glow-cyan);
        }

        .icd-suggestions-icon:active { transform: scale(0.96); }

        .icd-suggestions-icon.has-suggestions {
            animation: pulse-glow 2s infinite;
        }

        @keyframes pulse-glow {
            0%, 100% {
                opacity: 1;
                box-shadow: 0 0 5px var(--accent-cyan);
            }
            50% {
                opacity: 0.7;
                box-shadow: 0 0 15px var(--accent-cyan);
            }
        }

        .icd-suggestions-popup {
            position: absolute;
            z-index: 1001;
            background: var(--bg-elevated);
            border: 1px solid var(--accent-cyan);
            box-shadow: var(--shadow-lg), var(--shadow-glow-cyan);
            min-width: 320px;
            max-width: 480px;
        }

        .icd-suggestions-header {
            background: var(--accent-cyan);
            color: var(--bg-primary);
            padding: var(--space-sm) var(--space-md);
            font-family: var(--font-mono);
            font-weight: 700;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .icd-suggestions-close {
            cursor: pointer;
            font-size: 18px;
            opacity: 0.8;
            transition: opacity 0.2s ease;
        }

        .icd-suggestions-close:hover {
            opacity: 1;
        }

        .icd-suggestions-list {
            max-height: 250px;
            overflow-y: auto;
        }

        .icd-suggestion-item {
            padding: var(--space-sm) var(--space-md);
            cursor: pointer;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: var(--space-xs);
            border-bottom: 1px solid var(--border-subtle);
            transition: background-color 0.15s ease, border-left-color 0.15s ease;
        }

        .icd-suggestion-item:last-child {
            border-bottom: none;
        }

        .icd-suggestion-item:hover {
            background: var(--accent-cyan-dim);
            border-left: 2px solid var(--accent-cyan);
        }

        .icd-suggestion-code {
            font-family: var(--font-mono);
            font-weight: 700;
            color: var(--accent-cyan);
            margin-right: var(--space-sm);
        }

        .icd-suggestion-desc {
            flex: 1;
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.3;
        }

        .icd-suggestion-match {
            font-family: var(--font-mono);
            font-size: 10px;
            color: var(--text-muted);
            margin-left: var(--space-xs);
            white-space: nowrap;
        }

        .icd-suggestion-likelihood {
            background: var(--accent-success);
            color: var(--bg-primary);
            padding: 2px var(--space-sm);
            font-family: var(--font-mono);
            font-size: 10px;
            font-weight: 700;
            margin-left: var(--space-sm);
        }

        .icd-suggestions-empty {
            padding: var(--space-lg);
            text-align: center;
            color: var(--text-muted);
            font-style: italic;
        }

        /* ========================================
           UNITS BADGE
           ======================================== */

        .units-badge {
            display: inline-block;
            padding: 2px var(--space-sm);
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 700;
            border-radius: var(--radius-chip);
            margin-left: var(--space-xs);
        }

        .units-badge.rvu {
            background: rgba(0, 150, 255, 0.15);
            color: #00a8ff;
            border: 1px solid #00a8ff;
        }

        .units-badge.bu {
            background: var(--accent-success-dim);
            color: var(--accent-success);
            border: 1px solid var(--accent-success);
        }

        /* ========================================
           ACTION BUTTONS
           ======================================== */

        .action-buttons {
            margin-bottom: var(--space-lg);
        }

        /* ========================================
           CONTROL GRID (responsive form layout)
           Replaces the old fixed-width <table> form that forced the page to
           ~1063px and scrolled sideways below ~1078px. auto-fit + minmax wraps
           each field onto its own row as the viewport narrows.
           ======================================== */
        .controls-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: var(--space-lg) var(--space-md);
            align-items: start;
            margin-bottom: var(--space-lg);
            max-width: 1120px;
        }
        /* Both config grids live in one panel now; the last one hugs the floor. */
        .panel > .controls-grid:last-child { margin-bottom: 0; }
        /* Specialty + Payor are short controls -- cap their column so two fields
           don't stretch to half a wide screen each. */
        .controls-grid--meta {
            grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
        }
        /* Column stack; the field's own micro-label margin does the spacing. */
        .control-field,
        .search-field {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        .control-field--full {
            grid-column: 1 / -1;
        }
        /* Micro-label: mono, small-caps voice above every field. */
        .control-label {
            display: block;
            margin-bottom: 6px;
            font-family: var(--font-mono);
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            /* --text-secondary (not --text-muted): these micro-labels are the
               ONLY cue naming each control, so they must clear WCAG AA (~6.2:1
               here, vs ~2.5:1 for muted). Muted stays for decorative metadata. */
            color: var(--text-secondary);
        }
        /* Controls fill their grid cell so nothing overflows the column. */
        .control-field > select,
        .control-field > input[type="text"] {
            width: 100%;
            box-sizing: border-box;
        }
        /* Config-panel selects + text inputs match the search field surface. */
        .controls-grid select,
        .controls-grid input[type="text"] {
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-input);
            color: var(--text-primary);
            transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
        }
        .controls-grid select:focus,
        .controls-grid input[type="text"]:focus {
            outline: none;
            border-color: var(--accent-cyan);
            box-shadow: 0 0 0 3px var(--accent-cyan-dim);
        }
        #cpt-search-wrapper,
        #icd-search-wrapper {
            width: 100%;
            min-width: 0;
        }
        /* The vendored autocomplete plugin hardcodes width:283px; let it flow to
           the grid cell width instead so it never forces page overflow. */
        #cpt-search-wrapper .autocomplete-container,
        #icd-search-wrapper .autocomplete-container {
            width: 100%;
            max-width: 100%;
            margin: 0;
        }

        .btn-primary-action {
            background: var(--accent-cyan);
            color: #04121a;
            padding: 12px 22px;
            font-family: var(--font-sans);
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
        }

        .btn-primary-action:hover {
            transform: translateY(-1px);
            box-shadow: var(--shadow-glow-cyan);
        }

        /* Settle the hover lift and press in on click for tactile feedback. */
        .btn-primary-action:active {
            transform: translateY(0) scale(0.99);
        }

        .button-group {
            display: flex;
            gap: var(--space-sm);
            flex-wrap: wrap;
        }

        /* Ghost buttons (Load Sample / Clear). The .btn-load/.btn-clear classes
           are JS hooks; only their colour is harmonized to a single ghost look. */
        .btn-secondary {
            padding: var(--space-sm) var(--space-md);
            border: 1px solid var(--border-default);
            border-radius: 6px;
            background: transparent;
            cursor: pointer;
            font-family: var(--font-sans);
            font-weight: 600;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
            color: var(--text-secondary);
        }

        .btn-secondary:hover {
            border-color: var(--accent-cyan);
            color: var(--text-primary);
        }

        .btn-secondary:active { transform: scale(0.98); }

        /* Legacy add-line context keeps its success accent. */
        .btn-secondary.btn-add {
            border-color: var(--accent-success);
            color: var(--accent-success);
        }

        .btn-secondary.btn-add:hover {
            border-color: var(--accent-success);
            background: var(--accent-success-dim);
            color: var(--accent-success);
        }

        /* ========================================
           LOADER
           ======================================== */

        /* Hidden until app.js ($.show) reveals it; a clean cyan ring on the deck. */
        .loader {
            display: none;
            border: 3px solid var(--border-default);
            border-top-color: var(--accent-cyan);
            border-radius: 50%;
            width: 56px;
            height: 56px;
            animation: loader-spin 0.9s linear infinite;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9998;
            box-shadow: var(--shadow-glow-cyan);
        }

        .loadertext {
            display: none;
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--text-muted);
            position: fixed;
            top: calc(50% + 48px);
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            text-align: center;
        }

        @keyframes loader-spin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* ===== In-app confirm dialog (replaces native confirm()) =====
           Built by app.js ccConfirm() -- promise-based, no template markup.
           Themed to the console: elevated card, command-rail accent across the
           top, mono console-voice title. `.cc-modal-danger` swaps the rail and
           confirm button to the error accent for destructive actions. Sits
           above the cleaning loader (z 9998/9999). */
        .cc-modal-backdrop {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--space-lg);
            background: rgba(4, 7, 11, 0.72);
            -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
            opacity: 0;
            transition: opacity var(--dur-panel) var(--ease-out);
        }
        .cc-modal-backdrop[hidden] { display: none; }
        .cc-modal-backdrop.cc-modal-open { opacity: 1; }

        .cc-modal {
            position: relative;
            overflow: hidden;
            width: 100%;
            max-width: 420px;
            padding: var(--space-lg);
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-lg);
            transform: translateY(10px) scale(0.98);
            transition: transform var(--dur-panel) var(--ease-out);
        }
        .cc-modal-open .cc-modal { transform: none; }

        /* Command-rail accent across the card top (cyan; error when danger). */
        .cc-modal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--accent-cyan), transparent 70%);
        }
        .cc-modal.cc-modal-danger::before {
            background: linear-gradient(90deg, var(--accent-error), transparent 70%);
        }

        .cc-modal-title {
            margin: 0 0 var(--space-sm);
            font-family: var(--font-mono);
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--text-primary);
        }

        .cc-modal-message {
            margin: 0 0 var(--space-lg);
            font-size: 13.5px;
            line-height: 1.6;
            color: var(--text-secondary);
            text-wrap: pretty;
        }

        .cc-modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: var(--space-sm);
        }

        /* Slightly tighter buttons in the modal context than the page-level
           .btn-primary-action / .btn-secondary they inherit from. */
        .cc-modal-actions .btn-primary-action,
        .cc-modal-actions .btn-secondary {
            padding: 10px 18px;
            font-size: 12px;
        }

        /* Danger confirm: error accent instead of cyan. */
        .cc-modal-danger .cc-modal-confirm {
            background: var(--accent-error);
            color: #1a0808;
        }
        .cc-modal-danger .cc-modal-confirm:hover {
            box-shadow: var(--shadow-glow-error);
        }

        /* No page scroll while a modal is up (class set by app.js). */
        body.cc-modal-scroll-lock { overflow: hidden; }

        @media (prefers-reduced-motion: reduce) {
            .cc-modal-backdrop,
            .cc-modal { transition: none; }
        }

        .container {
            position: relative;
        }

        /* ========================================
           DROPDOWN MENU
           ======================================== */

        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1000;
            display: none;
            float: left;
            min-width: 10rem;
            padding: var(--space-sm) 0;
            margin: 2px 0 0;
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            box-shadow: var(--shadow-md);
        }

        .dropdown-item {
            display: block;
            width: 100%;
            padding: var(--space-xs) var(--space-md);
            color: var(--text-primary);
            font-family: var(--font-mono);
            font-size: 13px;
            transition: background-color 0.15s ease, color 0.15s ease;
        }

        .dropdown-item:hover {
            background: var(--accent-cyan-dim);
            color: var(--accent-cyan);
        }

        /* ========================================
           CROSSWALK DRAWER (Panel A, under the CPT search)
           A cyan-railed drawer that slides open when hank.js clears the inline
           `display:none` on #crosswalks-row (so the reveal animation fires on the
           row going from none to rendered).
           ======================================== */

        #crosswalks-row {
            margin-top: var(--space-md);
            animation: cw-open 220ms var(--ease-out);
        }
        @keyframes cw-open {
            from { opacity: 0; transform: translateY(-3px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .crosswalks-box {
            background: var(--bg-elevated);
            border: 1px solid var(--border-subtle);
            border-left: 2px solid var(--accent-cyan);
            border-radius: var(--radius-card);
            padding: var(--space-md);
        }

        .crosswalks-header {
            font-family: var(--font-mono);
            font-weight: 600;
            font-size: 10.5px;
            color: var(--accent-cyan);
            margin-bottom: var(--space-sm);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .crosswalks-list {
            font-family: var(--font-mono);
            font-size: 12px;
            line-height: 1.6;
            color: var(--text-secondary);
        }

        .crosswalks-list .crosswalk-item {
            padding: 6px 8px;
            border-bottom: 1px solid var(--border-subtle);
            transition: background-color var(--dur-fast) var(--ease-out);
        }

        .crosswalks-list .crosswalk-item:hover {
            background: var(--accent-cyan-soft);
        }

        .crosswalks-list .crosswalk-item:last-child {
            border-bottom: none;
        }

        /* ========================================
           FORM CONTROLS (selects, inputs)
           ======================================== */

        select, input[type="text"], input[type="date"] {
            padding: var(--space-sm) var(--space-md);
            border: 1px solid var(--border-default);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-family: var(--font-mono);
            font-size: 13px;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        select:focus, input[type="text"]:focus, input[type="date"]:focus {
            outline: none;
            border-color: var(--accent-cyan);
            box-shadow: 0 0 0 2px var(--accent-cyan-dim);
        }

        select option {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        /* ========================================
           GENERIC TABLE STYLING
           ======================================== */

        table {
            border-collapse: collapse;
        }

        table td {
            padding: var(--space-xs) var(--space-sm);
            vertical-align: middle;
        }

        table b {
            font-family: var(--font-mono);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-secondary);
        }

        /* ========================================
           MULTISELECT STYLING
           ======================================== */

        #cleaners {
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-input);
            color: var(--text-primary);
            font-family: var(--font-mono);
            font-size: 12px;
        }

        #cleaners option {
            padding: var(--space-xs) var(--space-sm);
        }

        #cleaners option:checked {
            background: var(--accent-cyan-dim);
            color: var(--accent-cyan);
        }

        /* ========================================
           RESULTS PLACEHOLDER
           ======================================== */

        #results-placeholder {
            margin-top: var(--space-lg);
            padding: 40px;
            text-align: center;
            background: var(--bg-secondary);
            border: 1px dashed var(--border-default);
            border-radius: var(--radius-card);
        }

        .results-placeholder-lead {
            margin: 0;
            font-family: var(--font-sans);
            font-size: 14px;
            color: var(--text-secondary);
        }

        .results-placeholder-sub {
            margin-top: 8px;
            font-size: 12px;
            color: var(--text-muted);
        }

        #results-placeholder strong {
            color: var(--accent-cyan);
        }

        /* Results-section spacing (was an inline margin on the wrapper). */
        #results-section {
            display: none;
            margin-top: var(--space-lg);
        }

        /* ========================================
           DETAILS/SUMMARY (app accordions: .op-details + .raw-io)
           Scoped to the app's OWN classed accordions: bare element selectors
           here leaked into the console-served chrome's account dropdown (a
           <details> too) and inflated the header pill (2026-07-05). Any new
           app accordion opts in via one of these classes.
           ======================================== */

        details.op-details,
        details.raw-io {
            background: var(--bg-card);
            border: 1px solid var(--border-default);
            margin-bottom: var(--space-md);
        }

        details.op-details > summary,
        details.raw-io > summary {
            padding: var(--space-md);
            cursor: pointer;
            font-family: var(--font-mono);
            font-weight: 600;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-secondary) !important;
            border-bottom: 1px solid var(--border-subtle) !important;
            transition: color 0.2s ease, background-color 0.2s ease;
        }

        details.op-details > summary:hover,
        details.raw-io > summary:hover {
            color: var(--accent-cyan) !important;
            background: var(--bg-secondary);
        }

        details.op-details[open] > summary,
        details.raw-io[open] > summary {
            border-bottom-color: var(--accent-cyan) !important;
        }

        /* Results collapsibles: a rotating cyan caret + the Copy button pinned
           right. All three results details carry class raw-io. */
        details.raw-io > summary {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            list-style: none;
        }
        details.raw-io > summary::-webkit-details-marker { display: none; }
        details.raw-io > summary::before {
            content: '\25B8';
            color: var(--accent-cyan);
            font-size: 11px;
            line-height: 1;
            transition: transform 0.18s var(--ease-out);
        }
        details.raw-io[open] > summary::before { transform: rotate(90deg); }
        details.raw-io > summary .claim-copy-btn { margin-left: auto; }

        #clean_claim_response {
            background: var(--bg-secondary);
            border: 1px solid var(--border-default);
            color: var(--text-primary);
            font-family: var(--font-mono);
            font-size: 12px;
            padding: var(--space-md);
            resize: both;
            width: 100%;
            height: 500px;
            margin-top: var(--space-md);
        }

        /* ========================================
           CLAIM RESULTS CONTAINER
           ======================================== */

        /* Hidden until app.js populates + shows it (direct style.display). */
        #claim-results-container { display: none; }

        /* Each claim block adopts the panel surface. */
        #claim-results-container > div {
            background: var(--bg-secondary);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-card);
            box-shadow: inset 0 1px 0 var(--panel-topline);
            padding: var(--space-lg);
            margin-bottom: var(--space-lg);
        }

        #claim-results-container h2 {
            color: var(--text-primary) !important;
            border-bottom: 2px solid var(--accent-cyan) !important;
            font-family: var(--font-mono);
        }

        /* ========================================
           HEADER/LOGO AREA
           ======================================== */

        .page-header {
            margin-bottom: var(--space-xl);
            padding-bottom: var(--space-lg);
            border-bottom: 1px solid var(--border-subtle);
        }

        .page-title {
            font-family: var(--font-mono);
            font-size: 24px;
            font-weight: 700;
            color: var(--text-primary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin: var(--space-md) 0;
        }
        /* Two-tone wordmark, mirrors the codesets/HANK_* convention */
        .page-title .logo-1,
        .page-title .logo-2 { color: var(--text-primary); }
        .page-title .logo-mark {
            color: var(--accent-cyan);
            text-shadow: 0 0 30px var(--accent-cyan-glow);
        }
        .page-title .brand-sub {
            margin-left: 12px;
            padding: 2px 8px;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            vertical-align: middle;
            background: var(--accent-cyan-dim);
            color: var(--accent-cyan);
            border: 1px solid var(--accent-cyan);
            border-radius: 2px;
        }

        /* .page-subtitle is now the endpoint chip -- styled in PANEL PRIMITIVES. */

        /* ========================================
           FOOTER
           ======================================== */

        .page-footer {
            margin-top: var(--space-xl);
            padding-top: var(--space-lg);
            border-top: 1px solid var(--border-subtle);
            font-size: 12px;
            color: var(--text-muted);
        }

        .page-footer a {
            color: var(--accent-cyan);
        }

        /* ========================================
           SCROLLBAR STYLING
           ======================================== */

        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-secondary);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--border-emphasis);
            border-radius: 0;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent-cyan);
        }

        /* ========================================
           SELECTION STYLING
           ======================================== */

        ::selection {
            background: var(--accent-cyan);
            color: var(--bg-primary);
        }

        /* ========================================
           LOGO STYLING
           ======================================== */

        img[alt="Hank AI"] {
            filter: drop-shadow(0 0 8px var(--accent-cyan)) drop-shadow(0 0 20px var(--accent-cyan-glow));
            transition: filter 0.3s ease;
        }

        img[alt="Hank AI"]:hover {
            filter: drop-shadow(0 0 12px var(--accent-cyan)) drop-shadow(0 0 30px var(--accent-cyan));
        }

        /* ===================================================================
           Dark-mode overrides for the raw I/O panels + the jsonview library.
           The site palette is all-dark via :root vars at the top of this file;
           our new <pre> blocks were hardcoded to #f4f4f4 (light gray) which
           looked like a white blob. Same story for the jsonview library --
           it ships with .json-container { background:#fff; color:gray }
           injected at runtime, which we override here with higher specificity.
           =================================================================== */
        .raw-io-pre {
            margin: var(--space-md) 0 0;
            padding: 12px;
            background: #0a0f16 !important;
            color: var(--text-primary) !important;
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            font-family: var(--font-mono);
            font-size: 12px;
            max-height: 360px;
            overflow: auto;
            white-space: pre-wrap;
            word-break: break-word;
        }
        /* Response tree view container (was inline margin + padding). */
        #results-tree-container {
            margin-top: var(--space-md);
            padding: 12px;
            background: #0a0f16;
            border-radius: 6px;
        }
        /* jsonview overrides. The library's CSS is injected by the bundle at
           page load, but our <style> block here loads first in the document
           order, so we use !important to win specificity. */
        .json-container {
            background-color: #0a0f16 !important;
            color: var(--text-primary) !important;
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            padding: 12px;
        }
        .json-container .json-key {
            color: var(--accent-cyan) !important;
        }
        .json-container .json-size {
            color: var(--text-muted) !important;
        }
        .json-container .json-number {
            color: var(--accent-warning) !important;
        }
        .json-container .json-boolean {
            color: var(--accent-error) !important;
        }
        .json-container .json-string {
            color: var(--accent-success) !important;
        }
        .json-container .json-null {
            color: var(--text-muted) !important;
        }
        .json-container .fa-caret-down,
        .json-container .fa-caret-right {
            border-color: var(--text-secondary) transparent !important;
        }
        .json-container .fa-caret-right {
            border-color: transparent transparent transparent var(--text-secondary) !important;
        }

        /* ========================================
           APP HEADER / FOOTER CHROME
           The header/footer chrome (.app-header/.brand/.hank-home/.release-badge/
           .meta and the .pill family, .app-footer/.footer-*) is the CONSOLE-SERVED
           shared chrome now — styled by {console}/embed/chrome.css, the ONE source
           of truth for every *.hank.ai service (see api/chrome_embed.py). Only the
           app-owned surfaces stay below: the anonymous sign-in landing (.anon-*,
           still rendered by this service's template) and the live web-metering
           "slow down" affordance (.rate-banner, driven by app.js on a 429 — NOT a
           console header slot).
           ======================================== */

        /* Anonymous (not signed in): hide the app, show only the sign-in landing.
           The `anon` class is server-rendered onto <body> (api/app.py _index) so
           the app is hidden on the FIRST paint -- no flash, no client gate. */
        body.anon #cc-app { display: none !important; }
        /* Anon is a short page too: the app column (#cc-app) is hidden, so let the
           sign-in landing grow to fill the flex shell and keep the footer pinned to
           the viewport bottom (the live console footer has no margin-top:auto of its
           own; it relies on a growing sibling). */
        body.anon .anon-landing { flex: 1 0 auto; }
        .anon-landing {
            max-width: 640px;
            margin: 9vh auto 0;
            padding: 0 1.5rem;
            text-align: center;
        }
        .anon-title { font-size: 1.9rem; color: var(--text-primary); margin: 0 0 14px; }
        .anon-sub { color: var(--text-secondary); font-size: 15px; line-height: 1.65; margin: 0 0 26px; text-wrap: pretty; }
        .anon-actions { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
        .anon-actions .btn-primary {
            padding: 12px 24px;
            font-family: var(--font-sans);
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            cursor: pointer;
            color: #04121a;
            background: var(--accent-cyan);
            border: 1px solid var(--accent-cyan);
            border-radius: 6px;
            transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
        }
        .anon-actions .btn-primary:hover { box-shadow: 0 0 14px var(--accent-cyan-glow); }
        .anon-actions .btn-primary:active { transform: scale(0.96); }
        .anon-actions .btn-link { color: var(--accent-cyan); font-size: 13px; text-decoration: none; }
        .anon-actions .btn-link:hover { text-decoration: underline; }
        .anon-note { margin-top: 30px; color: var(--text-secondary); font-size: 12.5px; line-height: 1.7; text-wrap: pretty; }
        .anon-note code { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent-cyan); }

        /* ===== Rate-limit "slow down" affordance (dimension H) =====
           App-owned, NOT console chrome: app.js shows this banner on a live 429
           from the web-metering gate (and as the out-of-credits upgrade nudge).
           The usage% CHIP itself is now a console header slot (chrome.css owns
           .pill.credits / .credit-bar); only this page-level banner stays here. */
        .rate-banner {
            font-family: var(--font-mono);
            font-size: 12px;
            letter-spacing: 0.04em;
            color: var(--accent-warning);
            background: var(--accent-warning-dim);
            border-bottom: 1px solid var(--accent-warning);
            padding: 8px 16px;
            text-align: center;
        }
        .rate-banner.over-credits {
            color: var(--accent-error);
            background: var(--accent-error-dim);
            border-bottom-color: var(--accent-error);
        }

        /* ===== Operator panel (server-rendered for is_admin sessions only) =====
           Status-board console: a bordered card with a cyan command-rail down the
           left edge; a summary that doubles as a LIVE health header (pulsing
           "serving" chip + collapsed-only backend/uptime telemetry); a stat-tile
           grid for service health; and a recency-railed card list for data
           freshness. Collapsed by default (<details> = CSP-safe, no inline JS).
           Lives inside #cc-app; only a validated operator session renders it.
           The <table>/<tr>/<td> + tbody#op-data-versions-body contract is
           PRESERVED -- app.js builds the rows (and stamps an op-fresh-* recency
           class from updated_at); CSS reshapes the table into the card list. */
        .op-panel {
            margin: var(--space-md) var(--space-lg) 0;
        }
        .op-details {
            background: var(--bg-card);
            border: 1px solid var(--border-default);
            border-left: 3px solid var(--accent-cyan);
        }
        .op-details[open] { box-shadow: var(--shadow-md); }

        /* ---- Summary = live health header ---- */
        .op-summary {
            cursor: pointer;
            list-style: none;
            user-select: none;
            display: flex;
            align-items: center;
            flex-wrap: wrap;  /* narrow: the live chip + telemetry wrap below the title, never overflow */
            gap: var(--space-sm);
            padding: var(--space-sm) var(--space-md);
            border-bottom: 1px solid transparent;
            transition: background-color 0.15s ease, border-color 0.15s ease;
        }
        .op-details[open] .op-summary { border-bottom-color: var(--border-subtle); }
        .op-summary:hover { background: rgba(0, 217, 255, 0.04); }
        .op-summary:active { transform: scale(0.996); }
        .op-summary::-webkit-details-marker { display: none; }
        .op-summary::before {
            content: '\25B8';  /* ▸ */
            color: var(--accent-cyan);
            font-size: 11px;
            line-height: 1;
            flex: 0 0 auto;
            transition: transform 0.18s ease;
        }
        .op-details[open] .op-summary::before { content: '\25BE';  /* ▾ */ }
        .op-title {
            font-family: var(--font-mono);
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--accent-cyan);
            flex: 0 0 auto;
        }
        .op-summary-spacer { flex: 1 1 auto; }
        /* Live "serving" chip -- green pulse signals the worker is up. */
        .op-livechip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: var(--font-mono);
            font-size: 10.5px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--accent-success);
            padding: 3px 9px 3px 7px;
            border: 1px solid var(--accent-success);
            background: var(--accent-success-dim);
            flex: 0 0 auto;
        }
        .op-livedot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--accent-success);
            box-shadow: 0 0 6px var(--accent-success);
            animation: op-pulse 2.4s ease-in-out infinite;
        }
        @keyframes op-pulse {
            0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--accent-success); }
            50% { opacity: 0.45; box-shadow: 0 0 2px var(--accent-success); }
        }
        /* Collapsed-only telemetry: backend + uptime stay legible while closed.
           Mirrors op-backend / op-uptime (app.js sets the *-sum twins). */
        .op-sum-telemetry {
            display: inline-flex;
            gap: var(--space-md);
            font-family: var(--font-mono);
            font-size: 10.5px;
            letter-spacing: 0.06em;
            color: var(--text-muted);
            flex: 0 0 auto;
        }
        .op-sum-telemetry i {
            font-style: normal;
            color: var(--text-secondary);
            font-variant-numeric: tabular-nums;
        }
        .op-collapsed-hint {
            font-family: var(--font-mono);
            font-size: 10.5px;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            flex: 0 0 auto;
        }
        .op-details[open] .op-sum-telemetry,
        .op-details[open] .op-collapsed-hint { display: none; }

        /* ---- Body ---- */
        .op-body { padding: var(--space-md); }
        .op-block + .op-block { margin-top: var(--space-lg); }
        .op-block-head {
            display: flex;
            align-items: baseline;
            gap: var(--space-sm);
            margin: 0 0 var(--space-sm);
        }
        .op-block-title {
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--text-secondary);
            margin: 0;
        }
        .op-block-rule {
            flex: 1 1 auto;
            height: 1px;
            background: var(--border-subtle);
            align-self: center;
        }
        .op-block-count {
            font-family: var(--font-mono);
            font-size: 10.5px;
            letter-spacing: 0.06em;
            color: var(--text-muted);
        }

        /* ---- Service health: stat-tile grid ---- */
        .op-health-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: var(--space-sm);
        }
        .op-tile {
            position: relative;
            background: var(--bg-secondary);
            border: 1px solid var(--border-subtle);
            border-left: 2px solid var(--border-emphasis);
            padding: var(--space-sm) var(--space-md);
            min-width: 0;
            transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
        }
        .op-tile:hover {
            border-color: var(--border-default);
            border-left-color: var(--accent-cyan);
            background: var(--bg-elevated);
        }
        .op-tile--wide { grid-column: span 2; }
        .op-tile-label {
            display: block;
            font-family: var(--font-mono);
            font-size: 9.5px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--text-muted);
            margin-bottom: 5px;
        }
        .op-tile-value {
            display: block;
            font-family: var(--font-mono);
            font-size: 17px;
            font-weight: 600;
            line-height: 1.15;
            color: var(--text-primary);
            font-style: normal;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .op-tile-value.is-meta { font-size: 13px; color: var(--text-secondary); }
        /* The deployed timestamp is long -- its wide tile wraps instead of clipping. */
        .op-tile--wide .op-tile-value {
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
        }
        /* status-accented tiles: backend (live), boot + uptime (healthy metrics) */
        .op-tile.is-live { border-left-color: var(--accent-success); }
        .op-tile.is-live .op-tile-value { color: var(--accent-success); }
        .op-tile.is-live:hover { border-left-color: var(--accent-success); box-shadow: 0 0 14px rgba(0, 245, 160, 0.16); }
        .op-tile.is-metric { border-left-color: var(--accent-cyan); }
        .op-tile.is-metric:hover { box-shadow: 0 0 14px rgba(0, 217, 255, 0.16); }
        /* em-dash unknown reads muted, never false-green (app.js toggles is-unknown) */
        .op-tile-value.is-unknown { color: var(--text-muted); }

        /* ---- Data freshness: recency-railed card list ----
           app.js builds <tr><td>schema</td><td class=op-mono>ver</td>
           <td class=op-mono>updated</td></tr> and stamps op-fresh-* on the row
           from updated_at age; CSS reshapes the table into cards + a recency dot. */
        .op-table {
            width: 100%;
            border-collapse: collapse;
            display: block;
            font-family: var(--font-mono);
        }
        .op-table thead { display: none; }
        .op-table tbody { display: block; }
        .op-table tr {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            align-items: center;
            gap: var(--space-md);
            padding: 9px var(--space-md) 9px 12px;
            border: 1px solid var(--border-subtle);
            border-left: 2px solid var(--accent-cyan);
            background: var(--bg-secondary);
            transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .op-table tr + tr { margin-top: 5px; }
        .op-table tr:hover {
            background: var(--bg-elevated);
            box-shadow: 0 0 12px rgba(0, 217, 255, 0.12);
        }
        .op-table td {
            padding: 0;
            border: 0;
            font-size: 12px;
            color: var(--text-secondary);
        }
        /* col 1 = schema name, led by a recency dot (color set by the row class) */
        .op-table td:first-child {
            color: var(--text-primary);
            font-weight: 500;
            letter-spacing: 0.02em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .op-table tbody tr td:first-child::before {
            content: '';
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            margin-right: var(--space-sm);
            vertical-align: middle;
            background: var(--accent-cyan);
            box-shadow: 0 0 5px var(--accent-cyan);
        }
        /* recency semantics, stamped by app.js from updated_at age */
        .op-table tr.op-fresh-recent td:first-child::before { background: var(--accent-success); box-shadow: 0 0 5px var(--accent-success); }
        .op-table tr.op-fresh-aging td:first-child::before { background: var(--accent-warning); box-shadow: 0 0 5px var(--accent-warning); }
        .op-table tr.op-fresh-stale td:first-child::before { background: var(--accent-error); box-shadow: 0 0 5px var(--accent-error); }
        /* col 2 = version tag, framed like a token */
        .op-table td.op-mono:nth-child(2) {
            justify-self: end;
            color: var(--accent-cyan);
            font-size: 11px;
            font-weight: 500;
            font-variant-numeric: tabular-nums;
            padding: 2px 7px;
            border: 1px solid var(--border-default);
            background: var(--bg-card);
            white-space: nowrap;
        }
        /* col 3 = updated_at, right-aligned recency cue */
        .op-table td.op-mono:nth-child(3) {
            justify-self: end;
            color: var(--text-secondary);
            font-size: 11px;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .op-table td.op-mono:nth-child(3)::before {
            content: '\2191 ';  /* ↑ */
            color: var(--text-muted);
        }
        /* fail-soft empty state (app.js builds <td colspan=3 class=op-empty>) */
        .op-table tr:has(.op-empty) {
            display: block;
            border-left-color: var(--border-emphasis);
        }
        .op-table tr:has(.op-empty) td:first-child::before { content: none; }
        .op-table .op-empty {
            display: block;
            color: var(--text-muted);
            font-size: 11.5px;
            letter-spacing: 0.04em;
            text-align: center;
            white-space: normal;
            padding: 14px 8px;
        }

        /* ---- Staggered entrance (header -> tiles -> freshness rail) ---- */
        @keyframes op-enter {
            from { opacity: 0; transform: translateY(7px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .op-details[open] .op-block,
        .op-details[open] .op-tile,
        .op-details[open] .op-table tbody tr {
            animation: op-enter 0.34s cubic-bezier(0.2, 0, 0, 1) both;
        }
        .op-details[open] .op-health-grid .op-tile:nth-child(2) { animation-delay: 0.05s; }
        .op-details[open] .op-health-grid .op-tile:nth-child(3) { animation-delay: 0.09s; }
        .op-details[open] .op-health-grid .op-tile:nth-child(4) { animation-delay: 0.13s; }
        .op-details[open] .op-health-grid .op-tile:nth-child(5) { animation-delay: 0.17s; }
        .op-details[open] .op-health-grid .op-tile:nth-child(6) { animation-delay: 0.21s; }
        .op-details[open] .op-health-grid .op-tile:nth-child(7) { animation-delay: 0.25s; }
        .op-details[open] .op-block:nth-of-type(2) { animation-delay: 0.10s; }
        .op-details[open] .op-table tbody tr:nth-child(2) { animation-delay: 0.04s; }
        .op-details[open] .op-table tbody tr:nth-child(3) { animation-delay: 0.08s; }
        .op-details[open] .op-table tbody tr:nth-child(4) { animation-delay: 0.12s; }
        .op-details[open] .op-table tbody tr:nth-child(5) { animation-delay: 0.16s; }
        .op-details[open] .op-table tbody tr:nth-child(n+6) { animation-delay: 0.20s; }

        @media (prefers-reduced-motion: reduce) {
            .op-livedot { animation: none; }
            .op-details[open] .op-block,
            .op-details[open] .op-tile,
            .op-details[open] .op-table tbody tr { animation: none; }
            .op-summary:active { transform: none; }
        }

        @media (max-width: 600px) {
            /* Chrome stays full-bleed on mobile too (no body padding); the app
               content tightens its own horizontal inset to var(--space-md). */
            #cc-app > .page-subtitle,
            #cc-app > .panel {
                margin-left: var(--space-md);
                margin-right: var(--space-md);
            }
            .panel { padding: var(--space-md); }
            /* Panel head wraps so the action cluster drops to its own row. */
            .panel-head { flex-wrap: wrap; }
            .panel-head .action-buttons {
                width: 100%;
                margin-top: var(--space-sm);
                flex-wrap: wrap;
            }
            .page-subtitle { max-width: calc(100% - 2 * var(--space-md)); }
            .op-panel { margin: var(--space-md) var(--space-md) 0; }
            .op-health-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
            .op-tile--wide { grid-column: span 1; }
            .op-sum-telemetry { display: none; }
            /* Claim-header fields stack full-width on a phone: flex-wrap alone
               will not shrink a field below its content width, so a wide select
               (Category) or the date input would otherwise outrun the viewport. */
            .claim-header .field-group { flex: 1 1 100%; min-width: 0; }
            .claim-header input,
            .claim-header select { width: 100%; }
        }

        /* ========================================
           RESULTS ENTRANCE (staggered)
           displayClaimResults() injects each claim as a .claim-result-block whose
           direct children are the semantic chunks (title, summary card, before/
           after comparison, timeline). They're rebuilt on every clean, so this
           animation fires when results render -- never on initial page load (the
           results container is hidden until the first clean). Each chunk rises +
           fades in, staggered, so the eye lands on the summary first.
           ======================================== */
        @keyframes cc-result-enter {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .claim-result-block > * {
            animation: cc-result-enter 0.32s cubic-bezier(0.2, 0, 0, 1) both;
        }
        .claim-result-block > *:nth-child(2) { animation-delay: 0.07s; }
        .claim-result-block > *:nth-child(3) { animation-delay: 0.14s; }
        .claim-result-block > *:nth-child(4) { animation-delay: 0.21s; }
        .claim-result-block > *:nth-child(n+5) { animation-delay: 0.28s; }

        /* ========================================
           REDUCED MOTION
           Honour the OS "reduce motion" setting: drop the decorative entrance,
           the press-scale, the infinite ICD pulse, and the primary-button shimmer
           sweep + hover lift. The loader/search spinners are left intact -- they
           communicate in-progress state, not decoration.
           ======================================== */
        @media (prefers-reduced-motion: reduce) {
            .claim-result-block > * { animation: none; }
            .icd-suggestions-icon.has-suggestions { animation: none; }
            /* New facelift entrances collapse to nothing; the spinners (loader,
               search ring) stay -- they signal in-progress state, not decoration. */
            .reveal,
            .typeahead-dropdown,
            .autocomplete,
            #crosswalks-row,
            .tag { animation: none; }
            /* Disclosure caret: drop its open/close rotation transition too. */
            details.raw-io > summary::before { transition: none; }
            .btn-primary-action:hover { transform: none; }
            .btn-primary-action:active,
            .btn-secondary:active,
            .btn-add-line:active,
            .btn-delete-line:active,
            .btn-delete-claim:active,
            .claim-copy-btn:active,
            .icd-suggestions-icon:active,
            .anon-actions .btn-primary:active,
            .pill.login:active,
            .pill.logout:active,
            .pill.link:active { transform: none; }
        }

        /* ========================================
           A11Y + SEARCH-OFFLINE NOTICE
           ======================================== */

        /* Keyboard focus ring everywhere; text fields keep their own cyan ring
           (set on :focus) instead of the outline, so the outline is suppressed. */
        :focus-visible {
            outline: 2px solid var(--accent-cyan);
            outline-offset: 2px;
        }
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        .search-box-input:focus-visible {
            outline: none;
        }

        /* One-time "code search unavailable" bar (app.js inserts it inside the
           Code Search panel, right under the .search-dock that triggered it;
           falls back above the config .controls-grid). Slim warning strip with a
           ghost dismiss button. */
        .search-offline {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            margin: 0 0 var(--space-md);
            padding: 8px 12px;
            font-size: 12px;
            color: var(--text-primary);
            background: var(--accent-warning-dim);
            border-left: 2px solid var(--accent-warning);
            border-radius: var(--radius-chip);
        }
        .search-offline-close {
            margin-left: auto;
            padding: 0 6px;
            font-family: var(--font-mono);
            font-size: 12px;
            line-height: 1.6;
            color: var(--text-muted);
            background: transparent;
            border: 1px solid transparent;
            border-radius: var(--radius-chip);
            cursor: pointer;
            transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
        }
        .search-offline-close:hover {
            color: var(--accent-warning);
            border-color: var(--accent-warning);
        }

        /* Empty-cell placeholder for the JS-rendered result diff table (app.js
           stamps this in place of a former inline color:#999, which failed AA on
           the light card). Themes through the token in both modes. */
        .cell-empty { color: var(--text-secondary); }

        /* ============================================================================
           FORM CONTROLS -- type-guard safety net (fleet light/dark standard)

           CC's fields are already explicitly token-styled per class/type above (the
           .search-box-input / .line-items-table input / .claim-header input / generic
           select+input[type=...] rules), and those higher-specificity rules WIN. This
           whole selector list is wrapped in :where() so it carries ZERO specificity: it
           is purely a fallback net for any TYPE-LESS or unclassed <input> / <select> /
           <textarea> (dynamic or future) so it can never fall back to a UA-drawn box that
           betrays the theme -- the M4 lesson (never enumerate [type=...] only; an
           attribute selector misses a bare <input>). --hank-bg-input + --hank-border-strong
           are the fleet field tokens (>= 3:1 boundary, WCAG 1.4.11) and flip on their own.
           Text-like controls only: checkbox / radio / file / range / color keep their UA
           rendering (color-scheme, shipped in chrome.css, themes those). */
        :where(
            input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
            select,
            textarea
        ) {
            background: var(--hank-bg-input);
            color: var(--text-primary);
            border: 1px solid var(--hank-border-strong);
            border-radius: var(--radius-input);
            font-family: var(--font-mono);
        }
        :where(input, textarea)::placeholder { color: var(--text-muted); opacity: 1; }

        /* ============================================================================
           LIGHT THEME -- service-local overrides (fleet light/dark standard,
           admin-webui docs/plans/2026-07-05-fleet-theme-standard.html)

           The ALIASED tokens in :root (text primary/secondary, the base accents, the cyan
           -dim/-glow) flip automatically via chrome.css's [data-theme="light"] block -- do NOT
           re-declare them here. This section owns ONLY what CC keeps LOCAL: the deepened
           backgrounds + borders, the muted text tier, the -dim/-soft accent washes, the panel
           topline, the shadow set, and the raw literals that bypass the tokens (glows, scrims,
           the bespoke dark dropdown + code surfaces). Dark stays byte-identical. Every light
           value follows the design law: neon glows become soft real shadows, translucent-white
           scrims/toplines become dark hairlines, dark surfaces become light surfaces, saturated
           cyan fills keep dark text. Light values verified against the deployed chrome.css.

           COMMENT LANDMINE (bit M3): never let an asterisk touch a following slash inside a CSS
           comment -- it closes the comment early and the parser silently eats the next rule whole.
           ============================================================================ */
        [data-theme="light"] {
            /* Backgrounds: CC's 4-tier deepened dark hierarchy maps onto the fleet's vetted light
               surfaces -- page tint, white cards/fields, light-gray elevated. */
            --bg-primary: var(--hank-bg-page);      /* #f6f8fa page */
            --bg-secondary: var(--hank-bg-header);  /* #ffffff -- selects, generic inputs, op rows */
            --bg-elevated: var(--hank-bg-elevated); /* #eef1f4 -- line-item + search fields, hover */
            --bg-card: var(--hank-bg-card);         /* #ffffff panels + dropdown */

            /* muted carries real informational text (JSON metadata, input placeholders, unknown
               metric values); the fleet's decorative light muted (#818b95, ~2.9:1 on white) fails
               AA, so light merges muted into the secondary readability floor (dark keeps the
               deeper 3rd tier). */
            --text-muted: #59636e;

            /* -dim/-soft washes: light values keyed to each accent's LIGHT hue at low alpha
               (mirrors how chrome.css derives --hank-accent-cyan-dim in light). */
            --accent-cyan-soft: rgba(0, 110, 138, 0.06);
            --accent-success-dim: rgba(10, 125, 79, 0.10);
            --accent-error-dim: rgba(199, 58, 58, 0.10);
            --accent-warning-dim: rgba(154, 103, 0, 0.10);

            /* Error/success carry text ON their own -dim tints (the .ti-type chips, exception
               rows, cured/removed diffs), where the fleet light starters measure ~4.2-4.4:1 --
               just under AA. Step them a shade darker so they clear 5:1 on the tints AND on white
               (the arse M4 milestone validated these exact values). This re-overrides the aliased
               base in light only; dark is untouched. */
            --accent-error: #b93030;
            --accent-success: #096b44;

            /* Borders: the fleet's vetted light boundaries; emphasis to the strong-UI value. */
            --border-subtle: var(--hank-border-subtle);   /* #e7ebef */
            --border-default: var(--hank-border);         /* #d1d9e0 */
            --border-emphasis: var(--hank-border-strong); /* #7d8790 */

            /* Panel topline: translucent-white highlight becomes a faint dark hairline. */
            --panel-topline: rgba(31, 35, 40, 0.05);

            /* Shadows: heavy black drops become soft neutral shadows; neon glows become soft real
               shadows with a faint accent tint (design law). */
            --shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.10);
            --shadow-md: 0 4px 12px rgba(31, 35, 40, 0.12);
            --shadow-lg: 0 8px 24px rgba(31, 35, 40, 0.14);
            --shadow-glow-cyan: 0 2px 12px rgba(0, 110, 138, 0.20);
            --shadow-glow-success: 0 2px 12px rgba(10, 125, 79, 0.20);
            --shadow-glow-error: 0 2px 12px rgba(199, 58, 58, 0.20);
        }

        /* Atmosphere glow: a top-center neon-cyan radial has no light-mode equivalent (a white
           page reads as already "lit") -- drop it so light does not wear a cyan smudge. */
        [data-theme="light"] body::after { background: none; }
        /* Fractal-noise grain reads heavier on white -- dial it back. */
        [data-theme="light"] body::before { opacity: 0.02; }

        /* Row-hover scrim: translucent-white vanishes on white -> low-alpha dark tint. */
        [data-theme="light"] .line-items-table tbody tr:hover { background: rgba(0, 0, 0, 0.03); }

        /* Typeahead / autocomplete dropdown: bespoke near-black surface -> white card; its cyan
           hairline ring softens to the light cyan. */
        [data-theme="light"] .typeahead-dropdown,
        [data-theme="light"] .autocomplete {
            background: var(--bg-card);
            box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 110, 138, 0.12);
        }

        /* Search-match highlight: raw brand-cyan tint -> light-cyan tint (its dark text flips). */
        [data-theme="light"] .ti-desc mark { background: rgba(0, 110, 138, 0.16); }

        /* RVU badge rides a non-brand azure (#00a8ff) that fails on white -> step to a darker blue
           for text + border on a pale blue tint. */
        [data-theme="light"] .units-badge.rvu {
            background: rgba(0, 105, 180, 0.12);
            color: #0060a8;
            border-color: #0060a8;
        }

        /* Solid cyan CTAs keep the dark-mode identity (bright cyan fill + dark label): the aliased
           --accent-cyan dims to #006e8a in light, too dark under the near-black label, so paint the
           fill with the bright decorative cyan (dark text clears ~8:1). */
        [data-theme="light"] .btn-primary-action,
        [data-theme="light"] .claim-copy-btn {
            background: var(--hank-accent-cyan-bright);
        }
        [data-theme="light"] .claim-copy-btn { border-color: var(--hank-accent-cyan-bright); }
        /* Same bright-fill treatment for the anon landing CTA: the aliased
           accent dims to #006e8a in light, only 3.25:1 under the near-black
           label; the decorative bright cyan keeps the identity at ~8:1. */
        [data-theme="light"] .anon-actions .btn-primary {
            background: var(--hank-accent-cyan-bright);
            border-color: var(--hank-accent-cyan-bright);
        }

        /* Raw-I/O panels + JSON tree: dark code surfaces -> light code surface. Dark text and the
           tuned accent syntax colors (key/string/number/boolean) all clear AA on it. !important
           beats the jsonview library's injected style + our own dark !important above. */
        [data-theme="light"] .raw-io-pre,
        [data-theme="light"] #results-tree-container,
        [data-theme="light"] .json-container {
            background: #f3f5f8 !important;
        }

        /* Operator-panel hover glows -> soft neutral / status shadows in light (design law). */
        [data-theme="light"] .op-tile.is-metric:hover,
        [data-theme="light"] .op-table tr:hover { box-shadow: var(--shadow-md); }
        [data-theme="light"] .op-tile.is-live:hover { box-shadow: var(--shadow-glow-success); }

        /* Finding-envelope amber (Medium band + Issue kind label): the aliased
           --accent-warning flips to a bright fleet amber that is under AA as text
           on a light tint, so -- exactly like the error/success stepping above --
           pin the Medium chip and the Issue kind label to the darker amber the
           --accent-warning-dim wash is already derived from (#9a6700, ~5:1 on
           white and on the tint). The Issue row's border-left is decorative and
           keeps the token. Dark is untouched. */
        [data-theme="light"] .finding-chip.sev-medium,
        [data-theme="light"] .finding-issue .finding-kind { color: #9a6700; }
        [data-theme="light"] .finding-chip.sev-medium { border-color: #9a6700; }