/* ==========================================================================
   Design System — Elegant Trading Dashboard
   ========================================================================== */

:root {
    /* Colors, the heat scale and the type stacks live in brand.css, generated
       from config/brand.json by scripts/sync_brand.py. Do not redefine them
       here. */

    /* Layout */
    --radius: 10px;
    --radius-lg: 14px;
    --shadow: 0 4px 20px rgba(2, 6, 23, 0.35);
    --shadow-lg: 0 8px 32px rgba(2, 6, 23, 0.45);
    --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Spacing */
    --space-xs: 0.4rem;
    --space-sm: 0.6rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* Keep anchor targets clear of the sticky masthead. */
    scroll-padding-top: 11rem;
}

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

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ==========================================================================
   Header
   ========================================================================== */
.masthead-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    margin-bottom: 0;
    flex-wrap: nowrap;
}

.masthead-title {
    min-width: 0;
    text-align: left;
}

.header-logo {
    /* 52px against the measured 56px title block: the mark is solid to its
       edges while the text carries leading, so equal pixel heights read as
       the logo being too large. */
    height: 52px;
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

header.masthead {
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 0;
    border-bottom: 1px solid var(--slate-border);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(8px);
}

.masthead-inner {
    /* Same measure and gutter as main, so the h1 and the KPI band share one
       left edge. The bar itself stays full-bleed for the hairline. */
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    text-align: left;
}

/* The wordmark. Every rendered "Confluss" wears this class — masthead,
   onboarding, footer — so the display face never drifts between surfaces. */
.brand-name {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 700;
    letter-spacing: -0.015em;
}

header h1 {
    font-size: clamp(1.45rem, 1.3rem + 0.55vw, 1.7rem);
    line-height: 1.05;
    color: var(--text);
    margin: 0;
    white-space: nowrap;
}

header .period-tabs {
    margin-bottom: 0;
}

.masthead-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    margin-left: auto;
}

.subtitle {
    color: var(--text-soft);
    font-size: 0.9rem;
    margin-top: 0.35rem;
    line-height: 1.5;
    /* A measure, not the full grid: an uncapped line pushed the period tabs
       off the masthead row. */
    max-width: 62ch;
}

/* Data-freshness metadata: it describes the data window the period tabs
   select, so it sits with the controls, not with the brand identity. */
.updated {
    color: var(--text-dim);
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
    margin: 0;
    text-align: right;
}

.masthead-alerts {
    flex-basis: 100%;
    width: 100%;
}

.masthead-alerts:empty {
    display: none;
}

.masthead-alerts {
    flex-basis: 100%;
    width: 100%;
}

.masthead-alerts:empty {
    display: none;
}

.stale-warning {
    display: block;
    margin: 0.5rem 0 0;
    padding: 0.55rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent);
    background: color-mix(in srgb, var(--orange) 10%, transparent);
    color: var(--text);
    border-radius: var(--radius);
    font-size: 0.82rem;
    text-align: center;
}

#error-banner {
    display: none;
    margin-top: 0.75rem;
    padding: 0.6rem 1rem;
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);
    border-radius: var(--radius);
    color: var(--red);
    font-size: 0.8rem;
    text-align: center;
}

#error-banner button {
    background: var(--accent);
    color: var(--bg);
    border: none;
    padding: 0.25rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 0.5rem;
    transition: opacity var(--transition);
}

#error-banner button:hover { opacity: 0.9; }

.auto-refresh-toggle {
    text-align: center;
    margin-top: 0.75rem;
}

.auto-refresh-toggle label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.8rem;
}

.auto-refresh-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-glow);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
    animation: pulse 2s infinite;
}

.auto-refresh-badge .refresh-dot {
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    animation: refresh-pulse 1.5s infinite;
}

@keyframes refresh-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ==========================================================================
   Main Layout
   ========================================================================== */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

/* ==========================================================================
   Stats Grid
   ========================================================================== */
.kpi-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--bg-alt);
    border: 1px solid var(--slate-border);
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
}

.kpi {
    padding: 1.75rem 1.5rem;
    border-right: 1px solid var(--slate-border);
    text-align: left;
}

.kpi:last-child {
    border-right: none;
}

/* Watchlist scoreboard — a single hairline figure, not a card. */
.watchlist-summary {
    display: grid;
    grid-template-columns: minmax(180px, 260px);
    margin-bottom: 1.5rem;
    border-block: 1px solid var(--slate-border);
}

.watchlist-figure {
    padding: 1rem 0;
}

/* Ten numeric columns need their own scroll container and right alignment. */
.watchlist-patterns {
    margin-bottom: 1.5rem;
    border-top: 1px solid var(--slate-border);
    overflow-x: auto;
}

.watchlist-patterns th:not(:first-child),
.watchlist-patterns td:not(:first-child) {
    text-align: right;
}

.watchlist-patterns td {
    white-space: nowrap;
}

