/* =============================================================================
   LAGNA ENGINE
   Same palette and layout ideas as before, tidied up and extended for the new
   verdict badges, trade-plan panel, sparklines and banners.
   ========================================================================== */

:root {
    --bg-main: #0f172a;
    --bg-panel: #1e293b;
    --bg-raised: #253248;
    --bg-hover: #334155;
    --bg-input: #0f172a;

    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --text-faint: #64748b;

    --border-color: #334155;
    --border-light: #475569;

    --accent-blue: #38bdf8;
    --accent-blue-bg: rgba(56, 189, 248, 0.12);
    --accent-green: #34d399;
    --accent-green-bg: rgba(52, 211, 153, 0.12);
    --accent-coral: #fb7185;
    --accent-coral-bg: rgba(251, 113, 133, 0.12);
    --accent-yellow: #fbbf24;
    --accent-yellow-bg: rgba(251, 191, 36, 0.12);
    --accent-purple: #a78bfa;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow-soft: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light theme. Only the colours change; every layout rule is shared. */
[data-theme="light"] {
    --bg-main: #f1f5f9;
    --bg-panel: #ffffff;
    --bg-raised: #f8fafc;
    --bg-hover: #e2e8f0;
    --bg-input: #ffffff;

    --text-main: #0f172a;
    --text-muted: #475569;
    --text-faint: #64748b;

    --border-color: #cbd5e1;
    --border-light: #94a3b8;

    --accent-blue: #0284c7;
    --accent-green: #059669;
    --accent-coral: #e11d48;
    --accent-yellow: #b45309;
    --accent-purple: #7c3aed;

    --shadow-soft: 0 8px 24px -14px rgba(15, 23, 42, 0.25);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg-main);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Deliberately not small. This has to be comfortable to read for a long
       time, and comfortable for someone who does not have young eyes. */
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 8px; line-height: 1.3; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 0.95rem; }

a { color: var(--accent-blue); }

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

/* ==========================================================================
   HEADER
   ========================================================================== */

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 14px 24px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    z-index: 500;
}

/* The app header deliberately scrolls away with the page.
   Two stacked sticky elements, one offset by the measured height of the other,
   turned out to be genuinely unreliable: the sticky column headings ended up
   rendering part-way down the table body, on top of the first row, and because
   they carry a z-index they silently absorbed every click on it. Clicking the
   top stock in the list simply did nothing.
   One sticky layer, pinned at zero, has no such ambiguity. */

.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-name { font-size: 1.4rem; font-weight: 800; letter-spacing: 1px; }
.brand-tag {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px;
    color: var(--accent-green); background: var(--accent-green-bg);
    padding: 3px 9px; border-radius: 5px;
}

.app-nav { display: flex; gap: 6px; }

.header-right {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-size: 0.82rem; color: var(--text-muted);
}

.status-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px; border-radius: 999px;
    background: var(--bg-raised); border: 1px solid var(--border-color);
    font-weight: 600;
}
.status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; opacity: 0.85;
}
.updated-at { white-space: nowrap; }

.app-body { padding: 20px 24px 60px; max-width: 1900px; margin: 0 auto; }

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

.tab-btn {
    background: transparent; border: none;
    color: var(--text-muted);
    font-size: 0.95rem; font-weight: 600;
    padding: 8px 14px; border-radius: var(--radius-sm);
    cursor: pointer; transition: var(--transition);
}
.tab-btn:hover { color: var(--text-main); background: var(--bg-hover); }
.tab-btn.active { color: var(--accent-blue); background: var(--accent-blue-bg); }

.tab-content { display: none; animation: fadeIn 0.25s ease; }
.tab-content.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   PANELS
   ========================================================================== */

.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-soft);
}

.panel-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding-bottom: 12px; margin-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}
.panel-status { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }
.panel-hint { color: var(--text-muted); font-size: 0.88rem; margin: 0 0 16px; max-width: 90ch; }

.section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin: 30px 0 14px;
}
.portfolio-summary { font-size: 0.86rem; color: var(--text-muted); }

/* ==========================================================================
   BANNERS
   ========================================================================== */

.banner {
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 18px;
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
}
.banner.info { border-left: 4px solid var(--accent-blue); }
.banner.warn { border-left: 4px solid var(--accent-yellow); }

.banner-title { font-weight: 700; margin-bottom: 5px; }
.banner-body { color: var(--text-muted); font-size: 0.88rem; }
.banner-foot { color: var(--text-faint); font-size: 0.8rem; margin-top: 7px; }

.progress-track {
    height: 6px; border-radius: 3px; background: var(--bg-hover);
    overflow: hidden; margin-top: 11px;
}
.progress-fill {
    height: 100%; background: var(--accent-blue);
    transition: width 0.4s ease;
}

.missing-cols { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
    font-size: 0.75rem; padding: 3px 9px; border-radius: 5px;
    background: var(--accent-yellow-bg); color: var(--accent-yellow);
    border: 1px solid var(--accent-yellow); font-family: ui-monospace, monospace;
}

/* ==========================================================================
   SUMMARY TILES
   ========================================================================== */

.summary-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.summary-tile {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px 14px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}
.summary-tile:hover { border-color: var(--border-light); transform: translateY(-2px); }
.summary-tile.active { border-color: var(--accent-blue); background: var(--accent-blue-bg); }

.tile-value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.tile-label { font-size: 0.82rem; color: var(--text-muted); margin-top: 3px; }

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

