/* Quant News Tracker - Custom Styles
   Design System based on PROJECT.md
   Inspired by Bloomberg Terminal, FinViz, and Robinhood
*/

/* =============================================================================
   CSS VARIABLES (Design Tokens)
   ============================================================================= */

:root {
    /* Background */
    --bg-primary: #0D0D0D;
    --bg-secondary: #1A1A1A;
    --bg-tertiary: #242424;

    /* Borders */
    --border-subtle: #2A2A2A;
    --border-focus: #3D3D3D;

    /* Text */
    --text-primary: #FFFFFF;
    --text-secondary: #A0A0A0;
    --text-muted: #666666;

    /* Semantic Colors */
    --positive: #00C805;
    --positive-muted: #0A3D0A;
    --negative: #FF5000;
    --negative-muted: #3D1A0A;
    --neutral: #FFD700;

    /* Accent */
    --accent-primary: #00D4AA;
    --accent-hover: #00E5BB;

    /* Chart Colors */
    --chart-1: #00D4AA;
    --chart-2: #7B61FF;
    --chart-3: #FF6B6B;
    --chart-4: #4ECDC4;
    --chart-5: #FFE66D;

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

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;

    /* Layout */
    --rail-width: 220px;
    --topbar-height: 56px;
    --context-panel-width: 520px;
    --card-radius: 12px;
    --radius-sm: 6px;

    /* Transitions */
    --duration-fast: 100ms;
    --duration-normal: 200ms;
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================================
   BASE STYLES
   ============================================================================= */

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

body {
    font-family: var(--font-primary);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================================================
   APP CONTAINER & GRID
   ============================================================================= */

.app-container {
    min-height: 100vh;
    background-color: var(--bg-primary);
}

/* =============================================================================
   APP SHELL: NAV RAIL + TOOLBAR + ROUTED CONTENT
   ============================================================================= */

.app-shell {
    display: grid;
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
    height: 100vh;
}

.shell-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
}

/* The only scroll container. Sections inside it lay out at natural height
   rather than each owning a 100vh scroller, so a page scrolls as one thing. */
.page-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background-color: var(--bg-primary);
}

.page {
    padding: var(--space-5);
}

/* --- Nav rail --------------------------------------------------------- */

.nav-rail {
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-subtle);
    padding: var(--space-5) var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100vh;
    overflow-y: auto;
}

.rail-brand {
    display: flex;
    flex-direction: column;
    padding: 0 var(--space-2);
}

.rail-brand-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.rail-brand-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.rail-nav {
    gap: 2px;
}

.rail-link {
    display: flex !important;
    align-items: center;
    gap: var(--space-3);
    padding: 8px var(--space-3) !important;
    border-radius: var(--radius-sm);
    color: var(--text-secondary) !important;
    font-size: 13px;
    font-weight: 500;
    transition: background var(--duration-fast) var(--easing-default),
                color var(--duration-fast) var(--easing-default);
}

.rail-link:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary) !important;
}

.rail-link.active {
    background-color: var(--bg-tertiary) !important;
    color: var(--accent-primary) !important;
    box-shadow: inset 2px 0 0 var(--accent-primary);
}

.rail-icon {
    font-size: 14px;
    width: 16px;
    text-align: center;
    flex: none;
}

.rail-spacer {
    flex: 1 1 auto;
}

.rail-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2) 0;
    border-top: 1px solid var(--border-subtle);
    font-size: 11px;
}

/* --- Toolbar ---------------------------------------------------------- */

.topbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--topbar-height);
    padding: 0 var(--space-5);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
}

.topbar-heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

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

.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* The run pill: one line of run status next to the Run button. The dot
   carries the state colour; a scheduled run shows a calendar glyph instead
   because it is not the viewer's and has no cancel. */
.run-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 420px;
    padding: 3px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 18px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.run-pill[hidden] {
    display: none;
}

.run-pill-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.run-pill-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--text-muted);
}

.run-pill-running .run-pill-dot {
    background-color: var(--accent-primary);
    animation: run-pill-pulse 1.6s ease-in-out infinite;
}

.run-pill-ready .run-pill-dot {
    background-color: var(--positive);
}

.run-pill-failed .run-pill-dot {
    background-color: var(--negative);
}

.run-pill-failed {
    color: var(--negative);
}

.run-pill-glyph {
    flex: none;
    color: var(--text-muted);
}

.run-pill-link {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
}

.run-pill-link::before {
    content: "· ";
    color: var(--text-secondary);
    font-weight: 400;
}

.run-pill-link:hover {
    text-decoration: underline;
}

.run-pill-cancel {
    flex: none;
    margin-left: 2px;
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
}

.run-pill-cancel:hover {
    color: var(--negative);
}

@keyframes run-pill-pulse {
    0%, 100% { opacity: 0.45; }

    50% { opacity: 1; }

}

.watchlist-panel-inner {
    padding: var(--space-4) var(--space-5);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
}

/* The action buttons were built as a 2-column grid for a 280px sidebar, where
   btn-full meant "span both columns". In a horizontal toolbar that reads as a
   forced line break, so the grid is flattened to a row here. */
.topbar-actions .data-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

.topbar-actions .data-actions .btn,
.topbar-actions .data-actions .btn-full {
    grid-column: auto;
    width: auto;
    white-space: nowrap;
    padding: 6px 10px;
}

.rail-footer .cache-label {
    margin-right: var(--space-1);
}

/* --- Analyze layout --------------------------------------------------- */

.analyze-indicator-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.analyze-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--context-panel-width);
    align-items: start;
}

/* --- Shared empty state ----------------------------------------------- */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-5);
    text-align: center;
}

.empty-state-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.empty-state-note {
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 48ch;
}

.sidebar-header {
    margin-bottom: var(--space-1);
}

.app-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.5px;
}

.app-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin: var(--space-1) 0 0 0;
}

.sidebar-divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-1) 0;
}

.sidebar-spacer {
    flex: 1;
    min-height: var(--space-4);
}

.sidebar-footer {
    font-size: 11px;
    color: var(--text-muted);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

.cache-status-row {
    margin-bottom: var(--space-2);
}

.data-source-row {
    margin-top: var(--space-2);
}

/* Data source indicator badges */
.data-source-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.data-source-cache {
    background-color: rgba(100, 100, 100, 0.3);
    color: var(--text-secondary);
}

.data-source-live {
    background-color: rgba(0, 200, 5, 0.15);
    color: var(--positive);
}

.data-source-error {
    background-color: rgba(255, 80, 0, 0.15);
    color: var(--negative);
}

/* Section styling in sidebar */
.period-section,
.indicator-section,
.data-section {
    padding: var(--space-1) 0;
}

/* =============================================================================
   STOCK INPUT
   ============================================================================= */

.stock-input-container {
    margin-bottom: 0;
}

.input-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
    display: block;
}

.symbol-input {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 13px !important;
    padding: 8px 12px !important;
    height: 38px !important;
    border-radius: 8px !important;
}

.symbol-input:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.2) !important;
}

.symbol-input::placeholder {
    color: var(--text-muted) !important;
    text-transform: none;
    font-size: 12px !important;
}

.add-btn {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    font-weight: 600;
    padding: 8px 16px !important;
    height: 38px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

.add-btn:hover {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

/* Input group styling */
.stock-input-container .input-group {
    border-radius: 8px;
    overflow: hidden;
}

.stock-input-container .input-group .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.stock-input-container .input-group .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Symbol Tags */
.symbol-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
    min-height: 32px;
    padding: var(--space-2);
    background-color: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px dashed var(--border-subtle);
}

.symbol-tags:has(.symbol-tag) {
    border-style: solid;
    background-color: transparent;
}

.symbol-tag {
    display: inline-flex;
    align-items: center;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-focus);
    border-radius: 6px;
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    transition: all var(--duration-fast) var(--easing-default);
}

.symbol-tag:hover {
    border-color: var(--accent-primary);
    background-color: rgba(0, 212, 170, 0.1);
}

.tag-text {
    margin-right: var(--space-2);
    color: var(--text-primary);
}

.tag-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    line-height: 1;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all var(--duration-fast) var(--easing-default);
}

.tag-remove:hover {
    color: var(--negative);
    background-color: var(--negative-muted);
}

/* Quick Add */
.quick-add-section {
    margin-top: var(--space-3);
}

.quick-add-label {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin-bottom: var(--space-2);
}

.quick-add-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.quick-add-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    transition: all var(--duration-fast) var(--easing-default);
}

.quick-add-btn:hover {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: var(--bg-primary) !important;
}

/* =============================================================================
   PERIOD SELECTOR
   ============================================================================= */

.period-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.period-btn {
    font-size: 12px;
    padding: 4px 12px;
    font-weight: 600;
}

/* =============================================================================
   INDICATOR TOGGLES
   ============================================================================= */

.indicator-toggles .form-check {
    margin-right: var(--space-3);
    margin-bottom: var(--space-2);
}

.indicator-toggles .form-check-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.indicator-toggles .form-check-input:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* =============================================================================
   DATA ACTIONS
   ============================================================================= */

.data-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.data-actions .btn {
    font-size: 12px;
    padding: 6px 0;
    width: 100%;
    justify-content: center;
}

.data-actions .btn-full {
    grid-column: 1 / -1;
}

/* =============================================================================
   MAIN CONTENT
   ============================================================================= */

/* Height and scrolling belong to .page-content now: this used to be a column
   of the old 100vh grid and owned its own scroller. */
.main-content {
    padding: var(--space-5);
    min-width: 0;
    background-color: var(--bg-primary);
}

/* Summary Cards */
.summary-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    min-height: 100px;
}

.metric-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--card-radius);
    transition: border-color var(--duration-normal) var(--easing-default),
                transform var(--duration-fast) var(--easing-default),
                box-shadow var(--duration-normal) var(--easing-default);
    min-width: 140px;
}

.metric-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.metric-card-body {
    padding: var(--space-4);
}

.metric-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
}

.metric-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.metric-value {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.metric-change {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
}

.metric-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: var(--space-2);
}

/* =============================================================================
   CHARTS
   ============================================================================= */

.chart-container {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--card-radius);
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.chart-header {
    padding: var(--space-3) var(--space-4) 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.chart-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.chart-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.main-chart {
    height: 380px !important;
    min-height: 380px;
    max-height: 380px;
}

.subplot-chart {
    height: 140px !important;
    min-height: 140px;
    max-height: 140px;
}

.volume-chart {
    height: 110px !important;
    min-height: 110px;
    max-height: 110px;
}

/* Prevent Plotly chart container from growing infinitely */
.main-chart .js-plotly-plot,
.subplot-chart .js-plotly-plot,
.volume-chart .js-plotly-plot {
    height: 100% !important;
}

.main-chart .plotly,
.subplot-chart .plotly,
.volume-chart .plotly {
    height: 100% !important;
}

.indicators-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.subplot-container {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--card-radius);
    overflow: hidden;
}

.subplot-title-row {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4) 0;
}

.subplot-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0;
    margin: 0;
}

.info-icon {
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--duration-fast) var(--easing-default),
                color var(--duration-fast) var(--easing-default);
}

.info-icon:hover {
    opacity: 1;
    color: var(--accent-primary);
}

/* Chart empty state styling */
.price-chart-container .empty-state,
.subplot-container .empty-state,
.volume-container .empty-state {
    min-height: 200px;
}

/* Fix for price chart container to prevent infinite growth */
.price-chart-container {
    max-height: 450px;
    overflow: hidden;
}

.volume-container {
    max-height: 180px;
    overflow: hidden;
}

.subplot-container {
    max-height: 200px;
    overflow: hidden;
}

/* =============================================================================
   CONTEXT PANEL
   ============================================================================= */

.context-panel {
    background-color: var(--bg-secondary);
    border-left: 1px solid var(--border-subtle);
    padding: var(--space-5) var(--space-4);
    /* relative so the drag handle can position against it */
    position: relative;
    min-width: 0;
}

.panel-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
    transition: background 0.15s;
}

.panel-resize-handle:hover,
.panel-resize-handle:active {
    background: var(--accent, #00D4AA);
}

.panel-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0 0 var(--space-3) 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.panel-title-row .panel-title {
    margin-bottom: 0;
}

.news-meta-info {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
}

.panel-divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-4) 0;
}

/* Panel sections */
.news-section,
.ai-section,
.sentiment-section,
.signals-section {
    padding: var(--space-3) 0;
}

/* News Cards */
.news-feed {
    max-height: 300px;
    overflow-y: auto;
}

.news-card {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    transition: border-color var(--duration-normal) var(--easing-default);
}

.news-card:hover {
    border-color: var(--border-focus);
}

.news-card-body {
    padding: var(--space-3);
}

.news-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.news-source {
    color: var(--text-secondary);
}

.news-divider {
    color: var(--text-muted);
}

.news-time {
    color: var(--text-muted);
}

