:root {
    --pearl: #F5F0EB;
    --surface: #FFFFFF;
    --charcoal: #2C2C2C;
    --charcoal-light: #4A4A4A;
    --nacre: #8B7355;
    --nacre-light: #A89070;
    --sand: #D4C5B2;
    --sand-light: #E8DFD3;
    --border: #E5DDD4;
    --border-light: #F0EAE2;
    --muted: #9A9189;
    --bg-hover: #FAF7F3;

    --proceed: #5C8A6B;
    --caution: #C89B4A;
    --do-not-proceed: #B4543E;
}

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

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--pearl);
    color: var(--charcoal);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

/* Form controls do NOT inherit font-family — every browser applies its own UA
   default, and for <textarea> that default is monospace. So the new-investigation
   form rendered its name field in the platform UI font and its context field in
   monospace, neither of them Inter, and the two placeholders sitting one above
   the other in different typefaces was the visible result. `button` was already
   here for the same reason; the rest were missed. */
button, input, textarea, select, optgroup { font-family: inherit; }
button { cursor: pointer; }

/* ── Nav ─────────────────────────────────────────────────────── */
.nav {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
}
.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
/* The logo mark is a PNG (no vector exists). An <img>'s baseline is its bottom
   edge, so under align-items: baseline the bowl of the "b" sits on the text
   baseline — the same alignment the landing site uses. alt="" because the name
   is right beside it; a screen reader would otherwise say it twice. */
.brand-logo {
    display: block;
    width: auto;
    height: 26px;
}
.brand-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--charcoal);
}
.brand-sub {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--nacre);
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
/* ── Nav hamburger menu ───────────────────────────────────── */
.nav-menu {
    position: relative;
}
.nav-menu > summary {
    list-style: none;
    cursor: pointer;
    outline: none;
    padding: 6px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::marker { display: none; }
.nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4.5px;
    width: 18px;
}
.nav-hamburger span {
    display: block;
    height: 1.5px;
    background: var(--charcoal);
    border-radius: 1px;
    transition: background 0.2s;
}
.nav-menu > summary:hover .nav-hamburger span { background: var(--nacre); }
.nav-menu-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px 16px;
    min-width: 190px;
    box-shadow: 0 4px 16px rgba(44,44,44,0.10);
    z-index: 200;
}
.nav-menu-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-menu-credits {
    font-size: 11px;
    color: var(--nacre);
    letter-spacing: 0.03em;
}
.nav-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 10px 0;
}
.nav-menu-signout {
    background: none;
    border: none;
    color: var(--charcoal);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    width: 100%;
    text-align: left;
}
.nav-menu-signout:hover { color: var(--nacre); }

/* ── Layout ──────────────────────────────────────────────────── */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

/* ── Search form ─────────────────────────────────────────────── */
.search-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(44, 44, 44, 0.04);
}
.search-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 6px;
}
.search-subtitle {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 24px;
}
.field {
    margin-bottom: 16px;
}
.field-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--nacre);
    margin-bottom: 6px;
}
.field-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 14px;
    /* Set, not inherited: browsers force line-height:normal on form controls, so
       an input and a textarea of the same font size come out different heights. */
    line-height: 1.5;
    color: var(--charcoal);
    background: var(--surface);
    transition: border-color 0.15s;
}
.field-input:focus {
    outline: none;
    border-color: var(--nacre);
}
/* There was no rule at all, so placeholders took each browser's default grey —
   a cool grey against a warm palette. --muted rather than the --sand used on the
   auth screens: --sand on white is about 1.8:1, which is decorative rather than
   readable, and a placeholder is usually the only label a compact field has. */
.field-input::placeholder {
    color: var(--muted);
    opacity: 1; /* Firefox applies its own opacity to placeholders. */
}
.field-textarea {
    min-height: 80px;
    resize: vertical;
    /* A little more air than a single-line field: this one holds a sentence. */
    line-height: 1.6;
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.btn-primary {
    background: var(--charcoal);
    color: var(--surface);
}
.btn-primary:hover { background: var(--charcoal-light); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary {
    background: var(--surface);
    border-color: var(--border);
    color: var(--charcoal);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--nacre); }
.btn-link {
    background: none;
    border: none;
    color: var(--nacre);
    font-size: 12px;
    text-decoration: underline;
}

/* ── Investigation list ──────────────────────────────────────── */
.list-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-top: 24px;
}
.list-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.list-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--nacre);
}
.list-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}
.list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.1s;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: var(--bg-hover); }
.list-row-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--charcoal);
}
.list-row-meta {
    font-size: 12px;
    color: var(--muted);
}

