/* ============================================================================
 * Asritas — Apple HIG Liquid Glass theme
 * Single-sheet stylesheet for the Leptos 0.8.20 SPA. The Rust view! macros in
 * pages/*.rs and components/*.rs are the source of truth for what class
 * shapes must exist; this file defines every one of them in a single, cohesive
 * pass and uses CSS custom properties (light-dark(...)) so the Glass palette
 * isn't duplicated 17 times.
 * ===========================================================================
 *
 *   1. Reset + theme tokens
 *   2. App shell (navbar + dropdown + scoped sub-nav)
 *   3. Page chrome (page / page-header / title / subtitle)
 *   4. Cards + grid system
 *   5. Lists & list-row patterns (evidence-ul, hypothesis card, proposal card,
 *      finding card, gap card, timeline, transitions, kv-list)
 *   6. Forms
 *   7. Buttons
 *   8. Messages
 *   9. Pills / chips / state chips
 *  10. Tables (legacy `.table` retained for existing sites)
 *  11. Action rows / engine row / override row / tabs
 *  12. Loading + Login
 *  13. Responsive
 * ============================================================================ */


/* ----------------------------------------------------------------------------
 * 1. Reset + theme tokens
 * -------------------------------------------------------------------------- */

:root {
    color-scheme: light dark;

    /* Hand-tuned palette surfaced as custom properties so the Glass recipe
       isn't restated 17 times across the file. */
    --ink-primary:        light-dark(#1a1a1e, #f0f0f5);
    --ink-secondary:      light-dark(#6e6e73, #98989d);
    --ink-faint:          light-dark(#a1a1a6, #6e6e72);
    --indigo:             #0066d9;
    --indigo-dark:        #0055b3;
    --indigo-glow-light:  rgba(0, 102, 217, 0.12);
    --indigo-glow-dark:   rgba(90, 159, 255, 0.16);
    --indigo-fill-hover:  light-dark(rgba(0, 102, 217, 0.08), rgba(90, 159, 255, 0.12));
    --danger-red-light:   rgba(255, 59, 48, 0.08);
    --danger-red-dark:    rgba(255, 59, 48, 0.15);
    --success-green:      #34c759;
    --warn-amber:         #ff9f0a;

    /* Glass surface: 3-stop linear gradient per scheme. Replaces 17 inline
       duplicates scattered across the previous file. */
    --glass-bg:           light-dark(
        linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7)),
        linear-gradient(135deg, rgba(44,44,46,0.85), rgba(44,44,46,0.7))
    );
    --glass-bg-quiet:     light-dark(
        linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.5)),
        linear-gradient(135deg, rgba(44,44,46,0.7), rgba(44,44,46,0.5))
    );
    --glass-bg-input:     light-dark(
        linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.75)),
        linear-gradient(135deg, rgba(58,58,60,0.9), rgba(58,58,60,0.75))
    );
    --glass-border:       light-dark(rgba(0,0,0,0.08), rgba(255,255,255,0.1));
    --glass-border-bold:  light-dark(rgba(255,255,255,0.5), rgba(255,255,255,0.06));
    --glass-shadow:       0 4px 24px light-dark(rgba(0,0,0,0.04), rgba(0,0,0,0.25));
    --glass-shadow-lg:    0 8px 40px light-dark(rgba(0,0,0,0.08), rgba(0,0,0,0.45));

    /* Spring motion — the Apple HIG tap-spring. */
    --spring-ease:        cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "SF Pro Text", "Helvetica Neue", sans-serif;
    background: light-dark(#f0f0f3, #0a0a0d);
    color: var(--ink-primary);
    font-size: 14px;
    line-height: 1.47059;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a       { color: light-dark(var(--indigo), #5a9fff); text-decoration: none; }
a:hover { text-decoration: underline; }
button  { cursor: pointer; font-family: inherit; }
input, textarea { font-family: inherit; }


/* ----------------------------------------------------------------------------
 * 2. App shell
 *   .app-container         full-height column (used by NavBar wrapper)
 *   .navbar                top toolbar (Liquid Glass)
 *   .navbar-right cluster  | .navbar-brand | .navbar-user | .navbar-dropdown-btn
 *   .dropdown-menu         Liquid Glass panel
 *   .dropdown-item         defaults | .dropdown-item-danger (modifier)
 *   .dropdown-divider
 *   .investigation-nav     per-case scoped sub-navigation row
 *   .investigation-nav-link (with .active modifier)
 *   .dot                   the bullet at the start of each sub-nav link
 * -------------------------------------------------------------------------- */

.app-container {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%,
            light-dark(rgba(0,102,217,0.06), rgba(90,159,255,0.08)) 0%, transparent 100%),
        radial-gradient(ellipse 60% 50% at 20% 90%,
            light-dark(rgba(255,45,85,0.04), rgba(255,45,85,0.06)) 0%, transparent 100%),
        light-dark(#f0f0f3, #0a0a0d);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    height: 48px;
    flex-shrink: 0;
    background: light-dark(
        linear-gradient(135deg, rgba(255,255,255,0.75), rgba(255,255,255,0.55)),
        linear-gradient(135deg, rgba(44,44,46,0.75), rgba(44,44,46,0.55))
    );
    backdrop-filter: saturate(160%) blur(30px);
    box-shadow: 0 1px 0 light-dark(rgba(0,0,0,0.03), rgba(255,255,255,0.04) inset);
    position: relative;
    z-index: 50;
}

.navbar-brand {
    color: var(--ink-primary);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.navbar-user {
    font-size: 12px;
    color: var(--ink-secondary);
}

.navbar-dropdown-btn {
    padding: 5px 14px;
    background: linear-gradient(135deg, var(--indigo), var(--indigo-dark));
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,102,217,0.25);
    transition: transform 0.18s var(--spring-ease), box-shadow 0.18s;
}
.navbar-dropdown-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 14px rgba(0,102,217,0.35);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    z-index: 200;
    min-width: 180px;
    background: light-dark(
        linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.85)),
        linear-gradient(135deg, rgba(44,44,46,0.92), rgba(44,44,46,0.85))
    );
    backdrop-filter: saturate(160%) blur(40px);
    border-radius: 14px;
    padding: 4px;
    box-shadow: var(--glass-shadow-lg);
}
.dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    border-radius: 8px;
    text-align: left;
    font-size: 13px;
    color: var(--ink-primary);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, transform 0.12s;
}
.dropdown-item:hover {
    background: var(--indigo-fill-hover);
    transform: translateX(2px);
}
.dropdown-item-danger { color: #ff3b30; }
.dropdown-item-danger:hover { background: light-dark(var(--danger-red-light), var(--danger-red-dark)); }
.dropdown-divider {
    border-top: 1px solid light-dark(rgba(0,0,0,0.06), rgba(255,255,255,0.08));
    margin: 4px 0;
}

/* Per-case sub-nav rendered above each investigation page. Glass toolbar,
   border-less, sits at the top of the page body, font slightly smaller. */
.investigation-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin: 0 0 24px;
    padding: 4px;
    border-radius: 10px;
    background: light-dark(
        rgba(255,255,255,0.5),
        rgba(255,255,255,0.04)
    );
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
}
.investigation-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-secondary);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.investigation-nav-link:hover {
    background: var(--indigo-fill-hover);
    color: var(--ink-primary);
    text-decoration: none;
}
.investigation-nav-link.active {
    color: light-dark(var(--indigo), #5a9fff);
    background: light-dark(rgba(0,102,217,0.10), rgba(90,159,255,0.14));
}
.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: light-dark(rgba(0,0,0,0.25), rgba(255,255,255,0.25));
    transition: background 0.15s;
}
.investigation-nav-link.active .dot {
    background: light-dark(var(--indigo), #5a9fff);
}

/* Per-investigation EntityReview queue badge attached to the nav link
   when one or more pending rows exist. "decisive" rows tint the badge
   red; non-decisive rows show a quieter neutral pill. */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}