.btn-action {
    font-family: inherit; font-size: 0.85rem; font-weight: 600;
    padding: 8px 14px; border-radius: var(--radius-sm);
    border: 1px solid transparent; cursor: pointer;
    transition: var(--transition); background: var(--accent-blue); color: #06121f;
}
.btn-action:hover:not(:disabled) { filter: brightness(1.1); }
.btn-action:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-outline { background: transparent; color: var(--text-muted); border-color: var(--border-color); }
.btn-outline:hover:not(:disabled) { color: var(--text-main); border-color: var(--border-light); background: var(--bg-hover); }
.btn-action.danger, .btn-outline.danger { color: var(--accent-coral); border-color: var(--accent-coral); background: transparent; }
.btn-action.danger:hover, .btn-outline.danger:hover { background: var(--accent-coral-bg); }

.btn-mini {
    font-family: inherit; font-size: 0.76rem; font-weight: 600;
    padding: 5px 9px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border-color); background: transparent;
    color: var(--text-muted); text-decoration: none; text-align: center;
    display: inline-flex; align-items: center; justify-content: center;
    transition: var(--transition); white-space: nowrap;
}
.btn-mini:hover { color: var(--text-main); border-color: var(--border-light); background: var(--bg-hover); }
.btn-mini.btn-blue { color: var(--accent-blue); border-color: var(--accent-blue); }
.btn-mini.btn-purple { color: var(--accent-purple); border-color: var(--accent-purple); }
.btn-mini.danger { color: var(--accent-coral); border-color: var(--accent-coral); }

.preset-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.preset {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    background: var(--bg-raised); color: var(--text-main);
    border: 1px solid var(--border-color); padding: 11px 16px; text-align: left;
}
.preset:hover { border-color: var(--accent-blue); }
.preset-name { font-weight: 700; font-size: 0.9rem; }
.preset-note { font-size: 0.76rem; color: var(--text-muted); font-weight: 400; }

/* ==========================================================================
   FILTERS
   ========================================================================== */

.filter-row { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 18px; }
.filter-row.sliders { gap: 40px; }

.query-status { font-size: 0.85rem; margin: -10px 0 12px; min-height: 1.2em; }
.query-status.error { color: var(--accent-coral); }
.query-status.ok { color: var(--accent-green); }

.qb-match { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qb-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.qb-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qb-row select, .qb-row input, .qb-match select, .qb-text {
    background: var(--bg-input); color: var(--text-main);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: 9px 12px; font-size: 0.9rem; font-family: inherit; outline: none; transition: var(--transition);
}
.qb-row select:focus, .qb-row input:focus, .qb-match select:focus, .qb-text:focus { border-color: var(--accent-blue); }
.qb-field { flex: 1 1 230px; min-width: 200px; }
.qb-op { flex: 0 0 150px; }
.qb-value { flex: 1 1 160px; min-width: 130px; }
.qb-unit { font-size: 0.82rem; color: var(--text-muted); min-width: 52px; }
.qb-remove { background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); border-radius: var(--radius-sm); width: 34px; height: 34px; cursor: pointer; font-size: 1rem; }
.qb-remove:hover { color: var(--accent-coral); border-color: var(--accent-coral); }
.qb-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.qb-text { width: 100%; margin-top: 10px; box-sizing: border-box; }

.query-help { font-size: 0.85rem; color: var(--text-muted); }
.query-help summary { cursor: pointer; font-weight: 600; color: var(--text-muted); user-select: none; }
.query-help summary:hover { color: var(--text-main); }
.query-help p { max-width: 90ch; line-height: 1.5; margin: 10px 0 0; }
.query-help code { background: var(--bg-hover); padding: 1px 5px; border-radius: 4px; }

.filter-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 190px; }
.filter-field.narrow { flex: 0 0 150px; min-width: 150px; }
.filter-field label { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }

.filter-field input, .filter-field select, .range-num-input {
    background: var(--bg-input); color: var(--text-main);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: 9px 12px; font-size: 0.9rem; font-family: inherit; outline: none;
    transition: var(--transition);
}
.filter-field input:focus, .filter-field select:focus, .range-num-input:focus { border-color: var(--accent-blue); }

.range-field { flex: 1; min-width: 260px; }
.range-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.range-head label { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.range-inputs { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--text-muted); }
.range-num-input { width: 78px; padding: 5px 7px; text-align: center; }

/* Two-thumb range slider */
.dual-slider-container { position: relative; width: 100%; height: 6px; }
.slider-track-bg { position: absolute; inset: 0; background: var(--bg-hover); border-radius: 3px; z-index: 1; }
.slider-track-fill { position: absolute; height: 6px; top: 0; background: var(--accent-blue); border-radius: 3px; z-index: 2; }

input[type="range"].dual-range {
    position: absolute; top: 0; left: 0; width: 100%; height: 6px;
    -webkit-appearance: none; appearance: none;
    background: transparent; pointer-events: none;
    z-index: 3; margin: 0; padding: 0; outline: none;
}
input[type="range"].dual-range::-webkit-slider-runnable-track {
    -webkit-appearance: none; appearance: none;
    height: 6px; background: transparent; border: none;
}
input[type="range"].dual-range::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: auto;
    height: 18px; width: 18px; border-radius: 50%; margin-top: -6px;
    background: var(--accent-blue); border: 2px solid var(--bg-panel);
    cursor: grab; z-index: 4;
}
input[type="range"].dual-range::-moz-range-thumb {
    pointer-events: auto; height: 18px; width: 18px; border-radius: 50%;
    background: var(--accent-blue); border: 2px solid var(--bg-panel); cursor: grab;
}
input[type="range"].dual-range::-moz-range-track { height: 6px; background: transparent; }