/* ── Investigation view ──────────────────────────────────────── */
.inv-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 24px;
}
.inv-title-block h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 4px;
}
.inv-context {
    font-size: 13px;
    color: var(--muted);
}
.inv-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--charcoal);
    white-space: nowrap;
}
.inv-status .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nacre);
    animation: pulse 1.4s ease-in-out infinite;
}
.inv-status.terminal .dot { animation: none; background: var(--proceed); }
.inv-status.failed .dot { animation: none; background: var(--do-not-proceed); }
@keyframes pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* ── Stage rail (compact, single-line, with connector lines) ─── */
.stages {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 24px;
    padding: 6px 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
.stages::-webkit-scrollbar { display: none; }

.stage {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    background: transparent;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    white-space: nowrap;
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
}
.stage-name { color: inherit; margin: 0; font-size: inherit; letter-spacing: inherit; text-transform: inherit; }
.stage-state { display: none; }  /* state is expressed by the dot/colour, not text */

/* A running stage counts up. Tabular figures so the number does not jitter
   sideways every second, and no letter-spacing so it reads as a clock rather
   than another label. */
.stage-elapsed {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    font-size: 10px;
    color: var(--nacre);
    opacity: 0.85;
    margin-left: 2px;
    min-width: 3ch;
}

/* Total pipeline time, once there is one. Pushed to the end of the strip. */
.stage-total {
    margin-left: auto;
    padding-left: 14px;
    font-size: 10px;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.stage-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.stage.pending { color: var(--muted); }
.stage.complete { color: var(--proceed); }
.stage.complete .stage-dot { opacity: 1; }
.stage.active {
    color: var(--charcoal);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(44, 44, 44, 0.06);
}
.stage.active .stage-dot {
    background: var(--nacre);
    opacity: 1;
    animation: stage-pulse 1.6s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(139, 115, 85, 0.5);
}
@keyframes stage-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 115, 85, 0.45); transform: scale(1); }
    50%      { box-shadow: 0 0 0 6px rgba(139, 115, 85, 0);    transform: scale(1.15); }
}

/* Connector line between pills */
.stage + .stage::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 1px;
    background: var(--border);
    margin-right: 4px;
    flex-shrink: 0;
}

/* ── Tabs ────────────────────────────────────────────────────── */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}
.tab {
    background: none;
    border: none;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--charcoal); }
.tab.active {
    color: var(--charcoal);
    border-bottom-color: var(--nacre);
}
.tab-spacer { flex: 1; }
.tab-pdf-link {
    align-self: center;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--muted);
    text-decoration: none;
    padding: 6px 2px;
    transition: color 0.15s;
}
.tab-pdf-link:hover { color: var(--nacre); }

/* ── Network view ────────────────────────────────────────────── */
.network-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.network-toolbar {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.network-meta {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--nacre);
}
.network-stage {
    position: relative;
    min-height: 640px;
    background: var(--pearl);
}
.network-canvas {
    width: 100%;
    height: 640px;
}
.network-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 14px;
    padding: 32px;
    text-align: center;
}
.network-inspect {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 280px;
    max-height: calc(100% - 32px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 16px 18px;
    box-shadow: 0 4px 14px rgba(44, 44, 44, 0.08);
    font-size: 13px;
}
.network-inspect-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    color: var(--charcoal);
    line-height: 1.2;
    margin-bottom: 8px;
}
.network-inspect-aliases {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 10px;
    font-style: italic;
}
.network-inspect-props {
    border-top: 1px solid var(--border-light);
    padding-top: 10px;
    margin-top: 4px;
}
.network-inspect-prop {
    font-size: 12px;
    line-height: 1.5;
    color: var(--charcoal-light);
    margin-bottom: 4px;
}

/* ── Timeline view (vis-timeline overrides) ──────────────────── */
.timeline-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.timeline-stage {
    position: relative;
    min-height: 120px;
    background: var(--pearl);
}
.timeline-canvas {
    width: 100%;
    padding: 16px 20px;
}
.timeline-canvas .vis-timeline {
    border: none;
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--pearl);
}
.timeline-canvas .vis-panel {
    border-color: var(--border-light);
}
.timeline-canvas .vis-time-axis .vis-text,
.timeline-canvas .vis-labelset .vis-label {
    color: var(--charcoal-light);
    font-size: 11px;
}
.timeline-canvas .vis-item {
    border-radius: 3px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--charcoal);
    box-shadow: 0 1px 2px rgba(44, 44, 44, 0.04);
    font-size: 12px;
    padding: 2px 6px;
}
.timeline-canvas .vis-item.vis-selected {
    border-color: var(--nacre);
    background: var(--bg-hover);
    box-shadow: 0 0 0 1px var(--nacre);
}
.timeline-canvas .vis-item.tl-career    { border-left: 3px solid var(--nacre); }
.timeline-canvas .vis-item.tl-education { border-left: 3px solid var(--nacre-light); }
.timeline-canvas .vis-item.tl-financial { border-left: 3px solid var(--proceed); }
.timeline-canvas .vis-item.tl-event     { border-left: 3px solid var(--sand); }
.timeline-canvas .vis-item.tl-public_appearance { border-left: 3px solid var(--charcoal-light); }
.timeline-canvas .vis-item.tl-personal  { border-left: 3px solid var(--sand-light); }
.timeline-canvas .vis-item.tl-adverse   { border-left: 3px solid var(--do-not-proceed); background: rgba(180, 84, 62, 0.05); }
.timeline-canvas .vis-item .vis-item-content strong { color: var(--charcoal); }
.timeline-canvas .vis-group { border-color: var(--border-light); }
.timeline-canvas .vis-tooltip {
    background: var(--charcoal);
    color: var(--surface);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 4px;
    border: none;
    max-width: 340px;
}

/* ── Panels grid ─────────────────────────────────────────────── */
.panels {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}
/* Grid children default to min-width:auto, so one unbreakable child — a long
   search query, a URL — expands its track past the declared fraction and crushes
   the neighbouring column. This is the fix, and it must stay. */
.panels > * { min-width: 0; }
@media (max-width: 900px) {
    .panels { grid-template-columns: 1fr; }
}
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.panel-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.panel-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--nacre);
}
.panel-count {
    font-size: 11px;
    color: var(--muted);
}
.panel-body { padding: 16px 20px; }