.num {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.num-header { text-align: right; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.reason {
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-value {
    display: block;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.03em;
    margin-bottom: 0.35rem;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

.stat-label {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
    color: var(--text-dim);
    font-weight: 500;
}

.stat-period {
    /* The qualifier reads as a phrase on its own line, so the label leads. */
    display: block;
    margin-top: 0.15rem;
    color: var(--text-dim);
    font-size: 0.72rem;
    font-weight: 500;
}

.stat-sub {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-dim);
}

/* Visible, touch-friendly definitions — hover tooltips do not reach phones. */
.stats-note {
    grid-column: 1 / -1;
    margin: 0;
    max-width: 72ch;
    justify-self: center;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-dim);
}

.view-note {
    margin: 0 0 1rem;
    max-width: 80ch;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-dim);
}

/* ==========================================================================
   Period Tabs
   ========================================================================== */
.period-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-soft);
    padding: 0.5rem 0.25rem;
    border-radius: 0;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    transition: color var(--transition), border-color var(--transition);
    white-space: nowrap;
}

.tab:hover {
    background: none;
    color: var(--text);
}

.tab.active {
    background: none;
    color: var(--text);
    border-bottom-color: var(--accent);
    box-shadow: none;
}

/* ==========================================================================
   Charts — Section-based layout
   ========================================================================== */
.charts {
    display: grid;
    /* The leaderboard needs room for the longest strategy name now that the
       panels carry their own padding; the equity curve loses little. */
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.charts.collapsed { display: none; }

/* The grid stretches these wrappers, but the bordered panels inside are
   content-height; let them fill so the two boxes end on the same line. */
.chart-hero { display: flex; flex-direction: column; }
.strategy-panel { display: flex; flex-direction: column; }
.chart-hero > .chart-section { flex: 1; }
.strategy-panel > .chart-section { flex: 1; }

.chart-section {
    background: var(--bg-alt);
    border: 1px solid var(--slate-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    overflow: hidden;
}

/* The rounded panel clips its corners; let an open tooltip escape it. */
.chart-section:has([data-tooltip]:hover) {
    overflow: visible;
}

/* Chart headings and toggles are narrow; keep their tooltips readable. */
.chart-section-header [data-tooltip]::before {
    width: max-content;
    max-width: 340px;
}

.chart-section:hover {
    border-color: var(--slate-border-strong);
}

/* Both panels share one header height, so their controls sit on the same
   baseline even when one title is longer than the other. */
.chart-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.25rem;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid var(--slate-border);
    background: none;
}

.chart-section-header h2 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

/* The toggle group loses width before it wraps: a second row moves the
   controls relative to the neighbouring panel's. */
.chart-toggle-group {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    align-items: center;
    gap: 0.4rem;
}

.benchmark-picker {
    display: flex;
    align-items: center;
}

.benchmark-picker[hidden] {
    display: none;
}

.chart-benchmark-select {
    min-width: 0;
    max-width: 190px;
    padding: 0.32rem 0.55rem;
    border-radius: 20px;
    font-size: 0.76rem;
}

.chart-scope-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0 0.75rem;
}

/* In the shared control row the scope sits at the far right, level with the
   legend and chart toggles instead of adding a second header stack. */
.view-controls .chart-scope-bar {
    margin-left: auto;
    padding: 0;
}

.chart-scope-bar[hidden] {
    display: none;
}

.scope-field {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.scope-label {
    font-size: 0.72rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chart-scope-select {
    min-width: 0;
    max-width: 180px;
    padding: 0.32rem 0.55rem;
    border-radius: 20px;
    font-size: 0.76rem;
}

.chart-caption {
    font-size: 0.76rem;
    color: var(--text-dim);
    margin: 0 0 0.5rem;
}

.chart-caption[hidden] {
    display: none;
}

.scope-sample {
    font-size: 0.7rem;
    color: var(--amber, #d9a441);
    border: 1px solid var(--amber, #d9a441);
    border-radius: 20px;
    padding: 0.1rem 0.5rem;
}

.scope-sample[hidden] {
    display: none;
}

.chart-toggle-btn {
    background: transparent;
    border: 1px solid var(--slate-border);
    color: var(--text-soft);
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    white-space: nowrap;
}

.chart-toggle-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.chart-toggle-btn.active {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}

.chart-container {
    padding: 1rem 0 0;
    min-height: 320px;
    display: flex;
    flex-direction: column;
}

/* Chart toggle (accordion) */
/* Legend and chart visibility share one quiet control row above the panels. */
.view-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

.charts-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    background: none;
    border: 0;
    color: var(--text-soft);
    padding: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    margin-bottom: 0;
    transition: color var(--transition);
    justify-content: flex-start;
}

.charts-toggle:hover {
    color: var(--text);
}

.charts-toggle.collapsed #charts-toggle-icon { transform: rotate(-90deg); }

#charts-toggle-icon {
    display: inline-block;
    transition: transform var(--transition);
    font-size: 0.65rem;
    margin-left: auto;
}

/* ==========================================================================
   Summary Cards
   ========================================================================== */
.summary-cards {
    background: var(--surface);
    border: 1px solid var(--slate-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 2rem;
}

.summary-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.summary-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-bottom: 0.6rem;
    font-weight: 600;
}

.summary-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--bg-alt);
    border: 1px solid var(--slate-border);
    border-radius: 20px;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition);
    color: var(--text-soft);
}