/* ==========================================================================
   SCREENS
   ========================================================================== */

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.algo-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    background: var(--bg-main); border: 1px solid var(--border-color);
    font-size: 0.85rem; cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.algo-chip:hover { border-color: var(--accent-blue); }
.algo-chip input { accent-color: var(--accent-blue); cursor: pointer; margin: 0; }
.algo-chip:has(input:checked) { border-color: var(--accent-blue); background: var(--accent-blue-bg); color: var(--accent-blue); font-weight: 600; }
.chip-count { font-size: 0.76rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.algo-chip:has(input:checked) .chip-count { color: inherit; opacity: 0.8; }

/* ==========================================================================
   TOOLBAR
   Search, sector and quick screens sit in two slim rows; everything else lives
   in drawers that stay closed until asked for, so the table starts on the first
   screen instead of below three panels.
   ========================================================================== */

.toolbar-panel { padding: 14px 18px; }
.toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.toolbar-row + .toolbar-row { margin-top: 12px; }

.toolbar-search, .toolbar-select {
    background: var(--bg-input); color: var(--text-main);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: 9px 12px; font-size: 0.9rem; font-family: inherit; outline: none; transition: var(--transition);
}
.toolbar-search:focus, .toolbar-select:focus { border-color: var(--accent-blue); }
.toolbar-search { flex: 1 1 260px; min-width: 200px; }
.toolbar-select { flex: 0 1 230px; min-width: 150px; }

.toolbar-drawers { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.drawer-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    background: transparent; color: var(--text-muted); font-family: inherit;
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: 8px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: var(--transition);
}
.drawer-toggle:hover { color: var(--text-main); border-color: var(--border-light); background: var(--bg-hover); }
.drawer-toggle::after { content: '\25BE'; font-size: 0.8em; opacity: 0.7; }
.drawer-toggle.open { color: var(--accent-blue); border-color: var(--accent-blue); background: var(--accent-blue-bg); }
.drawer-toggle.open::after { content: '\25B4'; }

.drawer-badge {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--accent-blue); color: var(--bg-main);
    font-size: 0.7rem; font-weight: 800; line-height: 18px; text-align: center;
}
.drawer-badge[hidden] { display: none; }

.toolbar-label { font-size: 0.74rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.quick-row .panel-status { margin-left: 4px; }

.drawer { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--border-color); }
.drawer[hidden] { display: none; }
.drawer-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; }

/* ==========================================================================
   WEIGHT SLIDERS
   ========================================================================== */

.slider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.slider-item { display: flex; flex-direction: column; gap: 9px; }
.slider-label { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; }
.slider-name { font-weight: 600; border-bottom: 1px dotted var(--text-faint); cursor: help; }
.weight-val { margin-left: auto; font-weight: 800; font-size: 1rem; color: var(--accent-blue); }

.weight-lock {
    font-family: inherit; font-size: 0.68rem; font-weight: 700;
    padding: 2px 8px; border-radius: 4px; cursor: pointer;
    background: transparent; border: 1px solid var(--border-color); color: var(--text-faint);
    transition: var(--transition);
}
.weight-lock.locked { color: var(--accent-yellow); border-color: var(--accent-yellow); background: var(--accent-yellow-bg); }

.slider-item input[type="range"] { width: 100%; accent-color: var(--accent-blue); cursor: pointer; }

/* ==========================================================================
   TABLES
   ========================================================================== */

.main-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.87rem;
}

/* No overflow:hidden here (that used to give the table its rounded corners):
   it also makes the table itself the "nearest scrolling ancestor" for the
   sticky header below, so the header stops sticking to the page and just
   scrolls away with everything else. The corner-radius rules on the first
   and last cells recreate the rounded look without that side effect. */
.main-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius); }
.main-table thead tr:first-child th:last-child { border-top-right-radius: var(--radius); }
.main-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
.main-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }

.main-table thead th {
    position: sticky; top: 0; z-index: 10;
    background: var(--bg-raised);
    text-align: left; font-weight: 700; font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted);
    padding: 11px 12px; border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.sortable-header { cursor: pointer; user-select: none; }
.sortable-header:hover { color: var(--accent-blue); }
.sort-arrow { font-size: 0.85rem; color: var(--accent-blue); }
.sort-arrow.idle { color: var(--text-faint); opacity: 0.4; }

.main-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.main-table tbody tr:last-child td { border-bottom: none; }

.stock-row {
    cursor: pointer;
    transition: background 0.12s;
    /* Keep a row that has been scrolled to clear of the sticky column headings. */
    scroll-margin-top: 60px;
}
.stock-row:hover { background: var(--bg-hover); }
.stock-row.selected { background: var(--accent-blue-bg); box-shadow: inset 3px 0 0 var(--accent-blue); }