/* Candidates */
.candidate {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: all 0.15s;
}
.candidate:hover { border-color: var(--nacre); }
.candidate.confirmed { border-color: var(--proceed); background: rgba(92, 138, 107, 0.05); }
.candidate-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--sand-light);
    flex-shrink: 0;
}
/* Initials, not a blank disc. The blank disc read as a failed image; initials read
   as a considered choice, and they always render. */
.candidate-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 21px;
    letter-spacing: 0.03em;
    color: var(--nacre);
    background: rgba(139, 115, 85, 0.10);
    box-shadow: inset 0 0 0 1px rgba(139, 115, 85, 0.18);
    user-select: none;
}
/* Still looking. A slow pulse says "working", not "broken". */
.candidate-initials.is-searching { animation: initials-wait 2s ease-in-out infinite; }
@keyframes initials-wait {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(139, 115, 85, 0.18); }
    50%      { box-shadow: inset 0 0 0 1px rgba(139, 115, 85, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
    .candidate-initials.is-searching { animation: none; }
}
.candidate-body { flex: 1; }
.candidate-name { font-weight: 600; font-size: 15px; }
.candidate-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.candidate-desc { font-size: 13px; color: var(--charcoal-light); margin-top: 8px; line-height: 1.5; }
.candidate-confidence {
    font-size: 11px;
    color: var(--nacre);
    margin-top: 8px;
}

/* Findings */
.finding {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}
.finding:last-child { border-bottom: none; }
.finding-track {
    display: inline-block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--nacre);
    background: var(--sand-light);
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 6px;
}
.finding-summary { font-size: 13px; color: var(--charcoal); }
.finding-summary { display: block; margin-top: 4px; }
.finding-source {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--nacre);
    margin-top: 8px;
    text-decoration: none;
    word-break: break-all;
    line-height: 1.3;
}
.finding-source:hover { color: var(--charcoal); text-decoration: underline; }

/* ── Explore panel ───────────────────────────────────────────── */
.explore-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.explore-input {
    flex: 1;
}
.explore-qa {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-light);
}
.explore-question {
    font-size: 13px;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 12px;
}
.explore-sources {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.explore-sources-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--charcoal-light);
    margin-right: 4px;
}

/* The live trace of a follow-up question. Deliberately quieter than the
   pipeline's own trace panel — it sits inside a card rather than owning one —
   but the step treatment is shared, because it is the same work. */
.explore-trace {
    margin-top: 16px;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    background: rgba(139, 115, 85, 0.02);
    max-height: 320px;
    overflow-y: auto;
}
.explore-trace-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
}
.explore-trace .lane-steps {
    padding: 4px 16px 12px 16px;
}
/* `.step` reserves a right-hand column for its timestamp. These steps carry no
   time — every step of one question lands inside the same few seconds, so the
   column would be a stack of identical values taking a fifth of the width. */
.explore-trace .step {
    padding-right: 0;
}
.favicon {
    border-radius: 2px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Identifiers */
.lead {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
    flex-wrap: wrap;
}
.lead:last-child { border-bottom: none; }
.lead-icon {
    width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lead-icon:empty { display: none; }
.lead-track {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--nacre);
    background: var(--sand-light);
    padding: 2px 6px;
    border-radius: 3px;
}
.lead-value {
    color: var(--charcoal);
    word-break: break-all;
    flex: 1;
    min-width: 120px;
    text-decoration: none;
}
a.lead-value { color: var(--nacre); }
a.lead-value:hover { color: var(--charcoal); text-decoration: underline; }
.lead-label {
    font-size: 11px;
    color: var(--muted);
}

/* Activity log */
.activity { max-height: 480px; overflow-y: auto; }
.activity-item {
    font-size: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
    color: var(--charcoal-light);
    font-family: 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
}
.activity-item:last-child { border-bottom: none; }
.activity-time { color: var(--muted); margin-right: 8px; }
.activity-stage {
    color: var(--nacre);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.1em;
    margin-right: 6px;
}

/* Compliance screening */
.compliance-panel .panel-header .panel-count { font-weight: 600; color: var(--charcoal); }
.compliance-clean {
    padding: 14px 16px;
    border: 1px solid var(--sand);
    border-left: 3px solid var(--proceed);
    border-radius: 3px;
    background: rgba(92, 138, 107, 0.06);
    color: var(--charcoal-light);
    font-size: 13px;
    line-height: 1.5;
}
.compliance-clean strong { color: var(--proceed); }
.compliance-unconfigured {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--caution);
    border-radius: 3px;
    background: rgba(200, 155, 74, 0.05);
    color: var(--charcoal-light);
    font-size: 13px;
    line-height: 1.5;
}
.compliance-unconfigured strong { color: var(--caution); }
.compliance-unconfigured code {
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
    font-family: 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
}
.compliance-hit {
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 3px;
    background: var(--surface);
}
.compliance-hit:last-child { margin-bottom: 0; }
.compliance-hit.critical {
    border-left-color: var(--do-not-proceed);
    background: rgba(180, 84, 62, 0.04);
}
.compliance-hit.high { border-left-color: var(--caution); background: rgba(200, 155, 74, 0.05); }
.compliance-hit.medium { border-left-color: var(--nacre); }
.compliance-hit.low, .compliance-hit.info { border-left-color: var(--border); }
.compliance-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.compliance-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 600;
    background: var(--sand-light);
    color: var(--charcoal);
}
.compliance-badge.critical { background: var(--do-not-proceed); color: var(--surface); }
.compliance-badge.high { background: var(--caution); color: var(--surface); }
.compliance-badge.medium { background: var(--nacre); color: var(--surface); }
.compliance-source {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}
.compliance-score {
    font-size: 11px;
    color: var(--nacre);
    margin-left: auto;
}
.compliance-summary {
    font-size: 13px;
    color: var(--charcoal);
    line-height: 1.5;
    margin-bottom: 6px;
}
.compliance-datasets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.compliance-dataset {
    font-size: 10px;
    color: var(--muted);
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    padding: 1px 6px;
    border-radius: 2px;
    font-family: 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
}
.compliance-link {
    font-size: 11px;
    color: var(--nacre);
    text-decoration: none;
}
.compliance-link:hover { color: var(--charcoal); text-decoration: underline; }

