/* ================================================================
   SPECTRAL FORENSICS — Audio Analysis Workstation
   Magna Historia — Forensic-grade audio intelligence interface
   ================================================================
   Material: Hardened obsidian / defense-contractor instrument panel
   Palette: Gold-on-near-black, forensic red/green/amber accents
   Design: SpaceX mission control + Palantir Gotham + FBI audio lab
   ================================================================ */

/* ── CSS Custom Properties ─────────────────────────────── */
:root {
    --sf-bg: #0a0a0f;
    --sf-bg-deep: #06060b;
    --sf-panel: rgba(20, 20, 30, 0.85);
    --sf-panel-solid: #14141e;
    --sf-panel-hover: rgba(25, 25, 38, 0.92);
    --sf-text: #e8e0d0;
    --sf-text-dim: #9a927e;
    --sf-text-muted: #5a5548;
    --sf-gold: #c8a84e;
    --sf-gold-dim: rgba(200, 168, 78, 0.5);
    --sf-gold-glow: rgba(200, 168, 78, 0.25);
    --sf-gold-faint: rgba(200, 168, 78, 0.08);
    --sf-border: rgba(200, 168, 78, 0.15);
    --sf-border-hover: rgba(200, 168, 78, 0.35);
    --sf-red: #ff3355;
    --sf-red-dim: rgba(255, 51, 85, 0.4);
    --sf-red-glow: rgba(255, 51, 85, 0.15);
    --sf-green: #00ff88;
    --sf-green-dim: rgba(0, 255, 136, 0.4);
    --sf-green-glow: rgba(0, 255, 136, 0.15);
    --sf-amber: #ffcc00;
    --sf-amber-dim: rgba(255, 204, 0, 0.4);
    --sf-amber-glow: rgba(255, 204, 0, 0.15);
    --sf-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --sf-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    --sf-topbar-h: 50px;
    --sf-radius: 3px;
    --sf-transition: 200ms ease;
}


/* ── Base Resets ───────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--sf-bg);
    color: var(--sf-text);
    font-family: var(--sf-sans);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Atmospheric gradient overlay on body */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 120% 60% at 50% 0%, rgba(200, 168, 78, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse 80% 80% at 20% 80%, rgba(255, 51, 85, 0.015) 0%, transparent 50%),
        radial-gradient(ellipse 80% 80% at 80% 70%, rgba(0, 255, 136, 0.01) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

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


/* ================================================================
   1. ENTRY OVERLAY — Cinematic intro sequence
   ================================================================ */
#entry-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 600ms ease;
}

#entry-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Gold horizontal line — starts thin, expands */
#entry-line,
.entry-line {
    width: 0;
    height: 1px;
    background: var(--sf-gold);
    margin-bottom: 40px;
    transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 12px var(--sf-gold-glow), 0 0 40px var(--sf-gold-faint);
}

#entry-line.expand,
.entry-line.expand {
    width: min(80vw, 600px);
}

/* Entry text lines */
.entry-text {
    text-align: center;
    max-width: 600px;
    padding: 0 24px;
}

.entry-text .line {
    font-family: var(--sf-mono);
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sf-text-dim);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 800ms ease, transform 800ms ease;
    margin-bottom: 12px;
    line-height: 1.8;
}

.entry-text .line.visible {
    opacity: 1;
    transform: translateY(0);
}

.entry-text .line.highlight {
    color: var(--sf-gold);
    font-size: 14px;
    font-weight: 600;
}

.entry-text .line.type-cursor::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 14px;
    background: var(--sf-gold);
    margin-left: 4px;
    vertical-align: -1px;
    animation: type-cursor 800ms step-end infinite;
}

/* PLAY RECORDING button */
.entry-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    padding: 14px 36px;
    background: transparent;
    border: 1px solid var(--sf-gold);
    color: var(--sf-gold);
    font-family: var(--sf-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--sf-transition);
    opacity: 0;
    transform: translateY(12px);
    animation: none;
}

.entry-play-btn.visible {
    opacity: 1;
    transform: translateY(0);
    animation: pulse-gold 2.5s ease-in-out infinite;
}

.entry-play-btn:hover {
    background: rgba(200, 168, 78, 0.1);
    border-color: var(--sf-gold);
    box-shadow: 0 0 30px var(--sf-gold-glow), inset 0 0 20px var(--sf-gold-faint);
    transform: translateY(-1px);
}

.entry-play-btn:active {
    transform: translateY(0);
    background: rgba(200, 168, 78, 0.15);
}

.entry-play-btn .play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--sf-gold);
}

/* Skip button */
.entry-skip-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    color: var(--sf-text-muted);
    font-family: var(--sf-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 8px 12px;
    transition: color var(--sf-transition);
}

.entry-skip-btn:hover {
    color: var(--sf-text-dim);
}


/* ================================================================
   2. TOP BAR — Fixed command strip
   ================================================================ */
.top-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--sf-topbar-h);
    padding: 0 20px;
    background: linear-gradient(180deg, rgba(10, 10, 15, 0.98) 0%, rgba(10, 10, 15, 0.92) 100%);
    border-bottom: 1px solid var(--sf-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.top-bar-title {
    font-family: var(--sf-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sf-gold);
    white-space: nowrap;
}

.top-bar-title .separator {
    color: var(--sf-text-muted);
    margin: 0 10px;
    font-weight: 300;
}

.top-bar-title .subtitle {
    color: var(--sf-text-dim);
    font-weight: 400;
    letter-spacing: 0.15em;
    font-size: 11px;
}

/* Transport controls */
.transport-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.transport-btn {
    background: none;
    border: 1px solid var(--sf-border);
    color: var(--sf-text-dim);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--sf-transition);
    border-radius: var(--sf-radius);
}

.transport-btn:hover {
    border-color: var(--sf-gold-dim);
    color: var(--sf-gold);
    box-shadow: 0 0 8px var(--sf-gold-faint);
}

.transport-btn.active {
    border-color: var(--sf-gold);
    color: var(--sf-gold);
    background: rgba(200, 168, 78, 0.08);
}

.transport-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.transport-time {
    font-family: var(--sf-mono);
    font-size: 13px;
    color: var(--sf-text-dim);
    letter-spacing: 0.05em;
    min-width: 100px;
    text-align: right;
}

.transport-time .current {
    color: var(--sf-text);
}

.transport-time .separator {
    color: var(--sf-text-muted);
    margin: 0 2px;
}


/* ================================================================
   3. MAIN CONTENT WRAPPER
   ================================================================ */
.sf-main {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
    padding: 16px 24px 60px;
}


/* ================================================================
   4. SPECTROGRAM VIEWER
   ================================================================ */
.spectrogram-container {
    position: relative;
    width: 100%;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
    background: var(--sf-bg-deep);
    margin-bottom: 2px;
}

.spectrogram-container img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 300px;
    object-fit: fill;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.spectrogram-container canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Scanline overlay */