.summary-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.summary-chip.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.summary-chip .chip-count {
    background: var(--surface);
    border-radius: 10px;
    padding: 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
}

/* ==========================================================================
   Signal Tabs
   ========================================================================== */
.signal-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--slate-border);
}

.signal-tab {
    background: transparent;
    border: none;
    color: var(--text-dim);
    padding: 0.8rem 1.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all var(--transition);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    letter-spacing: 0.01em;
}

.signal-tab:hover { color: var(--text); }
.signal-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.tab-count {
    display: inline-block;
    background: var(--surface-hover);
    color: var(--text-dim);
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    margin-left: 0.25rem;
    font-weight: 600;
}

.signal-tab.active .tab-count {
    background: var(--accent-glow);
    color: var(--accent);
}

/* ==========================================================================
   Signal Views
   ========================================================================== */
.signal-view { display: none; }
.signal-view.visible { display: block; }

/* ==========================================================================
   Filter Bar
   ========================================================================== */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--slate-border);
    position: relative;
    z-index: 10;
    backdrop-filter: blur(8px);
}

.filter-panel {
    display: none;
    flex: 1 0 100%;
    padding: 0.75rem 0 0.25rem;
}

.filter-panel.open {
    display: flex;
}

.filter-panel .filter-group {
    border-right: none;
    padding-right: 0;
}

.filter-toggle {
    background: transparent;
    border: 1px solid var(--slate-border);
    border-radius: 6px;
    color: var(--text-soft);
    padding: 0.42rem 0.75rem;
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
}

.filter-toggle[aria-expanded="true"] {
    border-color: var(--accent);
    color: var(--accent);
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1 0 100%;
}

.filter-chips:empty { display: none; }

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent-glow);
    border-radius: 999px;
    color: var(--text);
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    font-family: inherit;
    cursor: pointer;
}

.filter-chip:hover { border-color: var(--accent); }

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-right: 1px solid var(--slate-border);
    padding-right: 0.75rem;
    min-width: 0;
    flex-wrap: wrap;
}

.filter-group:last-of-type {
    border-right: none;
    padding-right: 0;
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-search {
    flex: 1;
    min-width: 150px;
    background: var(--bg-alt);
    border: 1px solid var(--slate-border);
    border-radius: 6px;
    color: var(--text);
    padding: 0.42rem 0.75rem;
    font-size: 0.82rem;
    font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.filter-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.filter-search::placeholder { color: var(--text-dim); }

.filter-select {
    background: var(--bg-alt);
    border: 1px solid var(--slate-border);
    border-radius: 6px;
    color: var(--text);
    padding: 0.42rem 0.6rem;
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
    min-width: 120px;
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.filter-select option { background: var(--surface); color: var(--text); }

.filter-clear {
    background: transparent;
    border: 1px solid var(--slate-border);
    border-radius: 6px;
    color: var(--text-dim);
    padding: 0.42rem 0.75rem;
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
}

.filter-clear:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.filter-clear[hidden] { display: none; }

.filter-count {
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-left: auto;
    white-space: nowrap;
}

.btn-outline {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--slate-border);
    border-radius: 6px;
    padding: 0.42rem 0.75rem;
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* ==========================================================================
   Tables
   ========================================================================== */
.signals-section { margin-bottom: 3rem; }

.table-wrapper {
    background: var(--bg-alt);
    border: 1px solid var(--slate-border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    /* Horizontal scrolling only. `visible` pairs with `auto` as a computed
       `auto`, which turns the wrapper into a vertical scroll container and
       lets tooltips drag the table into a phantom scrollable area. */
    overflow-y: hidden;
    overflow-y: clip;
}

.table-wrapper.filtered { border-radius: 0; }
.table-wrapper.empty { display: none; }

table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

thead { background: var(--surface); }

th, td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--slate-border);
}

th {
    color: var(--text-dim);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--slate-border-strong);
    white-space: nowrap;
}

tbody tr:nth-child(even):not(.detail-row) { background: rgba(255, 255, 255, 0.015); }
tbody tr:not(.detail-row):hover { background: var(--surface-hover); transition: background 0.15s ease; }
tbody tr.expandable:hover { cursor: pointer; }

.loading {
    text-align: center;
    color: var(--text-dim);
    padding: 2rem;
    font-size: 0.85rem;
}

.skeleton {
    display: block;
    height: 0.85rem;
    width: 70%;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--surface-raised) 25%,
        var(--surface-hover) 37%,
        var(--surface-raised) 63%
    );
    background-size: 400% 100%;
    animation: skeletonShimmer 1.4s ease-in-out infinite;
}