.col-index { color: var(--text-faint); font-size: 0.78rem; width: 42px; }
.col-stock { min-width: 150px; }
.col-stock .sym { font-weight: 700; letter-spacing: 0.3px; }
.col-stock .nm {
    font-size: 0.76rem; color: var(--text-muted);
    max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qty { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; }

.col-sector { font-size: 0.8rem; color: var(--text-muted); max-width: 130px; }
.col-price { font-weight: 600; white-space: nowrap; }
.col-spark { width: 96px; }
.sparkline { display: block; }

.col-score .score-value { font-size: 1.05rem; font-weight: 800; }
.col-level { white-space: nowrap; }
.level-price { font-weight: 600; }
.level-sub { font-size: 0.72rem; color: var(--text-muted); }

.micro-warn { font-size: 0.7rem; color: var(--accent-coral); max-width: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.micro-note { font-size: 0.7rem; color: var(--text-faint); max-width: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty-row, .loading {
    padding: 46px 20px; text-align: center; color: var(--text-muted);
    background: var(--bg-panel); border: 1px dashed var(--border-color); border-radius: var(--radius);
}

/* Verdict badge */
.verdict-badge {
    display: inline-block; padding: 4px 10px; border-radius: 6px;
    font-size: 0.76rem; font-weight: 800; white-space: nowrap;
    color: var(--v); background: color-mix(in srgb, var(--v) 14%, transparent);
    border: 1px solid var(--v);
}
.verdict-badge.large { font-size: 1rem; padding: 7px 16px; }

/* Verdict history strip, under the chart */
.verdict-history-head { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 6px; font-size: 0.82rem; }
.verdict-strip { display: flex; gap: 2px; height: 20px; }
.verdict-day { flex: 1; border-radius: 2px; min-width: 2px; }
.verdict-changes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.82rem; }
.verdict-change { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.verdict-arrow { color: var(--text-muted); }
.verdict-day { cursor: pointer; }

/* Verdict day detail, shown on click */
#verdict-day-detail { margin-top: 12px; }
.verdict-day-detail-inner { background: var(--bg-hover); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 14px; }
.verdict-day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 0.88rem; }
.verdict-day-change { margin: 10px 0; padding: 10px 0; border-top: 1px dashed var(--border-color); font-size: 0.84rem; }
.verdict-day-change-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fact-row { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 8px; }
.fact-row .fact { flex: 1 1 45%; }

.conviction-bar { height: 3px; border-radius: 2px; background: var(--bg-hover); margin-top: 5px; width: 92px; overflow: hidden; }
.conviction-fill { height: 100%; }

/* Risk and reward pill */
.rr { font-weight: 700; font-size: 0.82rem; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.rr.good { color: var(--accent-green); background: var(--accent-green-bg); }
.rr.ok { color: var(--accent-yellow); background: var(--accent-yellow-bg); }
.rr.poor { color: var(--accent-coral); background: var(--accent-coral-bg); }

.col-tags { min-width: 180px; }
.tag-wrap { display: flex; flex-wrap: wrap; gap: 4px; max-width: 230px; }
.tag {
    font-size: 0.68rem; font-weight: 600; padding: 2px 7px; border-radius: 4px;
    white-space: nowrap; color: var(--tag);
    background: color-mix(in srgb, var(--tag) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--tag) 55%, transparent);
}

.col-actions { min-width: 190px; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }

.advice-cell { min-width: 210px; max-width: 280px; }
.advice { border-left: 3px solid var(--c); padding-left: 9px; }
.advice.urgent { animation: nudge 2.4s ease-in-out infinite; }
.advice-action { font-weight: 700; color: var(--c); font-size: 0.84rem; }
.advice-detail { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }

@keyframes nudge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.62; }
}

.pagination { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 22px 0; }
.page-info { color: var(--text-muted); font-size: 0.85rem; }

.disclaimer {
    margin-top: 34px; padding: 16px 20px;
    background: var(--bg-panel); border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-yellow); border-radius: var(--radius);
    color: var(--text-muted); font-size: 0.83rem; max-width: 100ch;
}

/* ==========================================================================
   CHART AND TRADE PLAN
   ========================================================================== */

.chart-panel { padding-bottom: 24px; }
.chart-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.range-buttons { display: flex; gap: 5px; flex-wrap: wrap; }

.chart-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 1280px) { .chart-layout { grid-template-columns: 1fr; } }

.chart-holder { min-height: 420px; display: flex; flex-direction: column; }
.chart-holder canvas { flex: 1; min-height: 380px; max-height: 480px; }
.chart-note { font-size: 0.78rem; color: var(--text-faint); margin: 10px 0 0; }

.plan-panel { display: flex; flex-direction: column; gap: 14px; max-height: 620px; overflow-y: auto; padding-right: 6px; }

.verdict-hero {
    background: color-mix(in srgb, var(--v) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--v) 40%, transparent);
    border-left: 4px solid var(--v);
    border-radius: var(--radius); padding: 16px 18px;
}
.verdict-hero-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 9px; }
.confidence { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.verdict-summary { margin: 0; font-size: 0.95rem; line-height: 1.55; }
.data-quality { margin: 9px 0 0; font-size: 0.79rem; color: var(--accent-yellow); }

.plan-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 1600px) { .plan-grid { grid-template-columns: 1fr 1fr; } }

.plan-card {
    background: var(--bg-raised); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); padding: 15px 17px;
}
.plan-card h4 {
    margin: 0 0 12px; color: var(--accent-blue);
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.6px;
}

.fact {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 6px 0; border-bottom: 1px dashed var(--border-color); font-size: 0.86rem;
}
.fact:last-child { border-bottom: none; }
.fact-label { color: var(--text-muted); flex-shrink: 0; }
.fact-value { font-weight: 700; text-align: right; }
.fact-value small { font-weight: 500; color: var(--text-muted); }

.not-provided { font-size: 0.76rem; font-weight: 500; color: var(--text-faint); font-style: italic; cursor: help; }

.checklist, .reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.84rem; }
.check-mark {
    flex-shrink: 0; width: 34px; text-align: center;
    font-size: 0.68rem; font-weight: 800; padding: 2px 0; border-radius: 4px;
}
.check.pass .check-mark { color: var(--accent-green); background: var(--accent-green-bg); }
.check.fail .check-mark { color: var(--accent-coral); background: var(--accent-coral-bg); }
.check-body { display: flex; flex-direction: column; }
.check-label { font-weight: 600; }
.check-detail { font-size: 0.76rem; color: var(--text-muted); }