/* Risk score */
.risk {
    padding: 20px;
    text-align: center;
}
.risk-score {
    font-family: 'Cormorant Garamond', serif;
    font-size: 56px;
    font-weight: 500;
    line-height: 1;
}
.risk-score.proceed { color: var(--proceed); }
.risk-score.caution { color: var(--caution); }
.risk-score.do_not_proceed { color: var(--do-not-proceed); }
.risk-verdict {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--muted);
    margin-top: 6px;
}
.risk-summary { font-size: 13px; color: var(--charcoal-light); margin-top: 12px; line-height: 1.6; }

/* Sections (synthesis brief) */
.section {
    border-top: 1px solid var(--border-light);
    padding: 24px 0;
}
.section:first-child { border-top: none; padding-top: 0; }
.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 12px;
}
.section-content {
    font-size: 14px;
    color: var(--charcoal-light);
    line-height: 1.7;
}
.section-content.markdown { white-space: normal; }

/* Markdown styling — scoped so it doesn't bleed elsewhere */
.markdown p { margin: 0 0 12px; }
.markdown p:last-child { margin-bottom: 0; }
.markdown strong { color: var(--charcoal); font-weight: 600; }
.markdown em { font-style: italic; }
.markdown ul, .markdown ol { margin: 0 0 12px; padding-left: 22px; }
.markdown ul li, .markdown ol li { margin-bottom: 6px; }
.markdown ul { list-style: disc; }
.markdown ol { list-style: decimal; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 {
    font-family: 'Cormorant Garamond', serif;
    color: var(--charcoal);
    font-weight: 500;
    margin: 18px 0 10px;
    line-height: 1.3;
}
.markdown h1 { font-size: 22px; }
.markdown h2 { font-size: 19px; }
.markdown h3 { font-size: 16px; }
.markdown h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nacre); }
.markdown a {
    color: var(--nacre);
    text-decoration: none;
    border-bottom: 1px solid var(--sand);
    transition: color 0.15s, border-color 0.15s;
    word-break: break-word;
}
.markdown a:hover { color: var(--charcoal); border-color: var(--nacre); }
.markdown code {
    font-family: 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
    color: var(--charcoal);
}
.markdown pre {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px 14px;
    overflow-x: auto;
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
}
.markdown pre code { background: none; border: none; padding: 0; }
.markdown blockquote {
    border-left: 3px solid var(--sand);
    margin: 0 0 12px;
    padding: 4px 14px;
    color: var(--charcoal-light);
    background: var(--bg-hover);
    font-style: italic;
}
.markdown hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 18px 0;
}
.markdown table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 14px;
    font-size: 13px;
}
.markdown th, .markdown td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: left;
}
.markdown th { background: var(--bg-hover); font-weight: 600; color: var(--charcoal); }
/* Clickable citation chips (rendered by renderMarkdown) */
.markdown button.cite,
button.cite {
    display: inline-block;
    background: var(--sand-light);
    color: var(--nacre);
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    margin: 0 2px;
    vertical-align: super;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.markdown button.cite:hover,
button.cite:hover {
    background: var(--nacre);
    color: var(--surface);
    border-color: var(--nacre);
}

/* Suggested Deep Dives: the model already writes two follow-up queries per
   topic, and they used to render as inert code spans. These are those spans,
   made clickable — they keep the monospace of typed input, because that is
   what they are, and gain the affordance of a control. */
.markdown button.dive,
button.dive {
    display: inline;
    font-family: 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    line-height: 1.5;
    text-align: left;
    color: var(--nacre);
    background: var(--sand-light);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    padding: 2px 7px;
    margin: 2px 0;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.markdown button.dive:hover,
button.dive:hover {
    background: var(--nacre);
    border-color: var(--nacre);
    color: var(--surface);
}
.markdown button.dive:focus-visible,
button.dive:focus-visible {
    outline: 2px solid var(--nacre);
    outline-offset: 1px;
}

/* One line telling the reader those queries are live. */
.section-hint {
    font-size: 11px;
    color: var(--charcoal-light);
    font-style: italic;
    margin-bottom: 10px;
}

/* Evidence slide-in panel */
.evidence-wrap {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    justify-content: flex-end;
}
.evidence-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(44, 44, 44, 0.28);
}
.evidence-panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    height: 100%;
    background: var(--surface);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 30px rgba(44, 44, 44, 0.10);
}
.evidence-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
}
.evidence-kicker {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--nacre);
    margin-bottom: 4px;
}
.evidence-ref {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    color: var(--charcoal);
    line-height: 1;
}
.evidence-close {
    background: none;
    border: none;
    font-size: 26px;
    color: var(--muted);
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
}
.evidence-close:hover { color: var(--charcoal); }
.evidence-body {
    padding: 20px 24px 32px;
    overflow-y: auto;
    flex: 1;
}
.evidence-track {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--nacre);
    margin-bottom: 8px;
}
.evidence-summary {
    font-family: 'Cormorant Garamond', serif;
    font-size: 21px;
    font-weight: 500;
    color: var(--charcoal);
    line-height: 1.3;
    margin-bottom: 12px;
}
.evidence-content {
    font-size: 14px;
    color: var(--charcoal-light);
    line-height: 1.7;
    margin-bottom: 24px;
    white-space: pre-wrap;
}
.evidence-sourcebox {
    border: 1px solid var(--border);
    border-left: 3px solid var(--sand);
    border-radius: 3px;
    padding: 14px 16px;
    background: var(--bg-hover);
    margin-bottom: 18px;
}
.evidence-source-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--charcoal);
    margin: 4px 0 4px;
    word-break: break-word;
}
.evidence-source-url {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 10px;
    word-break: break-all;
    font-family: 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
}
.evidence-source-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.evidence-archive-pending { font-size: 12px; color: var(--nacre); font-style: italic; }
.evidence-archive-failed { font-size: 12px; color: var(--caution); }
.evidence-archive-ts { font-size: 11px; color: var(--muted); margin-top: 8px; }
.evidence-confidence {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.evidence-error {
    color: var(--do-not-proceed);
    font-size: 13px;
}

/* Slide-in transition */
.evidence-enter-active, .evidence-leave-active { transition: transform 0.25s ease, opacity 0.2s ease; }
.evidence-enter-active .evidence-panel, .evidence-leave-active .evidence-panel { transition: transform 0.25s ease; }
.evidence-enter-from .evidence-panel, .evidence-leave-to .evidence-panel { transform: translateX(100%); }
.evidence-enter-from .evidence-backdrop, .evidence-leave-to .evidence-backdrop { opacity: 0; }
.evidence-enter-active .evidence-backdrop, .evidence-leave-active .evidence-backdrop { transition: opacity 0.2s ease; }

/* ── Auth pages ─────────────────────────────────────────────── */
.auth-body {
    background: var(--pearl);
    min-height: 100vh;
}
.auth-shell {
    min-height: 100vh;
    background: var(--pearl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 32px;
}
.auth-brand {
    text-align: center;
}
.auth-brand-mark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.24em;
    font-family: 'Cormorant Garamond', serif;
    /* Two words, not five spaced capitals: at a fixed 56px / 0.18em it would
       overflow a 375px phone. */
    font-size: clamp(38px, 11vw, 56px);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--charcoal);
    line-height: 1;
}
.auth-brand-mark .brand-logo {
    height: 0.95em;   /* scales with the clamp()ed font-size */
}
.auth-brand-sub {
    margin-top: 12px;
    font-size: 16px;
    color: var(--nacre-light);
    letter-spacing: 0.04em;
    font-weight: 300;
}
.auth-card {
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 40px 44px 36px;
    box-shadow: 0 1px 3px rgba(44, 44, 44, 0.04);
}
.auth-form {
    display: flex;
    flex-direction: column;
}
.auth-heading {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--charcoal);
    padding-bottom: 14px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--nacre-light);
}
.auth-status {
    background: var(--sand-light);
    border: 1px solid var(--sand);
    color: var(--charcoal);
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 16px;
}
.auth-field {
    margin-bottom: 12px;
}
.auth-input {
    width: 100%;
    background: var(--pearl);
    border: 1px solid transparent;
    padding: 18px 20px;
    font-size: 15px;
    color: var(--charcoal);
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.auth-input::placeholder {
    color: var(--sand);
    font-weight: 400;
}
.auth-input:focus {
    outline: none;
    border-color: var(--nacre);
    background: var(--bg-hover);
}
.auth-error {
    margin-top: 6px;
    font-size: 12px;
    color: var(--do-not-proceed);
}
.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    margin: 4px 0 16px;
    cursor: pointer;
}
.auth-remember input { accent-color: var(--nacre); }
.auth-submit {
    width: 100%;
    padding: 18px;
    background: var(--charcoal);
    color: var(--surface);
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.15s;
}
.auth-submit:hover { background: var(--charcoal-light); }
.auth-meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
    font-size: 12px;
}
.auth-meta a {
    color: var(--nacre);
    text-decoration: none;
}
.auth-meta a:hover { color: var(--charcoal); text-decoration: underline; }