.spectrogram-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    pointer-events: none;
    z-index: 2;
    animation: scanline 8s linear infinite;
}

/* Spectrogram label overlay (top-left) */
.spectrogram-label {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 3;
    font-family: var(--sf-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sf-gold-dim);
    background: rgba(10, 10, 15, 0.8);
    padding: 4px 10px;
    border: 1px solid var(--sf-gold-faint);
    backdrop-filter: blur(4px);
}

/* Frequency axis label (left side) */
.spectrogram-y-label {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    z-index: 3;
    font-family: var(--sf-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
    white-space: nowrap;
}

/* Time axis label (bottom) */
.spectrogram-x-label {
    position: absolute;
    bottom: 6px;
    right: 12px;
    z-index: 3;
    font-family: var(--sf-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
}


/* ================================================================
   5. WAVEFORM
   ================================================================ */
.waveform-container {
    position: relative;
    width: 100%;
    height: 80px;
    border: 1px solid var(--sf-border);
    border-top: none;
    border-radius: 0 0 var(--sf-radius) var(--sf-radius);
    overflow: hidden;
    background: var(--sf-bg-deep);
    cursor: pointer;
    margin-bottom: 16px;
}

.waveform-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: opacity var(--sf-transition);
}

.waveform-container:hover img {
    opacity: 1;
}

.waveform-container canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Waveform time markers */
.waveform-markers {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 16px;
    display: flex;
    justify-content: space-between;
    padding: 0 4px;
    font-family: var(--sf-mono);
    font-size: 8px;
    color: var(--sf-text-muted);
    letter-spacing: 0.05em;
    pointer-events: none;
}


/* ================================================================
   6. PLAYHEAD — Vertical scrub indicator
   ================================================================ */
.playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #fff;
    z-index: 10;
    pointer-events: none;
    transform: translateX(0);
    will-change: transform;
    box-shadow:
        0 0 6px rgba(255, 255, 255, 0.6),
        0 0 12px var(--sf-gold-glow),
        0 0 20px var(--sf-gold-faint);
}

.playhead::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: var(--sf-gold);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--sf-gold-dim);
}

.playhead::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(200, 168, 78, 0.6) 0%,
        rgba(255, 255, 255, 0.3) 20%,
        rgba(255, 255, 255, 0.15) 80%,
        rgba(200, 168, 78, 0.3) 100%
    );
}


/* ================================================================
   7. SEGMENT HIGHLIGHTS — Colored regions on spectrogram
   ================================================================ */
.segment-region {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    cursor: pointer;
    transition: opacity var(--sf-transition);
    opacity: 0.25;
    pointer-events: all;
}

.segment-region:hover {
    opacity: 0.45;
}

.segment-region.active {
    opacity: 0.4;
}

.segment-region.human {
    background: linear-gradient(180deg, var(--sf-green-glow) 0%, transparent 100%);
    border-left: 1px solid var(--sf-green-dim);
    border-right: 1px solid var(--sf-green-dim);
}

.segment-region.nonhuman {
    background: linear-gradient(180deg, var(--sf-red-glow) 0%, transparent 100%);
    border-left: 1px solid var(--sf-red-dim);
    border-right: 1px solid var(--sf-red-dim);
}

.segment-region.volley {
    background: linear-gradient(180deg, var(--sf-amber-glow) 0%, transparent 100%);
    border-left: 1px solid var(--sf-amber-dim);
    border-right: 1px solid var(--sf-amber-dim);
}

/* Segment label tooltip */
.segment-region .segment-tag {
    position: absolute;
    top: 4px;
    left: 4px;
    font-family: var(--sf-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 6px;
    background: rgba(10, 10, 15, 0.85);
    border-radius: 2px;
    white-space: nowrap;
    pointer-events: none;
}

.segment-region.human .segment-tag { color: var(--sf-green); }
.segment-region.nonhuman .segment-tag { color: var(--sf-red); }
.segment-region.volley .segment-tag { color: var(--sf-amber); }


/* ================================================================
   8. TOGGLE BAR — View switcher
   ================================================================ */
.toggle-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
    flex-wrap: wrap;
}

.toggle-btn {
    font-family: var(--sf-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sf-gold);
    background: transparent;
    border: 1px solid var(--sf-border);
    padding: 8px 16px;
    cursor: pointer;
    transition: all var(--sf-transition);
    white-space: nowrap;
    border-radius: var(--sf-radius);
    user-select: none;
}

.toggle-btn:hover {
    border-color: var(--sf-gold-dim);
    background: rgba(200, 168, 78, 0.05);
    box-shadow: 0 0 12px var(--sf-gold-faint);
}

.toggle-btn.active {
    background: var(--sf-gold);
    color: #0a0a0f;
    border-color: var(--sf-gold);
    font-weight: 600;
    box-shadow: 0 0 16px var(--sf-gold-glow);
}

.toggle-btn.active:hover {
    background: #d4b85e;
    box-shadow: 0 0 20px var(--sf-gold-glow);
}

/* Toggle bar divider */
.toggle-divider {
    width: 1px;
    height: 20px;
    background: var(--sf-border);
    margin: 0 4px;
}


/* ================================================================
   9. BOTTOM PANELS — Analysis readouts
   ================================================================ */
.panels-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

.panel {
    background: var(--sf-panel);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 300ms ease;
}

.panel:hover {
    border-color: var(--sf-border-hover);
}

.panel-title {
    font-family: var(--sf-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sf-gold);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sf-gold-faint);
}

.panel-subtitle {
    font-family: var(--sf-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
    margin-bottom: 12px;
}


/* ================================================================
   10. SEGMENT DETAIL PANEL
   ================================================================ */
.segment-detail {
    min-height: 280px;
}

.segment-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.segment-id {
    font-family: var(--sf-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--sf-text);
    letter-spacing: 0.05em;
}

/* Classification badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-family: var(--sf-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 2px;
    line-height: 1;
}

.badge-human {
    background: var(--sf-green);
    color: #0a0a0f;
    box-shadow: 0 0 8px var(--sf-green-glow);
}

.badge-nonhuman {
    background: var(--sf-red);
    color: #fff;
    box-shadow: 0 0 8px var(--sf-red-glow);
}

.badge-volley {
    background: var(--sf-amber);
    color: #0a0a0f;
    box-shadow: 0 0 8px var(--sf-amber-glow);
}

.badge-unknown {
    background: var(--sf-text-muted);
    color: var(--sf-text);
}

/* Segment description */
.segment-description {
    font-size: 14px;
    line-height: 1.65;
    color: var(--sf-text-dim);
    margin-bottom: 20px;
    font-style: italic;
}

/* Metric rows */
.metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(200, 168, 78, 0.05);
}

.metric-row:last-child {
    border-bottom: none;
}