@keyframes skeletonShimmer {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

.skeleton-row td { padding: 0.9rem 0.75rem; }
.skeleton-row:nth-child(2) .skeleton { width: 55%; }
.skeleton-row:nth-child(3) .skeleton { width: 38%; }

.no-results td {
    text-align: center;
    color: var(--text-dim);
    padding: 2rem;
    font-style: italic;
    font-size: 0.85rem;
}

/* Tooltips */
[data-tooltip] { position: relative; cursor: help; text-decoration: none; }

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--slate-border);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text);
    white-space: normal;
    left: 0;
    transform: none;
    width: auto;
    max-width: 400px;
    white-space: normal;
    /* Hidden tooltips must not generate a box: `visibility: hidden` still
       contributes to the scrollable overflow of the table wrapper. */
    display: none;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    transform: translateX(-50%) translateY(4px);
    z-index: 9999;
    box-shadow: var(--shadow-lg);
}

[data-tooltip]::after {
    content: "";
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--slate-border);
    opacity: 0;
    display: none;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 9998;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Tooltips for table headers show below to avoid viewport clipping */
th[data-tooltip]::before,
td[data-tooltip]::before {
    bottom: auto;
    top: 120%;
    transform: none;
}
th[data-tooltip]::after,
td[data-tooltip]::after {
    bottom: auto;
    top: 110%;
    border-top-color: transparent;
    border-bottom-color: var(--slate-border);
}
th[data-tooltip]:hover::before,
td[data-tooltip]:hover::before {
    transform: translateY(0);
}

/* ==========================================================================
   Signal badges
   ========================================================================== */
.dir-long { color: var(--green); font-weight: 700; font-size: 0.78rem; }
.dir-short { color: var(--red); font-weight: 700; font-size: 0.78rem; }
.dir-exit { color: var(--orange); font-weight: 700; font-size: 0.72rem; }

.pnl-positive { color: var(--green); font-weight: 600; }
.pnl-negative { color: var(--red); font-weight: 600; }

.outcome-win { color: var(--green); font-weight: 600; font-size: 0.78rem; }
.outcome-loss { color: var(--red); font-weight: 600; font-size: 0.78rem; }
.outcome-open { color: var(--orange); font-weight: 600; font-size: 0.78rem; }
.outcome-exit { color: var(--text-dim); font-weight: 600; font-size: 0.78rem; }

/* Regime exit with no open trade behind it: a muted amber tag, not an outcome. */
.advisory-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    background: rgba(251, 191, 36, 0.08);
    color: var(--amber);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.trigger-imminent {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: color-mix(in srgb, var(--orange) 10%, transparent);
    color: var(--orange);
    font-weight: 700;
    font-size: 0.72rem;
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--orange) 20%, transparent);
    letter-spacing: 0.02em;
}

.trigger-watchlist {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-dim);
    font-weight: 600;
    font-size: 0.72rem;
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
}

/* ==========================================================================
   Heat Score Visualization
   ========================================================================== */
.heat-bar-container {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.heat-bar {
    display: inline-flex;
    gap: 2px;
    height: 10px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--slate-border);
    padding: 1px;
}

.heat-segment {
    flex: 1;
    min-width: 12px;
    height: 100%;
    border-radius: 3px;
    transition: background 0.2s, transform 0.1s;
}

.heat-segment.filled { box-shadow: 0 0 8px currentColor; }
.heat-segment.filled:hover { transform: scaleY(1.3); }

.heat-none { color: var(--text-dim); font-size: 0.68rem; font-style: italic; }

/* Conviction Stars */
.conviction-stars {
    /* Stars are glyphs, not digits: keep the detail row's face and size so the
       table cell and the expanded row do not disagree about the same three. */
    font-family: var(--font-ui);
    color: var(--amber);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
}

/* Multi-strategy confirmation badge (Active Signals table) */
.confluence-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: var(--accent-glow);
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}

/* Heat / conviction criterion chips shown beside the scores */
.heat-crit,
.conv-crit {
    display: inline-block;
    margin: 0.15rem 0.2rem 0 0;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--slate-border-strong);
    background: var(--bg-alt);
    color: var(--text-soft);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: middle;
}

.heat-crit.met {
    color: var(--heat-4);
    border-color: color-mix(in srgb, var(--orange) 45%, transparent);
    background: var(--heat-4-bg);
}

.conv-crit.met {
    color: var(--amber);
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.1);
}

/* Expandable detail rows */
.detail-row {
    display: none;
    background: var(--accent-soft) !important;
}

.detail-row.detail-visible { display: table-row; }

.detail-row td {
    padding: 0.85rem 1rem 0.9rem;
    border-bottom: 2px solid var(--slate-border);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.detail-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    font-weight: 600;
}

.detail-value {
    font-size: 0.82rem;
    color: var(--text);
    font-weight: 500;
}

.detail-value.conviction-stars {
    /* Declared after .detail-value so the expanded row keeps the same three
       stars as the table cell: same face, same amber, same size. */
    font-family: var(--font-ui);
    color: var(--amber);
    font-size: 0.95rem;
}