.nav-badge-default {
    color: light-dark(var(--ink-secondary), #98989d);
    background: light-dark(rgba(0,0,0,0.06), rgba(255,255,255,0.10));
    border: 1px solid light-dark(rgba(0,0,0,0.08), rgba(255,255,255,0.12));
}
.nav-badge-decisive {
    color: #ff3b30;
    background: light-dark(var(--danger-red-light), var(--danger-red-dark));
    border: 1px solid light-dark(rgba(255,59,48,0.30), rgba(255,59,48,0.40));
}


/* ----------------------------------------------------------------------------
 * 3. Page chrome
 *   .page                  outer scroll region inside NavBar
 *   .page-header           flex row with title block + actions button
 *   .page-title            large heading
 *   .page-subtitle         quiet copy line under the title
 *   .section-header        smaller action row used in admin / lists
 * -------------------------------------------------------------------------- */

.page {
    flex: 1;
    padding: 32px 24px;
    overflow-y: auto;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.page-header > div { min-width: 0; }
.page-header > .btn,
.page-header > .btn-primary { flex-shrink: 0; }

.page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--ink-primary);
    letter-spacing: -0.022em;
    line-height: 1.14286;
    margin: 0 0 4px;
}

.page-subtitle {
    font-size: 14px;
    color: var(--ink-secondary);
    margin: 0;
    font-weight: 400;
    max-width: 760px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 20px 0 12px;
}