.metric-label {
    font-family: var(--sf-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
}

.metric-value {
    font-family: var(--sf-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-text);
    letter-spacing: 0.03em;
}

.metric-value.human { color: var(--sf-green); }
.metric-value.nonhuman { color: var(--sf-red); }
.metric-value.volley { color: var(--sf-amber); }
.metric-value.warning { color: var(--sf-amber); }
.metric-value.danger { color: var(--sf-red); }
.metric-value.safe { color: var(--sf-green); }

/* HNR (Harmonics-to-Noise Ratio) meter */
.hnr-meter {
    width: 100%;
    height: 12px;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(200, 168, 78, 0.08);
}

.hnr-meter-fill {
    position: absolute;
    inset: 0;
    display: flex;
}

.hnr-zone {
    height: 100%;
    transition: opacity var(--sf-transition);
}

.hnr-zone-green {
    flex: 0 0 40%;
    background: linear-gradient(90deg, var(--sf-green-glow), var(--sf-green-dim));
}

.hnr-zone-yellow {
    flex: 0 0 30%;
    background: linear-gradient(90deg, var(--sf-amber-glow), var(--sf-amber-dim));
}

.hnr-zone-red {
    flex: 0 0 30%;
    background: linear-gradient(90deg, var(--sf-red-glow), var(--sf-red-dim));
}

.hnr-indicator {
    position: absolute;
    top: -3px;
    width: 6px;
    height: 18px;
    background: #fff;
    border-radius: 3px;
    transform: translateX(-50%);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    transition: left 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}

.hnr-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
}

.hnr-label {
    font-family: var(--sf-mono);
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
}

/* Formant bars */
.formant-bars {
    margin-top: 12px;
}

.formant-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.formant-label {
    font-family: var(--sf-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--sf-text-dim);
    width: 24px;
    flex-shrink: 0;
    text-align: right;
}

.formant-track {
    flex: 1;
    height: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 2px;
    position: relative;
    overflow: visible;
    border: 1px solid rgba(200, 168, 78, 0.06);
}

/* Human reference range — dashed outline */
.formant-reference {
    position: absolute;
    top: -2px;
    height: 14px;
    border: 1px dashed rgba(0, 255, 136, 0.3);
    border-radius: 2px;
    pointer-events: none;
}

/* Actual measured formant value */
.formant-bar {
    position: absolute;
    top: 1px;
    height: 8px;
    border-radius: 1px;
    transition: width 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                left 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.formant-bar.human {
    background: linear-gradient(90deg, var(--sf-green-dim), var(--sf-green));
    box-shadow: 0 0 4px var(--sf-green-glow);
}

.formant-bar.nonhuman {
    background: linear-gradient(90deg, var(--sf-red-dim), var(--sf-red));
    box-shadow: 0 0 4px var(--sf-red-glow);
}

.formant-bar.volley {
    background: linear-gradient(90deg, var(--sf-amber-dim), var(--sf-amber));
    box-shadow: 0 0 4px var(--sf-amber-glow);
}

.formant-value {
    font-family: var(--sf-mono);
    font-size: 9px;
    color: var(--sf-text-muted);
    width: 44px;
    flex-shrink: 0;
    text-align: right;
    letter-spacing: 0.03em;
}


/* ================================================================
   11. FORENSIC COMPARISON PANEL
   ================================================================ */
.forensic-comparison {
    min-height: 280px;
}

/* Stat comparison table */
.stat-table {
    width: 100%;
    border-collapse: collapse;
}

.stat-table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 0.5fr;
    gap: 8px;
    padding: 6px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--sf-border);
}

.stat-table-header span {
    font-family: var(--sf-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
}

.stat-table-header span:nth-child(2) { color: var(--sf-green-dim); text-align: right; }
.stat-table-header span:nth-child(3) { color: var(--sf-red-dim); text-align: right; }
.stat-table-header span:last-child { text-align: center; }

.stat-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 0.5fr;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(200, 168, 78, 0.04);
    align-items: center;
    transition: background var(--sf-transition);
}

.stat-row:hover {
    background: rgba(200, 168, 78, 0.02);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-name {
    font-family: var(--sf-mono);
    font-size: 11px;
    color: var(--sf-text-dim);
    letter-spacing: 0.03em;
}

.stat-human {
    font-family: var(--sf-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-green);
    text-align: right;
}

.stat-nonhuman {
    font-family: var(--sf-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-red);
    text-align: right;
}

.stat-significance {
    font-family: var(--sf-mono);
    font-size: 12px;
    text-align: center;
    color: var(--sf-amber);
    letter-spacing: -1px;
}

/* Size estimation silhouettes */
.size-estimation {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--sf-gold-faint);
}