.detail-stop { color: var(--red); }
.detail-target { color: var(--green); }

/* ==========================================================================
   Signal Cards (mobile)
   ========================================================================== */
.signal-cards {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
}

.signal-card {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--slate-border);
    padding: 1rem 0;
}

.signal-card:hover {
    border-color: var(--slate-border-strong);
}

.signal-card.signal-exit { background: color-mix(in srgb, var(--orange) 5%, transparent); opacity: 0.9; }

.signal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    gap: 0.4rem 0.5rem;
}

.signal-card-ticker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 0 100%;
    min-width: 0;
}

.signal-card-ticker strong {
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.signal-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.signal-card-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

.signal-card-badge.dir-long { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); }
.signal-card-badge.dir-short { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.signal-card-badge.dir-exit { background: color-mix(in srgb, var(--orange) 12%, transparent); color: var(--orange); }
.signal-card-badge.trigger-imminent { background: color-mix(in srgb, var(--orange) 12%, transparent); color: var(--orange); border: 1px solid color-mix(in srgb, var(--orange) 25%, transparent); }
.signal-card-badge.trigger-watchlist { background: rgba(148, 163, 184, 0.1); color: var(--text-dim); }
.signal-card-badge.outcome-win { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); }
.signal-card-badge.outcome-loss { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.signal-card-badge.outcome-exit { background: rgba(148, 163, 184, 0.1); color: var(--text-dim); }
.signal-card-badge.outcome-open { background: color-mix(in srgb, var(--orange) 12%, transparent); color: var(--orange); }

.signal-card-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    font-size: 0.8rem;
}

.signal-card-detail {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.signal-card-detail-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    font-weight: 600;
}

.signal-card-detail-value {
    font-weight: 500;
    color: var(--text);
}

.signal-card-detail-value.pnl-positive { color: var(--green); }
.signal-card-detail-value.pnl-negative { color: var(--red); }
.signal-card-detail-value.detail-stop { color: var(--red); }
.signal-card-detail-value.detail-target { color: var(--green); }

.signal-card-expand {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--slate-border);
    display: none;
}

.signal-card.expanded .signal-card-expand { display: block; }

.signal-card-expand-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    font-size: 0.78rem;
}

.signal-card-expand-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.signal-card-expand-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
}

.signal-card-expand-value { font-weight: 500; color: var(--text); }

.signal-card-toggle {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.signal-card-toggle:hover { color: var(--text); }
.signal-card-toggle svg { transition: transform 0.2s; }
.signal-card.expanded .signal-card-toggle svg { transform: rotate(180deg); }

/* ==========================================================================
   Pager
   ========================================================================== */
/* When a pager will render, the table panel and its footer are one surface:
   the panel squares its bottom, the pager carries the bottom corners. */
.table-wrapper:has(~ .table-pager:not(:empty)) {
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.table-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border: 1px solid var(--slate-border);
    flex-wrap: wrap;
}

.pager-btn {
    background: var(--bg-alt);
    border: 1px solid var(--slate-border);
    border-radius: 6px;
    color: var(--text-dim);
    padding: 0.3rem 0.6rem;
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
    min-width: 36px;
}

.pager-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pager-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
    font-weight: 600;
}

.table-pager:empty { display: none; }

/* ==========================================================================
   Empty States
   ========================================================================== */
.empty-state {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-dim);
}

.empty-state.visible { display: flex; }

.empty-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1rem;
    color: var(--text-dim);
    opacity: 0.5;
}

.empty-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.empty-state h3 {
    font-size: 1.25rem;
    color: var(--text);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.empty-state p {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    max-width: 400px;
    line-height: 1.6;
}

.quick-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.preset-chip {
    background: var(--surface);
    border: 1px solid var(--slate-border);
    border-radius: 20px;
    padding: 0.35rem 0.9rem;
    font-size: 0.78rem;
    color: var(--text-soft);
    cursor: pointer;
    transition: all var(--transition);
}

.preset-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* ==========================================================================
   CTA / Pricing
   ========================================================================== */
/* Method: the rules behind every number, opened from the footer rather than
   parked between the tables and the CTA. */
.method-dialog {
    width: min(760px, calc(100vw - 2rem));
    max-height: min(80dvh, 720px);
    margin: auto;
    padding: 0;
    border: 1px solid var(--slate-border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
}

.method-dialog::backdrop {
    background: rgba(5, 8, 16, 0.6);
}

.method-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--slate-border);
}

.method-dialog-header h2 { font-size: 1.15rem; margin: 0; }

.method-dialog-close {
    background: none;
    border: 0;
    color: var(--text-dim);
    font-size: 1.6rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
}

.method-dialog-body {
    padding: 1.25rem 1.5rem 1.75rem;
    overflow-y: auto;
    max-height: calc(min(80dvh, 720px) - 84px);
}

.method-window {
    margin: 0.3rem 0 0;
    color: var(--text-dim);
    font-size: 0.8rem;
}