/* Utility */
.row { display: flex; gap: 12px; align-items: center; }
.spacer { flex: 1; }
.muted { color: var(--muted); font-size: 12px; }

/* Identity verdict on a finding. Only non-confirmed findings are badged — a
   firmly attributed fact should look ordinary, not carry a reassurance label. */
.finding-attribution {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
    cursor: help;
    border: 1px solid transparent;
}
.finding-attribution.attr-probable {
    color: #7A6534;
    background: rgba(200, 155, 74, 0.12);
    border-color: rgba(200, 155, 74, 0.35);
}
.finding-attribution.attr-unverified,
.finding-attribution.attr-different_person {
    color: #8A3D2C;
    background: rgba(180, 84, 62, 0.10);
    border-color: rgba(180, 84, 62, 0.35);
}


/* ============================================================================
   THE TRACE  —  an analyst's working ledger
   ----------------------------------------------------------------------------
   The problem this replaces: a monospace log squeezed into a narrow rail while
   the main column sat empty, with emoji standing in for structure.

   The idea: three kinds of step, told apart by TYPE rather than icons. A thought
   is a margin note (Cormorant italic). A query is typed input, so it is the one
   place monospace earns its keep. A page that was read is a citation with a
   pull-quote of what it actually said — that quote is the artifact that makes
   this read as research instead of logging, so it gets the emphasis.
   ========================================================================== */