.size-estimation-title {
    font-family: var(--sf-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
    margin-bottom: 12px;
}

.silhouette-row {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    padding: 12px 0;
}

.silhouette {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.silhouette-bar {
    width: 24px;
    border-radius: 12px 12px 2px 2px;
    transition: height 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.silhouette-bar.human {
    background: linear-gradient(180deg, var(--sf-green), var(--sf-green-dim));
    box-shadow: 0 0 8px var(--sf-green-glow);
}

.silhouette-bar.nonhuman {
    background: linear-gradient(180deg, var(--sf-red), var(--sf-red-dim));
    box-shadow: 0 0 8px var(--sf-red-glow);
}

.silhouette-label {
    font-family: var(--sf-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
}

.silhouette-value {
    font-family: var(--sf-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-text);
}

/* Speed alteration verdict */
.verdict-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--sf-gold-faint);
}

.verdict-label {
    font-family: var(--sf-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
    margin-bottom: 8px;
}

.verdict-text {
    font-family: var(--sf-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.verdict-text.confirmed { color: var(--sf-red); }
.verdict-text.negative { color: var(--sf-green); }
.verdict-text.inconclusive { color: var(--sf-amber); }

/* Creature count — dot cluster */
.creature-count {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--sf-gold-faint);
}

.creature-count-title {
    font-family: var(--sf-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
    margin-bottom: 10px;
}

.dot-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transition: transform var(--sf-transition), box-shadow var(--sf-transition);
}

.dot:hover {
    transform: scale(1.3);
}

.dot.human {
    background: var(--sf-green);
    box-shadow: 0 0 6px var(--sf-green-glow);
}

.dot.nonhuman {
    background: var(--sf-red);
    box-shadow: 0 0 6px var(--sf-red-glow);
}

.dot.unknown {
    background: var(--sf-text-muted);
    box-shadow: 0 0 4px rgba(90, 85, 72, 0.3);
}

.dot-legend {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.dot-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sf-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
}

.dot-legend-item .dot {
    width: 8px;
    height: 8px;
}


/* ================================================================
   12. NARRATIVE SECTION — Written analysis
   ================================================================ */
.narrative {
    max-width: 800px;
    margin: 48px auto 0;
    padding: 0 20px;
}

.narrative-rule {
    width: 60px;
    height: 1px;
    background: var(--sf-gold);
    margin: 0 auto 32px;
    box-shadow: 0 0 12px var(--sf-gold-glow);
}

.narrative h2,
.narrative-heading {
    font-family: var(--sf-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sf-gold);
    margin-bottom: 20px;
    margin-top: 40px;
}

.narrative h2:first-child,
.narrative-heading:first-child {
    margin-top: 0;
}

.narrative h3 {
    font-family: var(--sf-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sf-text-dim);
    margin-bottom: 12px;
    margin-top: 28px;
}

.narrative p,
.narrative-text {
    font-size: 15px;
    line-height: 1.75;
    color: #b0a890;
    margin-bottom: 16px;
}

.narrative strong {
    color: var(--sf-text);
    font-weight: 600;
}

.narrative em {
    color: var(--sf-gold-dim);
    font-style: italic;
}

.narrative a {
    color: var(--sf-gold);
    text-decoration: none;
    border-bottom: 1px solid var(--sf-gold-faint);
    transition: border-color var(--sf-transition), color var(--sf-transition);
}

.narrative a:hover {
    border-color: var(--sf-gold);
    color: #d4b85e;
}

/* Blockquotes */
.narrative blockquote {
    margin: 20px 0;
    padding: 16px 20px;
    border-left: 2px solid var(--sf-gold);
    background: rgba(200, 168, 78, 0.03);
    font-style: italic;
    color: var(--sf-text-dim);
    line-height: 1.7;
}

.narrative blockquote cite {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-family: var(--sf-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--sf-text-muted);
}

/* Lists in narrative */
.narrative ul,
.narrative ol {
    margin: 12px 0 16px 24px;
    color: #b0a890;
}

.narrative li {
    margin-bottom: 6px;
    line-height: 1.65;
}

.narrative ul li::marker {
    color: var(--sf-gold-dim);
}

/* Code / technical callouts */
.narrative code {
    font-family: var(--sf-mono);
    font-size: 13px;
    background: rgba(200, 168, 78, 0.06);
    border: 1px solid var(--sf-gold-faint);
    padding: 2px 6px;
    border-radius: 2px;
    color: var(--sf-gold);
}

/* Inline data highlight */
.data-highlight {
    font-family: var(--sf-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-text);
    background: rgba(200, 168, 78, 0.05);
    padding: 1px 6px;
    border-radius: 2px;
}

.data-highlight.red { color: var(--sf-red); }
.data-highlight.green { color: var(--sf-green); }
.data-highlight.amber { color: var(--sf-amber); }


/* ================================================================
   13. SUMMARY / FINDING CARDS
   ================================================================ */
.findings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.finding-card {
    background: var(--sf-panel);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 16px;
    transition: border-color 300ms ease, transform 200ms ease;
}

.finding-card:hover {
    border-color: var(--sf-border-hover);
    transform: translateY(-1px);
}

.finding-card .finding-number {
    font-family: var(--sf-mono);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
}

.finding-card .finding-number.red { color: var(--sf-red); }
.finding-card .finding-number.green { color: var(--sf-green); }
.finding-card .finding-number.amber { color: var(--sf-amber); }
.finding-card .finding-number.gold { color: var(--sf-gold); }

.finding-card .finding-label {
    font-family: var(--sf-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
}


/* ================================================================
   14. CLASSIFICATION LEGEND
   ================================================================ */
.classification-legend {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-swatch.human { background: var(--sf-green); box-shadow: 0 0 4px var(--sf-green-glow); }
.legend-swatch.nonhuman { background: var(--sf-red); box-shadow: 0 0 4px var(--sf-red-glow); }
.legend-swatch.volley { background: var(--sf-amber); box-shadow: 0 0 4px var(--sf-amber-glow); }
.legend-swatch.unknown { background: var(--sf-text-muted); }

.legend-text {
    font-family: var(--sf-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sf-text-dim);
}


/* ================================================================
   15. LOADING / EMPTY STATES
   ================================================================ */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--sf-text-muted);
}

.loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--sf-gold-faint);
    border-top-color: var(--sf-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
}

.empty-state {
    text-align: center;
    padding: 32px 20px;
    font-family: var(--sf-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
}

.empty-state .empty-icon {
    font-size: 24px;
    margin-bottom: 8px;
    opacity: 0.4;
}


/* ================================================================
   16. SCROLLBAR
   ================================================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(200, 168, 78, 0.15);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 168, 78, 0.3);
}


/* ================================================================
   17. ANIMATIONS
   ================================================================ */

/* Gold pulse glow for play button */
@keyframes pulse-gold {
    0%, 100% {
        box-shadow: 0 0 8px rgba(200, 168, 78, 0.15), 0 0 20px rgba(200, 168, 78, 0.05);
    }
    50% {
        box-shadow: 0 0 16px rgba(200, 168, 78, 0.35), 0 0 40px rgba(200, 168, 78, 0.12);
    }
}

/* Scanline drift */
@keyframes scanline {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100px;
    }
}

/* Typing cursor blink */
@keyframes type-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Loading spinner */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Fade in up — for staggered panel reveals */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 600ms ease forwards;
    opacity: 0;
}

.fade-in-up.delay-1 { animation-delay: 100ms; }
.fade-in-up.delay-2 { animation-delay: 200ms; }
.fade-in-up.delay-3 { animation-delay: 300ms; }
.fade-in-up.delay-4 { animation-delay: 400ms; }

/* Horizontal reveal for entry line */
@keyframes lineReveal {
    from { width: 0; }
    to { width: min(80vw, 600px); }
}

/* Glow pulse for active segment */
@keyframes segment-glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.5; }
}

.segment-region.active {
    animation: segment-glow 2s ease-in-out infinite;
}

/* Data value flash — when metric updates */
@keyframes value-flash {
    0% { color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, 0.4); }
    100% { color: inherit; text-shadow: none; }
}

.metric-value.flash {
    animation: value-flash 400ms ease;
}


/* ================================================================
   18. UTILITY CLASSES
   ================================================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.text-gold { color: var(--sf-gold); }
.text-red { color: var(--sf-red); }
.text-green { color: var(--sf-green); }
.text-amber { color: var(--sf-amber); }
.text-dim { color: var(--sf-text-dim); }
.text-muted { color: var(--sf-text-muted); }
.text-mono { font-family: var(--sf-mono); }

.border-gold { border-color: var(--sf-gold) !important; }
.border-red { border-color: var(--sf-red) !important; }
.border-green { border-color: var(--sf-green) !important; }

.glow-gold { box-shadow: 0 0 12px var(--sf-gold-glow); }
.glow-red { box-shadow: 0 0 12px var(--sf-red-glow); }
.glow-green { box-shadow: 0 0 12px var(--sf-green-glow); }


/* ================================================================
   19. RESPONSIVE — Tablet
   ================================================================ */