.method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 2.5rem;
    margin: 0;
}

.method-item dt {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.45rem;
}

.method-item dd {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .method-grid { grid-template-columns: minmax(0, 1fr); }
}

.cta-section {
    text-align: center;
    padding: 3rem 0;
    border-top: 1px solid var(--slate-border);
}

.cta-section h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.cta-section > p { color: var(--text-soft); margin-bottom: 2rem; font-size: 0.9rem; }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 760px;
    margin: 0 auto;
}

.pricing-grid[data-tier-count="1"] {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
}

.pricing-grid[data-tier-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.price-card {
    background: var(--surface);
    border: 1px solid var(--slate-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition), transform var(--transition);
}

.price-card > .btn { align-self: center; }

.price-card:hover { border-color: var(--slate-border-strong); }

.price-card.featured {
    border-color: var(--accent);
    border-top: 2px solid var(--accent);
}

.popular-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--bg);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.85rem;
    border-radius: 20px;
}

.price-card h3 { font-size: 1rem; margin-bottom: 0.5rem; font-weight: 600; }

.price {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--accent);
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

.price span { font-size: 0.85rem; color: var(--text-dim); font-weight: 400; }

.price-card ul {
    list-style: none;
    margin: 1.5rem 0;
    text-align: left;
    flex: 1;
}

.price-card li {
    padding: 0.35rem 0;
    color: var(--text-soft);
    font-size: 0.85rem;
}

.price-card li::before {
    content: "✓";
    color: var(--green);
    margin-right: 0.5rem;
    font-weight: 700;
}

/* Desktop repair path for the Telegram CTA: t.me buttons use tg://, which
   browsers silently drop when Telegram Desktop is absent. Hidden on narrow
   viewports, where the CTA opens the app directly. */
.price-fallback { display: none; }

@media (min-width: 769px) {
    .price-fallback {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        margin-top: 1.25rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--slate-border);
        text-align: left;
    }
}

.price-qr {
    flex: none;
    display: block;
    width: 62px;
    height: 62px;
    border-radius: 6px;
}

.price-fallback p {
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--text-dim);
    max-width: 30ch;
}

.price-fallback a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.price-fallback a:hover { color: var(--accent-hover); }

.price-handle {
    color: var(--text-soft);
    font-family: var(--font-num);
    font-size: 0.7rem;
    white-space: nowrap;
}

.btn {
    display: inline-block;
    padding: 0.7rem 1.75rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    transition: all var(--transition);
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.btn-primary {
    background: var(--accent);
    color: var(--bg);
}

.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }

.btn-outline {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--slate-border);
}

.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.75rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
    text-align: center;
    padding: 2rem;
    color: var(--text-dim);
    font-size: 0.7rem;
    border-top: 1px solid var(--slate-border);
}

footer a,
.footer-link {
    color: var(--text-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* A control, not an anchor, so it carries none of the button chrome. */
.footer-link {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

/* --- Inline plan and signal history -------------------------------------- */
/* Under the expanded row's grid: the plan to follow and this symbol's record. */
.inline-subhead {
    margin: 1.25rem 0 0.6rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.execution-plan { margin-top: 0.25rem; }

.plan-levels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem 0.9rem;
    margin: 0;
}

.plan-level dt {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.plan-level dd {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--text);
    /* The value sits under its own label, not the column's right edge. */
    text-align: left;
}

.plan-trailing {
    margin: 0.75rem 0 0;
    color: var(--text-soft);
    font-size: 0.8rem;
    line-height: 1.5;
}

.signal-history { margin-top: 0.25rem; }

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

.earlier-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--slate-border);
    font-size: 0.8rem;
}

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

.earlier-date { color: var(--text-dim); font-size: 0.75rem; }
.earlier-strategy { color: var(--text-soft); }
.earlier-result { margin-left: auto; }

.earlier-more,
.earlier-empty {
    margin: 0.5rem 0 0;
    color: var(--text-dim);
    font-size: 0.8rem;
}

.view-tag {
    color: var(--text-soft);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .plan-levels { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
    .earlier-result { margin-left: 0; }
}

/* ==========================================================================
   Legend Panel
   ========================================================================== */
.legend-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    background: none;
    border: 0;
    color: var(--text-soft);
    padding: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: color var(--transition);
}

.legend-toggle:hover {
    color: var(--text);
}

.legend-panel {
    background: var(--bg-alt);
    border: 1px solid var(--slate-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
    max-height: 85vh;
    overflow-y: auto;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
}

.legend-panel.collapsed {
    max-height: 0;
    padding: 0 1.5rem;
    margin: 0;
    border: none;
    overflow: hidden;
}

.legend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--slate-border);
}

.legend-header h3 {
    font-size: 0.9rem;
    font-weight: 600;
}

.legend-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.legend-close:hover { color: var(--text); }

.legend-section { margin-bottom: 1.5rem; }
.legend-section:last-child { margin-bottom: 0; }