.reason { font-size: 0.84rem; line-height: 1.5; padding-left: 13px; border-left: 2px solid var(--border-light); }
.reason.good { border-left-color: var(--accent-green); }
.reason.bad { border-left-color: var(--accent-coral); }
.reason.neutral { border-left-color: var(--text-faint); }

.score-bar-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 0.84rem; }
.score-bar-label { flex: 0 0 128px; color: var(--text-muted); }
.score-bar-track { flex: 1; height: 7px; border-radius: 4px; background: var(--bg-hover); overflow: hidden; }
.score-bar-fill { display: block; height: 100%; border-radius: 4px; transition: width 0.35s ease; }
.score-bar-value { flex: 0 0 30px; text-align: right; font-weight: 800; }

.coverage-note { font-size: 0.76rem; color: var(--accent-yellow); margin: 11px 0 0; line-height: 1.45; }

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

.news-wrap { max-width: 900px; margin: 0 auto; }
.news-item { padding: 15px 0; border-bottom: 1px solid var(--border-color); }
.news-item:last-child { border-bottom: none; }
.news-item h4 { font-size: 1rem; margin: 0 0 5px; line-height: 1.4; }
.news-item h4 a { text-decoration: none; }
.news-item h4 a:hover { text-decoration: underline; }
.news-item p { margin: 0 0 8px; color: var(--text-muted); font-size: 0.87rem; }
.news-meta { display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--text-faint); }

.news-facts { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.news-facts li {
    font-size: 0.84rem; line-height: 1.5; padding-left: 11px;
    border-left: 2px solid var(--accent-blue);
}

/* ==========================================================================
   HELP AND MODALS
   ========================================================================== */

.help-card {
    background: var(--bg-panel); border: 1px solid var(--border-color);
    border-radius: var(--radius); padding: 26px 30px; margin-bottom: 20px;
    box-shadow: var(--shadow-soft); max-width: 100ch;
}
.help-card h2 { border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 14px; }
.help-card h3 { margin-top: 22px; }
.help-card p, .help-card li { color: var(--text-muted); font-size: 0.92rem; line-height: 1.75; }
.help-card strong { color: var(--text-main); }
.help-card ul, .help-card ol { padding-left: 22px; }
.help-card code {
    background: var(--bg-raised); padding: 2px 6px; border-radius: 4px;
    font-family: ui-monospace, monospace; font-size: 0.85em; color: var(--accent-blue);
}
.help-card table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 0.87rem; }
.help-card th, .help-card td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-color); }
.help-card th { color: var(--text-main); font-weight: 700; }
.help-card td { color: var(--text-muted); }

.badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.74rem; font-weight: 700; }

.modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.78); z-index: 9999;
    justify-content: center; align-items: center; padding: 24px;
    animation: fadeIn 0.14s ease-out;
}
.modal-overlay.active { display: flex; }

.modal-content {
    background: var(--bg-panel); border: 1px solid var(--border-color);
    border-radius: 16px; padding: 28px 32px;
    width: 100%; max-width: 760px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.modal-content h3 { color: var(--accent-blue); margin-bottom: 14px; }
.modal-content p, .modal-content li { color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; }
.modal-content ::-webkit-scrollbar { width: 6px; }
.modal-content ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 10px; }

/* ==========================================================================
   APPROVED-ONLY CONTENT
   -----------------------------------------------------------------------
   Recommendations (verdicts, stop/target levels, risk-reward, the astrology
   tab) are for approved accounts only - see auth.go and buildLightweightPayload
   in main.go for the actual data-level gate this backs up.
   Deliberately display:none, not a "sign in to see this" placeholder: the
   goal is for a visitor with no access to not even notice there is a locked
   tier, not to be shown a paywall. Table columns carry this class on both
   the <th> and every row's matching <td>, so a whole column disappears
   cleanly instead of misaligning the header against the body.
   ========================================================================== */
body:not(.approved) .approved-only { display: none !important; }
body:not(.admin) .admin-only { display: none !important; }

/* ==========================================================================
   SIGN IN SCREEN
   ========================================================================== */

#access-gateway {
    display: none; position: fixed; inset: 0; z-index: 99999;
    justify-content: center; align-items: center;
    background: var(--bg-main); transition: opacity 0.35s ease;
}
/* The dashboard itself needs no account - this only opens on demand now (the
   "Sign in" header button), rather than blocking the whole page on load. */
#access-gateway.active { display: flex; }

.gateway-card {
    position: relative;
    background: var(--bg-panel); border: 1px solid var(--border-color);
    border-radius: 16px; padding: 38px 34px; width: 100%; max-width: 400px;
    box-shadow: var(--shadow-soft); text-align: center;
}
.gateway-close {
    position: absolute; top: 12px; right: 14px;
    background: none; border: none; font-size: 1.4rem; line-height: 1;
    color: var(--text-muted); cursor: pointer; padding: 4px;
}
.gateway-close:hover { color: var(--text-main); }
.gateway-title { font-size: 1.6rem; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 5px; }
.gateway-subtitle { color: var(--text-muted); font-size: 0.86rem; margin: 0 0 24px; }

.field-label {
    display: block; text-align: left; font-size: 0.74rem; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px;
}
.gateway-input {
    width: 100%; padding: 11px 14px; margin-bottom: 15px;
    background: var(--bg-input); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); color: var(--text-main);
    font-size: 0.95rem; font-family: inherit; outline: none; transition: var(--transition);
}
.gateway-input:focus { border-color: var(--accent-blue); }