@media (max-width: 1024px) {
    .panels-container {
        grid-template-columns: 1fr;
    }

    .sf-main {
        padding: 12px 16px 48px;
    }

    .top-bar-title .subtitle {
        display: none;
    }

    .narrative {
        padding: 0 16px;
    }

    .stat-table-header,
    .stat-row {
        grid-template-columns: 1.5fr 1fr 1fr 0.5fr;
        font-size: 10px;
    }
}


/* ================================================================
   20. RESPONSIVE — Mobile
   ================================================================ */
@media (max-width: 768px) {
    :root {
        --sf-topbar-h: 44px;
    }

    body {
        font-size: 14px;
    }

    .top-bar {
        padding: 0 12px;
    }

    .top-bar-title {
        font-size: 11px;
        letter-spacing: 0.2em;
    }

    .top-bar-title .separator,
    .top-bar-title .subtitle {
        display: none;
    }

    .transport-time {
        font-size: 11px;
        min-width: 80px;
    }

    .sf-main {
        padding: 10px 12px 40px;
    }

    .spectrogram-container img {
        min-height: 150px;
    }

    .waveform-container {
        height: 60px;
    }

    /* Horizontal scroll toggles */
    .toggle-bar {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 10px 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .toggle-bar::-webkit-scrollbar {
        display: none;
    }

    .toggle-btn {
        font-size: 10px;
        padding: 6px 12px;
        flex-shrink: 0;
    }

    .panel {
        padding: 16px;
    }

    .panel-title {
        font-size: 10px;
        margin-bottom: 12px;
    }

    .segment-detail,
    .forensic-comparison {
        min-height: auto;
    }

    .stat-table-header,
    .stat-row {
        grid-template-columns: 1.2fr 1fr 1fr 0.4fr;
        gap: 4px;
    }

    .stat-name { font-size: 10px; }
    .stat-human, .stat-nonhuman { font-size: 11px; }

    .silhouette-row {
        gap: 16px;
    }

    .findings-grid {
        grid-template-columns: 1fr 1fr;
    }

    .narrative {
        padding: 0 12px;
        margin-top: 36px;
    }

    .narrative h2,
    .narrative-heading {
        font-size: 12px;
        letter-spacing: 0.15em;
    }

    .narrative p,
    .narrative-text {
        font-size: 14px;
    }

    .narrative blockquote {
        padding: 12px 16px;
        margin: 16px 0;
    }

    /* Entry overlay mobile */
    .entry-play-btn {
        padding: 12px 28px;
        font-size: 11px;
    }

    .entry-text .line {
        font-size: 11px;
        letter-spacing: 0.1em;
    }

    .classification-legend {
        gap: 12px;
    }
}


/* ================================================================
   21. RESPONSIVE — Small phone
   ================================================================ */
@media (max-width: 480px) {
    .top-bar-title {
        font-size: 10px;
        letter-spacing: 0.15em;
    }

    .transport-controls {
        gap: 8px;
    }

    .transport-btn {
        width: 28px;
        height: 28px;
    }

    .transport-time {
        font-size: 10px;
        min-width: 70px;
    }

    .spectrogram-container img {
        min-height: 120px;
    }

    .waveform-container {
        height: 48px;
    }

    .toggle-btn {
        font-size: 9px;
        padding: 5px 10px;
    }

    .panel {
        padding: 12px;
    }

    .metric-row {
        flex-wrap: wrap;
        gap: 2px;
    }

    .metric-label {
        font-size: 10px;
    }

    .metric-value {
        font-size: 12px;
    }

    .formant-row {
        gap: 6px;
    }

    .formant-label {
        font-size: 9px;
        width: 20px;
    }

    .formant-value {
        font-size: 8px;
        width: 36px;
    }

    .findings-grid {
        grid-template-columns: 1fr;
    }

    .finding-card .finding-number {
        font-size: 26px;
    }

    .dot-cluster {
        gap: 4px;
    }

    .dot {
        width: 10px;
        height: 10px;
    }

    .narrative p,
    .narrative-text {
        font-size: 13px;
        line-height: 1.7;
    }

    .entry-text .line {
        font-size: 10px;
        margin-bottom: 8px;
    }
}


/* ================================================================
   22. SF-PREFIXED CLASS BRIDGE
   Matches the sf- class names used in the HTML to the design tokens.
   ================================================================ */

/* ── Entry Overlay (sf-) ────────────────────────────────── */
#sf-entry-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 600ms ease;
}

#sf-entry-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

.sf-entry-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, transparent 0%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
}

.sf-entry-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.01) 2px, rgba(255,255,255,0.01) 4px);
    pointer-events: none;
}

.sf-entry-rule {
    width: 0;
    height: 1px;
    background: var(--sf-gold);
    margin-bottom: 40px;
    transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 12px var(--sf-gold-glow), 0 0 40px var(--sf-gold-faint);
}

.sf-entry-rule.expand {
    width: min(80vw, 600px);
}

.sf-entry-text-block {
    text-align: center;
    max-width: 600px;
    padding: 0 24px;
}

.sf-entry-line {
    font-family: var(--sf-mono);
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sf-text-dim);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 800ms ease, transform 800ms ease;
    margin-bottom: 12px;
    line-height: 1.8;
}

.sf-entry-line.visible {
    opacity: 1;
    transform: translateY(0);
}

.sf-entry-line--title {
    color: var(--sf-gold);
    font-size: 14px;
    font-weight: 600;
}

.sf-entry-cta {
    margin-top: 32px;
}

.sf-entry-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: transparent;
    border: 1px solid var(--sf-gold);
    color: var(--sf-gold);
    font-family: var(--sf-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--sf-transition);
    opacity: 0;
    transform: translateY(12px);
}

.sf-entry-btn.visible {
    opacity: 1;
    transform: translateY(0);
    animation: pulse-gold 2.5s ease-in-out infinite;
}

.sf-entry-btn:hover {
    background: rgba(200, 168, 78, 0.1);
    border-color: var(--sf-gold);
    box-shadow: 0 0 30px var(--sf-gold-glow), inset 0 0 20px var(--sf-gold-faint);
}

.sf-entry-btn-icon {
    font-size: 14px;
}

.sf-entry-skip {
    position: absolute;
    top: 24px;
    right: 24px;
}

.sf-entry-skip-btn {
    background: none;
    border: none;
    color: var(--sf-text-muted);
    font-family: var(--sf-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 8px 12px;
    transition: color var(--sf-transition);
}

.sf-entry-skip-btn:hover {
    color: var(--sf-text-dim);
}


/* ── Top Bar (sf-) ──────────────────────────────────────── */
.sf-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--sf-topbar-h);
    padding: 0 20px;
    background: linear-gradient(180deg, rgba(10, 10, 15, 0.98) 0%, rgba(10, 10, 15, 0.92) 100%);
    border-bottom: 1px solid var(--sf-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.sf-topbar-left,
.sf-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sf-topbar-label {
    font-family: var(--sf-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sf-gold);
    white-space: nowrap;
}

.sf-topbar-sep {
    color: var(--sf-text-muted);
    font-weight: 300;
    margin: 0 4px;
}

.sf-topbar-sublabel {
    color: var(--sf-text-dim);
    font-family: var(--sf-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.sf-topbar-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sf-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sf-green);
    box-shadow: 0 0 6px var(--sf-green-glow);
}

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

.sf-topbar-duration {
    font-family: var(--sf-mono);
    font-size: 13px;
    color: var(--sf-text-dim);
    letter-spacing: 0.05em;
    min-width: 100px;
    text-align: right;
}


/* ── Spectrogram Section (sf-) ─────────────────────────── */
.sf-spectrogram-section {
    margin-bottom: 0;
}

.sf-spectrogram-container {
    position: relative;
    width: 100%;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius) var(--sf-radius) 0 0;
    overflow: hidden;
    background: var(--sf-bg-deep);
}