.legend-section h4 {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.legend-items { display: flex; flex-direction: column; gap: 0.4rem; }

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: var(--text);
}

.legend-item > span:first-child { min-width: 100px; font-weight: 600; }

.legend-note {
    font-size: 0.68rem;
    color: var(--text-dim);
    margin-top: 0.5rem;
    font-style: italic;
}

.legend-heat-sample {
    display: inline-flex;
    align-items: center;
    min-width: 100px;
}

/* ==========================================================================
   Modal System
   ========================================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.75);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--surface);
    border: 1px solid var(--slate-border);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s;
    box-shadow: var(--shadow-lg);
}

.modal-overlay.visible .modal { transform: scale(1); }

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--slate-border);
}

.modal-header h2 {
    font-size: 1.15rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
}

.modal-close:hover { color: var(--text); }

.modal-body { padding: 1.5rem; overflow-y: auto; flex: 1; }

.onboarding-step { display: none; }
.onboarding-step.active { display: block; animation: fadeIn 0.3s; }

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

.onboarding-step h3 {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
    color: var(--accent);
}

.onboarding-step p {
    color: var(--text-soft);
    margin-bottom: 0.75rem;
    line-height: 1.6;
    font-size: 0.85rem;
}

.onboarding-step ul, .onboarding-step ol {
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-soft);
}

.onboarding-step li { margin-bottom: 0.4rem; }

.onboarding-step code {
    background: var(--bg-alt);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--text);
}

.onboarding-cta {
    margin-top: 1.5rem;
    text-align: center;
}

.onboarding-cta a { color: var(--accent); font-weight: 600; }

.modal-footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--slate-border);
    background: rgba(11, 16, 32, 0.4);
}

.onboarding-progress {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-dim);
}

.onboarding-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.onboarding-dont-show {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-dim);
    cursor: pointer;
    justify-content: center;
}

.info-icon-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; border-radius: 50%; width: 44px; height: 44px; cursor: pointer; font-size: 1.1rem; color: var(--text-soft); flex: 0 0 auto; }
.info-icon-btn:hover { border-color: var(--slate-border-strong); color: var(--text); }

/* ==========================================================================
   Shortcuts Modal
   ========================================================================== */
.shortcuts-modal table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.shortcuts-modal th {
    text-align: left;
    padding: 0.5rem;
    border-bottom: 1px solid var(--slate-border);
    color: var(--text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.shortcuts-modal td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--slate-border);
    color: var(--text-soft);
}

.shortcuts-modal td code {
    color: var(--accent);
    font-family: monospace;
}

/* ==========================================================================
   Context Menu
   ========================================================================== */
.context-menu {
    position: fixed;
    z-index: 2000;
    background: var(--surface);
    border: 1px solid var(--slate-border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    padding: 0.4rem 0;
    display: none;
    font-size: 0.82rem;
}

.context-menu-item {
    padding: 0.5rem 1rem;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s;
}

.context-menu-item:hover {
    background: var(--accent-glow);
    color: var(--accent);
}

.context-menu-divider {
    height: 1px;
    background: var(--slate-border);
    margin: 0.4rem 0;
}

/* ==========================================================================
   Row Selection
   ========================================================================== */
.signal-row-selected {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    background: var(--accent-soft) !important;
    border-radius: 6px;
}

.signal-card.signal-row-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .charts { grid-template-columns: minmax(0, 1fr); }
    /* Full-width panels: the group has room, so it stays on one row. */
    .chart-toggle-group { gap: 0.4rem; }
    .chart-toggle-btn { width: auto; min-width: auto; padding: 0.3rem 0.75rem; font-size: 0.72rem; }
    .chart-container { padding: 1rem; min-height: 250px; }
    .pricing-grid { gap: 0.75rem; }
}