/* ----------------------------------------------------------------------------
 * 4. Cards + grid system
 *   .card                  Liquid Glass surface with padding
 *   .card-title            heading inside a card
 *   .grid                  auto-fit responsive list
 *   .grid-2 .grid-3        explicit 2 / 3 column grids
 *   .overview-grid         2-up layout for the Counts / Doctrine cards
 *   .investigation-grid    responsive grid of investigation cards
 *   .evidence-grid         3-up layout for List / Detail / Intelligence-T18
 *   .causal-grid           3-up layout for Causal/Barriers/Evidence Links
 *   .two-col               plain 2-up layout for Gaps/Contradictions
 * -------------------------------------------------------------------------- */

.card {
    background: var(--glass-bg);
    backdrop-filter: saturate(160%) blur(24px);
    border-radius: 14px;
    border: 1px solid var(--glass-border-bold);
    box-shadow: var(--glass-shadow);
    padding: 24px;
    margin-bottom: 20px;
    transition: box-shadow 0.25s, transform 0.25s;
}
.card:hover { box-shadow: var(--glass-shadow-lg); }

.card-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-primary);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

/* Compound card shapes baked once, so we don't need per-page duplicates. */
.card.evidence-list, .card.evidence-detail,
.card.causal-list,
.card.investigation-create,
.card.password-form {
    padding: 18px;
}
.card.investigation-create { padding: 24px; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.investigation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.evidence-grid { display: grid; grid-template-columns: minmax(240px, 280px) 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .evidence-grid { grid-template-columns: minmax(240px, 280px) 1fr; } }
@media (max-width: 720px)  { .evidence-grid { grid-template-columns: 1fr; } }
.causal-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; }

/* Investigation card per-card chrome */
.investigation-card {
    display: block;
    padding: 20px;
    color: var(--ink-primary);
    text-decoration: none;
}
.investigation-card:hover { text-decoration: none; }
.investigation-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.investigation-card-header .card-title { margin: 0; flex: 1; min-width: 0; }

/* Investigation overview page header */
.investigation-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

/* Count chips on the investigations grid card. Compact, light-weight, and
   separated just enough so they read as a distinct atom. */
.count-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.count-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-secondary);
    background: light-dark(rgba(0,0,0,0.045), rgba(255,255,255,0.06));
    border: 1px solid var(--glass-border);
}


/* ----------------------------------------------------------------------------
 * 5. Lists & list-row patterns
 *   .evidence-ul / .evidence-row[.active] / .evidence-chunk / .evidence-list /
 *   .evidence-detail — Evidence workspace left-list + right-detail layout
 *   .hypothesis-list / .hypothesis-card / .hypothesis-header /
 *     .hypothesis-body  — Hypothesis page accordion cards
 *   .proposal-list / .proposal-card / .proposal-payload
 *   .finding-list / .finding-card
 *   .gap-card
 *   .timeline / .timeline-row / .timeline-marker / .timeline-body
 *   .transitions / .transition-row
 *   .kv-list
 * -------------------------------------------------------------------------- */

.evidence-list { min-height: 200px; }
.evidence-ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.evidence-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink-primary);
    cursor: pointer;
    transition: background 0.12s;
    border: 1px solid transparent;
}
.evidence-row + .evidence-row { margin-top: 2px; }
.evidence-row:hover { background: var(--indigo-fill-hover); }
.evidence-row.active {
    background: light-dark(rgba(0,102,217,0.10), rgba(90,159,255,0.16));
    border-color: light-dark(rgba(0,102,217,0.25), rgba(90,159,255,0.30));
}
.evidence-chunk {
    padding: 12px 14px;
    border-radius: 10px;
    background: light-dark(rgba(0,0,0,0.035), rgba(255,255,255,0.05));
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-x: auto;
    border: 1px solid var(--glass-border);
    margin-top: 8px;
}
.evidence-detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
}

/* Hypothesis accordion card */
.hypothesis-list { display: flex; flex-direction: column; gap: 12px; }

.hypothesis-card { padding: 0; overflow: hidden; }
.hypothesis-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
}
.hypothesis-header .card-title { margin: 0; flex: 1; min-width: 0; }
.hypothesis-body {
    border-top: 1px solid light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.07));
    padding: 16px 20px;
}

/* Proposal card on the Runs / Proposals page */
.proposal-list { display: flex; flex-direction: column; gap: 12px; }

/* T28 — Cross-model disagreement panel on /runs. Sits above the
   proposal list so investigators see cross-argument signals
   before they triage individual proposals. */