.sf-spectrogram-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    pointer-events: none;
    z-index: 2;
}

.sf-spectrogram-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: fill;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transition: opacity 200ms ease;
}

.sf-spectrogram-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sf-overlay-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.sf-segment-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sf-segment-markers .segment-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0.35;
    cursor: pointer;
    pointer-events: all;
    transition: opacity var(--sf-transition), box-shadow var(--sf-transition);
}

.sf-segment-markers .segment-marker[style*="#ff3355"] {
    opacity: 0.5;
    box-shadow: inset 0 0 12px rgba(255, 51, 85, 0.4), 0 0 8px rgba(255, 51, 85, 0.3);
    animation: pulse-nonhuman 3s ease-in-out infinite;
}

.sf-segment-markers .segment-marker[style*="#22c55e"] {
    opacity: 0.3;
}

.sf-segment-markers .segment-marker:hover {
    opacity: 0.65;
    box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.15), 0 0 12px rgba(255, 255, 255, 0.2);
}

.sf-segment-markers .segment-marker.selected {
    opacity: 0.7;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 0 16px rgba(255, 255, 255, 0.3);
}

@keyframes pulse-nonhuman {
    0%, 100% { opacity: 0.45; box-shadow: inset 0 0 12px rgba(255, 51, 85, 0.4), 0 0 8px rgba(255, 51, 85, 0.3); }
    50% { opacity: 0.6; box-shadow: inset 0 0 20px rgba(255, 51, 85, 0.6), 0 0 16px rgba(255, 51, 85, 0.5); }
}


/* ── Waveform Section (sf-) ────────────────────────────── */
.sf-waveform-section {
    margin-bottom: 0;
}

.sf-waveform-container {
    position: relative;
    width: 100%;
    height: 80px;
    border: 1px solid var(--sf-border);
    border-top: none;
    border-radius: 0 0 var(--sf-radius) var(--sf-radius);
    overflow: hidden;
    background: var(--sf-bg-deep);
    cursor: pointer;
}

.sf-waveform-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: opacity var(--sf-transition);
}

.sf-waveform-container:hover .sf-waveform-img {
    opacity: 1;
}

.sf-waveform-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


/* ── Toggle Bar (sf-) — PROMINENT, between waveform and panels ── */
.sf-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 0;
    margin: 16px 0;
    border-top: 1px solid var(--sf-border);
    border-bottom: 1px solid var(--sf-border);
    background: rgba(20, 20, 30, 0.5);
    flex-wrap: wrap;
    position: sticky;
    top: var(--sf-topbar-h);
    z-index: 50;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.sf-toggle-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.sf-toggle-divider {
    width: 1px;
    height: 20px;
    background: var(--sf-border);
    margin: 0 8px;
}

.sf-toggle {
    font-family: var(--sf-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sf-gold);
    background: transparent;
    border: 1px solid var(--sf-border);
    padding: 8px 16px;
    cursor: pointer;
    transition: all var(--sf-transition);
    white-space: nowrap;
    border-radius: var(--sf-radius);
    user-select: none;
}

.sf-toggle:hover {
    border-color: var(--sf-gold-dim);
    background: rgba(200, 168, 78, 0.05);
    box-shadow: 0 0 12px var(--sf-gold-faint);
}

.sf-toggle--active {
    background: var(--sf-gold);
    color: #0a0a0f;
    border-color: var(--sf-gold);
    font-weight: 600;
    box-shadow: 0 0 16px var(--sf-gold-glow);
}

.sf-toggle--active:hover {
    background: #d4b85e;
    box-shadow: 0 0 20px var(--sf-gold-glow);
}

.sf-toggle--overlay {
    color: var(--sf-text-dim);
    border-style: dashed;
}

.sf-toggle--overlay[aria-checked="true"] {
    color: var(--sf-gold);
    border-style: solid;
    background: rgba(200, 168, 78, 0.08);
}


/* ── Transport Controls (sf-) ──────────────────────────── */
.sf-transport {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 20px;
    margin-bottom: 16px;
}

.sf-transport-btn {
    background: none;
    border: 1px solid var(--sf-border);
    color: var(--sf-text-dim);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--sf-transition);
    border-radius: var(--sf-radius);
    font-size: 18px;
}

.sf-transport-btn:hover {
    border-color: var(--sf-gold-dim);
    color: var(--sf-gold);
    box-shadow: 0 0 12px var(--sf-gold-faint);
}

.sf-transport-play {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border-color: var(--sf-gold);
    color: var(--sf-gold);
    font-size: 22px;
    box-shadow: 0 0 12px var(--sf-gold-faint);
}

.sf-transport-play:hover {
    background: rgba(200, 168, 78, 0.1);
    box-shadow: 0 0 20px var(--sf-gold-glow);
}

.sf-transport-play.playing {
    background: rgba(200, 168, 78, 0.08);
    animation: pulse-gold 2.5s ease-in-out infinite;
}

.sf-transport-icon {
    line-height: 1;
}

.sf-transport-time {
    font-family: var(--sf-mono);
    font-size: 15px;
    color: var(--sf-text);
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 4px;
}

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

.sf-transport-segment-label {
    font-family: var(--sf-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
}

.sf-transport-vol {
    font-size: 16px;
}


/* ── Bottom Panels (sf-) ───────────────────────────────── */
.sf-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 0;
}

.sf-panel {
    background: var(--sf-panel);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 300ms ease;
    overflow-y: auto;
    max-height: 700px;
}

.sf-panel:hover {
    border-color: var(--sf-border-hover);
}

.sf-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sf-gold-faint);
}

.sf-panel-title {
    font-family: var(--sf-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sf-gold);
    margin: 0;
}

.sf-panel-badge {
    font-family: var(--sf-mono);
    font-size: 10px;
    color: var(--sf-text-muted);
}


/* ── Segment Detail (sf-) ──────────────────────────────── */
.sf-detail-empty {
    text-align: center;
    padding: 32px 20px;
    font-family: var(--sf-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--sf-text-muted);
}

.sf-detail-empty p {
    margin-bottom: 8px;
}