@media (max-width: 768px) {
    html { scroll-padding-top: 0; }
    header.masthead { position: static; }
    .masthead-controls { width: 100%; align-items: flex-start; }
    .updated { text-align: left; }
    main { padding: 1.5rem 0.75rem 3rem; }
    .masthead-inner { padding: 1rem 0.75rem; }
    .charts { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .kpi-band { grid-template-columns: repeat(2, 1fr); }
    .kpi { padding: 1.25rem; }
    .kpi:nth-child(2n) { border-right: none; }
    .kpi:nth-child(-n + 2) { border-bottom: 1px solid var(--slate-border); }
    .stat-value { font-size: 1.5rem; }
    .period-tabs { gap: 0.3rem; }
    .tab { padding: 0.45rem 0.9rem; font-size: 0.75rem; }
    .chart-toggle-group { gap: 0.4rem; }
    .chart-toggle-btn { padding: 0.3rem 0.75rem; font-size: 0.72rem; }
    /* Panels stack at this width, so a wrapped title costs no alignment. */
    .chart-section-header { flex-wrap: wrap; row-gap: 0.5rem; }
    .chart-section-header h2 { white-space: normal; overflow: visible; }
    /* The closed panel owns the gutter now; the chart does not add its own. */
    .chart-container { padding: 0.75rem 0 0; min-height: 250px; }
    .summary-row { grid-template-columns: 1fr; }
    .filter-bar { padding: 0.6rem 0.75rem; gap: 0.4rem; }
    .filter-search { min-width: 120px; font-size: 0.78rem; }
    .filter-select { font-size: 0.78rem; min-width: 100px; padding: 0.4rem 0.5rem; }
    .filter-clear { padding: 0.4rem 0.6rem; font-size: 0.72rem; }
    .btn-outline { padding: 0.38rem 0.7rem; font-size: 0.72rem; }
    table { font-size: 0.75rem; }
    th, td { padding: 0.7rem 0.85rem; }
    .detail-grid { grid-template-columns: repeat(2, 1fr); }
    .signal-card-details { grid-template-columns: 1fr; }
    .signal-card-expand-grid { grid-template-columns: 1fr; }
    .pricing-grid[data-tier-count] { grid-template-columns: minmax(0, 1fr); }
    .legend-panel { max-height: 400px; }
    .modal { max-width: 92vw; margin: 1rem; }
}

@media (max-width: 480px) {
    .masthead-inner { padding: 0.75rem; gap: 0.75rem; }
    header h1 { font-size: 1.35rem; line-height: 1.1; white-space: normal; }
    .subtitle { font-size: 0.82rem; }
    .kpi-band { grid-template-columns: 1fr; }
    .kpi { border-right: none; border-bottom: 1px solid var(--slate-border); }
    .kpi:last-child { border-bottom: none; }
    .period-tabs { flex-direction: row; width: auto; }
    .tab { text-align: center; width: auto; }
    .chart-toggle-group { flex-direction: column; align-items: stretch; gap: 0.4rem; }
    .chart-toggle-btn { width: 100%; text-align: left; }
    .detail-grid { grid-template-columns: 1fr; }
    .summary-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Focus and Motion
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Strategy Leaderboard
   ========================================================================== */
.leaderboard {
    display: flex;
    flex-direction: column;
}

.leaderboard-row,
.leaderboard-head {
    display: grid;
    /* Every track but the name is a fixed width: the head and each row are
       separate grids, so an `auto` track sizes to its own content and the
       labels end up sitting a few pixels off the values beneath them. */
    grid-template-columns: minmax(0, 1fr) minmax(40px, 64px) 4.25rem 3.5rem 5.75rem;
    align-items: center;
    gap: 0.5rem;
}

.leaderboard-row {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--slate-border);
}

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

/* Named columns, the way every table on the page is headed. */
.leaderboard-head {
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--slate-border-strong);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.leaderboard-head .num { text-align: right; }

/* Until the payload carries trade rows the hold column would be all dashes. */
.leaderboard.no-hold .leaderboard-row,
.leaderboard.no-hold .leaderboard-head {
    grid-template-columns: minmax(0, 1fr) minmax(40px, 64px) 4.25rem 5.75rem;
}

.leaderboard-name {
    font-size: 0.85rem;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-bar {
    display: block;
    height: 4px;
    background: var(--heat-track);
    border-radius: 2px;
    overflow: hidden;
}

.leaderboard-bar > span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
}

.leaderboard-bar.is-loss > span { background: var(--red); }

.leaderboard-value {
    font-size: 0.85rem;
    color: var(--text);
    text-align: right;
}

.leaderboard-hold {
    font-size: 0.8rem;
    color: var(--text-dim);
    text-align: right;
}

.leaderboard-n {
    /* Now a phrase ("18 trades"), so it takes the UI face, not the numeric one. */
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--text-dim);
    text-align: right;
    white-space: nowrap;
}

/* Small-sample warning as a badge, so the count column stays a plain phrase. */
.leaderboard-thin {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    background: color-mix(in srgb, var(--amber) 16%, transparent);
    color: var(--amber);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 1px;
}

/* A sample too small to trust keeps its rate but reads as provisional. */
.leaderboard-row.is-thin .leaderboard-value,
.leaderboard-row.is-thin .leaderboard-hold {
    opacity: 0.65;
}

.leaderboard-empty {
    padding: 1.5rem 0;
    color: var(--text-dim);
    font-size: 0.85rem;
}

/* These base rules come after the layout media queries, so the phone
   override has to live here too — equal specificity means source order wins. */
@media (max-width: 480px) {
    /* No room for the bar or the hold at 390 without truncating the strategy
       name, and the percentage already carries the comparison. Every cell
       that stays visible still needs its own track, or the row wraps under
       itself — and the head shares the template, so both stay in step. */
    .leaderboard-row,
    .leaderboard-head,
    .leaderboard.no-hold .leaderboard-row,
    .leaderboard.no-hold .leaderboard-head {
        grid-template-columns: minmax(0, 1fr) 4rem 6.25rem;
    }
    .leaderboard-bar,
    .leaderboard-hold,
    .leaderboard-head-gap { display: none; }
}