.gateway-primary {
    width: 100%; padding: 11px; margin-bottom: 10px;
    background: var(--accent-blue); color: #06121f;
    border: none; border-radius: var(--radius-sm);
    font-size: 0.95rem; font-weight: 700; font-family: inherit; cursor: pointer;
    transition: var(--transition);
}
.gateway-primary:hover:not(:disabled) { filter: brightness(1.1); }
.gateway-primary:disabled { opacity: 0.6; cursor: wait; }

.gateway-secondary {
    width: 100%; padding: 11px; background: transparent;
    color: var(--text-muted); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); font-size: 0.86rem; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: var(--transition);
}
.gateway-secondary:hover { color: var(--text-main); border-color: var(--border-light); }

.gateway-tertiary {
    width: 100%; padding: 9px; margin-top: 4px; background: none; border: none;
    color: var(--text-faint); font-size: 0.82rem; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: var(--transition);
    text-decoration: underline; text-underline-offset: 2px;
}
.gateway-tertiary:hover { color: var(--text-muted); }

.gateway-message { display: none; margin-top: 13px; font-size: 0.85rem; }
.gateway-message.error { color: var(--accent-coral); }
.gateway-message.success { color: var(--accent-green); }

/* ==========================================================================
   TOASTS
   ========================================================================== */

#toast-host {
    position: fixed; bottom: 22px; right: 22px; z-index: 10000;
    display: flex; flex-direction: column; gap: 9px; max-width: 380px;
}
.toast {
    background: var(--bg-panel); border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-blue);
    border-radius: var(--radius-sm); padding: 12px 16px;
    font-size: 0.87rem; box-shadow: var(--shadow-soft);
    transition: opacity 0.3s ease; animation: slideIn 0.25s ease;
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ==========================================================================
   NARROW SCREENS
   ========================================================================== */

@media (max-width: 900px) {
    .app-header { flex-direction: column; align-items: stretch; gap: 12px; }
    .app-body { padding: 16px 12px 50px; }
    .main-table thead th { top: 0; }
    /* Let the wide table scroll sideways rather than crushing the columns. */
    #industry-tables-container,
    #purchased-watchlist-container,
    #observation-watchlist-container { overflow-x: auto; }
    .main-table { min-width: 1100px; }
}

@media print {
    .app-header, .panel, .pagination, .col-actions { display: none !important; }
    body { background: #fff; color: #000; }
}

/* ==========================================================================
   DAY TRADING
   ========================================================================== */

.daytrade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
}

.daytrade-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--c);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow-soft);
}

.dt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.dt-symbol { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.3px; }
.dt-name { font-size: 0.82rem; color: var(--text-muted); }
.dt-sector { font-size: 0.74rem; color: var(--text-faint); margin-top: 2px; }
.dt-side { text-align: right; font-weight: 800; font-size: 1rem; white-space: nowrap; }
.dt-score { font-size: 0.72rem; color: var(--text-faint); font-weight: 500; }

.dt-levels {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
    padding: 12px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
}
.dt-level { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 0.86rem; }
.dt-label { color: var(--text-muted); }
.dt-value { font-weight: 700; }

.dt-money { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding: 12px 0; font-size: 0.84rem; }
.dt-money > div { display: flex; justify-content: space-between; gap: 8px; }
.dt-money span { color: var(--text-muted); }

.dt-costs { border-top: 1px solid var(--border-color); padding-top: 10px; }
.dt-costs summary { cursor: pointer; font-size: 0.8rem; color: var(--accent-yellow); font-weight: 600; }
.cost-table { width: 100%; margin-top: 10px; font-size: 0.8rem; border-collapse: collapse; }
.cost-table td { padding: 4px 0; color: var(--text-muted); }
.cost-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.cost-table .cost-total td { border-top: 1px solid var(--border-color); font-weight: 700; color: var(--text-main); padding-top: 7px; }

.dt-notes { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dt-notes li {
    font-size: 0.78rem; color: var(--text-muted); line-height: 1.45;
    padding-left: 11px; border-left: 2px solid var(--border-light);
}

.summary-tile.static { cursor: default; }
.summary-tile.static:hover { transform: none; border-color: var(--border-color); }

.reasons.plain { list-style: disc; padding-left: 20px; gap: 5px; }
.reasons.plain li { border-left: none; padding-left: 0; }

/* ==========================================================================
   COVERAGE
   ========================================================================== */

.why-answer {
    border-left: 4px solid var(--accent-blue);
    background: var(--bg-raised);
    border-radius: var(--radius-sm);
    padding: 14px 16px; margin-top: 12px;
}
.why-answer p { margin: 6px 0 0; }

.coverage-group {
    background: var(--bg-raised); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px;
}
.coverage-group summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.coverage-symbols { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; align-items: center; }

.col-cap { white-space: nowrap; font-size: 0.84rem; }

/* The data-as-of chip in the header.
   It is present at all times, including when everything is fine, because the
   question it answers -- "are these today's numbers?" -- should never require
   hunting for an answer. Colour only changes when the answer is no. */
.data-asof {
    font-size: 0.78rem;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    white-space: nowrap;
    cursor: help;
}
.data-asof.current  { border-color: var(--accent-green); color: var(--accent-green); }
.data-asof.waiting  { border-color: var(--accent-yellow); color: var(--accent-yellow); }
.data-asof.behind   { border-color: var(--accent-coral); color: var(--accent-coral); }
.data-asof:empty    { display: none; }

/* The live-price chip, next to the one above and deliberately quieter.
   The two answer different questions and are easy to confuse, so they are not
   styled alike: the data-as-of chip says WHICH TRADING DAY the analysis is
   built on, while this one says WHEN A PRICE WAS LAST FETCHED. A stock can be
   priced to the minute and still be analysed on last week's close. */
.live-chip {
    font-size: 0.76rem;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px dashed var(--border-color);
    color: var(--text-muted);
    white-space: nowrap;
    cursor: help;
}
.live-chip.live    { border-style: solid; border-color: var(--accent-green); color: var(--accent-green); }
.live-chip.working { border-style: solid; border-color: var(--accent-blue); color: var(--accent-blue); }
.live-chip.stale   { border-style: solid; border-color: var(--accent-coral); color: var(--accent-coral); }
.live-chip:empty   { display: none; }

/* A refresh in flight. The button keeps its label rather than being replaced by
   a spinner, so the control does not change width and shift the whole header
   sideways while you are looking at it. */
#refresh-now.working {
    opacity: 0.65;
    pointer-events: none;
    position: relative;
}
#refresh-now.working::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid var(--accent-blue);
    animation: refresh-pulse 1.1s ease-in-out infinite;
}
@keyframes refresh-pulse {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}