.sf-detail-hint {
    font-size: 10px;
    color: var(--sf-text-muted);
    opacity: 0.6;
}

.sf-detail-content .sf-detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid rgba(200, 168, 78, 0.05);
}

.sf-detail-content .sf-detail-row:last-child {
    border-bottom: none;
}

.sf-detail-label {
    font-family: var(--sf-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
    flex-shrink: 0;
    margin-right: 12px;
}

.sf-detail-value {
    font-family: var(--sf-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-text);
    text-align: right;
}

.sf-detail-value--desc {
    font-weight: 400;
    font-size: 12px;
    color: var(--sf-text-dim);
    text-align: right;
    line-height: 1.5;
}

.sf-detail-divider {
    height: 1px;
    background: var(--sf-gold-faint);
    margin: 12px 0;
}

.sf-detail-section-title {
    font-family: var(--sf-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sf-gold-dim);
    margin-bottom: 8px;
}

.sf-detail-canvas {
    width: 100%;
    max-width: 100%;
    height: 80px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: var(--sf-bg-deep);
}

canvas {
    max-width: 100%;
}


/* ── Forensic Panel dynamic content (fp-) ──────────────── */
.sf-panel--forensic .sf-panel-body {
    font-size: 13px;
}

.fp-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sf-gold-faint);
}

.fp-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.fp-section h3 {
    font-family: var(--sf-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sf-gold-dim);
    margin-bottom: 12px;
}

.fp-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sf-mono);
    font-size: 11px;
}

.fp-table thead th {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
    text-align: left;
    padding: 6px 6px 6px 0;
    border-bottom: 1px solid var(--sf-border);
    white-space: nowrap;
}

.fp-table tbody tr {
    border-bottom: 1px solid rgba(200, 168, 78, 0.04);
    transition: background var(--sf-transition);
}

.fp-table tbody tr:hover {
    background: rgba(200, 168, 78, 0.03);
}

.fp-table tbody td {
    padding: 5px 6px 5px 0;
    font-size: 11px;
    color: var(--sf-text-dim);
    white-space: nowrap;
}

.fp-table .fp-sig td {
    color: var(--sf-text);
}

.fp-readout {
    display: flex;
    flex-direction: column;
}

.fp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(200, 168, 78, 0.05);
}

.fp-row:last-child {
    border-bottom: none;
}

.fp-label {
    font-family: var(--sf-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
}

.fp-value {
    font-family: var(--sf-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-text);
}

.fp-verdict {
    font-family: var(--sf-mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 16px;
    border-radius: var(--sf-radius);
    margin-bottom: 12px;
    text-align: center;
}

.fp-verdict-clear {
    color: var(--sf-green);
    background: var(--sf-green-glow);
    border: 1px solid var(--sf-green-dim);
}

.fp-verdict-warn {
    color: var(--sf-amber);
    background: var(--sf-amber-glow);
    border: 1px solid var(--sf-amber-dim);
}

.fp-creature-count {
    font-family: var(--sf-mono);
    font-size: 48px;
    font-weight: 700;
    color: var(--sf-red);
    text-align: center;
    padding: 12px 0;
    text-shadow: 0 0 20px var(--sf-red-glow);
}

.fp-clusters {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.fp-cluster {
    display: block;
    font-family: var(--sf-mono);
    font-size: 11px;
    color: var(--sf-text-dim);
    padding: 4px 0;
    border-bottom: 1px solid rgba(200, 168, 78, 0.04);
}

.fp-cluster:last-child {
    border-bottom: none;
}

.fp-bool {
    font-family: var(--sf-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
}

.fp-bool--yes {
    color: var(--sf-green);
    background: var(--sf-green-glow);
}

.fp-bool--no {
    color: var(--sf-red);
    background: var(--sf-red-glow);
}

/* Volley table */
.fp-table--volley {
    font-size: 10px;
}

.fp-table--volley td,
.fp-table--volley th {
    padding: 4px 5px 4px 0;
}

.fp-call--human td:nth-child(3) .sd-badge { color: var(--sf-green); }
.fp-call--non-human td:nth-child(3) .sd-badge { color: var(--sf-red); }


/* ── Segment Detail dynamic content (sd-) ──────────────── */
.sd-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.sd-id {
    font-family: var(--sf-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--sf-text);
}

.sd-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-family: var(--sf-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 2px;
}

.sd-badge--human {
    background: var(--sf-green);
    color: #0a0a0f;
    box-shadow: 0 0 8px var(--sf-green-glow);
}

.sd-badge--non-human {
    background: var(--sf-red);
    color: #fff;
    box-shadow: 0 0 8px var(--sf-red-glow);
}

.sd-badge--volley {
    background: var(--sf-amber);
    color: #0a0a0f;
    box-shadow: 0 0 8px var(--sf-amber-glow);
}

.sd-description {
    font-size: 13px;
    line-height: 1.6;
    color: var(--sf-text-dim);
    margin-bottom: 12px;
    font-style: italic;
}

.sd-time {
    font-family: var(--sf-mono);
    font-size: 12px;
    color: var(--sf-text-dim);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sf-gold-faint);
}

.sd-duration {
    color: var(--sf-text-muted);
    font-size: 11px;
}

.sd-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(200, 168, 78, 0.06);
}

.sd-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.sd-section h4 {
    font-family: var(--sf-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sf-gold-dim);
    margin-bottom: 8px;
}

.sd-metrics {
    display: flex;
    flex-direction: column;
}

.sd-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid rgba(200, 168, 78, 0.04);
}

.sd-metric:last-child {
    border-bottom: none;
}

.sd-metric-label {
    font-family: var(--sf-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
}

.sd-metric-value {
    font-family: var(--sf-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-text);
}

.sd-formants {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sd-formant-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sd-formant-label {
    font-family: var(--sf-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--sf-text-dim);
    width: 24px;
    flex-shrink: 0;
    text-align: right;
}

.sd-formant-track {
    flex: 1;
    height: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid rgba(200, 168, 78, 0.06);
}

.sd-formant-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sf-gold-dim), var(--sf-gold));
    border-radius: 1px;
    transition: width 400ms ease;
}

.sd-formant-val {
    font-family: var(--sf-mono);
    font-size: 9px;
    color: var(--sf-text-muted);
    width: 48px;
    flex-shrink: 0;
    text-align: right;
}

.sd-disp {
    font-family: var(--sf-mono);
    font-size: 11px;
    color: var(--sf-text-dim);
    margin-top: 8px;
}

.sd-hnr-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sd-hnr-track {
    flex: 1;
    height: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid rgba(200, 168, 78, 0.06);
}

.sd-hnr-fill {
    height: 100%;
    border-radius: 1px;
    transition: width 400ms ease;
}

.sd-hnr-val {
    font-family: var(--sf-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--sf-text);
    white-space: nowrap;
}

.sd-bands {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 80px;
    padding-bottom: 28px;
    position: relative;
}