:root {
    --vellum: #FBF8F4;                     /* raised surface, warmer than --pearl */
    --graphite: #6E6963;                   /* secondary text */
    --rule: rgba(44, 44, 44, 0.09);        /* hairline */
    --rule-strong: rgba(139, 115, 85, 0.30);
}

/* While the dossier has nothing to show, the trace IS the page — not a sidebar.
   It moves back into the rail the moment sections start arriving. */
.panels-researching { grid-template-columns: 1fr; }
.panels-researching > div:last-child { order: -1; }
/* Bounded, not unbounded. Previously this was max-height:none, so the panel grew
   with its content and the PAGE had to be scrolled to see current activity. Now it
   scrolls internally and auto-follows the newest step. */
.panels-researching .trace { max-height: min(62vh, 40rem); }
.panels-researching .lane-steps { max-width: 74ch; }

/* Once results exist the trace steps back: quieter type, tighter clamp, and the
   dossier gets the reader's attention. It was the headline only while there was
   nothing else to show. */
.panels:not(.panels-researching) .step-thought { font-size: 14.5px; }
.panels:not(.panels-researching) .step-quote {
    font-size: 13.5px;
    -webkit-line-clamp: 2;
}
.panels:not(.panels-researching) .lane-label { font-size: 15px; }

.trace {
    max-height: 26rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}
/* Every level of the trace can be shrunk below its content width. Without this
   the flex rows and the <code> inside them refuse to shrink and blow the grid out. */
.lane, .lane-steps, .step, .step-search, .step-source, .step-read { min-width: 0; }

/* ---- lane ---------------------------------------------------------------- */

.lane { border-bottom: 1px solid var(--rule); }
.lane:last-child { border-bottom: none; }

.lane-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 13px 20px 11px;
    background: none;
    border: none;
    text-align: left;
    font: inherit;
    color: inherit;
}
.lane-header:hover { background: rgba(139, 115, 85, 0.035); }
.lane-header:focus-visible {
    outline: 2px solid var(--nacre);
    outline-offset: -2px;
}

/* A square, not a dot: a source mark, the way a filing gets stamped. */
.lane-mark {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    transform: translateY(-1px);
}
.lane-mark.live { background: var(--nacre); animation: mark-breathe 2.4s ease-in-out infinite; }
.lane-mark.done { background: var(--proceed); opacity: 0.55; }
@keyframes mark-breathe {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(139, 115, 85, 0.35); }
    50%      { opacity: 0.75; box-shadow: 0 0 0 4px rgba(139, 115, 85, 0); }
}

.lane-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    font-weight: 500;
    color: var(--charcoal);
    letter-spacing: 0.01em;
}
.lane-done .lane-label { color: var(--graphite); }

.lane-meta {
    margin-left: auto;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--graphite);
    white-space: nowrap;
    flex: 0 0 auto;
}
.lane-sep { opacity: 0.4; margin: 0 5px; }

.lane-summary {
    padding: 0 20px 13px 36px;
    font-size: 12.5px;
    color: var(--graphite);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- steps -------------------------------------------------------------- */

.lane-steps {
    list-style: none;
    margin: 0;
    padding: 0 20px 14px 36px;
}

.step {
    position: relative;
    padding: 7px 5.5rem 7px 0;
    animation: step-in 240ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes step-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

.step-time {
    position: absolute;
    top: 8px;
    right: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--graphite);
    opacity: 0.5;
    font-variant-numeric: tabular-nums;
}

/* A thought is a note in the margin, in the analyst's own voice. */
.step-thought {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    color: #4A4540;
}

/* Small caps-ish label shared by search and read rows. */
.step-kind {
    font-size: 9.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--nacre);
    flex: 0 0 auto;
}

/* A query is literally typed input — the one place monospace is meaningful. */
.step-search { display: flex; align-items: baseline; gap: 9px; }
.step-search code {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--charcoal);
    background: rgba(139, 115, 85, 0.07);
    border-left: 2px solid var(--rule-strong);
    padding: 3px 8px;
    border-radius: 0 2px 2px 0;
    word-break: break-word;
}