/* The live-price line on the day trading tab. */
.dt-live-note {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 0.84rem;
    color: var(--text-muted);
}
.dt-live-note.live { border-color: var(--accent-green); }
.dt-live-note strong { color: var(--text-main); }

/* ===========================================================================
   MARKET MOOD AND BACKTEST TABS
   ---------------------------------------------------------------------------
   Both tabs present numbers a person is going to make money decisions on, so the
   styling works hard on two things: making the single most important figure
   unmissable, and never letting a favourable number look more solid than an
   unfavourable one. Positive and negative use the same weight and size; only the
   colour differs.
   ======================================================================== */

.research-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    justify-content: space-between;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}
.research-toolbar .muted { font-size: 0.85rem; max-width: 62ch; line-height: 1.5; }

.empty-state {
    padding: 44px 28px;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-panel);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
    line-height: 1.6;
    max-width: 70ch;
    margin: 0 auto;
}

/* --- the regime dial ---------------------------------------------------- */

.regime-top {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 18px;
    margin-bottom: 18px;
}
@media (max-width: 900px) { .regime-top { grid-template-columns: 1fr; } }

.regime-dial {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 26px 20px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    text-align: center;
}
.regime-dial.good { border-color: var(--accent-green);  background: var(--accent-green-bg); }
.regime-dial.ok   { border-color: var(--accent-blue);   background: var(--accent-blue-bg); }
.regime-dial.warn { border-color: var(--accent-yellow); background: var(--accent-yellow-bg); }
.regime-dial.bad  { border-color: var(--accent-coral);  background: var(--accent-coral-bg); }

.regime-state      { font-size: 1.35rem; font-weight: 700; letter-spacing: 0.01em; }
.regime-score      { font-size: 3rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.regime-scale      { font-size: 0.75rem; color: var(--text-muted); max-width: 26ch; line-height: 1.4; }
.regime-confidence { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }

.regime-words h3 { margin-top: 0; }
.regime-words p  { line-height: 1.65; }

/* --- the signal breakdown ------------------------------------------------ */

.signal-row { padding: 14px 0; border-bottom: 1px solid var(--border-color); }
.signal-row:last-child { border-bottom: none; }

.signal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 4px; }
.signal-name { font-weight: 600; }
.signal-weight { font-size: 0.75rem; color: var(--text-faint); margin-left: auto; }
.signal-value { font-size: 0.92rem; margin-bottom: 4px; }
.signal-explain { font-size: 0.83rem; color: var(--text-muted); line-height: 1.55; max-width: 90ch; }

.pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid var(--border-light);
    color: var(--text-muted);
}
.pill.positive, .pill.helpful  { background: var(--accent-green-bg); border-color: var(--accent-green); color: var(--accent-green); }
.pill.negative, .pill.headwind { background: var(--accent-coral-bg); border-color: var(--accent-coral); color: var(--accent-coral); }
.pill.neutral { background: transparent; }

/* --- the summary strip --------------------------------------------------- */

.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.stat-strip .stat {
    padding: 14px 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}
.stat-strip .stat-label { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 6px; }
.stat-strip .stat-value { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-strip .stat-note  { font-size: 0.74rem; color: var(--text-faint); margin-top: 2px; }

.pos { color: var(--accent-green); }
.neg { color: var(--accent-coral); }
.small { font-size: 0.82rem; }

/* --- the regime history bars --------------------------------------------- */

.regime-spark { width: 100%; height: 130px; display: block; }
.regime-spark .rb.good { fill: var(--accent-green); }
.regime-spark .rb.ok   { fill: var(--accent-blue); }
.regime-spark .rb.warn { fill: var(--accent-yellow); }
.regime-spark .rb.bad  { fill: var(--accent-coral); }
.regime-spark .rb-axis { stroke: var(--border-light); stroke-width: 0.4; }

.spark-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.74rem;
    color: var(--text-faint);
    margin-top: 4px;
}

/* --- tables shared by both tabs ------------------------------------------ */

.table-scroll { overflow-x: auto; }

.mini-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.mini-table th {
    text-align: left;
    padding: 9px 12px;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
}
.mini-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
    font-variant-numeric: tabular-nums;
}
.mini-table tbody tr:last-child td { border-bottom: none; }

/* The benchmark is the row every other row has to beat, so it is marked out
   rather than left to blend in and be skipped over. */
.benchmark-row td { background: var(--bg-raised); }
.benchmark-row .strategy-name::after {
    content: ' - the bar to beat';
    font-weight: 400;
    color: var(--text-faint);
    font-size: 0.8rem;
}

.strategy-name { font-weight: 600; margin-bottom: 3px; }
.mini-table td .muted { white-space: normal; max-width: 46ch; line-height: 1.45; }