.sd-band {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.sd-band-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.sd-band-bar {
    width: 100%;
    background: linear-gradient(180deg, var(--sf-gold), var(--sf-gold-dim));
    border-radius: 2px 2px 0 0;
    transition: height 400ms ease;
    min-height: 2px;
}

.sd-band-label {
    font-family: var(--sf-mono);
    font-size: 7px;
    color: var(--sf-text-muted);
    text-align: center;
    margin-top: 4px;
    white-space: nowrap;
}

.sd-band-val {
    font-family: var(--sf-mono);
    font-size: 7px;
    color: var(--sf-text-dim);
}

#sf-detail-content.has-data {
    display: block !important;
}

#sf-detail-content.has-data ~ .sf-detail-empty,
#sf-detail-content.has-data + .sf-detail-empty {
    display: none;
}


/* ── Forensic Panel static elements (sf-) ──────────────── */
.sf-forensic-block {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sf-gold-faint);
}

.sf-forensic-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.sf-forensic-subtitle {
    font-family: var(--sf-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sf-gold-dim);
    margin-bottom: 10px;
}

.sf-forensic-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sf-mono);
    font-size: 11px;
}

.sf-forensic-table th {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
    text-align: left;
    padding: 5px 6px 5px 0;
    border-bottom: 1px solid var(--sf-border);
}

.sf-forensic-table td {
    padding: 5px 6px 5px 0;
    color: var(--sf-text-dim);
    border-bottom: 1px solid rgba(200, 168, 78, 0.04);
}

.sf-forensic-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.sf-forensic-stat-grid--2col {
    grid-template-columns: 1fr 1fr;
}

.sf-forensic-stat-grid--1col {
    grid-template-columns: 1fr;
}

.sf-forensic-stat {
    text-align: center;
}

.sf-forensic-stat-value {
    display: block;
    font-family: var(--sf-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--sf-text);
    margin-bottom: 4px;
}

.sf-forensic-stat-value--lg {
    font-size: 36px;
    color: var(--sf-red);
    text-shadow: 0 0 16px var(--sf-red-glow);
}

.sf-forensic-stat-label {
    display: block;
    font-family: var(--sf-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
}

.sf-forensic-verdict {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--sf-radius);
    margin-bottom: 12px;
}

.sf-verdict-icon {
    font-size: 18px;
}

.sf-verdict-text {
    font-family: var(--sf-mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sf-kirlin-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* ── Narrative (sf-) ───────────────────────────────────── */
.sf-narrative {
    max-width: 800px;
    margin: 48px auto 0;
    padding: 0 20px 60px;
    position: relative;
    z-index: 1;
    transition: opacity 600ms ease;
}

.sf-narrative-section {
    margin-bottom: 40px;
}

.sf-narrative-heading {
    font-family: var(--sf-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sf-gold);
    margin-bottom: 20px;
}

.sf-narrative-rule {
    width: 60px;
    height: 1px;
    background: var(--sf-gold);
    margin-bottom: 24px;
    box-shadow: 0 0 12px var(--sf-gold-glow);
}

.sf-narrative-text {
    font-size: 15px;
    line-height: 1.75;
    color: #b0a890;
    margin-bottom: 16px;
}

.sf-narrative-text em {
    color: var(--sf-gold-dim);
    font-style: italic;
}

.sf-narrative-findings {
    list-style: none;
    padding: 0;
}

.sf-finding {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
}

.sf-finding-marker {
    font-family: var(--sf-mono);
    font-size: 24px;
    font-weight: 700;
    color: var(--sf-gold-dim);
    flex-shrink: 0;
    width: 40px;
    text-align: right;
    line-height: 1.2;
}

.sf-finding-title {
    font-family: var(--sf-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sf-text);
    margin-bottom: 8px;
}

.sf-finding-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--sf-text-dim);
}

.sf-narrative-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--sf-gold-faint);
}

.sf-narrative-source {
    font-family: var(--sf-mono);
    font-size: 11px;
    line-height: 1.7;
    color: var(--sf-text-muted);
    letter-spacing: 0.02em;
}

.sf-narrative-source em {
    color: var(--sf-text-dim);
    font-style: italic;
}


/* ── SF responsive overrides ───────────────────────────── */
@media (max-width: 1024px) {
    .sf-panels {
        grid-template-columns: 1fr;
    }

    .sf-topbar-sublabel {
        display: none;
    }

    .sf-topbar-sep {
        display: none;
    }
}

@media (max-width: 768px) {
    .sf-topbar {
        padding: 0 12px;
    }

    .sf-topbar-label {
        font-size: 11px;
        letter-spacing: 0.2em;
    }

    .sf-topbar-sublabel,
    .sf-topbar-sep {
        display: none;
    }

    .sf-topbar-duration {
        font-size: 11px;
        min-width: 80px;
    }

    .sf-waveform-container {
        height: 60px;
    }

    .sf-toggle-bar {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 10px 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .sf-toggle-bar::-webkit-scrollbar {
        display: none;
    }

    .sf-toggle {
        font-size: 10px;
        padding: 6px 12px;
        flex-shrink: 0;
    }

    .sf-panel {
        padding: 16px;
    }

    .sf-transport-play {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .sf-transport-btn {
        width: 36px;
        height: 36px;
    }

    .sf-narrative {
        padding: 0 12px 40px;
        margin-top: 36px;
    }

    .sf-finding {
        flex-direction: column;
        gap: 8px;
    }

    .sf-finding-marker {
        text-align: left;
        width: auto;
    }
}


/* ================================================================
   23. PRINT
   ================================================================ */
@media print {
    body {
        background: #fff;
        color: #111;
    }

    body::before,
    body::after,
    #entry-overlay,
    .top-bar,
    .transport-controls,
    .toggle-bar,
    .playhead {
        display: none !important;
    }

    .panel {
        background: #fff;
        border: 1px solid #ddd;
        break-inside: avoid;
    }

    .badge-human { background: #0a8; color: #fff; }
    .badge-nonhuman { background: #d03; color: #fff; }
    .badge-volley { background: #c90; color: #111; }

    .narrative {
        max-width: 100%;
    }

    .narrative p,
    .narrative-text {
        color: #333;
    }
}


/* ================================================================
   23. REDUCED MOTION — Accessibility
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .entry-play-btn.visible {
        animation: none;
    }

    .segment-region.active {
        animation: none;
        opacity: 0.4;
    }

    #entry-line.expand,
    .entry-line.expand {
        transition-duration: 0.01ms;
    }
}


/* ================================================================
   24. HIGH CONTRAST MODE
   ================================================================ */
@media (forced-colors: active) {
    .badge {
        border: 1px solid currentColor;
    }

    .toggle-btn {
        border: 1px solid currentColor;
    }

    .toggle-btn.active {
        background: Highlight;
        color: HighlightText;
    }

    .panel {
        border: 1px solid currentColor;
    }

    .playhead {
        background: Highlight;
    }
}