.news-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    display: block;
    line-height: 1.4;
}

.news-title:hover {
    color: var(--accent-primary);
}

.news-summary {
    font-size: 12px;
    color: var(--text-secondary);
    margin: var(--space-2) 0 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sentiment Badge */
.sentiment-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 6px;
}

/* AI Summary */
.ai-summary {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.ai-summary-content {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.ai-summary-content p {
    margin-bottom: var(--space-3);
}

.ai-summary-content p:last-child {
    margin-bottom: 0;
}

.ai-summary-content strong {
    color: var(--text-primary);
    font-weight: 600;
}

.ai-summary-content ul,
.ai-summary-content ol {
    margin: var(--space-2) 0;
    padding-left: var(--space-4);
}

.ai-summary-content li {
    margin-bottom: var(--space-1);
}

.ai-summary-content h1,
.ai-summary-content h2,
.ai-summary-content h3,
.ai-summary-content h4 {
    color: var(--text-primary);
    font-weight: 600;
    margin-top: var(--space-3);
    margin-bottom: var(--space-2);
}

.ai-summary-content h1 { font-size: 16px; }

.ai-summary-content h2 { font-size: 15px; }

.ai-summary-content h3 { font-size: 14px; }

.ai-summary-content h4 { font-size: 13px; }

.ai-summary-content code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
}

.ai-summary-content blockquote {
    border-left: 4px solid var(--accent-primary);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-3) 0;
    background: linear-gradient(135deg, rgba(0, 212, 170, 0.08) 0%, rgba(0, 212, 170, 0.02) 100%);
    border-radius: 0 8px 8px 0;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.ai-summary-content blockquote strong {
    color: var(--accent-primary);
    font-size: 15px;
    letter-spacing: 0.5px;
}

.ai-summary-content h3 {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 13px;
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-summary-content h3:first-child {
    margin-top: 0;
}

.ai-summary-content hr {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-3) 0;
    opacity: 0.5;
}

.llm-status-row {
    margin-bottom: var(--space-2);
}

.llm-status-badge {
    font-size: 10px;
    color: var(--text-muted);
}

/* Sentiment Display */
.sentiment-display {
    display: flex;
    gap: var(--space-3);
}

.sentiment-item {
    text-align: center;
}

.sentiment-count {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 700;
}

.sentiment-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Signals Display */
.signals-display {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.signal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.signal-name {
    color: var(--text-secondary);
}

.signal-value {
    font-family: var(--font-mono);
    font-weight: 600;
}

.signal-bullish {
    color: var(--positive);
}

.signal-bearish {
    color: var(--negative);
}

.signal-neutral {
    color: var(--text-secondary);
}

/* =============================================================================
   EMPTY & LOADING STATES
   ============================================================================= */

.empty-state {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-3);
    background-color: var(--bg-tertiary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-message {
    font-size: 14px;
    max-width: 200px;
    line-height: 1.4;
}

/* Loading spinner customization */
._dash-loading {
    background-color: transparent !important;
}

/* Chart background - only apply to first main-svg to avoid covering chart content */
.chart-container .js-plotly-plot .plotly .svg-container > .main-svg:first-child {
    background-color: var(--bg-secondary) !important;
}

/* =============================================================================
   MODAL
   ============================================================================= */

.modal-content {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
}

.modal-header {
    border-bottom: 1px solid var(--border-subtle);
}

.modal-title {
    color: var(--text-primary);
}

.modal-footer {
    border-top: 1px solid var(--border-subtle);
}

.btn-close {
    filter: invert(1);
}

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

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

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

::-webkit-scrollbar-thumb {
    background: var(--border-focus);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

/* Below ~1280 the analysis panel starves the charts, so it drops under them. */
@media (max-width: 1280px) {
    .analyze-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .context-panel {
        border-left: none;
        border-top: 1px solid var(--border-subtle);
        width: auto !important;
        min-width: 0 !important;
    }

    .panel-resize-handle {
        display: none;
    }

}

/* Icon-only rail: labels are the first thing worth trading for chart width. */
@media (max-width: 1100px) {
    .app-shell {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .nav-rail {
        padding: var(--space-4) var(--space-1);
        align-items: center;
    }

    .rail-label,
    .rail-brand-sub,
    .rail-footer .cache-label {
        display: none;
    }

    .rail-brand-name {
        font-size: 0;
    }

    .rail-brand-name::first-letter {
        font-size: 20px;
    }

    .rail-link {
        justify-content: center;
        padding: 8px 0 !important;
    }

}

@media (max-width: 768px) {
    .app-shell {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    /* Rail becomes a horizontal strip above the content. */
    .nav-rail {
        flex-direction: row;
        align-items: center;
        height: auto;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }

    .rail-nav {
        flex-direction: row !important;
        flex-wrap: nowrap;
    }

    .rail-spacer,
    .rail-footer {
        display: none;
    }

    .shell-main {
        height: auto;
        overflow: visible;
    }

    .page-content {
        overflow-y: visible;
    }

    .topbar {
        flex-wrap: wrap;
        padding: var(--space-3);
    }

    .topbar-actions {
        margin-left: 0;
        justify-content: flex-start;
    }

    .indicators-row {
        grid-template-columns: 1fr;
    }

    .summary-cards-row {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* =============================================================================
   NEWS TABS
   ============================================================================= */

.news-tabs {
    margin-bottom: 0;
}

.news-tabs .nav-tabs {
    border-bottom: 1px solid var(--border-subtle);
    gap: 0;
    padding: 0;
    margin-bottom: var(--space-4);
}

.news-tabs .nav-link {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: var(--space-2) var(--space-4);
    border: none;
    border-radius: 0;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all var(--duration-fast) var(--easing-default);
}

.news-tabs .nav-link:hover {
    color: var(--text-secondary);
    background: transparent;
    border-color: transparent;
}

.news-tabs .nav-link.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    background: transparent;
}

.news-tabs .tab-content {
    padding-top: 0;
}

.news-tabs .tab-pane {
    animation: fadeInTab var(--duration-normal) var(--easing-default);
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(4px); }

    to { opacity: 1; transform: translateY(0); }

}

/* =============================================================================
   RECOMMENDATION BANNER
   ============================================================================= */

.recommendation-banner {
    padding: var(--space-4);
    border-radius: var(--card-radius);
    margin-bottom: var(--space-4);
    text-align: center;
}

.recommendation-banner.bullish {
    background: linear-gradient(135deg, var(--positive-muted) 0%, rgba(0, 200, 5, 0.05) 100%);
    border: 1px solid rgba(0, 200, 5, 0.3);
}

.recommendation-banner.bearish {
    background: linear-gradient(135deg, var(--negative-muted) 0%, rgba(255, 80, 0, 0.05) 100%);
    border: 1px solid rgba(255, 80, 0, 0.3);
}

.recommendation-banner.neutral {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.02) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.recommendation-banner.loading {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
}

.recommendation-label {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: var(--space-1);
}

.recommendation-banner.bullish .recommendation-label {
    color: var(--positive);
}

.recommendation-banner.bearish .recommendation-label {
    color: var(--negative);
}

.recommendation-banner.neutral .recommendation-label {
    color: var(--neutral);
}

.recommendation-banner.loading .recommendation-label {
    color: var(--text-muted);
    font-size: 14px;
}

.recommendation-confidence {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.recommendation-meta {
    font-size: 11px;
    color: var(--text-muted);
}

/* =============================================================================
   KEY DEVELOPMENTS SECTION
   ============================================================================= */

.key-developments {
    margin-bottom: var(--space-4);
}

.section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-3);
    margin-top: var(--space-3);
}

.key-developments-content {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* =============================================================================
   SENTIMENT BREAKDOWN
   ============================================================================= */

.sentiment-breakdown {
    margin-bottom: var(--space-4);
}

.sentiment-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sentiment-bar-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sentiment-bar-label {
    font-size: 11px;
    color: var(--text-secondary);
    width: 60px;
}

.sentiment-bar-track {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.sentiment-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width var(--duration-normal) var(--easing-default);
}

.sentiment-bar-fill.bullish {
    background: var(--positive);
}

.sentiment-bar-fill.neutral {
    background: var(--text-muted);
}

.sentiment-bar-fill.bearish {
    background: var(--negative);
}

.sentiment-bar-count {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    width: 24px;
    text-align: right;
}

/* =============================================================================
   TOP HEADLINES SECTION
   ============================================================================= */

.top-headlines {
    margin-bottom: var(--space-4);
}

.headline-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.headline-item {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
}

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

.headline-link {
    font-size: 13px;
    color: var(--text-primary);
    text-decoration: none;
    display: block;
    line-height: 1.4;
    transition: color var(--duration-fast) var(--easing-default);
}

.headline-link:hover {
    color: var(--accent-primary);
}

.headline-meta {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.see-all-link {
    display: block;
    margin-top: var(--space-3);
    font-size: 12px;
    color: var(--accent-primary);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--duration-fast) var(--easing-default);
}

.see-all-link:hover {
    color: var(--accent-hover);
}

/* =============================================================================
   QUICK STATS
   ============================================================================= */

.quick-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: var(--space-4);
}

.quick-stat-item {
    text-align: center;
}

.quick-stat-value {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.quick-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =============================================================================
   PANEL HEADER ROW
   ============================================================================= */

.panel-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.panel-main-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* .download-report-btn removed — button is now hidden */

/* =============================================================================
   OVERVIEW TAB EMPTY STATE
   ============================================================================= */

.overview-empty-state {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--text-muted);
}

.overview-empty-state .empty-icon {
    font-size: 32px;
    margin-bottom: var(--space-3);
    opacity: 0.5;
}

.overview-empty-state .empty-message {
    font-size: 13px;
    max-width: 240px;
    margin: 0 auto;
    line-height: 1.5;
}

/* =============================================================================
   RECOMMENDATIONS TABLE (Overall Tab)
   ============================================================================= */

.recommendations-section {
    margin-bottom: var(--space-4);
}

.recommendations-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.recommendations-table thead {
    border-bottom: 1px solid var(--border-subtle);
}

.recommendations-table th {
    text-align: left;
    padding: var(--space-2) var(--space-2);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recommendations-table td {
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.recommendations-table tbody tr:last-child td {
    border-bottom: none;
}

.recommendations-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.recommendations-table .symbol-cell {
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.recommendations-table .recommendation-cell {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.recommendations-table .recommendation-cell.rec-bullish {
    color: var(--positive);
}

.recommendations-table .recommendation-cell.rec-bearish {
    color: var(--negative);
}

.recommendations-table .recommendation-cell.rec-neutral {
    color: var(--neutral);
}

.recommendations-table .confidence-cell {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    text-align: center;
}

.recommendations-table .articles-cell {
    font-family: var(--font-mono);
    color: var(--text-muted);
    text-align: center;
}

/* Symbol tabs styling */
.symbol-tabs {
    margin-bottom: 0;
}

.symbol-tabs .nav-tabs {
    border-bottom: 1px solid var(--border-subtle);
    gap: var(--space-1);
    padding: 0 var(--space-2);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.symbol-tabs .nav-link {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: 0;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all var(--duration-fast) var(--easing-default);
    min-width: 60px;
    text-align: center;
}

.symbol-tabs .nav-link:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
    border-color: transparent;
}

.symbol-tabs .nav-link.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    background: rgba(0, 212, 170, 0.05);
}

.symbol-tabs .tab-content {
    padding-top: var(--space-2);
}

.symbol-tabs .tab-pane {
    animation: fadeInTab var(--duration-normal) var(--easing-default);
}

.tab-content-inner {
    padding: 0;
}

/* =============================================================================
   NEWS LOADING STATE
   ============================================================================= */

.news-loading-container {
    padding: var(--space-4);
}

.news-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

.loading-spinner-container {
    margin-bottom: var(--space-5);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

}

.loading-status-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.loading-subtext {
    font-size: 12px;
    color: var(--text-muted);
}

/* Inline AI Loading Indicator */
.ai-loading-section {
    margin-bottom: var(--space-4);
}

.ai-loading-inline {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-tertiary);
    border-radius: var(--card-radius);
    border: 1px solid var(--border-subtle);
}

.loading-spinner-small {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

.loading-inline-text {
    font-size: 13px;
    color: var(--text-secondary);
}

/* =============================================================================
   MODEL SIGNAL CARDS
   ============================================================================= */

.signal-cards-section {
    margin-top: 16px;
    margin-bottom: 16px;
}

.signal-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (max-width: 400px) {
    .signal-cards-grid {
        grid-template-columns: 1fr;
    }

}

.signal-card {
    background: #1A1A1A;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #2A2A2A;
}

.signal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.signal-card-model-name {
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
}

.signal-card-decision {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.signal-card-error {
    padding: 4px 0;
    word-break: break-word;
}

.signal-card-confidence {
    margin-bottom: 6px;
}

.signal-card-conf-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.signal-card-conf-label {
    font-size: 11px;
    color: #A0A0A0;
}

.signal-card-conf-value {
    font-size: 11px;
    font-weight: 600;
    color: #FFFFFF;
    font-family: 'JetBrains Mono', monospace;
}

.signal-card-conf-bar-bg {
    height: 4px;
    background: #2A2A2A;
    border-radius: 2px;
    overflow: hidden;
}

.signal-card-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
}

.signal-card-detail-label {
    font-size: 11px;
    color: #666666;
}

.signal-card-detail-value {
    font-size: 11px;
    color: #A0A0A0;
    font-family: 'JetBrains Mono', monospace;
}

.signal-card-reasoning {
    font-size: 11px;
    color: #888;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #2A2A2A;
    line-height: 1.4;
}

/* Prediction History Table */
.prediction-history-section {
    margin-top: 16px;
}

.prediction-history-table {
    width: 100%;
    font-size: 11px;
    border-collapse: collapse;
}

.prediction-history-table th {
    color: #666;
    font-weight: 500;
    padding: 4px 6px;
    border-bottom: 1px solid #2A2A2A;
    text-align: left;
}

.prediction-history-table td {
    padding: 4px 6px;
    border-bottom: 1px solid #1A1A1A;
    color: #A0A0A0;
}

/* Model Signals Loading */
.model-signals-loading {
    text-align: center;
    padding: 16px;
    color: #666;
    font-size: 12px;
}

.model-signals-progress {
    font-size: 12px;
    color: #00D4AA;
    padding: 8px 0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}

/* ============================================================
   STRATEGY PERFORMANCE
   ============================================================ */

.strategy-section {
    margin-top: 16px;
}

.strategy-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.strategy-card {
    background: #1A1A1A;
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid #2A2A2A;
}

.strategy-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.strategy-card-name {
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
}

.strategy-card-symbol {
    font-size: 10px;
    font-weight: 500;
    color: #6B7280;
    font-family: 'JetBrains Mono', monospace;
}

.strategy-card-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.strategy-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.strategy-stat-label {
    font-size: 11px;
    color: #9CA3AF;
}

.strategy-stat-value {
    font-size: 11px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

/* =============================================================================
   ENSEMBLE CARD & CONFIG DRAWER
   ============================================================================= */

.ensemble-card {
    grid-column: 1 / -1;
    border: 1px solid #3D3D3D;
    background: #1E1E1E;
}

.ensemble-card-header {
    justify-content: space-between !important;
}

.ensemble-gear-btn {
    background: none;
    border: 1px solid #3D3D3D;
    color: #A0A0A0;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
    transition: all 0.2s ease;
}

.ensemble-gear-btn:hover {
    color: #00D4AA;
    border-color: #00D4AA;
}

/* Weight composition bar */
.ensemble-weight-bar {
    display: flex;
    height: 20px;
    border-radius: 4px;
    overflow: hidden;
    gap: 1px;
}

.ensemble-weight-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #0D0D0D;
    min-width: 24px;
    transition: flex-grow 0.3s ease;
}

/* Vote summary */
.ensemble-vote-summary {
    font-size: 11px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #2A2A2A;
    line-height: 1.6;
}

/* Ensemble config drawer (Offcanvas) */
.ensemble-config-description {
    font-size: 12px;
    color: #A0A0A0;
    margin-bottom: 16px;
    line-height: 1.5;
}

.ensemble-config-models {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ensemble-model-config-row {
    padding: 12px;
    background: #242424;
    border-radius: 8px;
    border: 1px solid #2A2A2A;
}

.ensemble-model-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ensemble-model-label {
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    flex: 1;
}

.ensemble-model-decision {
    font-size: 11px;
    font-weight: 600;
}

.ensemble-weight-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ensemble-weight-label {
    font-size: 11px;
    color: #666;
    white-space: nowrap;
}

.ensemble-weight-slider {
    flex: 1;
}

.ensemble-weight-input {
    width: 56px !important;
    background: #1A1A1A !important;
    border: 1px solid #2A2A2A !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    padding: 4px 6px !important;
    border-radius: 4px !important;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
}

.ensemble-weight-input:disabled {
    opacity: 0.4;
}

.ensemble-reset-btn {
    width: 100%;
    margin-top: 8px;
}

.ensemble-model-switch .form-check-input:checked {
    background-color: #00D4AA;
    border-color: #00D4AA;
}

/* Offcanvas dark theme overrides */
#ensemble-config-drawer .offcanvas-header {
    border-bottom: 1px solid #2A2A2A;
}

#ensemble-config-drawer .offcanvas-title {
    color: #FFFFFF;
    font-weight: 600;
}

#ensemble-config-drawer .btn-close {
    filter: invert(1);
}

/* TradingAgents report preview on signal card */
.ta-report-preview {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #2A2A2A;
    max-height: 80px;
    overflow: hidden;
    color: #888;
}

.ta-report-preview p {
    margin: 0;
}

.view-full-report-btn {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent, #00D4AA);
    background: transparent;
    border: 1px solid var(--accent, #00D4AA);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.view-full-report-btn:hover {
    background: var(--accent, #00D4AA);
    color: #000;
}

/* =============================================================================
   RECOMMENDATIONS SECTION (Full Analysis)
   ============================================================================= */

.recommendations-section {
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: rgba(123, 97, 255, 0.04);
    border: 1px solid rgba(123, 97, 255, 0.15);
    border-radius: var(--card-radius);
}

.recommendations-section .section-title {
    margin-top: 0;
}

.conflict-card {
    display: flex;
    align-items: flex-start;
    padding: 6px 10px;
    margin-bottom: 6px;
    background: rgba(255, 176, 32, 0.06);
    border-left: 2px solid #FFB020;
    border-radius: 3px;
    font-size: 0.82rem;
    line-height: 1.4;
}

/* History tab — TradingAgents research reports */
.history-tab .accordion-item {
    background-color: var(--bg-secondary, #1A1A1A);
    border-color: #2A2A2A;
}

.history-tab .accordion-button {
    background-color: var(--bg-secondary, #1A1A1A);
    color: var(--text-primary, #E0E0E0);
    font-size: 0.85rem;
    padding: 8px 12px;
}

.history-tab .accordion-button:not(.collapsed) {
    background-color: var(--bg-tertiary, #242424);
    color: var(--text-primary, #E0E0E0);
}

.history-tab .accordion-button::after {
    filter: invert(0.7);
}

.history-tab .accordion-body {
    background-color: var(--bg-primary, #121212);
    color: var(--text-primary, #E0E0E0);
    font-size: 0.85rem;
    padding: 12px;
}

/* History tab — section titles & tables */
.history-empty-msg {
    color: var(--text-secondary);
    padding: 24px 16px;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.5;
}

.history-section-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 20px 0 10px 0;
    padding: 0 2px 6px;
    border-bottom: 1px solid var(--border-subtle, #2A2A2A);
}

.history-section-title:first-child {
    margin-top: 8px;
}

.history-table-wrap {
    overflow-x: auto;
    margin-bottom: 16px;
    border-radius: 6px;
    border: 1px solid var(--border-subtle, #2A2A2A);
}

.history-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

/* Was uppercase 0.65rem in --text-muted, which came to 2.7:1 against the
   header fill and made every table shout its column names in text too small
   to read. Sentence case at a legible size, in the secondary tone. */
.history-data-table th {
    background-color: var(--bg-tertiary, #242424);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--text-xs);
    letter-spacing: 0;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-subtle, #2A2A2A);
    white-space: nowrap;
}

.history-data-table td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-secondary, #A0A0A0);
    white-space: nowrap;
}

.history-data-table tbody tr:last-child td {
    border-bottom: none;
}

.history-data-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-primary, #E0E0E0);
}

.history-decision {
    display: inline-block;
    font-weight: 600;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.history-decision.positive {
    color: var(--positive, #00C805);
    background-color: var(--positive-muted, #0A3D0A);
}

.history-decision.negative {
    color: var(--negative, #FF5000);
    background-color: var(--negative-muted, #3D1A0A);
}

.history-decision.neutral {
    color: var(--text-secondary);
    background-color: var(--bg-tertiary, #242424);
}

.positive { color: var(--positive, #00C805); }

.negative { color: var(--negative, #FF5000); }

.history-dl-btn {
    background: none;
    border: 1px solid var(--border-focus, #3D3D3D);
    color: var(--accent-primary, #00D4AA);
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.history-dl-btn:hover {
    background-color: var(--accent-primary, #00D4AA);
    border-color: var(--accent-primary, #00D4AA);
    color: var(--bg-primary, #0D0D0D);
}

.history-fmt-badge {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 2px 6px;
    background-color: var(--bg-tertiary, #242424);
    border-radius: 3px;
}

.history-rec-action {
    white-space: normal !important;
    line-height: 1.4;
    color: var(--text-primary, #E0E0E0);
    min-width: 160px;
}

/* History — hero title with icon */
.history-hero-title {
    font-size: 0.8rem;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Reports page — action bar above the archive */
.reports-action-bar {
    background-color: var(--bg-secondary, #1C1C1C);
    border: 1px solid var(--border-subtle, #2A2A2A);
    border-radius: 10px;
    padding: 14px 18px;
}

.reports-bar-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}

.reports-bar-sub {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Research reports — one group per symbol, newest first */
.ta-symbol-group {
    margin-bottom: 16px;
}

.ta-group-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 2px 8px;
    border-bottom: 1px solid var(--border-subtle, #2A2A2A);
    margin-bottom: 8px;
}

.ta-group-symbol {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    color: var(--text-primary);
}

.ta-group-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.ta-group-latest {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* TradingAgents report cards */
.ta-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.ta-report-card {
    background-color: var(--bg-tertiary, #242424);
    border: 1px solid var(--border-subtle, #2A2A2A);
    border-radius: 8px;
    padding: 12px 14px;
    transition: border-color 0.15s ease;
}

.ta-report-card:hover {
    border-color: var(--border-focus, #3D3D3D);
}

.ta-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.ta-card-symbol {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.ta-card-conf {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    white-space: nowrap;
}

.ta-card-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.ta-card-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ta-card-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.ta-card-actions {
    display: flex;
    gap: 8px;
}

.ta-view-btn,
.ta-pdf-btn {
    background: none;
    border: 1px solid var(--border-focus, #3D3D3D);
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.ta-view-btn:hover {
    background-color: var(--accent-primary, #00D4AA);
    border-color: var(--accent-primary, #00D4AA);
    color: var(--bg-primary, #0D0D0D);
}

.ta-pdf-btn:hover {
    background-color: #FF6B6B;
    border-color: #FF6B6B;
    color: #fff;
}

.ta-accordion-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Predict date picker — dark theme */
/* ==========================================================================
   HISTORY TAB — FILTER BAR + COLLAPSIBLE SECTIONS
   ========================================================================== */

.history-filter-bar {
    padding: 12px 0 8px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}

.history-dropdown-row {
    width: 100%;
}

/* Symbol dropdown — dark-theme overrides */
.history-symbol-dropdown {
    width: 100%;
    min-width: 0;
}

/* Recent chips */
.history-recent-label,
.history-date-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #888);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    min-width: 50px;
}

.history-recent-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.history-recent-chip {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: var(--text-primary, #e0e0e0);
    font-size: 0.78rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    padding: 2px 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.history-recent-chip:hover {
    border-color: var(--accent, #00D4AA);
    background: rgba(0,212,170,0.08);
    color: var(--accent, #00D4AA);
}

/* Date row layout */
.history-date-row {
    flex-wrap: wrap;
    gap: 6px 12px;
}

.history-date-picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-range-btns {
    display: flex;
    align-items: center;
}

/* Date picker — dark-theme overrides */
.history-date-picker {
    flex-shrink: 0;
}

/* Date button group */
.history-date-group {
    gap: 0;
}

.history-date-btn {
    font-size: 0.78rem !important;
    padding: 2px 10px !important;
    border-radius: 4px !important;
}

/* Applied filter chips */
.history-applied-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-height: 0;
}

.history-applied-filters:empty {
    display: none;
}

.history-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0,212,170,0.1);
    border: 1px solid rgba(0,212,170,0.25);
    border-radius: 4px;
    color: var(--accent, #00D4AA);
    font-size: 0.78rem;
    padding: 2px 6px 2px 8px;
}

.history-filter-chip-remove {
    background: none;
    border: none;
    color: var(--accent, #00D4AA);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.history-filter-chip-remove:hover {
    opacity: 1;
    color: #ff6b6b;
}

.history-clear-all-link {
    background: none;
    border: none;
    color: var(--text-secondary, #888);
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0 4px;
}

.history-clear-all-link:hover {
    color: var(--accent, #00D4AA);
}

/* Collapsible sections */
.history-collapsible-section {
    margin-bottom: 4px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    overflow: hidden;
}

.history-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary, #e0e0e0);
    transition: background 0.15s;
    user-select: none;
}

.history-section-header:hover {
    background: rgba(255,255,255,0.05);
}

.history-section-header i:first-child {
    color: var(--accent, #00D4AA);
    font-size: 0.9rem;
}

.history-chevron {
    font-size: 0.75rem;
    color: var(--text-secondary, #888);
    transition: transform 0.2s ease;
}

.history-count-badge {
    font-size: 0.7rem !important;
    padding: 1px 6px !important;
    background: rgba(255,255,255,0.08) !important;
    color: var(--text-secondary, #888) !important;
}

.history-section-body {
    padding: 8px 12px 12px;
}

/* Prediction evaluation bar + scoreboard */
.history-eval-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 8px;
    background: rgba(255,255,255,0.02);
    border-radius: 5px;
}

.history-eval-hint {
    font-size: 0.78rem;
    color: var(--text-secondary, #888);
}

.history-evaluate-btn {
    font-size: 0.75rem !important;
    padding: 2px 10px !important;
    white-space: nowrap;
}

.history-scoreboard-hint {
    font-size: 0.75rem;
    color: var(--text-secondary, #888);
    margin-bottom: 8px;
    font-style: italic;
}

/* "35 · 4 held" -- the trade count leads, holds are context. */
.scoreboard-muted {
    color: var(--text-secondary, #888);
    font-size: 0.85em;
}

/* Headers carry their column definition as a native title tooltip; the
   dotted underline and help cursor are what tell you it is there. */
.scoreboard-th {
    text-decoration: underline dotted rgba(255, 255, 255, 0.28);
    text-underline-offset: 3px;
    cursor: help;
}

.scoreboard-th:hover {
    text-decoration-color: var(--text-secondary, #A0A0A0);
    color: var(--text-primary, #FFFFFF);
}

/* Bootstrap's outline-secondary resolved to #444 text on a near-black
   background (~1.7:1) -- below the 4.5:1 AA floor and, worse, identical to
   how a disabled control reads. Enabled state now sits at --text-secondary
   (#A0A0A0, ~7:1) and disabled keeps the dim treatment, so the two states
   are actually distinguishable. */
.btn-outline-secondary:not(:disabled):not(.disabled) {
    color: var(--text-secondary, #A0A0A0);
    border-color: var(--border-focus, #3D3D3D);
    background-color: transparent;
}

.btn-outline-secondary:not(:disabled):not(.disabled):hover,
.btn-outline-secondary:not(:disabled):not(.disabled):focus-visible {
    color: var(--text-primary, #FFFFFF);
    border-color: var(--text-secondary, #A0A0A0);
    background-color: var(--bg-tertiary, #242424);
}

/* Sidebar buttons are colour-coded by ROLE, not all tinted with the accent.
   Tinting every DATA button teal put them in the same visual class as the
   solid "Add" CTA and the green Full Analysis, so most of the sidebar read
   as one colour. Now:
     neutral  -- passive utilities (Refresh, Export, View Data)
     violet   -- Scoreboard, which opens a separate view rather than acting
     amber / blue / green -- the three run actions (unchanged)
   Scoped to .data-actions: the quick-add chips and period selector share the
   Bootstrap class and stay neutral. */
.data-actions .btn-outline-secondary:not(:disabled):not(.disabled) {
    color: #C3C8D0;
    border-color: var(--border-focus, #3D3D3D);
}

.data-actions .btn-outline-secondary:not(:disabled):not(.disabled):hover,
.data-actions .btn-outline-secondary:not(:disabled):not(.disabled):focus-visible {
    color: var(--text-primary, #FFFFFF);
    border-color: #6B727D;
    background-color: var(--bg-tertiary, #242424);
}

/* Scoreboard opens a view; give it its own identity so it is not mistaken
   for another data utility. Violet is otherwise unused in the sidebar. */
#scoreboard-btn:not(:disabled):not(.disabled) {
    color: #9B8BFF;
    border-color: rgba(123, 97, 255, 0.4);
}

#scoreboard-btn:not(:disabled):not(.disabled):hover,
#scoreboard-btn:not(:disabled):not(.disabled):focus-visible {
    color: #B5A9FF;
    border-color: var(--chart-2, #7B61FF);
    background-color: rgba(123, 97, 255, 0.14);
}

.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
    color: var(--text-muted, #666666);
    border-color: var(--border-subtle, #2A2A2A);
    opacity: 0.55;
}

/* --- Activity panel: expand / minimise / close ------------------------- */

/* Expanded fills the working area rather than a fixed 460px box, so a long
   run is readable without scrolling a 12-line window.
   Doubled selector on purpose: these rules sit earlier in the file than
   .progress-panel, so at equal specificity its width would win on order. */
.progress-panel.progress-panel-expanded {
    width: min(1100px, calc(100vw - 48px));
    /* A fixed height, not just a ceiling: the log below sizes itself to
       fill whatever the stepper leaves (flex: 1 needs a definite parent),
       so the expanded panel is always the full reading window rather than
       a wide box hugging a two-line log. */
    height: min(82vh, 900px);
    max-height: min(82vh, 900px);
}

/* Expanded: the log takes every pixel the stepper does not, and the
   symbol lines get room for a 20-name run instead of a 6-row scroller.
   Selectors doubled for the same ordering reason as above. */
.progress-panel.progress-panel-expanded .progress-feed {
    flex: 1 1 auto;
}

/* Expanded, the symbol lines use the width: a 20-name run is five rows
   of four instead of a 20-line column, and the log below keeps the
   height. */
.progress-panel.progress-panel-expanded .progress-symbols {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    column-gap: 16px;
    max-height: min(22vh, 220px);
}

/* The log under the stepper's Details cannot be sized from CSS alone:
   browsers wrap a <details>'s content in a pseudo-element, so neither a
   percentage height nor flex reaches the lines. assets/feed_details_state.js
   measures what the stepper leaves and sets the lines' max-height inline
   while the panel is expanded; the rule below is the fallback until it
   runs. The rolling log with no run pinned sits directly in the feed and
   fills it through flex. */
.progress-panel.progress-panel-expanded .progress-details {
    min-height: 0;
}

.progress-panel.progress-panel-expanded .progress-feed > .progress-feed-lines {
    flex: 1 1 auto;
    max-height: none;
}

/* Minimised keeps the header (and its controls) reachable, hiding only the
   feed -- distinct from Close, which removes the panel entirely. */
.progress-panel.progress-panel-minimised .progress-feed {
    display: none;
}

.progress-panel.progress-panel-minimised {
    max-height: none;
}

.progress-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.progress-ctl {
    background: transparent;
    border: none;
    color: var(--text-muted, #666666);
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    font-size: 0.72rem;
    cursor: pointer;
}

.progress-ctl:hover,
.progress-ctl:focus-visible {
    color: var(--text-primary, #FFFFFF);
    background: var(--bg-tertiary, #242424);
}

/* Reopen affordance -- without it, Close would be a one-way door. */
.progress-reopen {
    position: fixed;
    bottom: 56px;
    right: 16px;
    z-index: 1030;
    background: var(--bg-card, #16181d);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary, #A0A0A0);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.progress-reopen:hover {
    color: var(--text-primary, #FFFFFF);
    border-color: var(--text-secondary, #A0A0A0);
}

/* Activity Log: an expanded run scrolls within itself so a long run can't
   push the rest of the history list off-screen. */
.activity-run-feed {
    max-height: 320px;
    overflow-y: auto;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.72rem;
    padding: 4px 0;
}

.activity-run-meta {
    font-size: 0.68rem;
    color: var(--text-muted, #666666);
    margin: -4px 0 8px 26px;
}

/* Research report body (verdict-first markdown). Section headings get a
   rule + spacing so the eight sections scan; the Read lines are emphasized
   by their bold marker already. */
.ta-report-body h2 {
    font-size: 1rem;
    margin: 4px 0 8px;
    color: var(--accent-primary, #00D4AA);
}

.ta-report-body h3 {
    font-size: 0.9rem;
    margin: 16px 0 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle, #2A2A2A);
}

.ta-report-body ul {
    margin: 4px 0 8px;
    padding-left: 20px;
}

.ta-report-body p {
    margin: 4px 0;
}

/* AI Report "so what" interpretation lines + watch items */
.analysis-read-line {
    margin-top: 6px;
    padding: 6px 10px;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-secondary, #A0A0A0);
    background: var(--bg-tertiary, #242424);
    border-left: 3px solid var(--accent-primary, #00D4AA);
    border-radius: 0 4px 4px 0;
}

.watch-items-list {
    margin: 4px 0 0;
    padding-left: 20px;
    font-size: 0.82rem;
}

.watch-items-list li {
    margin-bottom: 4px;
}

.ai-report-article-preview {
    font-size: 0.8rem;
}

/* Research report inside a symbol tab */
.research-report-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.research-verdict-badge {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    /* Carries three labelled parts now (decision, conviction, track-record
       weight) rather than a bare percentage — smaller, and allowed to wrap. */
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--bg-tertiary, #242424);
    text-align: right;
}

.research-verdict-badge.positive { color: var(--positive, #00C805); }

.research-verdict-badge.negative { color: var(--negative, #FF5000); }

.research-verdict-badge.neutral  { color: var(--neutral, #FFD700); }

.research-report-footnote {
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--text-muted, #666666);
    font-style: italic;
}

/* Raw AI-report payload: view button + modal body */
.ai-json-btn {
    background: transparent;
    border: 1px solid var(--border-focus, #3D3D3D);
    color: var(--text-secondary, #A0A0A0);
    border-radius: 4px;
    font-size: 0.72rem;
    padding: 2px 8px;
    cursor: pointer;
}

.ai-json-btn:hover {
    color: var(--text-primary, #FFFFFF);
    border-color: var(--text-secondary, #A0A0A0);
}

.ai-json-body {
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-secondary, #A0A0A0);
    background: var(--bg-primary, #0D0D0D);
    padding: 12px;
    border-radius: 6px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Luna actionability lines: the level that matters and the flip condition */
.rec-key-level,
.rec-change-trigger {
    font-size: 0.76rem;
    margin-top: 3px;
    color: var(--text-secondary, #A0A0A0);
}

.rec-key-level::before {
    content: "◆ ";
    color: var(--accent-primary, #00D4AA);
}

.rec-change-trigger::before {
    content: "↺ ";
    color: var(--neutral, #FFD700);
}

/* Scoreboard modal */
.scoreboard-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.scoreboard-filter-symbols {
    flex: 1;
    min-width: 220px;
}

.scoreboard-filter-dates {
    flex-shrink: 0;
}

.scoreboard-summary {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.scoreboard-subtitle {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 14px 0 6px;
}

/* Pipeline activity feed */
.progress-panel-container {
    position: fixed;
    /* Clears Dash's dev toolbar, which sits bottom-right and was covering
       the last few lines of the feed -- the ones that matter most.
       z-index sits BELOW Bootstrap modals (backdrop 1040 / dialog 1055):
       at 9998 the panel floated over every modal's lower-right corner and
       swallowed clicks on their footer buttons. */
    bottom: 56px;
    right: 16px;
    z-index: 1030;
    max-width: calc(100vw - 32px);
}

.progress-panel {
    width: 460px;
    max-width: 100%;
    max-height: min(46vh, 460px);
    transition: width 0.15s ease, max-height 0.15s ease;
    display: flex;
    flex-direction: column;
    background: var(--bg-card, #16181d);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    overflow: hidden;
}

.progress-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}

.progress-title {
    font-size: 0.82rem;
    font-weight: 600;
}

.progress-count {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--text-secondary, #888);
}

.progress-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(0,212,170,0.25);
    border-top-color: var(--accent, #00D4AA);
    border-radius: 50%;
    animation: progress-spin 0.9s linear infinite;
}

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

}

.progress-header-done {
    color: var(--positive, #22c55e);
    font-size: 0.85rem;
}

.progress-feed {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* The log's own scroller. column-reverse keeps the newest line at the
   scroll origin, which is what assets/feed_scroll_anchor.js relies on. */
.progress-feed-lines {
    overflow-y: auto;
    padding: 6px 10px;
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    max-height: min(34vh, 340px);
}

.progress-panel.progress-panel-expanded .progress-feed-lines {
    max-height: min(64vh, 700px);
}

/* --- Stepper: one cell per stage, one line per symbol ------------------ */

.progress-stepper {
    padding: 8px 10px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.74rem;
    font-family: 'SF Mono', 'JetBrains Mono', monospace;
}

.progress-run-caption {
    color: var(--text-secondary, #888);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-run-caption.progress-run-failed,
.progress-run-caption.progress-run-cancelled {
    color: var(--negative, #ef4444);
}

/* Five cells do not fit the 460px panel on one line once counts are on;
   the grid wraps them to a second row at the same width rather than clip. */
.progress-stages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 4px;
    margin-bottom: 6px;
}

.progress-stage {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.03);
    color: var(--text-secondary, #888);
    white-space: nowrap;
    overflow: hidden;
}

.progress-stage-running { color: var(--text-primary, #ddd); }

.progress-stage-count {
    margin-left: auto;
    color: var(--text-muted, #666);
}

.progress-glyph {
    font-size: 0.72rem;
    flex-shrink: 0;
}

.progress-glyph-pending { color: var(--text-muted, #666); }
.progress-glyph-running { color: var(--accent, #00D4AA); }
.progress-glyph-done { color: var(--positive, #22c55e); }
.progress-glyph-failed { color: var(--negative, #ef4444); }
.progress-glyph-skipped { color: var(--text-muted, #666); }

.progress-glyph-spin {
    display: inline-block;
    animation: progress-spin 1.2s linear infinite;
}

.progress-symbols {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 132px;
    overflow-y: auto;
}

.progress-symbol-row {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.5;
}

.progress-symbol-name {
    width: 5.5ch;
    flex-shrink: 0;
    color: var(--text-primary, #ddd);
}

.progress-symbol-glyphs {
    display: flex;
    gap: 9px;
    flex-shrink: 0;
}

.progress-symbol-error {
    color: var(--negative, #ef4444);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-details {
    min-height: 0;
}

.progress-details-summary {
    cursor: pointer;
    padding: 4px 10px;
    font-size: 0.72rem;
    color: var(--text-secondary, #888);
    user-select: none;
}

.progress-details-summary:hover {
    color: var(--text-primary, #ddd);
}

.progress-header-failed {
    color: var(--negative, #ef4444);
    font-size: 0.85rem;
}

/* The completion toast's body: one link per symbol (each opens that
   symbol's report on the run page), the run page link, or for a failed
   run the error line and a View link. */
.run-done-text {
    margin-right: 0.5rem;
}

.run-done-symbols {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.run-done-symbol {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 4px;
    border: 1px solid rgba(0,212,170,0.45);
    background: rgba(0,212,170,0.08);
    color: var(--accent, #00D4AA);
    font-family: 'SF Mono', 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
}

a.run-done-symbol:hover,
a.run-done-symbol:focus {
    background: rgba(0,212,170,0.2);
    color: var(--accent, #00D4AA);
    text-decoration: none;
}

.run-done-symbol-failed {
    border-color: rgba(239,68,68,0.45);
    background: rgba(239,68,68,0.08);
    color: var(--negative, #ef4444);
    text-decoration: line-through;
    cursor: help;
}

.run-done-more {
    align-self: center;
    font-size: 0.74rem;
    color: var(--text-secondary, #888);
}

.run-done-link {
    font-weight: 600;
    color: var(--accent, #00D4AA);
    text-decoration: none;
}

.run-done-link:hover { text-decoration: underline; }

.progress-line {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 0.74rem;
    line-height: 1.5;
    font-family: 'SF Mono', 'JetBrains Mono', monospace;
}

.progress-ts {
    color: var(--text-muted, #666);
    flex-shrink: 0;
}

.progress-icon {
    font-size: 0.7rem;
    color: var(--text-secondary, #888);
    flex-shrink: 0;
}

.progress-icon-ta { color: #7B61FF; }

.progress-icon-luna { color: #f0b429; }

.progress-icon-ai { color: #38bdf8; }

.progress-icon-models { color: var(--accent, #00D4AA); }

.progress-icon-done { color: var(--positive, #22c55e); }

.progress-icon-error { color: var(--negative, #ef4444); }

.progress-msg {
    color: var(--text-primary, #ddd);
    word-break: break-word;
}

.progress-line-error .progress-msg { color: var(--negative, #ef4444); }
/* A report written without evidence the run was configured to gather:
   not a crash, but not a whole run either. */
.progress-line-gap .progress-msg { color: var(--warning, #f59e0b); }

.progress-line-done .progress-msg {
    color: var(--positive, #22c55e);
    font-weight: 600;
}

/* Predictions grouped by symbol → date */
.history-pred-symbol-group {
    margin-bottom: 4px;
}

.history-pred-header {
    padding: 8px 10px;
    gap: 10px;
}

.history-pred-symbol {
    font-weight: 700;
    font-family: 'SF Mono', 'JetBrains Mono', monospace;
    font-size: 0.85rem;
}

.history-pred-hits,
.history-pred-days {
    font-size: 0.72rem;
    color: var(--text-secondary, #888);
}

.history-pred-pnl {
    font-size: 0.78rem;
    font-weight: 600;
}

.history-pred-date-block {
    margin-bottom: 10px;
}

.history-pred-date-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 6px 0 4px;
}

.history-pred-date {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--accent, #00D4AA);
}

.history-pred-target {
    font-size: 0.72rem;
    color: var(--text-secondary, #888);
}

.history-pred-table {
    margin-bottom: 0;
}

/* Period selector: 12 windows in three clusters (days | weeks | months+).
   The cluster-start margin draws the visual group boundary. */
.period-selector {
    flex-wrap: wrap;
    gap: 2px 0;
}

.period-selector .period-cluster-start {
    margin-left: 10px !important;
    border-top-left-radius: var(--bs-border-radius-sm) !important;
    border-bottom-left-radius: var(--bs-border-radius-sm) !important;
}

/* =========================================================================
   Scheduler panel (History tab)
   ========================================================================= */

.scheduler-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scheduler-card {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 6px;
}

.scheduler-card .card-body {
    padding: 12px 14px;
}

.scheduler-job-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.scheduler-job-heading {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.scheduler-job-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.scheduler-job-id {
    font-size: 0.7rem;
    color: var(--text-muted);
    background: none;
    padding: 0;
}

.scheduler-switch {
    margin: 0;
    padding-left: 2.4em;
}

.scheduler-status-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin: 8px 0 10px;
    font-size: 0.78rem;
}

.scheduler-status-ok { color: var(--positive); }

.scheduler-status-error { color: var(--negative); }

.scheduler-status-muted { color: var(--text-muted); }

.scheduler-status-running { color: var(--accent-primary); }

.scheduler-meta { color: var(--text-secondary); }

.scheduler-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
}

.scheduler-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 130px;
}

.scheduler-field-wide {
    width: 100%;
    margin-top: 10px;
}

.scheduler-label {
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted) !important;
    margin: 0 !important;
}

.scheduler-time-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.scheduler-time-input {
    width: 62px !important;
    text-align: center;
}

.scheduler-time-sep {
    color: var(--text-muted);
    font-weight: 600;
}

.scheduler-symbols {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem !important;
}

.scheduler-hint {
    color: var(--text-muted);
    font-size: 0.72rem;
    margin-top: 3px;
}

.scheduler-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.scheduler-feedback { font-size: 0.76rem; }

.scheduler-feedback-ok { color: var(--positive); }

.scheduler-feedback-error { color: var(--negative); }

.scheduler-details { margin-top: 10px; }

.scheduler-detail-summary {
    font-size: 0.76rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.scheduler-detail {
    margin-top: 6px;
    padding: 8px;
    /* Tall enough to read a stack trace without scrolling twice, short
       enough that an expanded log does not push the schedule off screen. */
    max-height: 340px;
    overflow: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-wrap;
}

.scheduler-history { margin-top: 4px; }

.scheduler-subhead {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.scheduler-run-table {
    font-size: 0.76rem;
    margin-bottom: 0;
}

.scheduler-run-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
}

.scheduler-run-job {
    font-family: 'JetBrains Mono', monospace;
}

/* The log belongs to the row above it, so it sits flush under it rather than
   reading as a sixth run with empty columns. */
.scheduler-run-logrow td {
    padding-top: 0;
    border-top: 0;
}

.scheduler-run-logcell .scheduler-details {
    margin-top: 0;
}

.scheduler-empty {
    padding: 14px;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

/* =============================================================================
   TYPE SCALE + NUMERICS
   Added with the routed shell. The token block at the top of this file was
   under-used, so sizing was improvised per feature across 3,000 lines.
   ============================================================================= */

:root {
    --text-2xs: 10px;
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 13px;
    --text-md: 15px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
}

/* Every figure in the app: prices, percentages, P&L, counts, dates, tickers.
   tabular-nums is what stops columns of numbers from shifting as they update. */
.num,
.history-data-table td,
.scoreboard-th + td {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.page h1, .page h2, .page h3 {
    letter-spacing: -0.01em;
}

/* =============================================================================
   HOME
   ============================================================================= */

.page-home {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.home-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--card-radius);
    padding: var(--space-4) var(--space-5) var(--space-5);
}

.home-card-titlerow {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.home-card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.home-card-subtitle {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.home-card-titlerow > *:last-child {
    margin-left: auto;
}

.home-card-link {
    font-size: var(--text-sm);
    color: var(--accent-primary);
    text-decoration: none;
}

.home-card-link:hover { color: var(--accent-hover); }

.home-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

/* The gaps here are load-bearing: without them the meta row runs together as
   "Predicting 2026-08-05Data through 2026-08-0420 symbols". */
.home-meta-row,
.home-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-sm);
}

.home-meta-row > span,
.home-status-row > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.home-meta-label { color: var(--text-muted); }

.home-pending-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.home-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.home-chip-decision { font-weight: 600; }

.home-chip-conf { color: var(--text-muted); font-size: var(--text-2xs); }

.home-chip-level { color: var(--text-muted); font-size: var(--text-2xs); font-weight: 500; }

.home-chip-badge {
    font-size: var(--text-2xs);
    padding: 0 4px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.home-chip-badge-edge { color: var(--positive); background: rgba(0, 200, 5, 0.14); }

.home-chip-badge-fading { color: var(--warning, #e5a50a); background: rgba(229, 165, 10, 0.16); }

.home-chip-positive { color: var(--positive); background: rgba(0, 200, 5, 0.08); }

.home-chip-negative { color: var(--negative); background: rgba(255, 80, 0, 0.08); }

.home-chip-neutral  { color: var(--text-secondary); background: var(--bg-tertiary); }

.home-chip-none     { color: var(--text-muted); }

.home-symbol { font-weight: 600; }

.home-resolution {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    white-space: nowrap;
}

.home-hits { color: var(--text-secondary); font-size: var(--text-xs); }

.home-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-5);
}

.home-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space-4);
}

.home-stat-name {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.home-stat-big {
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.2;
}

.home-stat-sub {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-xs);
}

.home-open-block { padding: var(--space-2) 0; }

.home-open-block + .home-open-block { border-top: 1px solid var(--border-subtle); }

.home-open-head { display: flex; gap: var(--space-3); align-items: baseline; }

.home-open-date { font-weight: 600; }

.home-open-symbols { font-size: var(--text-xs); color: var(--text-secondary); }

.home-job-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
}

.home-job-row + .home-job-row { border-top: 1px solid var(--border-subtle); }

.home-job-name { font-weight: 600; }

.home-empty-note {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    padding: var(--space-3) 0;
}

/* --- Home split: symbol index left, prediction board right ------------- */
/* Fills the scroll container exactly, so the page itself never scrolls:
   each pane owns its overflow instead. */

.home-split {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    /* minmax(0, …) on the row too: an implicit auto row sizes to content,
       which lets a long symbol list push the whole grid past the viewport. */
    grid-template-rows: minmax(0, 1fr);
    gap: var(--space-5);
    height: 100%;
}

.home-left {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--card-radius);
    padding: var(--space-4);
}

.home-left-head { margin-bottom: var(--space-3); }

.home-left-titlerow {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.home-count-badge {
    font-size: var(--text-xs);
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-radius: 999px;
    padding: 1px 8px;
}

.home-symbol-search {
    width: 100%;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-sm);
    padding: 6px 10px;
}

.home-symbol-search:focus {
    outline: none;
    border-color: var(--border-focus);
}

.home-symbol-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0 calc(-1 * var(--space-2));
    padding: 0 var(--space-2);
}

.home-sym-row {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    margin-bottom: 2px;
}

.home-sym-row:hover { background-color: var(--bg-tertiary); }

.home-sym-row.active {
    background-color: var(--bg-tertiary);
    border-color: var(--border-focus);
}

.home-sym-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-primary);
    text-align: left;
}

.home-sym-name {
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
}

.home-sym-close { color: var(--text-secondary); font-size: var(--text-xs); }

.home-sym-head .home-chip { margin-left: auto; }

.home-sym-report {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: 4px;
    font-size: var(--text-xs);
}

.home-sym-report-icon { color: var(--text-muted); font-size: var(--text-xs); }

.home-sym-report-verdict { font-weight: 600; }

.home-sym-report-date { color: var(--text-muted); }

.home-sym-report-none { color: var(--text-muted); }

.home-sym-report-view {
    margin-left: auto;
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--accent-primary);
    font-size: var(--text-2xs);
    padding: 1px 8px;
    cursor: pointer;
}

.home-sym-report-view:hover { border-color: var(--accent-primary); }

.home-left-foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--space-2);
}

.home-new-report-btn { width: 100%; }

.home-jobs-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
}

.home-jobs-line .home-card-link { margin-left: auto; }

.home-job-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-tertiary);
    border-radius: 999px;
    padding: 2px 8px;
}

.home-job-dot { font-size: 7px; color: var(--text-muted); }

.home-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: var(--space-3);
}

.home-right-head,
.home-right-titlerow {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.home-right-head { justify-content: space-between; }

#home-cohort-table {
    flex: 1 1 auto;
    /* The floor lives on the flex container, not the scroller inside it —
       a child min-height would just paint over whatever follows when the
       column runs out of room. Kept modest: past the floor the page may
       scroll a little, below it the board is too short to read at all. */
    min-height: 180px;
    display: flex;
    flex-direction: column;
}

#home-cohort-table > div {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.home-board-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Narrowed to one symbol: the single-row board takes its natural height and
   the reading pane below gets the flex space. */
.home-board-scroll.home-board-compact {
    flex: 0 0 auto;
}

/* --- Inline report reading pane -------------------------------------- */

/* Reading mode. Selecting a symbol makes its report the point of the page:
   the portfolio-wide strips step aside, the split may grow past the
   viewport (reading earns the scroll), and the symbol index sticks so
   switching names never requires scrolling back up. */
.home-split:has(.home-report-reader) {
    height: auto;
    min-height: 100%;
}

.home-split:has(.home-report-reader) .home-left {
    max-height: calc(100vh - 140px);
    position: sticky;
    top: 0;
    align-self: start;
}

.home-right:has(.home-report-reader) .home-rolling,
.home-right:has(.home-report-reader) .home-inflight {
    display: none;
}

.home-report-reader {
    flex: 1 1 auto;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    margin-top: var(--space-3);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--card-radius);
    overflow: hidden;
}

.home-reader-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-sm);
}

.home-reader-icon { color: var(--accent-primary); }

.home-reader-title { font-weight: 600; color: var(--text-primary); }

.home-reader-date { color: var(--text-secondary); font-size: var(--text-xs); }

.home-reader-model { color: var(--text-muted); font-size: var(--text-xs); }

.home-reader-history {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-left: auto;
}

.home-reader-hist-label { color: var(--text-muted); font-size: var(--text-2xs); }

.home-reader-hist-chip {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: var(--text-2xs);
    padding: 1px 8px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.home-reader-hist-chip:hover { color: var(--text-primary); border-color: var(--border-focus); }

.home-reader-action {
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--accent-primary);
    font-size: var(--text-xs);
    padding: 2px 10px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.home-reader-action:hover { border-color: var(--accent-primary); color: var(--accent-hover); }

.home-reader-history + .home-reader-action { margin-left: 0; }

.home-reader-head > .home-reader-action:first-of-type { margin-left: 0; }

.home-report-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
    font-size: 0.85rem;
    line-height: 1.6;
}

.home-reader-empty {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-6);
    gap: var(--space-2);
}

.home-reader-empty-icon { font-size: 1.6rem; opacity: 0.3; }

.home-reader-empty-title { font-weight: 600; }

.home-reader-empty-note { color: var(--text-secondary); font-size: var(--text-sm); }

/* Keep the header readable while the board scrolls under it. */
.home-board-scroll thead th {
    position: sticky;
    top: 0;
    background-color: var(--bg-secondary);
    z-index: 1;
}

.home-filter-note {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.home-filter-clear {
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    padding: 1px 10px;
    cursor: pointer;
}

.home-filter-clear:hover { color: var(--text-primary); border-color: var(--border-focus); }

.home-inflight {
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-2);
    font-size: var(--text-sm);
}

.home-inflight-line {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: 2px 0;
    min-width: 0;
}

.home-inflight-line .home-open-symbols {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rolling performance as a slim chip strip: ONE line — it scrolls sideways
   rather than wrapping, so the board below keeps the vertical room. */
.home-rolling {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: nowrap;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 2px;
}

.home-rolling .home-stat-row {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2);
}

.home-rolling .home-stat { white-space: nowrap; flex: 0 0 auto; }

.home-rolling .home-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: var(--text-xs);
}

.home-rolling .home-stat-name { font-size: var(--text-xs); }

.home-rolling .home-stat-big {
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: inherit;
}

.home-rolling .home-stat-sub { font-size: var(--text-2xs); }

.home-rolling .home-card-link { margin-left: auto; }

.home-card-title-sm {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: nowrap;
}

/* --- Home board tabs: Scheduled | This session ------------------------ */
/* The tab strip is the right pane's head; the active pane inherits the
   column's flex chain so the board still scrolls inside the viewport.
   dbc.Tabs has no element of its own — .home-board-tabs is the nav <ul>
   and the pane container is its SIBLING — so the flex chain hangs off the
   wrapper div around it. Put a layout rule on .home-board-tabs itself and
   the strip collapses to a 1px line the board is painted over. */

.home-board-tabs-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.home-board-tabs-wrap > .nav-tabs {
    border-bottom: 1px solid var(--border-subtle);
    flex: 0 0 auto;
}

.home-board-tabs .nav-link {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 6px 14px;
}

.home-board-tabs .nav-link.active {
    color: var(--accent-primary);
    background: none;
    border-bottom: 2px solid var(--accent-primary);
    font-weight: 600;
}

.home-board-tabs-wrap > .tab-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* dbc wraps a tab's children in an unclassed div of its own, so the height
   has to be handed down through it too: leave it block and the board sizes
   to its rows and the page scrolls instead of the board. */
.home-board-tabs-wrap > .tab-content > .tab-pane.active,
.home-board-tabs-wrap > .tab-content > .tab-pane.active > div,
.home-tab-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--space-3);
}

.home-tab-body { padding-top: var(--space-3); }

/* Scheduled rows: call, actual, result, P&L; the model chips fold away. */

.home-call .home-chip { font-size: var(--text-sm); }

/* The flex goes on an inner line, never on the td: a display:flex cell
   leaves the table layout and stops stretching with its row, so a row
   grown by the open models expander showed the cell as a short box. */
.home-actual-cell { white-space: nowrap; }

.home-actual-line {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
}

.home-move { font-size: var(--text-xs); }

.home-result-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.home-result-hit  { color: var(--positive); background: rgba(0, 200, 5, 0.10); }

.home-result-miss { color: var(--negative); background: rgba(255, 80, 0, 0.10); }

.home-result-held { color: var(--text-secondary); background: var(--bg-tertiary); }

.home-result-pending { color: var(--text-muted); font-size: var(--text-xs); }

.home-pnl { white-space: nowrap; }

.home-not-run { color: var(--text-muted); font-size: var(--text-xs); }

.home-row-not-run td { color: var(--text-muted); }

.home-models-cell { width: 1%; }

.home-models-details { position: relative; }

.home-models-summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--text-xs);
    white-space: nowrap;
    list-style: none;
    user-select: none;
}

.home-models-summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 4px;
    transition: transform 120ms ease;
}

.home-models-summary::-webkit-details-marker { display: none; }

.home-models-details[open] > .home-models-summary::before { transform: rotate(90deg); }

.home-models-details[open] > .home-models-summary { color: var(--text-secondary); }

.home-models-body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) 0 var(--space-1);
    min-width: 260px;
}

.home-model-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.home-model-name { color: var(--text-muted); font-size: var(--text-2xs); }

/* This session: one block per ad-hoc run, newest first. */

.home-session-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow-y: auto;
    min-height: 0;
}

.home-session-run {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3) var(--space-3);
}

.home-session-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    font-size: var(--text-sm);
}

.home-session-started { color: var(--text-secondary); }

.home-session-cutoff { color: var(--text-muted); font-size: var(--text-xs); }

.home-session-owner { color: var(--text-muted); font-size: var(--text-xs); }

.home-session-head .run-status { margin-left: auto; }

.home-session-open { white-space: nowrap; }

.home-session-note { padding: 0 0 var(--space-2); }

.home-session-empty { padding: var(--space-4) 0; }

/* Narrow screens: fall back to a normally scrolling single column. */
@media (max-width: 1100px) {
    .home-split { grid-template-columns: 1fr; height: auto; }
    .home-left { max-height: 420px; }
}

/* =============================================================================
   RUN MODAL
   ============================================================================= */

.run-field { margin-bottom: var(--space-3); }

.run-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}

.run-field-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 4px;
}

/* Pre-flight strip at the top of the run dialog: missing keys and the
   duration estimate, both visible before the run is started. */
.run-preflight:empty { display: none; }

.run-preflight-warn {
    font-size: var(--text-xs);
    color: var(--negative);
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.35);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
}

.run-preflight-estimate {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

.run-scope-radio {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.run-model-name { font-weight: 600; margin-right: var(--space-2); }

.run-model-req {
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.run-article-preview { font-size: var(--text-sm); }

/* =============================================================================
   ACTIVITY + PERFORMANCE PAGES
   ============================================================================= */

.page-lede {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    max-width: 72ch;
    margin-bottom: var(--space-4);
}

.activity-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.activity-filter-field { min-width: 150px; }

.activity-filter-wide { min-width: 260px; flex: 1 1 260px; }

.search-restore-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    cursor: pointer;
    text-align: left;
}

.search-restore-btn:hover { color: var(--accent-hover); text-decoration: underline; }

.perf-pending-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Section headings were uppercase micro-labels everywhere, which made every
   header look the same and read slower. */
.scoreboard-subtitle {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: var(--space-4) 0 var(--space-2);
}

/* =============================================================================
   DASH 4 COMPONENT THEME

   Dash 4.4.1 replaced its react-dates / react-select internals with its own
   components, driven by a --Dash-* token set that ships light by default.
   Every .DateInput_input / .CalendarDay / .Select-control rule this file used
   to carry had quietly stopped matching anything, which is why the date input
   rendered as a white box with invisible text.

   Retheming the tokens fixes every Dash component at once and keeps working
   when new ones appear, instead of chasing each vendor class by specificity
   (Dash's own selectors are more specific than a single class, so that fight
   ends in !important).
   ============================================================================= */

:root {
    --Dash-Text-Strong: var(--text-primary);
    --Dash-Text-Primary: var(--text-primary);
    --Dash-Text-Weak: var(--text-secondary);
    --Dash-Text-Disabled: var(--text-muted);

    /* Was #7f4bc4. One accent for the whole app, and it is teal. */
    --Dash-Fill-Interactive-Strong: var(--accent-primary);
    --Dash-Fill-Interactive-Weak: rgb(255 255 255 / 0.06);
    --Dash-Fill-Primary-Hover: rgb(255 255 255 / 0.06);
    --Dash-Fill-Primary-Active: rgb(255 255 255 / 0.10);
    --Dash-Fill-Disabled: rgb(255 255 255 / 0.04);
    /* The popup surface. Light by default, hence the white calendar. */
    --Dash-Fill-Inverse-Strong: var(--bg-secondary);

    --Dash-Stroke-Strong: var(--border-focus);
    --Dash-Stroke-Weak: var(--border-subtle);

    --Dash-Shading-Strong: rgb(0 0 0 / 0.55);
    --Dash-Shading-Weak: rgb(0 0 0 / 0.35);
}

/* Selected day: the token gives it a teal fill, so its label needs to flip to
   dark rather than inherit the light-on-light default. */
.dash-datepicker-calendar td[aria-selected="true"],
.dash-datepicker-calendar td[data-selected],
.dash-datepicker-calendar td.dash-datepicker-calendar-date-selected {
    color: #000;
    font-weight: 600;
}

/* Dates are figures: same treatment as every other number in the app. */
.dash-datepicker-input,
.dash-datepicker-calendar td,
.dash-datepicker-calendar th {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.dash-datepicker-input-wrapper {
    border-radius: var(--radius-sm);
}

.dash-datepicker-content {
    border-radius: var(--card-radius);
    z-index: 2000;
}

/* =============================================================================
   BOOTSTRAP CONTROLS — global dark theme

   These were previously styled per instance (.symbol-input, and a rule bound
   to .stock-input-container .input-group .form-control), so every control
   added afterwards fell back to Bootstrap's light default: the run dialog's
   selects and the Activity symbol filter rendered as white boxes. Theming the
   families once fixes those and anything added later.
   ============================================================================= */

.form-control,
.form-select {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgb(0 212 170 / 0.15);
}

.form-control::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--bg-secondary);
    color: var(--text-muted);
}

/* Bootstrap inlines a near-black chevron as a background SVG, which is
   invisible on a dark control. */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A0A0A0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

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

/* One accent for every toggle and checkbox, rather than Bootstrap's blue. */
.form-check-input {
    background-color: var(--bg-tertiary);
    border-color: var(--border-focus);
}

.form-check-input:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.form-check-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgb(0 212 170 / 0.15);
}

/* The accent is a light teal, so its label has to be dark. White on teal is
   about 1.9:1, which is unreadable; black is about 11:1. */
.btn-primary,
.btn-success {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--accent-primary);
    --bs-btn-border-color: var(--accent-primary);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-active-border-color: var(--accent-hover);
    --bs-btn-disabled-color: var(--text-muted);
    --bs-btn-disabled-bg: var(--bg-tertiary);
    --bs-btn-disabled-border-color: var(--border-subtle);
    font-weight: 600;
}


/* =============================================================================
   SLIDER (Dash 4 `dash-slider`)

   Ports the ensemble weight slider off rc-slider, which Dash 4 no longer
   renders. Global rather than scoped to .ensemble-weight-slider, for the same
   reason as the controls above: the next slider should arrive themed.
   ============================================================================= */

.dash-slider-track {
    background-color: var(--border-subtle);
}

.dash-slider-range {
    background-color: var(--accent-primary);
}

.dash-slider-thumb {
    background-color: var(--bg-secondary);
    border: 2px solid var(--accent-primary);
}

.dash-slider-thumb:hover,
.dash-slider-thumb:focus {
    border-color: var(--accent-hover);
    box-shadow: 0 0 0 4px rgb(0 212 170 / 0.18);
    outline: none;
}

.dash-slider-mark {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
}

.dash-slider-dot {
    background-color: var(--bg-tertiary);
    border-color: var(--border-subtle);
}

.dash-slider-tooltip {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

/* Disabled weights read as inert rather than merely dimmer. */
.dash-slider-root[data-disabled] .dash-slider-range,
.dash-slider-wrapper[data-disabled] .dash-slider-range {
    background-color: var(--border-focus);
}

.dash-slider-root[data-disabled] .dash-slider-thumb,
.dash-slider-wrapper[data-disabled] .dash-slider-thumb {
    border-color: var(--border-focus);
}

/* Scheduler: type badge, delete, create form ------------------------------- */

.scheduler-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scheduler-type-badge {
    font-size: 0.65rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-secondary, #A0A0A0) !important;
}

.scheduler-delete-btn {
    padding: 2px 8px !important;
    line-height: 1.4;
}

.scheduler-field-grow {
    flex: 1 1 200px;
}

.scheduler-new {
    border: 1px dashed var(--border-subtle, #2A2A2A);
    border-radius: 6px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.015);
}

.scheduler-new-summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #A0A0A0);
    user-select: none;
}

.scheduler-new-summary:hover {
    color: var(--text-primary, #FFFFFF);
}

.scheduler-new-body {
    margin-top: 12px;
}

/* Outcome chips — the eval-bar counts double as filters ------------------- */

.perf-outcome-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.perf-outcome-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle, #2A2A2A);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 0.78rem;
    color: var(--text-secondary, #A0A0A0);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.perf-outcome-chip:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.09);
    color: var(--text-primary, #FFFFFF);
}

/* Disabled means the count is zero — still readable, just not a handle. */
.perf-outcome-chip:disabled {
    cursor: default;
    opacity: 0.45;
}

.perf-chip-right:not(:disabled) {
    color: var(--positive, #00C805);
    border-color: rgba(0, 200, 5, 0.35);
}

.perf-chip-wrong:not(:disabled) {
    color: var(--negative, #FF5000);
    border-color: rgba(255, 80, 0, 0.35);
}

.perf-chip-all {
    margin-left: 4px;
    border-style: dashed;
}

.home-status-link {
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px dotted transparent;
}

.home-status-link:hover {
    border-bottom-color: currentColor;
    filter: brightness(1.15);
}

/* dcc.Loading's wrapper sits between .shell-main and .page-content. It has to
   stretch and allow shrinking, or the scroll container below it is unbounded
   and the page silently clips at the fold instead of scrolling. */
.page-loading-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.page-loading-wrap > * {
    min-height: 0;
}

.perf-symbol-drill {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-primary, #FFFFFF);
    font: inherit;
    cursor: pointer;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.25);
}

.perf-symbol-drill:hover {
    color: var(--accent-primary, #00D4AA);
    border-bottom-color: var(--accent-primary, #00D4AA);
}

/* Symbol scoreboard row: drill link on the left, expand chevron pushed right. */
.perf-symbol-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
}

.perf-row-expand {
    cursor: pointer;
    color: var(--text-secondary, #9aa0a6);
    padding: 0 2px;
}

.perf-row-expand:hover {
    color: var(--accent-primary, #00D4AA);
}

/* The trades row under a symbol: zero-height while its body is collapsed,
   so the scoreboard reads unchanged until a chevron is clicked. */
.perf-trades-row > td {
    padding: 0;
    border-bottom: none;
}

.history-data-table tr.perf-trades-row:hover td {
    background-color: transparent;
}

.perf-trades-body {
    padding: 8px 12px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Model filter above the scorecard. */
.perf-model-row {
    margin-bottom: 4px;
}

.history-model-dropdown {
    width: 240px;
}

/* Run scope: what the whole scorecard is counting. It sits above the eval
   bar because reading a hit rate without knowing whose calls it covers is
   how an ad-hoc rerun got read as the track record. */
.perf-scope-bar {
    margin-bottom: var(--space-2, 8px);
}

.perf-scope-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}

.perf-scope-group .btn {
    font-size: 0.78rem;
    padding: 3px 14px;
    color: var(--text-secondary, #A0A0A0);
    border-color: var(--border-subtle, #2A2A2A);
}

.perf-scope-group .btn.active,
.perf-scope-group .btn-check:checked + .btn {
    color: var(--text-primary, #FFFFFF);
    background-color: var(--bg-tertiary, #1b1b1b);
    border-color: var(--border-strong, var(--border-subtle, #2A2A2A));
    font-weight: 600;
}

.perf-scope-note {
    font-size: 0.75rem;
    color: var(--text-secondary, #888);
    margin-top: 4px;
}

/* The outcome chips change the log far below them, so they have to stay in
   view: clicking "wrong" and seeing nothing move is indistinguishable from a
   dead control. Sticky within .page-content, which is the scroll container. */
.history-eval-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-primary, #0d0d0d);
    padding-top: var(--space-2, 8px);
    padding-bottom: var(--space-2, 8px);
}

.history-log-truncated {
    padding: var(--space-3, 12px);
    color: var(--text-secondary, #9aa0a6);
    font-size: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* =============================================================================
   UX CONSOLIDATION (2026-08): unified symbol rail, run-dialog symbol scope,
   page-local action bars, Home research pane tabs
   ============================================================================= */

/* --- Rail membership groups + controls --- */
.home-group-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: var(--space-2);
    font-size: var(--text-2xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.home-sym-headrow {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
}

.home-sym-headrow .home-sym-head { flex: 1; min-width: 0; }

.home-sym-remove,
.home-sym-add {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--text-2xs);
    cursor: pointer;
    padding: 0 2px;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.home-sym-row:hover .home-sym-remove,
.home-sym-row:hover .home-sym-add { opacity: 1; }

.home-sym-remove:hover { color: var(--negative); }
.home-sym-add { color: var(--accent-primary); font-weight: 700; opacity: 0.6; }
.home-sym-add:hover { color: var(--accent-hover); }

.home-rail-menu { margin-left: auto; }
.home-rail-menu .btn {
    color: var(--text-muted);
    padding: 0 6px;
    border: none;
    box-shadow: none;
}
.home-rail-menu .btn:hover { color: var(--text-primary); }
.home-rail-menu .dropdown-menu {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    font-size: var(--text-xs);
}
.home-rail-menu .dropdown-item { color: var(--text-secondary); }
.home-rail-menu .dropdown-item:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}
.home-rail-menu .dropdown-header {
    color: var(--text-muted);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* --- Home research pane (Report | Chart | News) --- */
.home-detail-pane {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 0;
    flex: 1;
    overflow: auto;
}

.home-detail-actions { display: flex; justify-content: flex-end; }

.home-detail-tabs .nav-link {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 6px 14px;
}

.home-detail-tabs .nav-link.active {
    color: var(--accent-primary);
    background: none;
    border-bottom: 2px solid var(--accent-primary);
    font-weight: 600;
}

.home-detail-tabs .nav-tabs { border-bottom: 1px solid var(--border-subtle); }

.home-detail-chart { padding: var(--space-2) 0; }

.home-detail-chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-1);
}

.home-detail-chip {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    white-space: nowrap;
}

.home-detail-note {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-2xs);
}

.home-detail-empty { padding: var(--space-4) 0; }

.home-detail-news { display: flex; flex-direction: column; }

.home-news-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: 6px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: var(--text-xs);
}

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

.home-news-score {
    flex: none;
    width: 44px;
    font-size: var(--text-2xs);
}

.home-news-title {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-news-title:hover { color: var(--accent-primary); }

.home-news-meta {
    flex: none;
    color: var(--text-muted);
    font-size: var(--text-2xs);
    white-space: nowrap;
}

/* --- Run dialog: symbol scope --- */
.run-symbols-chips {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    margin: var(--space-2) 0;
    min-height: 26px;
}

.run-symchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
}

.run-symchip-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--text-2xs);
    cursor: pointer;
    padding: 0;
}

.run-symchip-remove:hover { color: var(--negative); }

.run-symbols-empty { color: var(--text-muted); font-size: var(--text-xs); }

/* Symbol typeahead: a text box with the suggestion list floated under
   it. The list is shown only while focus is inside the wrap (box or a
   row) and only when it has rows, so a pick, which clears the box and
   empties the rows, closes it without any script. */
.run-symbol-search-wrap { position: relative; max-width: 360px; }

.run-symbol-search {
    width: 100%;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-sm);
    padding: 6px 10px;
}

.run-symbol-search:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.run-symbol-suggest {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1060;
    max-height: 280px;
    overflow-y: auto;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    padding: 4px 0;
}

.run-symbol-search-wrap:focus-within .run-symbol-suggest:not(:empty) {
    display: block;
}

.run-sym-suggest-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 6px 10px;
    color: var(--text-primary);
    font-size: var(--text-sm);
    cursor: pointer;
}

.run-sym-suggest-row:hover,
.run-sym-suggest-row:focus {
    outline: none;
    background-color: var(--bg-secondary);
}

.run-sym-suggest-sym {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent-primary);
    min-width: 64px;
    flex: 0 0 auto;
}

.run-sym-suggest-verify .run-sym-suggest-sym { color: var(--text-secondary); }

.run-sym-suggest-name {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.run-sym-suggest-empty {
    color: var(--text-muted);
    font-size: var(--text-xs);
    padding: 6px 10px;
}

.run-add-btns {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-1);
}

/* Preset segmented control: Bootstrap's btn-check group, sized to the
   dialog's labels. The checked segment reads as the current answer. */
.run-preset-group .btn {
    font-size: var(--text-sm);
    padding: 4px 18px;
    color: var(--text-secondary);
    border-color: var(--border-subtle);
}

.run-preset-group .btn.active,
.run-preset-group .btn-check:checked + .btn {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    border-color: var(--border-strong, var(--border-subtle));
    font-weight: 600;
}

.run-preset-customized { color: var(--warning, #ffc107); }

.run-customize-row { margin: var(--space-2) 0; }

/* --- Page-local action bars --- */
.analyze-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.perf-action-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-2);
}

.home-group-count {
    background-color: var(--bg-tertiary);
    border-radius: 8px;
    padding: 0 7px;
    color: var(--text-secondary);
    letter-spacing: 0;
}

/* --- Per-user scheduling + attribution --- */
.scheduler-owner-badge {
    margin-left: 6px;
    font-size: var(--text-2xs);
    font-weight: 500;
    vertical-align: middle;
}

.home-job-lock {
    color: var(--text-muted);
    font-size: 9px;
    margin-right: 2px;
}

.home-reader-owner {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

/* --- Global watchlist strip (all pages) --- */
.watchlist-strip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: 6px 24px;
    border-bottom: 1px solid var(--border-subtle);
    background-color: var(--bg-secondary);
}

.wl-strip-label {
    font-size: var(--text-2xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex: none;
}

.wl-strip-chips {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    align-items: center;
    min-height: 24px;
}

.wl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
}

.wl-chip-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--text-2xs);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.wl-chip-remove:hover { color: var(--negative); }

.wl-strip-empty { color: var(--text-muted); font-size: var(--text-xs); }

.wl-strip-add {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-xs);
    padding: 3px 10px;
    width: 180px;
}

.wl-strip-add:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* Shown only while the box holds one recognisable ticker. */
.wl-strip-analyze {
    font-size: var(--text-2xs);
    white-space: nowrap;
    padding: 2px 8px;
}

/* --- Home cutoff selector --- */
.home-cutoff-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.home-cutoff-dropdown { width: 190px; font-size: var(--text-xs); }

.home-cutoff-dropdown .Select-control,
.home-cutoff-dropdown .Select-menu-outer {
    background-color: var(--bg-tertiary);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

/* A symbol whose models ran without the news they expected. Amber rather
   than red: the call is unsupported, not wrong. */
.home-news-flag {
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    background-color: rgb(255 215 0 / 0.12);
    border: 1px solid rgb(255 215 0 / 0.35);
    color: var(--neutral);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 500;
    cursor: help;
    white-space: nowrap;
}

/* Non-trading days. Dash marks them with aria-disabled and drops them to 0.6
   opacity, which on white-on-dark still reads as available. A market holiday
   is a hard "not selectable", so say so: muted, struck through, and clearly
   not a target. The strike is what distinguishes a closed session from a day
   that merely sits outside the visible month. */
.dash-datepicker-calendar td.dash-datepicker-calendar-date-disabled {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--text-muted);
    opacity: 0.75;
    cursor: not-allowed;
}

/* Days spilling in from the neighbouring month are context, not choices, and
   should not also look struck out. */
.dash-datepicker-calendar td.dash-datepicker-calendar-date-outside {
    color: var(--text-muted);
    text-decoration: none;
    opacity: 0.4;
}

/* =============================================================================
   ENSEMBLE METHOD EXPLAINER

   The method selector decides how member calls become one decision. A one-line
   description named each method without showing what it would do, so this
   carries the formula and one scenario resolved four ways.
   ============================================================================= */

.ens-ex-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: 6px;
}

.ens-ex-label {
    color: var(--text-muted);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: none;
}

.ens-ex-formula {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 3px 7px;
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.ens-ex-uses { color: var(--text-secondary); font-size: var(--text-xs); }
.ens-ex-ignores { color: var(--text-muted); font-size: var(--text-xs); }

.ens-ex { margin-top: 8px; }

.ens-ex-summary {
    color: var(--accent-primary);
    font-size: var(--text-xs);
    cursor: pointer;
    user-select: none;
    width: fit-content;
}

.ens-ex-summary:hover { color: var(--accent-hover); }

.ens-ex-body {
    margin-top: 8px;
    padding: var(--space-3);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--card-radius);
}

.ens-ex-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.ens-ex-table th {
    color: var(--text-muted);
    font-size: var(--text-2xs);
    font-weight: 500;
    text-align: left;
    padding: 3px 8px 5px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.ens-ex-table td {
    padding: 3px 8px 3px 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.ens-ex-table .num { font-family: var(--font-mono); }

.ens-ex-call { font-family: var(--font-mono); font-weight: 600; }
.ens-ex-buy { color: var(--positive); }
.ens-ex-sell { color: var(--negative); }
.ens-ex-hold { color: var(--text-muted); }

/* The arithmetic is the point, so it keeps its alignment. */
.ens-ex-steps {
    margin: 0 0 10px;
    padding: 8px 10px;
    background-color: var(--bg-secondary);
    border-left: 2px solid var(--border-focus);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.6;
    white-space: pre;
    overflow-x: auto;
}

.ens-ex-verdict-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ens-ex-verdict {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: 700;
}

.ens-ex-verdict.positive { color: var(--positive); }
.ens-ex-verdict.negative { color: var(--negative); }
.ens-ex-verdict.neutral { color: var(--text-muted); }

.ens-ex-conf { color: var(--text-muted); font-size: var(--text-xs); }

.ens-ex-why {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.ens-ex-note {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: var(--text-2xs);
    line-height: 1.5;
}

/* ==========================================================================
   ALPHA LAB — standing hypothesis cards on the Performance page
   ========================================================================== */

.lab-section {
    margin: 20px 0 8px;
}

.lab-section-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.lab-section-note {
    color: var(--text-muted, #888);
    font-size: 0.75rem;
    max-width: 70ch;
}

.lab-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
}

.lab-card {
    border: 1px solid var(--border-subtle, #2a2a2a);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--bg-card, rgba(255, 255, 255, 0.02));
}

.lab-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.lab-card-title {
    font-weight: 600;
    font-size: 0.9rem;
}

.lab-status {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.lab-status-positive {
    color: #0fd28c;
    background: rgba(15, 210, 140, 0.12);
}

.lab-status-neutral {
    color: #d2a20f;
    background: rgba(210, 162, 15, 0.12);
}

.lab-status-muted {
    color: var(--text-muted, #888);
    background: rgba(255, 255, 255, 0.06);
}

.lab-card-what {
    color: var(--text-secondary, #aaa);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0 0 8px;
}

.lab-card-stat {
    font-size: 0.78rem;
    color: var(--text-primary, #ddd);
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    margin-bottom: 8px;
}

.lab-card-more {
    color: var(--accent-primary, #00d4aa);
    font-size: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.lab-card-detail {
    margin-top: 8px;
}

.lab-card-subhead {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #888);
    margin: 8px 0 4px;
}

.lab-card-subhead-inline {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted, #888);
}

.lab-card-method {
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--text-secondary, #bbb);
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    padding: 8px 10px;
    white-space: pre-wrap;
    margin: 0;
}

.lab-card-example {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary, #aaa);
    margin: 0 0 4px;
}

/* ---------------------------------------------------------------------------
   Research report as a page (layouts/report_view.py): verdict term sheet,
   numbered sections with takeaways, Read lines pulled out, mono footer.
   Same structure as the PDF (services/report_service.py). */
.rr {
    --rr-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --rr-buy: var(--positive, #00C805);
    --rr-sell: var(--negative, #FF5000);
    --rr-hold: var(--neutral, #FFD700);
    --rr-accent: var(--accent-primary, #00D4AA);
    --rr-accent-soft: rgba(0, 212, 170, 0.10);
    max-width: 780px;
    color: var(--text-primary, #FFFFFF);
    font-size: 0.9rem;
    line-height: 1.55;
}
.rr-masthead {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-muted, #666666);
    border-bottom: 1px solid var(--border-focus, #3D3D3D); padding-bottom: 8px;
    margin-bottom: 16px;
}
.rr-verdict {
    display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; align-items: start;
    background: var(--bg-secondary, #1A1A1A); border: 1px solid var(--border-subtle, #2A2A2A);
    border-top: 3px solid var(--rr-hold); padding: 16px 18px; border-radius: var(--radius-sm, 6px);
}
.rr-verdict-buy { border-top-color: var(--rr-buy); }
.rr-verdict-sell { border-top-color: var(--rr-sell); }
.rr-label, .rr-fields dt, .rr-read-label, .rr-toc-num, .rr-num {
    font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted, #666666);
}
.rr-call { display: block; font-family: var(--rr-serif); font-size: 2.3rem; line-height: 1; margin-top: 6px; }
.rr-buy { color: var(--rr-buy); } .rr-sell { color: var(--rr-sell); } .rr-hold { color: var(--rr-hold); }
.rr-conv-cell { display: grid; gap: 2px; font-size: 0.8rem; color: var(--text-secondary, #A0A0A0); }
.rr-conv-num { font-family: var(--font-mono); font-size: 1.35rem; color: var(--text-primary, #FFFFFF); font-variant-numeric: tabular-nums; }
.rr-measured { margin-top: 4px; }
.rr-fields {
    grid-column: 1 / -1; margin: 4px 0 0; display: grid; grid-template-columns: max-content 1fr;
    gap: 6px 16px; border-top: 1px solid var(--border-subtle, #2A2A2A); padding-top: 12px;
}
.rr-fields dt { padding-top: 3px; }
.rr-fields dd { margin: 0; }
.rr-why { grid-column: 1 / -1; margin: 4px 0 0; padding: 10px 0 0 18px; border-top: 1px solid var(--border-subtle, #2A2A2A); color: var(--text-secondary, #A0A0A0); }
.rr-why li { margin: 3px 0; }
.rr-inline p { margin: 0; display: inline; }
.rr-toc {
    list-style: none; margin: 20px 0 4px; padding: 0; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 16px; font-size: 0.8rem;
}
.rr-toc a { color: var(--text-secondary, #A0A0A0); text-decoration: none; display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--border-subtle, #2A2A2A); }
.rr-toc a:hover, .rr-toc a:focus-visible { color: var(--rr-accent); outline: none; }
.rr-toc-num { min-width: 1.6em; }
.rr-section h2 {
    font-family: var(--rr-serif); font-weight: 500; font-size: 1.25rem; line-height: 1.25;
    margin: 34px 0 10px; padding-top: 14px; border-top: 1px solid var(--border-focus, #3D3D3D);
    color: var(--text-primary, #FFFFFF); text-wrap: balance;
}
.rr-num { margin-right: 10px; vertical-align: middle; }
.rr-name { margin-right: 8px; }
.rr-take { display: block; font-family: var(--font-primary); font-weight: 400; font-size: 0.9rem; color: var(--text-secondary, #A0A0A0); margin-top: 3px; }
.rr-body p { max-width: 68ch; margin: 0 0 10px; }
.rr-body ul { max-width: 68ch; padding-left: 20px; margin: 4px 0 10px; }
.rr-body li { margin: 4px 0; }
.rr-read {
    border-left: 3px solid var(--rr-accent); background: var(--rr-accent-soft);
    padding: 8px 12px; margin: 8px 0 0; max-width: 68ch; color: var(--text-primary, #FFFFFF);
}
.rr-read-label { color: var(--rr-accent); margin-right: 10px; }
.rr-footer {
    margin-top: 36px; padding-top: 12px; border-top: 1px solid var(--border-focus, #3D3D3D);
    font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.6; color: var(--text-muted, #666666);
}
.rr-footer strong { color: var(--text-secondary, #A0A0A0); }
/* Compact: the Analyze tab card, where the report sits under a header row. */
.rr-compact { font-size: 0.82rem; }
.rr-compact .rr-call { font-size: 1.7rem; }
.rr-compact .rr-section h2 { font-size: 1.05rem; margin-top: 22px; }
.rr-compact .rr-masthead { display: none; }
@media (max-width: 600px) {
    .rr-verdict, .rr-fields { grid-template-columns: 1fr; }
}

/* --- Run page: /runs/<id> ---------------------------------------------- */
/* The board cells are Home's (home-chip, home-resolution); only the
   header, the banner, the two extra cells and the synthesis card are new. */

.page-run {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.run-banner {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    font-size: var(--text-sm);
}

.run-banner-label { font-weight: 600; margin-right: 4px; }

.run-banner-failed {
    color: var(--negative);
    border-color: var(--negative);
    background: rgba(255, 80, 0, 0.08);
}

.run-banner-cancelled {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}

.run-header {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--card-radius);
    padding: var(--space-3) var(--space-5);
}

.run-titlerow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.run-kind-badge {
    padding: 1px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: capitalize;
    white-space: nowrap;
}

.run-kind-scheduled { color: var(--accent-primary); border-color: var(--accent-primary); }

.run-preset { font-size: var(--text-xs); color: var(--text-muted); }

.run-symbols { font-weight: 600; font-size: var(--text-md); }

.run-status {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    white-space: nowrap;
}

.run-status-running, .run-status-queued { color: var(--accent-primary); }
.run-status-done { color: var(--positive); }
.run-status-failed { color: var(--negative); }

.run-facts { flex-wrap: wrap; row-gap: var(--space-1); }

.run-meta { white-space: nowrap; }

.run-report-cell {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.run-report-none, .run-on-watchlist {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.run-report-open { padding: 2px 8px; }

.run-add-btn {
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--accent-primary);
    font-size: var(--text-xs);
    padding: 2px 8px;
    cursor: pointer;
    white-space: nowrap;
}

.run-add-btn:hover { border-color: var(--accent-primary); color: var(--accent-hover); }

.run-row-opened td:first-child { box-shadow: inset 3px 0 0 var(--accent-primary); }

.run-empty { padding: var(--space-2) 0; }

.run-card-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.run-card-title {
    font-weight: 600;
    font-size: var(--text-md);
    color: var(--text-primary);
}

.run-syn-meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.run-syn-body { display: flex; flex-direction: column; gap: var(--space-3); }

.run-syn-action { font-weight: 600; color: var(--text-primary); }

.run-syn-summary, .run-syn-risk, .run-pos-reasoning {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    max-width: 80ch;
}

.run-positions { display: flex; flex-direction: column; gap: var(--space-2); }

.run-pos {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.run-pos-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--text-sm);
}

.run-pos-symbol { font-weight: 600; }

.run-pos-fact { color: var(--text-secondary); font-size: var(--text-xs); }

.run-pos-reasoning { margin-top: var(--space-1); }

.run-syn-watch { margin: 0; padding-left: 18px; font-size: var(--text-sm); color: var(--text-secondary); }

/* Runs section on Reports: the run page's badge and status pill inside
   table cells, where the pill's auto margin would push it out of its cell. */
.runs-table .run-status { margin-left: 0; }
.runs-table .runs-symbols { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.runs-more { margin-left: 4px; color: var(--text-muted); font-size: var(--text-xs); }