.disagreement-panel {
    margin: 10px 0 24px;
    padding: 12px 14px;
    border: 1px solid light-dark(rgba(0,102,217,0.20), rgba(90,159,255,0.30));
    border-radius: 14px;
    background: light-dark(rgba(0,102,217,0.04), rgba(90,159,255,0.07));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.disagreement-panel-title {
    margin: 0 0 8px;
    font-size: 14px;
    color: light-dark(var(--indigo), #5a9fff);
    font-weight: 600;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.disagreement-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.disagreement-card {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid light-dark(rgba(0,0,0,0.08), rgba(255,255,255,0.10));
    background: light-dark(rgba(255,255,255,0.55), rgba(0,0,0,0.20));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.disagreement-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.disagreement-desc {
    font-size: 12px;
    color: var(--ink-secondary);
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.pill-open                  { color: #ff3b30; border-color: rgba(255,59,48,0.55); background: rgba(255,59,48,0.10); }
.pill-reconciled-by-investigator { color: var(--success-green); border-color: rgba(34,197,94,0.30); background: rgba(34,197,94,0.10); }
.pill-reconciled-by-evidence     { color: var(--success-green); border-color: rgba(34,197,94,0.30); background: rgba(34,197,94,0.10); }
.pill-deferred                     { color: var(--ink-secondary); opacity: 0.85; }
.pill-superseded                   { color: var(--ink-faint); opacity: 0.75; }
.proposal-payload {
    background: light-dark(rgba(0,0,0,0.04), rgba(255,255,255,0.04));
    padding: 10px 12px;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--glass-border);
}

/* Finding cards on the Findings page */
.finding-list { display: flex; flex-direction: column; gap: 12px; }

/* Gap / contradiction cards live inside .evidence-ul > .card.gap-card. The
   Glass card is kept; we just tighten spacing for the embedded list variant. */
.gap-card {
    padding: 14px 16px;
    margin: 0;
}
.gap-card + .gap-card { margin-top: 10px; }

/* Timeline list rendering on the Timeline page */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid light-dark(rgba(0,0,0,0.08), rgba(255,255,255,0.1));
    padding-left: 18px;
}
.timeline-row {
    display: flex;
    gap: 12px;
    padding: 6px 0 12px;
    position: relative;
}
.timeline-marker {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: light-dark(var(--indigo), #5a9fff);
    box-shadow: 0 0 0 4px light-dark(rgba(0,102,217,0.10), rgba(90,159,255,0.14));
    flex-shrink: 0;
    margin-top: 7px;
    position: absolute;
    left: -24px;
}
.timeline-body {
    flex: 1;
    padding: 12px 14px;
}

/* Per-hypothesis audit-trail list inside the override panel */
.transitions {
    margin-top: 10px;
    border-top: 1px solid light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.07));
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.transition-row {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: var(--ink-secondary);
}

/* Key-value list used on the Investigation Overview "Counts" card */
.kv-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}
.kv-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 1px solid light-dark(rgba(0,0,0,0.04), rgba(255,255,255,0.06));
}
.kv-list li:last-child { border-bottom: none; }
.kv-label { color: var(--ink-secondary); }
.kv-value { color: var(--ink-primary); font-weight: 600; font-variant-numeric: tabular-nums; }


/* ----------------------------------------------------------------------------
 * 6. Forms
 *   .form-group          field cluster
 *   .form-label          <label>
 *   .form-input          <input>, <textarea>, <select>
 *   .form-input-file
 *   .form-help
 * -------------------------------------------------------------------------- */

.form-group { margin-bottom: 18px; }

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-secondary);
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--ink-primary);
    background: var(--glass-bg-input);
    backdrop-filter: blur(8px);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus {
    border-color: light-dark(var(--indigo), #5a9fff);
    box-shadow:
        0 0 0 3px light-dark(var(--indigo-glow-light), var(--indigo-glow-dark)),
        0 0 20px light-dark(rgba(0,102,217,0.06), rgba(90,159,255,0.08));
}
.form-input::placeholder { color: var(--ink-faint); }

/* Native <select> themed by the same `.form-input` — see old file's
   `select.form-input` block for the chevron recipe; we keep the same. */
select.form-input,
.form-input[multiple] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 32px;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
select.form-input:focus,
.form-input[multiple]:focus {
    background-image:
        linear-gradient(45deg, transparent 50%, #5a9fff 50%),
        linear-gradient(135deg, #5a9fff 50%, transparent 50%);
}
.form-input option,
.form-input optgroup {
    background: light-dark(#ffffff, #2c2c2e);
    color: var(--ink-primary);
}
.form-input:disabled { color: var(--ink-faint); cursor: not-allowed; }

.form-input-file {
    width: 100%;
    padding: 8px 0;
    font-size: 13px;
    color: var(--ink-primary);
}

.form-help {
    font-size: 12px;
    color: var(--ink-secondary);
    margin-top: 4px;
}


/* ----------------------------------------------------------------------------
 * 7. Buttons (single, canonical definition each)
 *   .btn                  base shape; never alone, always with a modifier
 *   .btn-primary          indigo gradient — main CTA
 *   .btn-secondary        Glass card — secondary action
 *   .btn-danger           red gradient — destructive action
 *   .btn-sm               size modifier (-25%) for inline use
 * -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.33337;
    min-height: 32px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.18s var(--spring-ease), box-shadow 0.18s,
                background 0.18s, color 0.18s, border-color 0.18s;
}
.btn:disabled {
    opacity: 0.5;
    cursor: default;
    transform: none !important;
    box-shadow: none !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--indigo), var(--indigo-dark));
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,102,217,0.25);
}
.btn-primary:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0,102,217,0.35);
}

.btn-secondary {
    background: light-dark(
        linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65)),
        linear-gradient(135deg, rgba(58,58,60,0.85), rgba(58,58,60,0.65))
    );
    color: var(--ink-primary);
    border: 1px solid var(--glass-border);
    box-shadow: 0 1px 0 light-dark(rgba(0,0,0,0.02), rgba(255,255,255,0.04) inset);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--indigo-fill-hover);
    color: light-dark(var(--indigo), #5a9fff);
    border-color: light-dark(rgba(0,102,217,0.25), rgba(90,159,255,0.3));
    transform: scale(1.02);
}

.btn-danger {
    background: linear-gradient(135deg, #ff3b30, #d62d20);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.25);
}
.btn-danger:hover:not(:disabled) {
    transform: scale(1.03);
    box-shadow: 0 4px 14px rgba(255, 59, 48, 0.35);
}

.btn-sm {
    padding: 4px 12px;
    font-size: 12px;
    min-height: 26px;
}


/* ----------------------------------------------------------------------------
 * 8. Messages
 *   .msg-success / .msg-error / .msg-info / .msg-warn
 *   .muted               dim copy helper, paired with .small on a single class
 * -------------------------------------------------------------------------- */

.msg-success { font-size: 13px; color: var(--success-green); margin: 10px 0 0; }
.msg-error   { font-size: 13px; color: #ff3b30; margin: 10px 0 0; }
.msg-info    { font-size: 13px; color: var(--ink-secondary); margin: 10px 0 0; }
.msg-warn    { font-size: 13px; color: light-dark(#a85900, #ff9f0a); margin: 10px 0 0; }

.muted { color: var(--ink-secondary); }
.small { font-size: 12px; }


/* ----------------------------------------------------------------------------
 * 9. Pills / Chips / State chips
 *
 * Three variants on the same base shape — soft chip with theme-aware border
 * and dim text. The named variant colors are the canonical enum values that
 * AGENTS.md lists (`support_state`, `materiality`, `consequence_class`,
 * `link_kind`, `TemporalExpression.typed_form`, `severity`, status enums).
 * Any unknown variant falls through to the base appearance.
 * -------------------------------------------------------------------------- */

.pill,
.chip,
.state-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    color: var(--ink-secondary);
    background: light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.08));
    border: 1px solid var(--glass-border);
    white-space: nowrap;
    text-transform: uppercase;
}

/* Materiality / consequence-class colors per spec §17.8 */
.pill-material         { color: light-dark(#a85900, #ff9f0a); border-color: light-dark(rgba(168,89,0,0.25), rgba(255,159,10,0.30)); background: light-dark(rgba(255,159,10,0.10), rgba(255,159,10,0.14)); }
.pill-decisive         { color: #ff3b30; border-color: light-dark(rgba(255,59,48,0.25), rgba(255,59,48,0.30)); background: light-dark(var(--danger-red-light), var(--danger-red-dark)); }
.pill-background       { color: var(--ink-secondary); }
.pill-standard         { color: light-dark(var(--indigo), #5a9fff); border-color: light-dark(rgba(0,102,217,0.25), rgba(90,159,255,0.30)); background: light-dark(rgba(0,102,217,0.10), rgba(90,159,255,0.14)); }
.pill-high_consequence { color: #ff3b30; border-color: light-dark(rgba(255,59,48,0.25), rgba(255,59,48,0.30)); background: light-dark(var(--danger-red-light), var(--danger-red-dark)); }
.pill-low              { color: var(--ink-secondary); opacity: 0.85; }
.pill-info             { color: light-dark(var(--indigo), #5a9fff); border-color: light-dark(rgba(0,102,217,0.25), rgba(90,159,255,0.30)); background: light-dark(rgba(0,102,217,0.10), rgba(90,159,255,0.14)); }

/* Severity (investigation) colors — pick from the standard ramp */
.pill-minor            { color: var(--ink-secondary); }
.pill-elevated         { color: light-dark(#a85900, #ff9f0a); border-color: light-dark(rgba(168,89,0,0.25), rgba(255,159,10,0.30)); background: light-dark(rgba(255,159,10,0.10), rgba(255,159,10,0.14)); }
.pill-severe           { color: #ff3b30; border-color: light-dark(rgba(255,59,48,0.25), rgba(255,59,48,0.30)); background: light-dark(var(--danger-red-light), var(--danger-red-dark)); }

/* Generic status colors — apply to whatever `pill-<status>` the backend emits */
.pill-open, .pill-proposed, .pill-pending {
    color: light-dark(var(--indigo), #5a9fff); border-color: light-dark(rgba(0,102,217,0.25), rgba(90,159,255,0.30)); background: light-dark(rgba(0,102,217,0.10), rgba(90,159,255,0.14));
}
.pill-accepted, .pill-resolved, .pill-done, .pill-completed, .pill-closed, .pill-intact {
    color: var(--success-green); border-color: light-dark(rgba(52,199,89,0.25), rgba(52,199,89,0.30)); background: light-dark(rgba(52,199,89,0.10), rgba(52,199,89,0.14));
}
.pill-rejected, .pill-degraded, .pill-failed, .pill-bypassed {
    color: #ff3b30; border-color: light-dark(rgba(255,59,48,0.25), rgba(255,59,48,0.30)); background: light-dark(var(--danger-red-light), var(--danger-red-dark));
}

/* Chips — typology (typed_form / target_kind / link_kind). Selected / hovered
   variant for the findings-form hypothesis picker. */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 0 0;
}

.chip { cursor: default; }
.chip-exact, .chip-bounded_range           { color: light-dark(var(--indigo), #5a9fff); }
.chip-approximate                          { color: light-dark(#a85900, #ff9f0a); }
.chip-relative, .chip-relative_bounded,
.chip-ordinal                              { color: light-dark(#7c3aed, #a78bfa); }
.chip-contextual                           { color: var(--ink-secondary); }
.chip-unknown                              { color: var(--ink-faint); }
.chip-conflicting                          { color: #ff3b30; }

.chip-supports                             { color: var(--success-green); }
.chip-contradicts                          { color: #ff3b30; }
.chip-corroborates                         { color: light-dark(var(--indigo), #5a9fff); }
.chip-neutral_insufficient                 { color: var(--ink-secondary); }

/* §17.2 cross-anchor RELATIVE / ORDINAL sentinel pill. Fires on
   Timeline event rows when RELATIVE/RELATIVE_BOUNDED/ORDINAL
   expressions reference more than one anchor event across more
   than one typed form. Paired with the backend
   `detect_cross_anchor_relord_conflicts` detector. */
.cross-anchor-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin: 4px 0 8px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    color: #ff3b30;
    background: rgba(255, 59, 48, 0.10);
    border: 1px solid rgba(255, 59, 48, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    max-width: 100%;
    overflow-wrap: anywhere;
    cursor: help;
}
.cross-anchor-glyph {
    font-size: 14px;
    line-height: 1;
}
.cross-anchor-pill:hover {
    background: rgba(255, 59, 48, 0.18);
}
.cross-anchor-pill-open {
    color: #ffffff;
    background: rgba(255, 59, 48, 0.30);
    border: 1px solid rgba(255, 59, 48, 0.55);
    font-weight: 600;
}
.cross-anchor-pill-open:hover {
    background: rgba(255, 59, 48, 0.42);
}
.cross-anchor-pill-material {
    color: #ffffff;
    background: rgba(255, 59, 48, 0.55);
    border: 1px solid rgba(255, 59, 48, 0.85);
    font-weight: 700;
    animation: cross-anchor-pulse 1.6s ease-in-out infinite;
}
@keyframes cross-anchor-pulse {
    0%, 100% { background: rgba(255, 59, 48, 0.55); }
    50%      { background: rgba(255, 59, 48, 0.78); }
}

/* Target_kind chips on Runs / Proposals page: catch-all + canonical kinds */
.chip-observation, .chip-claim, .chip-event, .chip-entitymention, .chip-hypothesis,
.chip-finding, .chip-barrier, .chip-causal, .chip-contradiction, .chip-gap,
.chip-evidencelink, .chip-shift, .chip-abductive, .chip-eventrelationship,
.chip-alternativetimeline, .chip-toolselection, .chip-modelroute,
.chip-humancheckpoint, .chip-reasoningplan, .chip-entity {
    color: light-dark(var(--indigo), #5a9fff);
    border-color: light-dark(rgba(0,102,217,0.25), rgba(90,159,255,0.30));
    background: light-dark(rgba(0,102,217,0.10), rgba(90,159,255,0.14));
}

/* The interactive hypothesis-picker chip rendered inside the proposing
   finding form. Active = filled, inactive = neutral. */
.chip-selected {
    color: #fff !important;
    background: linear-gradient(135deg, var(--indigo), var(--indigo-dark)) !important;
    border-color: transparent !important;
    cursor: pointer;
}
button.chip { cursor: pointer; }
button.chip:hover { background: light-dark(rgba(0,102,217,0.06), rgba(90,159,255,0.10)); }

/* State chip — support spectrum hypothesis state. The five canonical states
   per the spec are named below; anything else falls through. */
.state-strongly_supported      { color: var(--success-green); border-color: light-dark(rgba(52,199,89,0.30), rgba(52,199,89,0.40)); background: light-dark(rgba(52,199,89,0.12), rgba(52,199,89,0.16)); }
.state-supported               { color: light-dark(#0a7a3d, #3ddc84); border-color: light-dark(rgba(10,122,61,0.25), rgba(61,220,132,0.30)); background: light-dark(rgba(10,122,61,0.10), rgba(61,220,132,0.14)); }
.state-plausible_and_unresolved { color: light-dark(var(--indigo), #5a9fff); }
.state-weak_limited_support    { color: light-dark(#a85900, #ff9f0a); background: light-dark(rgba(255,159,10,0.10), rgba(255,159,10,0.14)); }
.state-contradicted            { color: #ff3b30; border-color: light-dark(rgba(255,59,48,0.30), rgba(255,59,48,0.40)); background: light-dark(var(--danger-red-light), var(--danger-red-dark)); }


/* ----------------------------------------------------------------------------
 * 10. Tables (legacy `.table` retained — no current Rust site uses it, but
 * the original sheet keeps it; collapse here without losing compatibility)
 * -------------------------------------------------------------------------- */

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.table th { padding: 12px 16px; text-align: left; font-weight: 500;
    color: var(--ink-secondary); font-size: 11px; letter-spacing: 0.03em;
    border-bottom: 1px solid var(--glass-border); }
.table td { padding: 12px 16px;
    border-bottom: 1px solid light-dark(rgba(0,0,0,0.04), rgba(255,255,255,0.06));
    color: var(--ink-primary); line-height: 1.4; }
.table tr:last-child td { border-bottom: none; }


/* ----------------------------------------------------------------------------
 * 11. Action rows, engine row, override row, tabs
 *   .engine-row            per-button row in the Investigation Overview engines
 *   .action-row            button row at the bottom of proposal / finding /
 *                          hypothesis cards
 *   .override-row          override panel in hypothesis expand
 *   .tabs / .tab / .tab.active / .tab-panel / .tab-panel.hidden / .hidden
 * -------------------------------------------------------------------------- */

.engine-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.07));
}

.override-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}
.override-row .form-input { flex: 1; min-width: 200px; }

/* Admin tab strip — used on the Admin page. */
.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid light-dark(rgba(0,0,0,0.06), rgba(255,255,255,0.06));
}
.tab {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    background: none;
    color: var(--ink-secondary);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--ink-primary); }
.tab.active {
    color: light-dark(var(--indigo), #5a9fff);
    border-bottom-color: light-dark(var(--indigo), #5a9fff);
}
.tab-panel { display: block; }
.tab-panel.hidden { display: none; }


/* ----------------------------------------------------------------------------
 * 12. Loading + Login
 * -------------------------------------------------------------------------- */

.loading-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    background: light-dark(#f0f0f3, #0a0a0d);
}
.loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid light-dark(rgba(0,0,0,0.06), rgba(255,255,255,0.06));
    border-top-color: light-dark(var(--indigo), #5a9fff);
    border-radius: 50%;
    animation: spin 0.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 24px;
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%,
            light-dark(rgba(0,102,217,0.06), rgba(90,159,255,0.08)) 0%, transparent 100%),
        radial-gradient(ellipse 70% 50% at 30% 100%,
            light-dark(rgba(255,45,85,0.04), rgba(255,45,85,0.06)) 0%, transparent 100%),
        light-dark(#f0f0f3, #0a0a0d);
}
.login-box {
    background: var(--glass-bg);
    backdrop-filter: saturate(160%) blur(40px);
    border-radius: 20px;
    border: 1px solid var(--glass-border-bold);
    box-shadow: var(--glass-shadow-lg);
    padding: 40px 36px;
    width: 100%;
    max-width: 380px;
}
.login-title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.027em;
    color: var(--ink-primary);
    margin-bottom: 4px;
    text-align: center;
}
.login-subtitle {
    font-size: 14px;
    color: var(--ink-secondary);
    margin-bottom: 28px;
    text-align: center;
}


/* ----------------------------------------------------------------------------
 * 13. Responsive
 * -------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .overview-grid,
    .evidence-grid,
    .two-col,
    .grid-3,
    .causal-grid,
    .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .page            { padding: 20px 16px; }
    .navbar          { padding: 0 16px; }
    .login-box       { padding: 32px 24px; }
    .card            { padding: 20px 18px; }
    .page-title      { font-size: 24px; }
    .investigation-nav { padding: 3px; gap: 2px; }
    .investigation-nav-link { padding: 5px 9px; font-size: 12px; }
}

/* -------------------------------------------------------------------------- *
 *  T18 EvidenceIntelligence chunk drawer                                    *
 * -------------------------------------------------------------------------- */

.intelligence-pane { min-height: 280px; }
.intelligence-summary {
    display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px 0;
    padding: 10px 12px;
    background: var(--glass-bg-input);
    border-radius: 12px;
}
.extraction-card {
    background: var(--glass-bg-input);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    transition: transform 120ms var(--spring-ease, ease);
}
.extraction-card:hover { transform: translateY(-1px); }
.extraction-card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px;
}
.extraction-card-kind {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-primary, #1d1d1f);
    font-weight: 600;
    padding: 2px 8px;
    background: var(--glass-bg);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.18);
}
.extraction-card-body {
    font-size: 14px;
    line-height: 1.45;
    margin: 6px 0 8px 0;
    color: var(--ink-primary, #1d1d1f);
    word-wrap: break-word;
}
.extraction-card-actions {
    display: flex; gap: 8px; margin-top: 6px;
}
.btn-danger-ghost {
    background: transparent;
    color: var(--danger-red-light, #b91c1c);
    border: 1px solid var(--danger-red-light, #b91c1c);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms var(--spring-ease, ease);
}
.btn-danger-ghost:hover:not(:disabled) { background: rgba(185,28,28,0.10); }
.btn-danger-ghost:disabled, .btn-success:disabled {
    opacity: 0.45; cursor: not-allowed;
}
.evidence-chunk { cursor: pointer; transition: border 140ms var(--spring-ease, ease); }
.evidence-chunk.active {
    border-left: 3px solid var(--indigo, #5b6cff);
    background: rgba(91,108,255,0.08);
}
.pill-success-green {
    background: var(--success-green, #16a34a);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .02em;
}

/* Asritas Chat (T12-O) */
.chat-thread { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; margin-bottom: 12px; }
.chat-msg { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border, rgba(128,128,128,0.25)); }
.chat-msg-user { align-self: flex-end; max-width: 85%; background: rgba(59,130,246,0.10); }
.chat-msg-assistant { align-self: flex-start; max-width: 95%; }
.chat-msg-who { font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--ink-secondary); }
.chat-msg-body { white-space: pre-wrap; }
.chat-thinking { opacity: 0.75; }
.chat-dots::after { content: ""; animation: chat-dots 1.2s steps(4, end) infinite; }
@keyframes chat-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }
@media (prefers-reduced-motion: reduce) { .chat-dots::after { animation: none; content: "..."; } }
.chat-refs { margin-top: 6px; font-size: 13px; }
.chat-form { display: flex; flex-direction: column; gap: 8px; }

/* Global investigation shell (UX §3): incident header + Intelligence dock */
.incident-header { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; padding: 8px 12px; margin-bottom: 8px; border: 1px solid var(--border, rgba(128,128,128,0.25)); border-radius: 10px; }
.incident-header strong { font-size: 15px; }
.chat-dock { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.chat-dock-panel { width: min(380px, calc(100vw - 32px)); max-height: 70vh; display: flex; flex-direction: column; }
.chat-dock-thread { max-height: 40vh; }

.map-view-toggle { display: flex; gap: 6px; margin-bottom: 10px; }
.map-dates { display: flex; gap: 8px; }
.map-diagram { overflow-x: auto; }
.map-diagram svg { max-width: none; }
.map-col-head { font-size: 12px; font-weight: 600; fill: var(--ink-secondary, #666); }
.map-node rect { fill: var(--surface, rgba(128,128,128,0.08)); stroke: var(--border, rgba(128,128,128,0.45)); }
.map-node text { font-size: 12px; fill: currentColor; }
.map-edge { fill: none; stroke-width: 1.6; cursor: pointer; stroke: #3b82f6; }
.map-edge-evidence { stroke: #16a34a; }
.map-edge-proposed_causal { stroke: #d97706; stroke-dasharray: 6 4; }
.map-edge-inferred { stroke: #8b5cf6; stroke-dasharray: 2 4; }
.map-edge-active { stroke-width: 3.4; }

/* Role-aware controls (see access.rs): hidden until allowed. */
body[data-can-propose]:not([data-can-propose="true"]) .needs-propose,
body[data-can-accept]:not([data-can-accept="true"]) .needs-accept { display: none !important; }
.read-only-note { margin: 8px 0; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border, rgba(128,128,128,0.35)); }
body[data-read-only="true"] .read-only-note { display: block !important; }

.chat-msg-body.md { white-space: normal; }
.chat-msg-body.md p { margin: 0 0 0.5em; }
.chat-msg-body.md p:last-child { margin-bottom: 0; }
.chat-msg-body.md ul, .chat-msg-body.md ol { margin: 0 0 0.5em 1.2em; padding: 0; }
.chat-msg-body.md code { font-size: 0.92em; padding: 0 3px; border-radius: 4px; background: rgba(128,128,128,0.15); }
.chat-msg-body.md pre { overflow-x: auto; }