/* .help-card caps itself at 100 characters, which is right for prose and wrong
   for a table of eight numeric columns: the last columns fall off the edge.
   Cards whose content is a wide table opt out. */
.help-card.wide { max-width: none; }
.help-card.wide .strategy-name { white-space: nowrap; }

/* .help-card td sets a muted colour and outranks a bare .pos/.neg class, so a
   loss and a gain would render in the same grey. On a table people read to
   decide where their money goes, that is not a cosmetic problem. */
.help-card .mini-table td.pos, .mini-table td.pos { color: var(--accent-green); }
.help-card .mini-table td.neg, .mini-table td.neg { color: var(--accent-coral); }
.help-card .mini-table td.pos strong, .help-card .mini-table td.neg strong { color: inherit; }

/* --- the plain-language answer ------------------------------------------- */

.verdict-card { border-left: 3px solid var(--accent-blue); }
.verdict-text { font-size: 1.02rem; line-height: 1.75; max-width: 88ch; }

/* --- feature importances ------------------------------------------------- */

.imp-row {
    display: grid;
    grid-template-columns: 210px 1fr 56px;
    gap: 12px;
    align-items: center;
    padding: 5px 0;
    font-size: 0.85rem;
}
.imp-bar { height: 9px; background: var(--bg-input); border-radius: 999px; overflow: hidden; }
.imp-fill { height: 100%; background: var(--accent-blue); border-radius: 999px; }
.imp-share { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }

/* ===========================================================================
   TEST ONE STOCK
   ---------------------------------------------------------------------------
   The design problem on this tab is the opposite of the usual one. The numbers
   are easy to make look authoritative and they do not deserve it: a handful of
   trades on one company is close to an anecdote. So the answer is stated
   plainly and the sample size sits immediately underneath it in the same block,
   where it cannot be skipped past on the way to the big green number.

   Colour follows the ANSWER, never the strategy. A timing result that lost to
   buy and hold renders in red even though it is "the app's" line, because the
   alternative is a page that congratulates itself.
   ======================================================================== */

.numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.numeric { text-align: right; }

.sb-meta { font-size: 0.82rem; margin-bottom: 14px; }

.sb-headline {
    border-left: 3px solid var(--c, var(--accent-blue));
    background: var(--bg-raised);
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 18px;
}
.sb-headline-main {
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.45;
    max-width: 80ch;
}
.sb-headline-detail {
    margin-top: 8px;
    color: var(--text-muted);
    line-height: 1.65;
    max-width: 88ch;
}

/* The two amounts of money, with the gap between them in the middle. This is
   the whole question rendered as one row. */
.sb-versus {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
    background: var(--bg-card, var(--bg-raised));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.sb-versus-side { text-align: center; }
.sb-versus-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.sb-versus-value {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}
.sb-versus-sub { font-size: 0.82rem; color: var(--text-faint); margin-top: 4px; }

.sb-versus-gap {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 0 18px;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}
.sb-versus-gap-label {
    font-size: 0.74rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-top: 4px;
}

@media (max-width: 860px) {
    .sb-versus { grid-template-columns: 1fr; }
    .sb-versus-gap { border-left: none; border-right: none; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 14px 0; }
}

/* The model checkbox. Its cost is stated on the control itself rather than in
   help text elsewhere, because the difference between this run taking four
   seconds and four minutes is the single thing worth knowing before ticking it. */
.sb-model-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 14px;
    font-size: 0.88rem;
    color: var(--text-muted);
    cursor: pointer;
    max-width: 82ch;
}
.sb-model-toggle input { margin-top: 3px; flex-shrink: 0; }
.sb-model-toggle em { display: block; color: var(--text-faint); font-style: normal; font-size: 0.82rem; margin-top: 2px; }

#sb-run.working { opacity: 0.6; pointer-events: none; }

.verdict-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    font-size: 0.78rem;
    white-space: nowrap;
}

/* --- lists --------------------------------------------------------------- */

.plain-list { padding-left: 20px; margin: 0; }
.plain-list li { margin-bottom: 9px; line-height: 1.6; color: var(--text-muted); max-width: 92ch; }

.headline-list { padding-left: 18px; margin: 12px 0 0; }
.headline-list li { margin-bottom: 8px; line-height: 1.5; }
.headline-list a { color: var(--accent-blue); text-decoration: none; }
.headline-list a:hover { text-decoration: underline; }
.headline-list .muted { font-size: 0.76rem; margin-left: 6px; }

/* --- the market-conditions line on a stock's verdict --------------------- */

/* It sits with the verdict rather than inside the scores, because the weather is
   context for a judgement and not part of it. */
.regime-note {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border-light);
    background: var(--bg-raised);
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text-muted);
}
.regime-note.caution { border-left-color: var(--accent-yellow); }
.regime-note.warning { border-left-color: var(--accent-coral); }
.regime-note-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin-bottom: 3px;
}

/* ==========================================================================
   WATCH AND REJECT TABS
   ========================================================================== */
.watch-missing { margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--border-color); border-radius: var(--radius-sm); font-size: 0.88rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-hover); border-radius: 999px; padding: 3px 4px 3px 10px; font-weight: 600; }
.chip-x { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 6px; }
.chip-x:hover { color: var(--accent-coral); }
.reject-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.reject-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.reject-form input, .reject-form select {
    flex: 1 1 200px; background: var(--bg-input); color: var(--text-main);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: 9px 12px; font-size: 0.9rem; font-family: inherit; outline: none;
}
.reject-form input:focus, .reject-form select:focus { border-color: var(--accent-blue); }
.reject-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; }
.reject-row:last-child { border-bottom: none; }