/* A page that was opened, and what it said. */
.step-source { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.step-source a, .step-source > span:not(.step-kind) {
    font-size: 13px;
    font-weight: 500;
    color: var(--charcoal);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
}
.step-source a:hover { color: var(--nacre); border-bottom-color: var(--nacre); }
.step-domain {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: var(--graphite) !important;
    border-bottom: none !important;
}

/* The excerpt is the point: what the source actually said. Given the weight of a
   pulled quote rather than the weight of a log line. */
/* Quoted page text — someone else's words, not NACRE's.
   It was previously set in the same serif at the same size as the dossier's own
   prose, so retrieved page text read as though the app were asserting it. Set as
   a lifted quote block instead: tinted ground, hairline rule, smaller and cooler
   ink. The serif stays reserved for the system's own voice. */
.step-quote {
    margin: 7px 0 3px;
    padding: 6px 11px 7px 12px;
    border-left: 2px solid rgba(139, 115, 85, 0.45);
    border-radius: 0 3px 3px 0;
    background: rgba(139, 115, 85, 0.045);
    font-family: 'Cormorant Garamond', serif;
    font-size: 14.5px;
    line-height: 1.5;
    color: #55504A;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Long unbroken tokens (a stray URL, a hash) must not widen the lane. */
    overflow-wrap: anywhere;
}

.step-event { font-size: 12px; color: var(--graphite); }

@media (prefers-reduced-motion: reduce) {
    .lane-mark.live { animation: none; }
    .step { animation: none; }
}

@media (max-width: 700px) {
    .lane-steps { padding-left: 20px; }
    .step { padding-right: 0; }
    .step-time { position: static; display: block; margin-top: 4px; }
}

/* ---- evidence panel: quoted source text, verdict, screenshot ------------- */

.evidence-excerpt { margin-top: 16px; }
.evidence-excerpt-label {
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--nacre);
    margin-bottom: 6px;
}
.evidence-excerpt blockquote {
    margin: 0;
    padding: 2px 0 2px 14px;
    border-left: 2px solid var(--nacre);
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    line-height: 1.6;
    color: #3A362F;
}
.evidence-attribution { margin-top: 14px; font-size: 12px; }

.evidence-shot {
    display: block;
    margin-top: 16px;
    border: 1px solid var(--rule);
    overflow: hidden;
    max-height: 220px;
    background: var(--vellum);
}
.evidence-shot img { display: block; width: 100%; height: auto; }

/* ---- identity verdict on a finding -------------------------------------- */
/* Only non-confirmed findings are badged: a firmly attributed fact should look
   ordinary, not carry a reassurance label. */
.finding-attribution {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 2px 7px;
    margin-right: 8px;
    vertical-align: middle;
    cursor: help;
    border: 1px solid transparent;
}
.finding-attribution.attr-probable {
    color: #7A6534;
    background: rgba(200, 155, 74, 0.11);
    border-color: rgba(200, 155, 74, 0.34);
}
.finding-attribution.attr-unverified,
.finding-attribution.attr-different_person {
    color: #8A3D2C;
    background: rgba(180, 84, 62, 0.09);
    border-color: rgba(180, 84, 62, 0.34);
}


/* ---- what is happening right now -------------------------------------------
   Pinned above the scrolling trace, so the current step is legible without any
   scrolling at all. The trace below stays chronological: a reasoning trace reads
   forward — question, then search, then what the page said — and reversing it to
   avoid scrolling would have traded the narrative for the symptom. */
.trace-now {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--rule);
    background: linear-gradient(to bottom, rgba(139, 115, 85, 0.055), rgba(139, 115, 85, 0.02));
}
.trace-now-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--nacre);
    flex: 0 0 auto;
    transform: translateY(-2px);
    animation: now-pulse 1.4s ease-in-out infinite;
}
@keyframes now-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(139, 115, 85, 0.4); }
    50%      { opacity: 0.6; box-shadow: 0 0 0 5px rgba(139, 115, 85, 0); }
}
.trace-now-lane {
    font-size: 9.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--nacre);
    flex: 0 0 auto;
    padding-top: 2px;
}
.trace-now-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16.5px;
    line-height: 1.45;
    color: var(--charcoal);
    min-width: 0;
}
.trace-now-text code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    background: rgba(139, 115, 85, 0.08);
    padding: 1px 6px;
    overflow-wrap: anywhere;
}

/* The typing caret. Present only while text is still being revealed. */
.caret {
    display: inline-block;
    width: 1.5px;
    height: 1em;
    margin-left: 2px;
    background: var(--nacre);
    vertical-align: -0.14em;
    animation: caret-blink 1s step-end infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* Shown only when the reader has scrolled away from the newest step. */
.trace-jump {
    position: absolute;
    right: 18px;
    bottom: 14px;
    padding: 6px 12px;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--pearl);
    background: var(--charcoal);
    border: none;
    border-radius: 100px;
    box-shadow: 0 2px 10px rgba(44, 44, 44, 0.22);
}
.trace-jump:hover { background: var(--nacre); }

/* The panel is the positioning context for that button. */
.panels .panel { position: relative; }

@media (prefers-reduced-motion: reduce) {
    .trace-now-pulse, .caret { animation: none; }
}

/* ── Legal documents ──────────────────────────────────────────────────────
   Long-form reading, so the measure is tight and the rhythm is generous.
   These pages are read by people deciding whether to trust us — including
   people who never chose to be in the database — so they get the same care
   as the product, not a wall of unstyled text. */
.legal-body {
    background: var(--pearl);
    color: var(--charcoal);
    margin: 0;
}

.legal-shell {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px 96px;
}

.legal-masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 40px 0 20px;
    border-bottom: 1px solid var(--nacre);
}

.legal-brand {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px;
    letter-spacing: 0.06em;
    color: var(--charcoal);
    text-decoration: none;
}

.legal-meta {
    display: flex;
    gap: 18px;
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--nacre);
}

.legal-doc { padding-top: 40px; }

.legal-doc h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 5vw, 2.7rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0 0 28px;
    text-wrap: balance;
}

.legal-doc h2 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nacre);
    margin: 44px 0 12px;
}

.legal-doc h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 26px 0 8px;
}

.legal-doc p,
.legal-doc li {
    font-size: 15.5px;
    line-height: 1.68;
    max-width: 68ch;
}

.legal-doc p { margin: 0 0 14px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 16px; padding-left: 22px; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc strong { font-weight: 600; }
.legal-doc a { color: var(--nacre); }

/* The lede: what this document is for, before the clauses start. */
.legal-lede {
    font-size: 17px !important;
    line-height: 1.6;
    color: var(--charcoal-light);
    border-left: 2px solid var(--nacre);
    padding-left: 18px;
    margin-bottom: 32px !important;
}

/* Something the reader must not skim past. */
.legal-callout {
    background: #fff;
    border: 1px solid #E4DBD1;
    border-left: 3px solid var(--caution);
    border-radius: 4px;
    padding: 16px 18px;
    margin: 0 0 20px;
}
.legal-callout p:last-child { margin-bottom: 0; }

.legal-doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 22px;
    font-size: 14.5px;
}
.legal-doc th {
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--nacre);
    font-weight: 600;
    padding: 0 14px 8px 0;
    border-bottom: 1px solid var(--charcoal);
}
.legal-doc td {
    padding: 11px 14px 11px 0;
    border-bottom: 1px solid #E4DBD1;
    vertical-align: top;
    line-height: 1.5;
}
.legal-table-scroll { overflow-x: auto; }

.legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 64px;
    padding-top: 22px;
    border-top: 1px solid #E4DBD1;
}
.legal-nav-link {
    font-size: 13px;
    color: var(--charcoal-light);
    text-decoration: none;
}
.legal-nav-link:hover { color: var(--nacre); }
.legal-nav-link.current { color: var(--nacre); font-weight: 600; }

.legal-footer {
    margin-top: 26px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--charcoal-light);
}
.legal-footer p { margin: 0 0 4px; }

/* ── Terms acceptance ─────────────────────────────────────────────────────
   Shown on first use and after a version bump. Deliberately plain: this is a
   moment to read, not a moment to be sold to. */
.legal-accept-intro {
    font-size: 14px;
    line-height: 1.6;
    color: var(--charcoal-light);
    margin: 0 0 18px;
}

.legal-accept-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    border-top: 1px solid #E4DBD1;
}
.legal-accept-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #E4DBD1;
}
.legal-accept-list a { color: var(--nacre); font-size: 14.5px; }
.legal-accept-list span {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.legal-accept-note {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--charcoal-light);
    margin: 0 0 20px;
}

.legal-accept-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13.5px;
    line-height: 1.55;
    cursor: pointer;
}
.legal-accept-check input { margin-top: 3px; flex-shrink: 0; }

/* The checkbox and the button were touching — the tick is a decision, so it
   needs room before the action that depends on it. */
.legal-accept-check { margin-bottom: 22px; }

.legal-accept-error {
    font-size: 12.5px;
    color: var(--do-not-proceed);
    margin: -12px 0 16px;
}

.legal-accept-decline {
    margin-top: 18px;
    text-align: center;
}
.legal-accept-decline button {
    background: none;
    border: 0;
    padding: 0;
    font-size: 12.5px;
    color: var(--muted);
    cursor: pointer;
    text-decoration: underline;
}
.legal-accept-decline button:hover { color: var(--charcoal); }

/* Help text under a field that needs explaining rather than just labelling. */
.field-help {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted);
    margin-top: 6px;
}

/* Legal links, present on every screen. Quiet, but never absent — a notice
   nobody can find is not a notice. */
.app-legal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
    padding: 28px 24px 32px;
    font-size: 11.5px;
}
.app-legal-footer a {
    color: var(--muted);
    text-decoration: none;
}
.app-legal-footer a:hover { color: var(--nacre); text-decoration: underline; }


/* Menu links, matching the sign-out button's metrics so the dropdown reads as
   one list rather than a button with links stuck above it. */
.nav-menu-link {
    display: block;
    color: var(--charcoal);
    font-size: 13px;
    text-decoration: none;
    padding: 4px 0;
}
.nav-menu-link:hover { color: var(--nacre); }

/* ── Settings page ────────────────────────────────────────────────────────
   Uses the product's own shell and panels. The Breeze scaffold this replaces
   rendered through a compiled Tailwind bundle with a Laravel logo and a
   "Dashboard" link — visibly a different product from the one around it. */
.settings-page {
    max-width: 680px;
    padding-bottom: 40px;
}

.settings-back {
    display: inline-block;
    font-size: 12.5px;
    color: var(--muted);
    text-decoration: none;
    margin: 24px 0 18px;
}
.settings-back:hover { color: var(--nacre); }

.settings-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--charcoal);
    margin: 0 0 22px;
}

.settings-page .panel { margin-bottom: 18px; }

.settings-intro {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--charcoal-light);
    margin: 0 0 18px;
}

.settings-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
}

.settings-saved { font-size: 12.5px; color: var(--proceed); }

.settings-error {
    font-size: 12.5px;
    color: var(--do-not-proceed);
    margin-top: 6px;
}

/* Closing an account destroys dossiers and the images in them, so the panel
   says so before the button does. */
.panel-danger { border-color: rgba(180, 84, 62, 0.35); }
.panel-danger .panel-title { color: var(--do-not-proceed); }

.btn-danger {
    background: var(--do-not-proceed);
    color: #fff;
    border: 1px solid var(--do-not-proceed);
}
.btn-danger:hover { background: #9d4736; border-color: #9d4736; }