/* ══════════════════════════════════════════════════════
   QuantBucket — design tokens
   Single theme signal: html.dark  (see static/theme.js)
   Colours are BARE RGB CHANNEL TRIPLES, not hex: Tailwind's opacity
   modifiers (bg-panel/60) only work via rgb(var(--c-x) / <alpha-value>).
   Ratios in comments are WCAG 2.1, verified by scripts/hooks/check_contrast.py.
   ══════════════════════════════════════════════════════ */

:root {
    color-scheme: light;

    /* ── Type ── */
    --font-main: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* ── Spacing ── */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;

    /* ── Radius ── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* ── Surfaces ── */
    --c-page:        248 250 252;   /* slate-50  */
    --c-panel:       255 255 255;
    --c-sunken:       241 245 249;   /* slate-100 */
    --c-hover:       241 245 249;   /* slate-100 */
    --c-overlay:      15  23  42;   /* use at /60 */

    /* ── Text (ratio vs --c-panel) ── */
    --c-fg:           15  23  42;   /* slate-900  17.85 */
    --c-muted:        71  85 105;   /* slate-600   7.58 */
    --c-faint:       100 116 139;   /* slate-500   4.76 */

    /* ── Borders ── */
    --c-line:        226 232 240;   /* slate-200 */
    --c-line-strong: 203 213 225;   /* slate-300 */

    /* ── Accent ── */
    --c-accent:       37  99 235;   /* blue-600, filled control        */
    --c-on-accent:   255 255 255;   /* white on blue-600         5.17  */
    --c-accent-fg:    29  78 216;   /* blue-700, accent text     6.70  */
    --c-ring:         37  99 235;   /* focus ring                5.17  */
    --c-accent-muted:   74 111 165;   /* steel blue, white on it 5.11 */
    --c-on-accent-muted: 255 255 255; /* idle/loading Backtest disabled text */

    /* ── Semantic ── */
    --c-pos:           4 120  87;   /* emerald-700, white on it  5.48 */
    --c-pos-fg:        4 120  87;   /*                           5.48 */
    --c-pos-soft:    209 250 229;   /* emerald-100, text on it   4.84 */
    --c-neg:         225  29  72;   /* rose-600, white on it     4.70 */
    --c-neg-fg:      190  18  60;   /* rose-700                  6.29 */
    --c-neg-soft:    255 228 230;   /* rose-100, text on it      5.24 */
    --c-warn:        180  83   9;   /* amber-700, white on it    5.02 */
    --c-warn-fg:     180  83   9;   /*                           5.02 */
    --c-warn-soft:   254 243 199;   /* amber-100, text on it     4.51 */
    --c-info-soft:   219 234 254;   /* blue-100, accent-fg on it 5.49 */
    --c-info-fg:      29  78 216;   /* blue-700, matches accent-fg */

    /* ── Code blocks: deliberately identical in both themes ── */
    --c-code-bg:      15  23  42;
    --c-code-fg:     203 213 225;

    /* ── Chart series (balanced pastels for clear data viz on card) ── */
    --c-chart-1:      74 144 226;   /* soft blue           3.29 */
    --c-chart-2:      46 196 140;   /* pastel mint/emerald 2.24 */
    --c-chart-3:     217 119   6;   /* warm amber          3.19 */
    --c-chart-4:     155 114 236;   /* soft violet         3.49 */
    --c-chart-5:     248 113 113;   /* pastel coral/rose   2.77 */
    --c-chart-6:      34 185 210;   /* soft cyan           2.35 */
    --c-chart-7:     192  38 211;   /* soft fuchsia        4.71 */
    --c-chart-8:     101 163  13;   /* soft lime           3.09 */

    /* ── Chart candles: theme-invariant (TradingView convention) ── */
    --c-candle-up:    38 166 154;
    --c-candle-down: 239  83  80;

    /* ── Shadows ── */
    --shadow-sm:   0 1px 3px  rgba(0, 0, 0, 0.06);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-main: 0 2px 8px  rgba(0, 0, 0, 0.05);
}

:root.dark {
    color-scheme: dark;

    /* ── Surfaces: four real levels (light theme has four too) ── */
    --c-page:          2   6  23;   /* slate-950 */
    --c-panel:        15  23  42;   /* slate-900 */
    --c-sunken:        30  41  59;   /* slate-800 */
    --c-hover:        38  50  70;   /* slate-750 */
    --c-overlay:       2   6  23;

    /* ── Text (ratio vs --c-panel) ── */
    --c-fg:          241 245 249;   /* slate-100  16.30 */
    --c-muted:       203 213 225;   /* slate-300  12.02 */
    --c-faint:       148 163 184;   /* slate-400   6.96 */

    /* ── Borders (visible, unlike the old rgba(255,255,255,.08) at 1.08) ── */
    --c-line:         51  65  85;   /* slate-700  1.72 */
    --c-line-strong:  71  85 105;   /* slate-600  2.36 */

    /* ── Accent: fill and text invert vs light theme.
          White on blue-500 is 3.68 and FAILS AA, so dark mode uses a
          light fill with dark text instead. ── */
    --c-accent:       96 165 250;   /* blue-400                       */
    --c-on-accent:     2   6  23;   /* slate-950 on blue-400    7.93 */
    --c-accent-fg:   147 197 253;   /* blue-300 on panel        9.92 */
    --c-ring:         96 165 250;   /*                          7.02 */
    --c-accent-muted: 122 156 198;   /* grayed blue, slate-950 on it 7.11 */
    --c-on-accent-muted:   2   6  23; /* idle/loading Backtest disabled text */

    /* ── Semantic ── */
    --c-pos:          52 211 153;   /* emerald-400 */
    --c-pos-fg:       52 211 153;   /*                          9.29 */
    --c-pos-soft:     15  47  55;   /* emerald @15% over panel  7.37 */
    --c-neg:         251 113 133;   /* rose-400 */
    --c-neg-fg:      251 113 133;   /*                          6.63 */
    --c-neg-soft:     49  29  50;   /* rose @15% over panel     5.77 */
    --c-warn:        251 191  36;   /* amber-400 */
    --c-warn-fg:     251 191  36;   /*                         10.69 */
    --c-warn-soft:    50  43  37;   /* amber @15% over panel    8.34 */
    --c-info-soft:    22  39  73;   /* blue @15% over panel     5.81 */
    --c-info-fg:     147 197 253;   /* blue-300, matches accent-fg */

    /* ── Chart series (balanced pastels for clear data viz on card) ── */
    --c-chart-1:      96 165 250;   /* blue-400            7.02 */
    --c-chart-2:      46 196 140;   /* pastel mint/emerald 7.98 */
    --c-chart-3:     251 191  36;   /* amber-400          10.69 */
    --c-chart-4:     167 139 250;   /* violet-400          6.56 */
    --c-chart-5:     248 113 113;   /* pastel coral/rose   6.45 */
    --c-chart-6:      34 211 238;   /* cyan-400            9.88 */
    --c-chart-7:     232 121 249;   /* fuchsia-400         7.25 */
    --c-chart-8:     163 230  53;   /* lime-400           11.84 */

    /* ── Shadows: heavier, black shadows are near-invisible on slate-950 ── */
    --shadow-sm:   0 1px 3px  rgba(0, 0, 0, 0.25);
    --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.45);
    --shadow-main: 0 4px 20px rgba(0, 0, 0, 0.35);
}


/* ── Utilities ── */
.app-container {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    font-family: var(--font-main);
    font-size: inherit;
    color: rgb(var(--c-fg));
    background-color: rgb(var(--c-panel));
    border: 1px solid rgb(var(--c-line-strong));
}

input:not([type="checkbox"]):not([type="radio"]):not(:disabled),
select:not(:disabled),
textarea:not(:disabled) {
    background-color: rgb(var(--c-panel)) !important;
}

input:not([type="checkbox"]):not([type="radio"]):disabled,
select:disabled,
textarea:disabled {
    background-color: rgb(var(--c-sunken)) !important;
    color: rgb(var(--c-muted)) !important;
    cursor: not-allowed;
    opacity: 0.65;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus {
    outline: none;
    border-color: rgb(var(--c-accent)) !important;
    box-shadow: 0 0 0 1px rgb(var(--c-ring) / 0.25);
}

select.custom-select-auto {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
}

select.custom-select-auto:focus {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}

.custom-dropdown-toggle {
    background-color: rgb(var(--c-panel)) !important;
    border: 1px solid rgb(var(--c-line-strong)) !important;
    color: rgb(var(--c-fg)) !important;
    font-family: var(--font-main);
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.custom-dropdown-toggle:hover {
    border-color: rgb(var(--c-faint)) !important;
}
.custom-dropdown-toggle:focus,
.open > .custom-dropdown-toggle {
    outline: none;
    border-color: rgb(var(--c-accent)) !important;
}

button {
    font-family: var(--font-main);
    cursor: pointer;
}

html {
    scrollbar-gutter: stable;
}
body {
    font-family: var(--font-main);
    background: rgb(var(--c-page));
    color: rgb(var(--c-muted));
    font-size: 13px;
    line-height: 1.5;
    min-height: 100vh;
    transition: background 0.2s ease, color 0.2s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
    color: rgb(var(--c-fg));
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

/* ── Metrics Dashboard Redesign (v2) ── */
.metrics-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.metric-group-card {
    background: rgb(var(--c-panel));
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    padding: 28px;
    min-height: fit-content;
}

.metric-group-header-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgb(var(--c-line));
}

.metric-group-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgb(var(--c-line));
    flex-wrap: wrap;
    gap: 12px;
}

.metric-group-header-v2 span {
    font-size: 16px;
    color: rgb(var(--c-accent));
}


.metric-group-header-v2 h3 {
    font-size: 12px;
    font-weight: 600;
    color: rgb(var(--c-fg));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}



.strategy-card-hero {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.strategy-hero-item {
    text-align: center;
    padding: 10px 0;
}

.strategy-hero-item + .strategy-hero-item {
    border-left: none;
}

.strategy-hero-value {
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.strategy-hero-label {
    font-size: 14px;
    font-weight: 400;
    color: rgb(var(--c-muted));
    letter-spacing: 0.01em;
    line-height: 1.35;
    margin-top: 4px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.metric-table-v2 {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.metric-table-v2 thead th {
    font-size: 10px;
    font-weight: 500;
    color: rgb(var(--c-faint));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 14px;
    text-align: right;
}

.metric-table-v2 thead th:first-child {
    text-align: left;
    width: 28%;
}

.metric-table-v2 thead th:not(:first-child) {
    width: 18%;
}

.metric-table-v2 tbody td {
    font-size: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid rgb(var(--c-line-strong));
    font-variant-numeric: tabular-nums;
}

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

.metric-table-v2 .label-cell {
    color: rgb(var(--c-muted));
    font-weight: 500;
    width: 50%;
}

.metric-table-v2 .value-cell {
    text-align: right;
    font-weight: 600;
}

.metric-table-v2 .value-full {
    color: rgb(var(--c-fg));
}

.metric-table-v2 .value-is {
    color: rgb(var(--c-warn-fg));   /* Amber */
}

.metric-table-v2 .value-oos {
    color: rgb(var(--c-chart-4));   /* Violet */
}

.metric-table-v2 .value-ft {
    color: rgb(var(--c-pos-fg));   /* Emerald */
}

@media (max-width: 1535px) {
    .metrics-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1023px) {
    .metrics-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1024px) {
    #all-metrics .metrics-dashboard-grid,
    #wfo-all-metrics .metrics-dashboard-grid,
    #portfolio-all-metrics .metrics-dashboard-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    #all-metrics .metric-group-card:nth-child(1),
    #wfo-all-metrics .metric-group-card:nth-child(1),
    #portfolio-all-metrics .metric-group-card:nth-child(1) { grid-column: span 3; }
    #all-metrics .metric-group-card:nth-child(2),
    #wfo-all-metrics .metric-group-card:nth-child(2),
    #portfolio-all-metrics .metric-group-card:nth-child(2) { grid-column: span 3; }
    #all-metrics .metric-group-card:nth-child(3),
    #wfo-all-metrics .metric-group-card:nth-child(3),
    #portfolio-all-metrics .metric-group-card:nth-child(3) { grid-column: span 4; }
    #all-metrics .metric-group-card:nth-child(4),
    #wfo-all-metrics .metric-group-card:nth-child(4),
    #portfolio-all-metrics .metric-group-card:nth-child(4) { grid-column: span 2; }
}

@media (max-width: 639px) {

    .metric-table-v2 thead th:not(:first-child),
    .metric-table-v2 tbody td:not(:first-child) {
        display: none;
    }

    /* On mobile, maybe only show 'Full' or use a different stack */
    .metric-table-v2 thead th.mobile-show,
    .metric-table-v2 tbody td.mobile-show {
        display: table-cell;
    }

    /* Multi-level table: scroll horizontally to see all levels */
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .metric-table-v2--multi-level {
        min-width: 480px;
    }
}

.app-header {
    background: rgb(var(--c-panel));
    border-color: rgb(var(--c-line));
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* ── Mobile glass bottom dock (hidden on desktop) ── */
.mnav-dock-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0 1rem calc(0.75rem + env(safe-area-inset-bottom));
    transition: padding-left 0.35s cubic-bezier(0.32, 1.1, 0.4, 1), padding-right 0.35s cubic-bezier(0.32, 1.1, 0.4, 1);
}

/* Scrolled state: dock narrows into a centered icon-only pill.
   Removed at ~top so the original full layout comes back. */
.mnav-dock-wrap.mnav-compact {
    padding-left: 26%;
    padding-right: 26%;
}

.mnav-label {
    max-height: 12px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
}

.mnav-compact .mnav-label {
    max-height: 0;
    opacity: 0;
    margin-top: -2px;
}

.mnav-compact .glass-dock {
    border-radius: 999px;
}

.mnav-compact .mnav-btn {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.glass-dock {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.375rem;
    border-radius: 28px;
    background: rgb(var(--c-panel) / 0.7);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgb(var(--c-line) / 0.6);
    box-shadow: var(--shadow-lg);
    transition: border-radius 0.35s ease;
}

.mnav-btn {
    -webkit-tap-highlight-color: transparent;
    transition: padding 0.3s ease;
}

.mnav-btn.mnav-active {
    color: rgb(var(--c-accent-fg));
}

.mnav-icon {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mnav-btn.mnav-active .mnav-icon {
    transform: translateY(-1px) scale(1.08);
}

/* Sliding active pill: one slot wide, driven by :has() on the dock.
   No :has() support → pill stays hidden, icon color still marks active. */
.mnav-pill {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: calc((100% - 12px) / 5);
    border-radius: 20px;
    background: rgb(var(--c-accent) / 0.14);
    opacity: 0;
    transition: transform 0.38s cubic-bezier(0.32, 1.3, 0.4, 1), opacity 0.2s ease;
}

.glass-dock:has([data-mnav="home"].mnav-active) .mnav-pill {
    opacity: 1;
    transform: translateX(0);
}

.glass-dock:has([data-mnav="all-strategies"].mnav-active) .mnav-pill {
    opacity: 1;
    transform: translateX(100%);
}

.glass-dock:has([data-mnav="my-strategies"].mnav-active) .mnav-pill {
    opacity: 1;
    transform: translateX(200%);
}

.glass-dock:has([data-mnav="my-portfolios"].mnav-active) .mnav-pill {
    opacity: 1;
    transform: translateX(300%);
}

/* More opens a sheet, never takes the pill — no rule needed. */

@media (prefers-reduced-motion: reduce) {
    .mnav-pill,
    .mnav-icon,
    .mnav-label,
    .mnav-dock-wrap,
    .glass-dock,
    .mnav-btn,
    .mobile-nav-drawer {
        transition: none;
    }
}

@media (min-width: 1024px) {
    .mnav-dock-wrap {
        display: none;
    }
}

/* Clearance so the dock never covers page content (mobile only). */
@media (max-width: 1023.98px) {
    body {
        padding-bottom: 96px;
    }
}

/* Detail view hides the bottom dock (no active item there) — display:none
   so it leaves no layout gap. body.is-detail is toggled by
   updateDockVisibility in nav.js, which observes #detail-view's display.
   Every other view keeps the dock + reserves below untouched. */
body.is-detail .mnav-dock-wrap {
    display: none;
}

@media (max-width: 1023.98px) {
    /* No dock on detail → skip the 96px body reserve. */
    body.is-detail {
        padding-bottom: 0;
    }
}

@media (max-width: 767.98px) {
    /* Strategy tab back to content rhythm (no dock clearance). */
    body.is-detail #tab-strategy {
        padding-bottom: 20px;
    }
}

.app-footer {
    background: rgb(var(--c-page));
    border-top: 1px solid rgb(var(--c-line));
}

.app-card {
    background: rgb(var(--c-panel));
    border: 1px solid rgb(var(--c-line));
    color: rgb(var(--c-fg));
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.app-card:hover {
    box-shadow: var(--shadow-md);
}

.app-input {
    background: rgb(var(--c-panel)) !important;
    border: 1px solid rgb(var(--c-line-strong));
    color: rgb(var(--c-fg)) !important;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.app-input:disabled {
    background: rgb(var(--c-sunken)) !important;
    cursor: not-allowed;
    opacity: 0.65;
}

.app-input:focus-within {
    border-color: rgb(var(--c-accent));
    box-shadow: 0 0 0 3px rgb(var(--c-ring) / 0.25);
}

.app-dropdown {
    background: rgb(var(--c-panel));
    border: 1px solid rgb(var(--c-line-strong));
    box-shadow: var(--shadow-lg);
    display: none;
    position: absolute;
    z-index: 100;
    border-radius: var(--radius-md);
}

.custom-dropdown-list {
    z-index: 9999;
}

@keyframes dropdown-enter {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.open>.app-dropdown,
.group:hover .app-dropdown {
    display: block;
}

/* Apply animation whenever dropdowns become visible */
.open>.app-dropdown,
.group:hover .app-dropdown,
.custom-dropdown-list:not(.hidden),
.app-dropdown:not(.hidden) {
    animation: dropdown-enter 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: top;
}

.dropdown-chevron {
    transition: transform 0.2s ease;
}

.open .dropdown-chevron {
    transform: rotate(180deg);
}

.dropdown-item {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: rgb(var(--c-muted));
    cursor: pointer;
    transition: all 0.1s;
}

.dropdown-item:hover {
    background: rgb(var(--c-sunken));
    color: rgb(var(--c-fg));
}

.dropdown-item.active {
    background: rgb(var(--c-accent));
    color: white;
}


.app-text-main {
    color: rgb(var(--c-fg));
}

.app-text-sub {
    color: rgb(var(--c-muted));
}

.app-text-tertiary {
    color: rgb(var(--c-faint));
}






/* ── Details & Content ── */
.tab-btn {
    background: rgb(var(--c-panel));
    color: rgb(var(--c-muted));
    border: 1px solid rgb(var(--c-line-strong));
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: all 0.15s ease;
}

.tab-btn:hover {
    background: rgb(var(--c-sunken));
    color: rgb(var(--c-fg));
    border-color: rgba(59, 130, 246, 0.3);
}

.tab-btn.active {
    background: rgb(var(--c-panel));
    color: rgb(var(--c-accent));
    border-color: rgb(var(--c-accent));
    box-shadow: 0 0 0 3px rgb(var(--c-ring) / 0.25);
}

.secondary-btn {
    background: rgb(var(--c-panel));
    color: rgb(var(--c-muted));
    border: 1px solid rgb(var(--c-line-strong));
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.secondary-btn:hover {
    background: rgb(var(--c-sunken));
    color: rgb(var(--c-fg));
}

.tab-pane {
    display: none;
    min-height: calc(100vh - 140px);
}

.tab-pane.active {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

#tab-strategy {
    position: relative;
    z-index: 45;
}

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

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




.metric-table {
    width: 100%;
    border-collapse: collapse;
}

.metric-table th {
    background: rgb(var(--c-sunken));
    color: rgb(var(--c-faint));
    font-weight: 500;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.06em;
    padding: 8px 14px;
    border-bottom: 1px solid rgb(var(--c-line));
    text-align: left;
}

.metric-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgb(var(--c-line));
    font-size: 13px;
    color: rgb(var(--c-muted));
}

.metric-table td:first-child,
.metric-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    background: rgb(var(--c-page));
}

.metric-table th:first-child {
    background: rgb(var(--c-sunken));
}

.metric-table tr:hover td:first-child {
    background: rgb(var(--c-sunken));
}

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

.metric-table .label-cell {
    color: rgb(var(--c-faint));
    font-weight: 500;
}

.metric-table .value-cell {
    color: rgb(var(--c-fg));
    font-weight: 700;
    text-align: right;
}

.metric-table tr:hover td {
    background: rgb(var(--c-sunken));
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    white-space: nowrap;
}

.results-table th {
    background: rgb(var(--c-panel));
    color: rgb(var(--c-muted));
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
    padding: 12px 16px;
    border-bottom: 1px solid rgb(var(--c-line-strong));
    text-align: left;
}

.results-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgb(var(--c-line));
    font-size: 12px;
    color: rgb(var(--c-fg));
}

.results-table tr:hover td {
    background: rgb(var(--c-sunken));
}


.mc-note {
    font-size: 11px;
    color: rgb(var(--c-faint));
    margin-top: 8px;
    font-style: italic;
    padding: 0 16px;
}

/* Monthly-returns heatmap cells. These set TEXT colour, not background —
   the historical bg-* names collided with the bg-pos/bg-neg utilities. */
.heat-pos       { background-color: transparent; color: rgb(var(--c-pos-fg));  border-radius: var(--radius-sm); }
.heat-pos-total { background-color: transparent; color: rgb(var(--c-pos-fg));  border-radius: var(--radius-sm); font-weight: 700; }
.heat-neg       { background-color: transparent; color: rgb(var(--c-neg-fg));  border-radius: var(--radius-sm); }
.heat-neg-total { background-color: transparent; color: rgb(var(--c-neg-fg));  border-radius: var(--radius-sm); font-weight: 700; }

/* ── Theme Toggle ── */
.theme-toggle-btn {
    color: rgb(var(--c-faint));
    cursor: pointer;
    transition: all 0.15s ease;
}

.theme-toggle-btn:hover {
    color: rgb(var(--c-muted));
}

.theme-toggle-btn.active {
    background: rgb(var(--c-accent));
    color: white;
}

/* ── Scrollbars: native browser styling (no app customization).
   Inner scrollers (carousels, tabs) stay hidden via .no-scrollbar. ── */

/* Off-canvas drawers keep shadow-2xl while translated off-screen; its blur
   bleeds into the viewport as a gray strip. Kill it while closed. */
#preview-drawer.translate-x-full,
#idea-board-create-modal.translate-x-full,
#idea-board-detail-drawer.translate-x-full {
    box-shadow: none;
    border-left-color: transparent;
}

/* ── Login Specific ── */
.login-container {
    background: rgb(var(--c-panel));
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius-lg);
    max-width: 380px;
    padding: var(--spacing-xl);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: var(--shadow-lg);
    transition: max-width 0.3s ease;
}

.login-container.signup-mode {
    max-width: 650px;
}

.login-header {
    color: rgb(var(--c-fg));
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
    text-align: center;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    color: rgb(var(--c-muted));
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.form-group input {
    background: rgb(var(--c-panel));
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    color: rgb(var(--c-fg));
    display: block;
    font-size: 0.875rem;
    padding: 0.65rem 0.85rem;
    transition: all 0.15s ease;
    width: 100%;
}

.form-group input:focus {
    border-color: rgb(var(--c-accent));
    box-shadow: 0 0 0 3px rgb(var(--c-ring) / 0.2);
    outline: none;
}

.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus {
    -webkit-text-fill-color: rgb(var(--c-fg));
    -webkit-box-shadow: 0 0 0px 1000px rgb(var(--c-panel)) inset;
    transition: background-color 5000s ease-in-out 0s;
}

.btn-auth {
    background: rgb(var(--c-accent));
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgb(var(--c-accent) / 0.15);
    color: white;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    transition: all 0.15s ease;
    width: 100%;
}

.btn-auth:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.btn-signup {
    background: rgb(var(--c-pos-fg));
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.btn-google {
    align-items: center;
    background: rgb(var(--c-page));
    border: 1px solid #4285F4;  /* token-exempt: Google brand color, not part of the theme */
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.18);
    color: rgb(var(--c-fg));
    display: flex;
    gap: 12px;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-google:hover {
    background: rgb(var(--c-panel));
    border-color: #4285F4;  /* token-exempt: Google brand color, not part of the theme */
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.28);
    transform: translateY(-1px);
}

.auth-divider {
    align-items: center;
    display: flex;
    margin: 1.5rem 0;
}

.auth-divider-line {
    background: rgb(var(--c-line));
    flex: 1;
    height: 1px;
}

.auth-divider-text {
    color: rgb(var(--c-faint));
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0 10px;
    text-transform: uppercase;
}

.error-message {
    background: rgb(var(--c-neg-fg));
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgb(var(--c-neg-fg));
    border-radius: var(--radius-sm);
    color: rgb(var(--c-neg-fg));
    display: none;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 1rem;
    padding: 0.5rem;
    text-align: center;
}


/* ── Credits System ── */
.credit-pulse {
    animation: creditPulse 0.4s ease-out;
}

@keyframes creditPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
        color: rgb(var(--c-warn-fg));
    }

    100% {
        transform: scale(1);
    }
}

.credits-modal-content {
    animation: modalSlideUp 0.25s ease-out;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

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

/* ══════════════════════════════════════════════════════
   Trade Visualization Panel
   ══════════════════════════════════════════════════════ */


/* Direction badges */
.tv-dir-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tv-dir-buy {
    background: rgb(var(--c-pos-fg) / 0.15);
    color: rgb(var(--c-pos-fg));
}

.tv-dir-sell {
    background: rgb(var(--c-neg-fg) / 0.15);
    color: rgb(var(--c-neg-fg));
}

/* Exit reason badges */
.tv-exit-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 9px;
}

.tv-exit-sl {
    background: rgb(var(--c-neg-fg) / 0.12);
    color: rgb(var(--c-neg-fg));
}

.tv-exit-pt {
    background: rgb(var(--c-pos-fg) / 0.12);
    color: rgb(var(--c-pos-fg));
}

.tv-exit-ts {
    background: rgb(var(--c-warn-fg) / 0.12);
    color: rgb(var(--c-warn-fg));
}

.tv-exit-eod {
    background: rgb(var(--c-chart-4) / 0.12);
    color: rgb(var(--c-chart-4));
}

.tv-exit-unknown {
    background: rgb(var(--c-faint) / 0.12);
    color: rgb(var(--c-faint));
}

/* Trade Detail Card */
#tv-trade-detail-content .tv-detail-section {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: rgb(var(--c-sunken));
    border: 1px solid rgb(var(--c-line));
}

#tv-trade-detail-content .tv-detail-label {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(var(--c-faint));
    margin-bottom: 3px;
}

#tv-trade-detail-content .tv-detail-value {
    font-size: 11px;
    font-weight: 600;
    color: rgb(var(--c-fg));
    font-family: var(--font-mono);
    line-height: 1.5;
}


/* P&L highlighting in trade detail */
.tv-pnl-positive {
    color: rgb(var(--c-pos-fg)) !important;
}

.tv-pnl-negative {
    color: rgb(var(--c-neg-fg)) !important;
}

/* ── Chart Slide-In Panel ── */
.tv-chart-slidein {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tv-chart-slidein.tv-chart-open {
    transform: translateX(0);
}

#tv-chart-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}

#tv-chart-overlay.tv-overlay-visible {
    opacity: 1;
}

/* ── TradingView Native Legends ── */
.tv-legend-container {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
    /* Let clicks pass through container */
}

.tv-ohlc-line {
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.tv-ohlc-item {
    display: flex;
    gap: 4px;
}

.tv-ohlc-label {
    color: rgb(var(--c-faint));
}

.tv-ohlc-value {
    color: rgb(var(--c-fg));
}

.tv-ohlc-value.up {
    color: rgb(var(--c-pos-fg));
}

.tv-ohlc-value.down {
    color: rgb(var(--c-neg-fg));
}

.tv-legend-item {
    font-family: var(--font-main);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
    /* Re-enable clicks for items */
}

.tv-legend-toggle {
    cursor: pointer;
    opacity: 0;
    color: rgb(var(--c-faint));
    transition: opacity 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tv-legend-item:hover .tv-legend-toggle,
.tv-legend-toggle.hidden-state {
    opacity: 1;
}

.tv-legend-toggle:hover {
    color: rgb(var(--c-fg));
}

.tv-legend-toggle.hidden-state {
    color: rgb(var(--c-faint));
}

.tv-legend-name {
    font-weight: 500;
    /* --legend-color is set per-item in trades-on-chart-candles.js so each
       indicator's label matches its line colour; falls back to body text. */
    color: var(--legend-color, rgb(var(--c-fg)));
}

.tv-legend-val {
    font-family: var(--font-mono);
}

.tv-legend-item.hidden-series .tv-legend-name,
.tv-legend-item.hidden-series .tv-legend-val {
    opacity: 0.4;
}

/* ══════════════════════════════════════════════════════
   Mobile Responsive Styles
   ══════════════════════════════════════════════════════ */

/* ── Mobile Navigation Menu ── */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 998;
}

.mobile-nav-overlay.active {
    display: block;
}

/* Bottom sheet (slides up; opened from the dock More tab) */
.mobile-nav-drawer {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 82vh;
    background: rgb(var(--c-panel));
    border-top: 1px solid rgb(var(--c-line));
    border-radius: 24px 24px 0 0;
    box-shadow: var(--shadow-lg);
    z-index: 999;
    flex-direction: column;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
    transform: translateY(105%);
    transition: transform 0.32s cubic-bezier(0.32, 1.1, 0.4, 1);
}

.mobile-nav-drawer.active {
    display: flex;
    transform: translateY(0);
}

.mobile-nav-drawer::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgb(var(--c-line-strong));
    margin: 4px auto 8px;
    flex-shrink: 0;
}

.mobile-nav-close {
    align-self: flex-end;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: rgb(var(--c-muted));
    cursor: pointer;
    margin-bottom: 12px;
}

.mobile-nav-close:hover {
    background: rgb(var(--c-sunken));
    color: rgb(var(--c-fg));
}

.mobile-nav-drawer a,
.mobile-nav-drawer button.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: rgb(var(--c-muted));
    text-decoration: none;
    transition: all 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.mobile-nav-drawer a:hover,
.mobile-nav-drawer button.mobile-nav-link:hover {
    background: rgb(var(--c-sunken));
    color: rgb(var(--c-fg));
}



/* ── Mobile: General Layout ── */
@media (max-width: 768px) {
    body {
        font-size: 12px;
    }

    /* Reduce header height slightly */
    .app-header {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Reduce main content padding */
    .mobile-px {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ── Mobile: Detail View Filters ── */
@media (max-width: 768px) {

    /* Stack the main results filters vertically */
    .mobile-filter-stack {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .mobile-filter-stack>div {
        width: 100% !important;
    }


}

/* ── Mobile: Trade Insights Filter Bar ── */
@media (max-width: 768px) {
    .mobile-insights-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .mobile-insights-header>div:last-child {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .mobile-insights-header>div:last-child>div {
        width: 100% !important;
    }
}



/* ── Mobile: Chart Slide-In Panel ── */
@media (max-width: 768px) {
    #tv-chart-modal {
        width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Stack chart + detail vertically */
    #tv-chart-modal .tv-chart-layout {
        flex-direction: column !important;
    }

    /* Trade navigation buttons */
    #tv-chart-modal .tv-nav-text {
        display: none;
    }
}



/* ── Mobile: Admin Table Actions ── */
@media (max-width: 1024px) {

    /* Always show action buttons on touch devices (no hover) */
    .group .admin-actions {
        opacity: 1 !important;
    }
}

/* ── Mobile: Login Page ── */
@media (max-width: 768px) {
    .login-container {
        max-width: 100%;
        margin: 0 8px;
    }
}

.sort-indicator {
    display: inline-block;
    width: 14px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.sort-indicator.active {
    opacity: 1;
}

[data-tooltip]:not(.absolute) {
    position: relative;
}

[data-tooltip]:hover {
    z-index: 9999;
    animation-play-state: paused !important;
}

[data-tooltip]:disabled {
    opacity: 1 !important;
}

[data-tooltip]:not([data-tooltip=""]):hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgb(var(--c-panel));
    color: rgb(var(--c-fg));
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    max-width: min(280px, calc(100vw - 32px));
    text-align: center;
    z-index: 10000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.12);
    border: 1px solid rgb(var(--c-line-strong));
    pointer-events: none;
    opacity: 1 !important;
    animation: tooltipFade 0.2s forwards;
    /* Ensure it doesn't break table layouts */
    display: block;
    width: max-content;
    text-transform: none;
    letter-spacing: normal;
    /* The touch-target expander shares this ::after box (per-property
       cascade): without this its min-height:44px stretches the tooltip. */
    min-height: 0;
}

[data-tooltip-pos="right"]:hover::after {
    left: auto;
    right: 0;
    transform: translateY(4px);
    animation: tooltipFadeRight 0.2s forwards;
}

/* Bottom-anchored floating actions need the tooltip above the element —
   the default sits below and would clip behind the dock / viewport edge.
   Reuses the tooltipFade keyframes (ends at translateX(-50%)). */
[data-tooltip-pos="top"]:hover::after {
    top: auto;
    bottom: calc(100% + 8px);
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-4px);
}

/* Tooltips mis-measure mid-reflow; suppress them while resizing. */
body.is-resizing [data-tooltip]:hover::after {
    display: none;
}

@keyframes tooltipFade {
    to {
        opacity: 1 !important;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes tooltipFadeRight {
    to {
        opacity: 1 !important;
        transform: translateY(0);
    }
}

/* Mobile tooltips (max-767 only): keep every tooltip inside the
   viewport. Desktop rules above are untouched.
   Param pill tooltips stay pill-anchored (left:50% +
   translateX(-50%), above the pill). Wrap + cap the width so
   long labels fit; ancestors stay overflow-visible so nothing
   re-clips them. Edge pills are handled by max-width only,
   never recentering.
   (Backtest's inline-header tooltip is right-pinned below its
   button — see the #run-btn-sidebar override in the Backtest
   section below.) */
@media (max-width: 767px) {
    [data-tooltip]:not([data-tooltip=""]):hover::after {
        max-width: min(240px, calc(100vw - 32px));
        white-space: normal;
    }
    #logic-intuitive-container .inline-param > div.absolute {
        left: 50%;
        right: auto;
        top: auto;
        bottom: 100%;
        transform: translateX(-50%);
        margin-bottom: 6px;
        white-space: normal;
        overflow-wrap: break-word;
        text-align: center;
        width: max-content;
        max-width: min(240px, calc(100vw - 32px));
    }
    #logic-intuitive-container .logic-signal-val,
    #logic-intuitive-container .logic-signal-row,
    #logic-intuitive-container .logic-entry-card,
    #logic-intuitive-container .logic-exit-card {
        overflow: visible;
    }
}

/* ── Strategy Cards (Grid View) ── */
.strategy-card {
    background: rgb(var(--c-panel));
    border: 1px solid rgb(var(--c-line));
    border-radius: 16px;
    padding: 16px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.strategy-card:hover {
    transform: translateY(-2px);
    border-color: rgb(var(--c-line-strong));
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

:root.dark .strategy-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}



.strategy-card-sparkline {
    height: auto;
    flex: 1 1 auto;
    min-height: 56px;
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    position: relative;
}

@media (max-width: 639px) {
    .strategy-card-sparkline svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100% - 20px);
        display: block;
    }
    .strategy-card-bottom .equity-years {
        position: absolute;
        bottom: 6px;
        left: 0;
        right: 0;
    }
    .strategy-card-bottom > .metrics-col {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .strategy-card-bottom > .equity-col {
        height: auto;
        align-self: stretch;
    }
    .strategy-card-bottom .strategy-card-sparkline {
        min-height: 56px;
    }
}

@media (min-width: 640px) {
    .strategy-card-sparkline {
        height: 48px;
        flex: none;
        min-height: 0;
        position: static;
    }
}

.strategy-card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgb(var(--c-line));
    padding-top: 12px;
}





/* ══════════════════════════════════════════════════════
   Strategy Detail Page — Redesigned Layout
   ══════════════════════════════════════════════════════ */

/* ── Detail Hero Bar ── */
.detail-hero-bar {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* ── Detail Tab Buttons (underline style) ── */
.detail-tab-btn {
    position: relative;
    padding: 10px 4px;
    font-size: 13px;
    font-weight: 500;
    color: rgb(var(--c-muted));
    white-space: nowrap;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.detail-tab-btn:hover {
    color: rgb(var(--c-fg));
    background: rgb(var(--c-sunken));
    border-bottom-color: rgb(var(--c-line-strong));
}

.detail-tab-btn.active {
    color: rgb(var(--c-accent));
    border-bottom-color: rgb(var(--c-accent));
}

/* Smooth scrolling for tab overflow */
.detail-tab-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-x: auto;
}

.detail-tab-scroll::-webkit-scrollbar {
    display: none;
}

/* ── Detail Action Buttons ── */
.detail-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    gap: 4px;
    white-space: nowrap;
}

.detail-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}











/* Robustness loading progress */
.rb-progress-track {
    width: min(420px, 80vw);
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.18);
}

.rb-progress-bar {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: rgb(var(--c-accent));
    transition: width 0.25s ease;
}

/* Responsive: stack sidebar on small screens */
@media (max-width: 1023px) {
    #discover-sidebar {
        width: 100%;
    }
}



/* Premium Skeleton Shimmer Loader keyframes */
@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Custom shimmer skeleton override for block elements */
div.animate-pulse,
span.animate-pulse,
td.animate-pulse {
    background-image: linear-gradient(
        90deg,
        rgb(var(--c-sunken)) 25%,
        rgb(var(--c-hover)) 50%,
        rgb(var(--c-sunken)) 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s infinite linear !important;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgb(var(--pulse-color) / 0.5); }
    50%      { box-shadow: 0 0 0 6px rgb(var(--pulse-color) / 0); }
}

.animate-pulse-glow {
    --pulse-color: var(--c-neg);
    animation: pulse-glow 2s infinite !important;
    opacity: 1 !important;
}

.animate-pulse-glow-blue, .pulse-run-btn {
    --pulse-color: var(--c-accent);
    animation: pulse-glow 2s infinite !important;
    opacity: 1 !important;
}

/* When action buttons are in dirty/attention state (.bg-neg), hover MUST remain red, not turn blue */
#run-btn-sidebar.bg-neg:hover,
#apply-config-btn.bg-neg:hover {
    background-color: rgb(var(--c-neg) / 0.85) !important;
    color: rgb(var(--c-on-accent)) !important;
}

/* Backtest idle/loading (disabled): muted grayed-blue, not solid accent, not gray.
   Enabled base (bg-accent) + dirty red pulse stay in markup/JS — this rule only
   softens the disabled states. ID specificity beats the hover:bg-accent/85
   utility so a tooltip-hover can't flash solid blue. */
#run-btn-sidebar:disabled {
    background-color: rgb(var(--c-accent-muted));
    color: rgb(var(--c-on-accent-muted));
    border-color: transparent;
}

/* Backtest action: single #run-btn-sidebar node lives in the fixed
   header right of Actions on all breakpoints (flex order only, see
   #strategy-fixed-header in detail_view.html), shown only on
   tab-strategy via updateOverlays in detail.js (display:none
   elsewhere, so the header gap collapses with no layout shift).
   Dates stay in the settings grid on all breakpoints.
   Dirty/loading/disabled states keep working — those only swap
   color/pulse classes, untouched here. Tooltip uses
   data-tooltip-pos="right" in markup (opens below, right-aligned). */
#backtest-floating-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
#backtest-floating-wrap #run-btn-sidebar {
    width: auto;
    height: 32px;
    min-height: 0;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 13px;
    white-space: nowrap;
}
/* Compact on small screens — Backtest sits inline next to Actions in
   the single-row sticky header (see the max-767 rules in
   detail_view.html), so it keeps the 32px desktop sizing. The
   higher specificity here also overrides the 44px touch-target
   min-height from the phase-2 polish rule below, which would
   otherwise make the header row bulky. */
@media (max-width: 767px) {
    #backtest-floating-wrap #run-btn-sidebar {
        height: 32px;
        min-height: 0;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 13px;
        white-space: nowrap;
    }
    #backtest-floating-wrap #run-btn-sidebar .material-symbols-outlined {
        font-size: 18px;
    }
    #backtest-floating-wrap #run-btn-sidebar .credit-cost-label {
        margin-left: 4px;
        font-size: 12px;
    }
    #detail-header-actions #header-more-btn {
        height: 32px;
        min-height: 0;
        padding-left: 8px;
        padding-right: 4px;
        font-size: 13px;
        white-space: nowrap;
    }
    /* Inline-header Backtest tooltip (max-767): the button sits at
       the header's right edge inside #detail-sticky-unit, so pin the
       bubble below it to the button's right edge and let it grow
       leftward. Kills the fade-slide keyframes so no translate can
       drag it past the viewport edge. Desktop untouched. */
    #backtest-floating-wrap #run-btn-sidebar[data-tooltip-pos="right"]:hover::after {
        left: auto;
        right: 0;
        top: calc(100% + 4px);
        bottom: auto;
        transform: none;
        animation: none;
        opacity: 1 !important;
        width: max-content;
        max-width: min(240px, calc(100vw - 32px));
        white-space: normal;
        overflow-wrap: break-word;
        text-align: center;
    }
}



/* PineScript code block styles. Theme-invariant by design, like
   --c-code-bg/--c-code-fg above -- these sit on the fixed dark code
   surface regardless of app theme. */
.pine-keyword { color: #c084fc; font-weight: 500; }  /* token-exempt: theme-invariant syntax colour */
.pine-function { color: #34d399; }  /* token-exempt: theme-invariant syntax colour */
.pine-number { color: #fbbf24; }  /* token-exempt: theme-invariant syntax colour */
.pine-builtin { color: #60a5fa; }  /* token-exempt: theme-invariant syntax colour */
.pine-comment { color: #64748b; font-style: italic; }  /* token-exempt: theme-invariant syntax colour */
.pine-operator { color: #f472b6; }  /* token-exempt: theme-invariant syntax colour */
.pine-string { color: #fb923c; }  /* token-exempt: theme-invariant syntax colour */

.pine-copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 0.375rem;
    background: rgb(var(--c-sunken));
    border: 1px solid rgb(var(--c-line-strong));
    color: rgb(var(--c-muted));
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0;
    line-height: 1;
}

.pine-copy-btn:hover {
    background: rgb(var(--c-code-fg) / 0.2);
    color: rgb(var(--c-code-fg));
}

/* ── Indicators Card ── */
.ind-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 12px;
    font-weight: 500;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ind-toggle-btn.active {
    background: rgb(var(--c-accent) / 0.1);
    color: rgb(var(--c-accent-fg));
    border-color: rgb(var(--c-accent) / 0.2);
}

.ind-toggle-btn:not(.active) {
    color: rgb(var(--c-faint));
}

.ind-toggle-btn:not(.active):hover {
    background: rgb(var(--c-sunken));
    color: rgb(var(--c-fg));
}

.ind-list-panel {
    height: 400px;
    max-height: 400px;
    overflow-y: auto;
}

.ind-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
    color: rgb(var(--c-muted));
}

.ind-list-item:hover {
    background: rgb(var(--c-sunken));
    color: rgb(var(--c-fg));
}

.ind-list-item.active {
    background: rgb(var(--c-accent) / 0.1);
    color: rgb(var(--c-accent-fg));
}

.ind-code-block {
    position: relative;
    background: rgb(var(--c-code-bg));
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    overflow-y: auto;
    font-size: 12px;
    font-family: var(--font-mono);
    line-height: 1.6;
    border: 1px solid rgb(var(--c-line));
    height: 400px;
}

.ind-code-block pre {
    margin: 0;
    white-space: pre;
}

.ind-code-block code {
    color: rgb(var(--c-code-fg));
}

.ind-code-block:hover .pine-copy-btn {
    opacity: 1;
}

/* ── Typography & Accessibility Overrides ── */
.form-group input::placeholder {
    color: rgb(var(--c-faint)) !important;
    opacity: 0.75;
}

/* ── Filters & Config panel animation ── */
#backtest-config-panel {
    max-height: 1500px;
    opacity: 1;
    border-radius: 16px !important;
    background-color: rgb(var(--c-panel));
}



#backtest-config-panel.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

/* Ensure sticky filter bar does not clip the day dropdown */
#shared-results-settings {
    overflow: visible;
}

/* ══════════════════════════════════════════════════════
   Responsive Utilities
   ══════════════════════════════════════════════════════ */

/* Minimum 44×44 tap target for touch */
.touch-target-min {
    position: relative;
}
.touch-target-min::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
}



/* Hide scrollbars for horizontal scrollers */
.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Mobile slide-up panel (bottom-sheet) */
.mobile-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgb(var(--c-panel));
    border-top: 1px solid rgb(var(--c-line));
    border-radius: 16px 16px 0 0;
    z-index: 900;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 85vh;
    overflow-y: auto;
    padding: 16px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}
.mobile-panel.mobile-panel-open {
    transform: translateY(0);
}

/* Desktop discovery sidebar scrolls internally once the 12 performance
   rows overflow it — keep its scrollbar clear of the filter controls. */
@media (min-width: 1024px) {
    #discover-sidebar {
        padding-right: 0.25rem;
        scrollbar-gutter: stable;
    }
}

/* Strategy Settings card (Strategy tab): single card wrapping both settings groups. */

/* Nested Advanced filters: chevron points down collapsed, up when open. */
.advanced-filters > summary .adv-chevron {
    transition: transform 0.2s ease;
}
.advanced-filters[open] > summary .adv-chevron {
    transform: rotate(180deg);
}



/* Mobile panel overlay backdrop */
.mobile-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 899;
}
.mobile-panel-overlay.active {
    display: block;
}







/* ── DD Filter Hint (focus tooltip) ── */
.dd-hint {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    pointer-events: none;
}
.dd-group:focus-within .dd-hint {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}



/* ── Desktop Tab Buttons (Sidebar) ── */
.desktop-tab-btn {
    color: rgb(var(--c-muted));
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.desktop-tab-btn:hover {
    color: rgb(var(--c-fg));
    background: rgb(var(--c-sunken));
}

.desktop-tab-btn.active {
    color: #1d4ed8;  /* token-exempt: pre-tuned active-tab hue, already passes AA (6.70) */
    background: rgb(var(--c-accent) / 0.15);
    border-left-color: rgb(var(--c-accent));
    font-weight: 700;
}

:root.dark .desktop-tab-btn.active {
    color: #93c5fd;  /* token-exempt: pre-tuned active-tab hue, already passes AA */
}

/* ══════════════════════════════════════════════════════
   Mobile Responsive Overrides (<768px)
   ══════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /* Tighter page padding on small screens */
    .mobile-px {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }



    /* Ensure all data tables scroll horizontally */
    .results-table,
    table.whitespace-nowrap {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }



    .results-table th,
    .results-table td {
        font-size: 11px !important;
        padding: 8px 10px !important;
    }

    .results-table th:first-child,
    .results-table td:first-child {
        position: sticky;
        left: 0;
        background-color: rgb(var(--c-panel));
        z-index: 20;
        box-shadow: 2px 0 4px -2px rgba(0,0,0,0.1);
    }



    /* Fix modals for mobile */
    .fixed.inset-0 > .relative {
        max-height: 90vh;
        overflow-y: auto;
    }
}

@media (max-width: 480px) {
    .mobile-px {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}


.metric-table-v2 .metric-th {
    padding-bottom: 8px;
}
.metric-table-v2 .metric-th-label {
    text-align: left;
    padding-left: 0;
    width: 50%;
}
.metric-table-v2 .metric-th-val {
    text-align: right;
    width: 25%;
}
.metric-table-v2 .metric-th-val-right {
    text-align: right;
    width: 25%;
    padding-right: 0;
}
.metric-table-v2 .metric-td-label {
    padding-left: 0;
    width: 50%;
}
.metric-table-v2 .metric-td-val {
    width: 25%;
}
.metric-table-v2 .metric-td-val-right {
    width: 25%;
    padding-right: 0;
}

/* ══════════════════════════════════════════════════════
   Backtest Loading Modal
   ══════════════════════════════════════════════════════ */

.bt-load-card {
    background: rgb(var(--c-panel));
    border: 1px solid rgb(var(--c-line));
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: 28px 28px 22px;
    width: min(420px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: bt-card-in 0.28s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}

@keyframes bt-card-in {
    from { opacity: 0; transform: scale(0.88) translateY(16px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.bt-load-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bt-load-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgb(var(--c-accent) / 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: bt-icon-pulse 2s ease-in-out infinite;
}

@keyframes bt-icon-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgb(var(--c-accent) / 0.15); }
    50%       { box-shadow: 0 0 0 8px transparent; }
}

.bt-load-icon {
    font-size: 22px;
    color: rgb(var(--c-accent-fg));
}

.bt-load-title {
    font-size: 16px;
    font-weight: 700;
    color: rgb(var(--c-fg));
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.bt-load-subtitle {
    font-size: 12px;
    color: rgb(var(--c-faint));
    margin-top: 2px;
}

/* Canvas */
.bt-equity-canvas {
    width: 100%;
    height: 120px;
    border-radius: 10px;
    background: rgb(var(--c-sunken) / 0.5);
    border: 1px solid rgb(var(--c-line));
    display: block;
}

/* Stage row */
.bt-stage-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.bt-stage-spin {
    font-size: 14px;
    color: rgb(var(--c-accent-fg));
    display: inline-block;
    will-change: transform;
    animation: bt-spin 1s linear infinite;
    flex-shrink: 0;
}

@keyframes bt-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.bt-stage-label {
    font-size: 12px;
    color: rgb(var(--c-faint));
    font-weight: 500;
    transition: opacity 0.3s;
}

/* Progress */
.bt-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bt-progress-track {
    flex: 1;
    height: 6px;
    border-radius: 99px;
    background: rgb(var(--c-line));
    position: relative;
    overflow: visible;
}

.bt-progress-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, rgb(var(--c-accent)), rgb(var(--c-chart-4)));
    width: 0%;
    transition: width 0.3s linear;
    position: relative;
    overflow: hidden;
}

/* Shimmer sweep — keeps visible motion even when pct crawls in the tail
   phase (93%→99% moves ~0.3%/tick and otherwise reads as frozen). */
.bt-progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 0.45) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: bt-fill-shimmer 1.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bt-fill-shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

.bt-progress-glow {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgb(var(--c-chart-4));
    box-shadow: 0 0 10px 4px rgb(var(--c-chart-4) / 0.5);
    left: 0%;
    transition: left 0.3s linear;
    animation: bt-glow-pulse 1.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bt-glow-pulse {
    0%, 100% { box-shadow: 0 0 6px 2px rgb(var(--c-chart-4) / 0.4); }
    50%      { box-shadow: 0 0 12px 5px rgb(var(--c-chart-4) / 0.65); }
}

.bt-progress-pct {
    font-size: 11px;
    font-weight: 600;
    color: rgb(var(--c-muted));
    min-width: 30px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Footer */
.bt-load-footer {
    font-size: 10px;
    color: rgb(var(--c-faint));
    text-align: center;
    border-top: 1px solid rgb(var(--c-line));
    padding-top: 14px;
    line-height: 1.5;
    font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
    .bt-load-card { animation: none; }
    .bt-load-icon-wrap { animation: none; }
    .bt-stage-spin { animation: none; }
    .bt-progress-fill::after { animation: none; display: none; }
    .bt-progress-glow { animation: none; }
    .bt-progress-fill, .bt-progress-glow { transition: none; }
}

/* ══════════════════════════════════════════════════════
   Component layer
   Each class replaces a cluster of duplicated Tailwind strings found by the
   audit. Plain CSS, not @apply: the Play CDN cannot compile @apply.
   ══════════════════════════════════════════════════════ */

/* ── Card: replaces 3 unrelated implementations ── */
.ui-card {
    background: rgb(var(--c-panel));
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.ui-card--sunken { background: rgb(var(--c-sunken)); }

/* ── Buttons: replaces 4 primary-button recipes ── */
.ui-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: 500 12px/1.5 var(--font-main);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ui-btn:focus-visible,
.ui-btn--primary:focus-visible,
.ui-btn--ghost:focus-visible,
.ui-btn--danger:focus-visible {
    outline: 2px solid rgb(var(--c-ring));
    outline-offset: 2px;
}
.ui-btn:disabled,
.ui-btn--primary:disabled,
.ui-btn--ghost:disabled,
.ui-btn--danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ui-btn--primary { background: rgb(var(--c-accent)); color: rgb(var(--c-on-accent)); }
.ui-btn--primary:hover:not(:disabled) { background: rgb(var(--c-accent) / 0.85); }

.ui-btn--ghost {
    background: transparent;
    border-color: rgb(var(--c-line-strong));
    color: rgb(var(--c-muted));
}
.ui-btn--ghost:hover:not(:disabled) { background: rgb(var(--c-hover)); color: rgb(var(--c-fg)); }

.ui-btn--danger { background: rgb(var(--c-neg)); color: rgb(var(--c-on-accent)); }
.ui-btn--danger:hover:not(:disabled) { background: rgb(var(--c-neg) / 0.85); }

/* ── Badge: replaces ~18 one-off chips in landing.html plus ~10 in JS ── */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 2px 8px;
    border-radius: 999px;
    font: 600 11px/1.35 var(--font-main);
    white-space: nowrap;
}
.ui-badge--neutral { background: rgb(var(--c-sunken));     color: rgb(var(--c-muted)); }
.ui-badge--pos     { background: rgb(var(--c-pos-soft));  color: rgb(var(--c-pos-fg)); }
.ui-badge--neg     { background: rgb(var(--c-neg-soft));  color: rgb(var(--c-neg-fg)); }
.ui-badge--warn    { background: rgb(var(--c-warn-soft)); color: rgb(var(--c-warn-fg)); }
.ui-badge--info    { background: rgb(var(--c-info-soft)); color: rgb(var(--c-accent-fg)); }

/* ── Inputs: replaces the input:not():not() !important base rule ── */
.ui-input,
.ui-select {
    width: 100%;
    padding: 6px 10px;
    background: rgb(var(--c-sunken));
    color: rgb(var(--c-fg));
    border: 1px solid rgb(var(--c-line-strong));
    border-radius: var(--radius-sm);
    font: 400 13px/1.5 var(--font-main);
}
.ui-input:focus,
.ui-select:focus {
    outline: none;
    border-color: rgb(var(--c-ring));
    box-shadow: 0 0 0 3px rgb(var(--c-ring) / 0.2);
}
.ui-input::placeholder { color: rgb(var(--c-faint)); }

/* ── Checkbox: replaces 3 near-identical spellings across 6 sites (B22) ── */
.ui-checkbox {
    width: 14px;
    height: 14px;
    accent-color: rgb(var(--c-accent));
    border: 1px solid rgb(var(--c-line-strong));
    border-radius: 3px;
    cursor: pointer;
}
.ui-checkbox:focus-visible {
    outline: 2px solid rgb(var(--c-ring));
    outline-offset: 1px;
}

/* ── Switch: filter sidebar boolean toggles (theme-aware, no hex) ── */
.ui-switch {
    appearance: none;
    -webkit-appearance: none;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: rgb(var(--c-sunken));
    border: 1px solid rgb(var(--c-line-strong));
    position: relative;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}
.ui-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: rgb(var(--c-panel));
    border: 1px solid rgb(var(--c-line-strong));
    transition: transform 0.15s ease;
}
.ui-switch:checked {
    background: rgb(var(--c-accent));
    border-color: rgb(var(--c-accent));
}
.ui-switch:checked::after {
    transform: translateX(16px);
    border-color: transparent;
}
.ui-switch:focus-visible {
    outline: 2px solid rgb(var(--c-ring));
    outline-offset: 2px;
}

/* ── Segmented control: soft sunken track so the group always reads as one
      control; period options dock inside as delineated pills (panel fill +
      hairline border) rather than bare text. Active pill takes its period
      tint at full glanceable contrast. Generic :where() base stays at zero
      specificity so WFO Tailwind active utilities keep winning there. ── */
.ui-segmented {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    background: rgb(var(--c-sunken));
    border: 1px solid rgb(var(--c-line));
    border-radius: 999px;
    padding: 3px;
    box-shadow: inset 0 1px 2px rgb(var(--c-fg) / 0.05);
    scrollbar-width: none;
}
.ui-segmented::-webkit-scrollbar { display: none; }
:where(.ui-segmented > button) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
:where(.ui-segmented > button:focus-visible) {
    outline: 2px solid rgb(var(--c-ring));
    outline-offset: 2px;
}
:where(.ui-segmented > button.active) {
    background: rgb(var(--c-panel));
    color: rgb(var(--c-fg));
}

/* ── Period pills: inactive stays a visible chip (panel fill + hairline
      border on the sunken track); hover lifts toward fg. Real specificity
      (not :where) so Tailwind preflight can never flatten these to text. ── */
.ui-segmented > button.period-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: rgb(var(--c-panel));
    border: 1px solid rgb(var(--c-line-strong));
    border-radius: 999px;
    color: rgb(var(--c-muted));
    font: 600 11px/1 var(--font-main);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ui-segmented > button.period-pill:hover {
    color: rgb(var(--c-fg));
    border-color: rgb(var(--c-line-strong));
    background: rgb(var(--c-hover));
}
.ui-segmented > button.period-pill:focus-visible {
    outline: 2px solid rgb(var(--c-ring));
    outline-offset: 2px;
}

/* ── Period pills: each active tint matches its value color
      (Full blue, IS amber, OOS chart-4 violet, FT green) ── */
.ui-segmented > button.period-active-full {
    background: rgb(var(--c-info-soft));
    border-color: rgb(var(--c-accent) / 0.55);
    color: rgb(var(--c-accent-fg));
    font-weight: 700;
    box-shadow: 0 1px 3px rgb(var(--c-accent) / 0.25);
}
.ui-segmented > button.period-active-is {
    background: rgb(var(--c-warn-soft));
    border-color: rgb(var(--c-warn) / 0.55);
    color: rgb(var(--c-warn-fg));
    font-weight: 700;
    box-shadow: 0 1px 3px rgb(var(--c-warn) / 0.25);
}
.ui-segmented > button.period-active-oos {
    background: rgb(var(--c-chart-4) / 0.22);
    border-color: rgb(var(--c-chart-4) / 0.6);
    color: rgb(var(--c-chart-4));
    font-weight: 700;
    box-shadow: 0 1px 3px rgb(var(--c-chart-4) / 0.3);
}
.ui-segmented > button.period-active-ft {
    background: rgb(var(--c-pos-soft));
    border-color: rgb(var(--c-pos) / 0.55);
    color: rgb(var(--c-pos-fg));
    font-weight: 700;
    box-shadow: 0 1px 3px rgb(var(--c-pos) / 0.25);
}

/* ── Period segmented group: classic square joined control shared by the
      Summary + Detailed headers (Detailed mirrors Summary's markup via
      window.lastPeriodsHtml). Transparent container + transparent idle
      segments split by hairline dividers; only the selected segment takes
      its period tint. Scoped to .ui-segmented--periods so WFO tabs sharing
      .ui-segmented keep the pill-track look. ── */
.ui-segmented--periods {
    gap: 0;
    padding: 0;
    background: transparent;
    border: 1px solid rgb(var(--c-line-strong));
    border-radius: 6px;
    box-shadow: none;
    flex-shrink: 0;
}
.ui-segmented--periods > button.period-pill {
    gap: 3px;
    height: 24px;
    min-height: 24px;
    padding: 0 7px;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: rgb(var(--c-muted));
    font: 600 11px/1 var(--font-main);
    box-shadow: none;
}
.ui-segmented--periods > button.period-pill + button.period-pill {
    border-left: 1px solid rgb(var(--c-line));
}
.ui-segmented--periods > button.period-pill:hover {
    background: rgb(var(--c-hover));
    border-color: rgb(var(--c-line));
    color: rgb(var(--c-fg));
}
/* Chained .period-pill.period-active-* keeps these above the :hover rule
   above (equal specificity, later wins) so the tint persists on hover. */
.ui-segmented--periods > button.period-pill.period-active-full {
    background: rgb(var(--c-info-soft));
    border-color: transparent;
    color: rgb(var(--c-accent-fg));
    font-weight: 600;
    box-shadow: none;
}
.ui-segmented--periods > button.period-pill.period-active-is {
    background: rgb(var(--c-warn-soft));
    border-color: transparent;
    color: rgb(var(--c-warn-fg));
    font-weight: 600;
    box-shadow: none;
}
.ui-segmented--periods > button.period-pill.period-active-oos {
    background: rgb(var(--c-chart-4) / 0.22);
    border-color: transparent;
    color: rgb(var(--c-chart-4));
    font-weight: 600;
    box-shadow: none;
}
.ui-segmented--periods > button.period-pill.period-active-ft {
    background: rgb(var(--c-pos-soft));
    border-color: transparent;
    color: rgb(var(--c-pos-fg));
    font-weight: 600;
    box-shadow: none;
}
@media (max-width: 639px) {
    /* Doubled class beats the wrapping .ui-segmented rule below regardless
       of order: the joined group scrolls instead of splitting across rows. */
    .metric-group-header--periods .period-filters .ui-segmented.ui-segmented--periods {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        width: auto;
    }
}

/* ── Period filter rows: right-aligned on desktop, stacked + centered on mobile ── */
.period-filters {
    min-width: 0;
}
/* Mobile-only rule under the period headers: hidden on desktop so the
   single-row title + group layout and its existing divider stay as-is. */
.period-header-divider {
    display: none;
}
@media (max-width: 639px) {
    .metric-group-header--periods {
        flex-direction: column;
        align-items: stretch;
        border-bottom: 0;
        padding-bottom: 0;
        gap: 0;
    }
    /* Full-width hairline between the title row and the period group,
       matching the heading separators used by the other cards. */
    .metric-group-header--periods .period-header-divider {
        display: block;
        width: 100%;
        height: 1px;
        background: rgb(var(--c-line));
        margin: 12px 0;
    }
    .metric-group-header--periods .period-filters {
        width: 100%;
    }
    .metric-group-header--periods .period-filters .ui-segmented {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
        width: 100%;
    }
}
@media (min-width: 640px) {
    .metric-group-header--periods .period-filters .ui-segmented {
        justify-content: flex-end;
    }
}

/* ── Summary forward-test action: bottom-center slot inside the Summary
      card, rendered only on the Forward Test period tab (native runs).
      Green pos tint matches the period-active-ft pill family. ── */
.summary-forward-action {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgb(var(--c-line));
}
.summary-forward-action #run-forward-btn {
    max-width: 100%;
}
/* Forward-test tooltip opens above the button: the Summary card clips
   with overflow:hidden for its rounded corners, so the default
   below-the-button bubble is cut off at the card's bottom edge.
   Same placement as [data-tooltip-pos="top"]; reuses tooltipFade. */
.summary-forward-action #run-forward-btn:hover::after {
    top: auto;
    bottom: calc(100% + 8px);
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-4px);
}

/* ── Eyebrow: the uppercase section label, previously built as h2/h3/h4
      with 4 different colour tokens. Heading level now follows the document
      outline; this class carries the appearance. ── */
.ui-eyebrow {
    color: rgb(var(--c-faint));
    font: 600 11px/1.35 var(--font-main);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Eyebrow solid: card headings on Strategy tab (Strategy/Results Settings,
      Results Preview, Parameters, Buy/Sell, Exit, Indicator). Same tokens as
      the top cards so every header renders one solid style in light + dark. ── */
.ui-eyebrow-solid {
    color: rgb(var(--c-fg));
    font: 600 12px/1.35 var(--font-main);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Table head ── */
.ui-table-head th {
    padding: 6px 10px;
    background: rgb(var(--c-sunken));
    color: rgb(var(--c-faint));
    font: 600 11px/1.35 var(--font-main);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    border-bottom: 1px solid rgb(var(--c-line));
}

/* ── Spinner: replaces 5 spellings ── */
.ui-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgb(var(--c-line-strong));
    border-top-color: rgb(var(--c-accent));
    border-radius: 999px;
    animation: ui-spin 0.7s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ── Inline banner: replaces walk-forward.js:28/62/114 (62 and 114 are
      byte-identical to each other) ── */
.ui-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl);
    border: 1px solid;
    border-radius: var(--radius-md);
    font: 600 13px/1.5 var(--font-main);
}
.ui-banner--warn  { background: rgb(var(--c-warn-soft)); border-color: rgb(var(--c-warn) / 0.4); color: rgb(var(--c-warn-fg)); }
.ui-banner--error { background: rgb(var(--c-neg-soft));  border-color: rgb(var(--c-neg) / 0.4);  color: rgb(var(--c-neg-fg)); }

/* ── Overlay: replaces bg-black/60, /50, /40 and admin.html's .glass ── */
.ui-overlay {
    position: fixed;
    inset: 0;
    background: rgb(var(--c-overlay) / 0.6);
    backdrop-filter: blur(4px);
}

/* ── Documentation (user_guide) ────────────────────────── */
.docs-layout {
    display: flex;
    min-height: calc(100vh - 56px);
    margin-top: 56px;
}

/* ── Sidebar ── */
.docs-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: rgb(var(--c-panel));
    border-right: 1px solid rgb(var(--c-line));
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
    padding: 20px 0;
    z-index: 50;
    transition: transform 0.3s ease;
}

.docs-sidebar-search {
    padding: 0 16px 16px;
}

.docs-sidebar-search input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    background: rgb(var(--c-sunken));
    border: 1px solid rgb(var(--c-line));
    border-radius: 8px;
    color: rgb(var(--c-fg));
    font-size: 13px;
    font-weight: 500;
    outline: none;
    transition: all 0.2s;
}

.docs-sidebar-search input:focus {
    border-color: rgb(var(--c-ring));
    box-shadow: 0 0 0 3px rgb(var(--c-ring) / 0.25);
}

.docs-sidebar-search .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgb(var(--c-faint));
    font-size: 16px;
    pointer-events: none;
}

/* Nav Groups */
.docs-nav-group {
    margin-bottom: 4px;
}

.docs-nav-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: rgb(var(--c-fg));
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
    line-height: 1.4;
}

.docs-nav-group-title:hover {
    color: rgb(var(--c-fg));
}

.docs-nav-group-title .chevron {
    font-size: 16px;
    transition: transform 0.2s;
    color: rgb(var(--c-faint));
}

.docs-nav-group.expanded .chevron {
    transform: rotate(90deg);
}

.docs-nav-group-items {
    display: none;
    padding-bottom: 4px;
}

.docs-nav-group.expanded .docs-nav-group-items {
    display: block;
}

.docs-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 44px;
    font-size: 13px;
    font-weight: 500;
    color: rgb(var(--c-muted));
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    border-left: 3px solid transparent;
    line-height: 1.4;
}

.docs-nav-link:hover {
    color: rgb(var(--c-fg));
    background: rgb(var(--c-sunken));
}

.docs-nav-link.active {
    color: rgb(var(--c-accent-fg));
    background: rgb(var(--c-accent) / 0.08);
    border-left-color: rgb(var(--c-accent-fg));
    font-weight: 600;
}

.docs-nav-link .material-symbols-outlined {
    font-size: 18px;
    opacity: 0.7;
}

.docs-nav-link.active .material-symbols-outlined {
    opacity: 1;
}

/* ── Main Content ── */
.docs-content {
    flex: 1;
    padding: 32px 48px 80px;
    min-height: calc(100vh - 56px);
}

.docs-section {
    display: none;
    animation: fadeIn 0.25s ease-out;
}

.docs-section.active {
    display: block;
}

/* ── Typography ── */
.docs-section h1 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    color: rgb(var(--c-fg));
}

.docs-section .docs-subtitle {
    font-size: 15px;
    color: rgb(var(--c-muted));
    margin-bottom: 32px;
    line-height: 1.6;
}

.docs-section h2 {
    font-size: 20px;
    font-weight: 700;
    color: rgb(var(--c-fg));
    margin-top: 40px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgb(var(--c-line));
}

.docs-section h3 {
    font-size: 16px;
    font-weight: 700;
    color: rgb(var(--c-fg));
    margin-top: 28px;
    margin-bottom: 12px;
}

.docs-section p {
    font-size: 14px;
    color: rgb(var(--c-muted));
    line-height: 1.75;
    margin-bottom: 16px;
}

.docs-section ul,
.docs-section ol {
    padding-left: 24px;
    margin-bottom: 16px;
}

.docs-section li {
    font-size: 14px;
    color: rgb(var(--c-muted));
    line-height: 1.75;
    margin-bottom: 6px;
}

.docs-section strong {
    color: rgb(var(--c-fg));
    font-weight: 600;
}

.docs-section code {
    background: rgb(var(--c-sunken));
    border: 1px solid rgb(var(--c-line));
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-family: var(--font-mono);
    color: rgb(var(--c-accent-fg));
}

.docs-section pre {
    background: rgb(var(--c-sunken));
    border: 1px solid rgb(var(--c-line));
    border-radius: 8px;
    padding: 16px 20px;
    overflow-x: auto;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.6;
}

.docs-section pre code {
    background: transparent;
    border: none;
    padding: 0;
    color: rgb(var(--c-fg));
    font-size: 13px;
}

/* ── Callout Boxes ── */
.docs-callout {
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.docs-callout .material-symbols-outlined {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.docs-callout p {
    margin: 0;
    font-size: 13px;
}

.docs-callout-info {
    background: rgb(var(--c-info-soft));
    border: 1px solid rgb(var(--c-line));
    color: rgb(var(--c-muted));
}

.docs-callout-info .material-symbols-outlined {
    color: rgb(var(--c-accent-fg));
}

.docs-callout-tip {
    background: rgb(var(--c-pos-soft));
    border: 1px solid rgb(var(--c-line));
    color: rgb(var(--c-muted));
}

.docs-callout-tip .material-symbols-outlined {
    color: rgb(var(--c-pos-fg));
}

.docs-callout-warn {
    background: rgb(var(--c-warn-soft));
    border: 1px solid rgb(var(--c-line));
    color: rgb(var(--c-muted));
}

.docs-callout-warn .material-symbols-outlined {
    color: rgb(var(--c-warn-fg));
}

/* ── Metric Cards ── */
.docs-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.docs-metric-card {
    background: rgb(var(--c-sunken));
    border: 1px solid rgb(var(--c-line));
    border-radius: 10px;
    padding: 16px;
}

.docs-metric-card h4 {
    font-size: 13px;
    font-weight: 700;
    color: rgb(var(--c-fg));
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.docs-metric-card p {
    font-size: 12px;
    color: rgb(var(--c-muted));
    margin: 0;
    line-height: 1.6;
}

/* ── Step cards ── */
.docs-steps {
    counter-reset: step;
    margin-bottom: 24px;
}

.docs-step {
    counter-increment: step;
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: rgb(var(--c-sunken));
    border: 1px solid rgb(var(--c-line));
    border-radius: 10px;
}

.docs-step::before {
    content: counter(step);
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: rgb(var(--c-accent));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
}

.docs-step-content h4 {
    font-size: 14px;
    font-weight: 700;
    color: rgb(var(--c-fg));
    margin-bottom: 4px;
}

.docs-step-content p {
    font-size: 13px;
    margin: 0;
}

/* ── Table ── */
.docs-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    font-size: 13px;
}

.docs-table th {
    background: rgb(var(--c-sunken));
    color: rgb(var(--c-faint));
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 2px solid rgb(var(--c-line-strong));
}

.docs-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgb(var(--c-line));
    color: rgb(var(--c-muted));
    vertical-align: top;
}

.docs-table tr:hover td {
    background: rgb(var(--c-hover));
}

/* ── Pagination ── */
.docs-pagination {
    display: flex;
    justify-content: space-between;
    margin-top: 64px;
    padding-top: 24px;
    border-top: 1px solid rgb(var(--c-line));
    gap: 24px;
}

.docs-page-link {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 20px;
    border: 1px solid rgb(var(--c-line));
    border-radius: 10px;
    background: rgb(var(--c-panel));
    text-decoration: none;
    color: rgb(var(--c-fg));
    transition: all 0.2s;
}

.docs-page-link:hover {
    border-color: rgb(var(--c-accent-fg));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.docs-page-link.docs-next {
    justify-content: flex-end;
    text-align: right;
}

.docs-page-link .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(var(--c-faint));
    font-weight: 700;
    margin-bottom: 6px;
}

.docs-page-link .title {
    font-size: 15px;
    font-weight: 600;
    color: rgb(var(--c-accent-fg));
}

.docs-page-link .material-symbols-outlined {
    font-size: 24px;
    color: rgb(var(--c-faint));
    transition: color 0.2s;
}

.docs-page-link.docs-prev .material-symbols-outlined {
    margin-right: 16px;
}

.docs-page-link.docs-next .material-symbols-outlined {
    margin-left: 16px;
}

.docs-page-link:hover .material-symbols-outlined {
    color: rgb(var(--c-accent-fg));
}

/* ── Mobile ── */
.docs-mobile-toggle {
    display: none;
    width: fit-content;
    margin-bottom: 24px;
    padding: 8px 0;
    background: transparent;
    border: none;
    color: rgb(var(--c-accent-fg));
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    align-items: center;
    gap: 6px;
}
.docs-mobile-toggle:hover {
    opacity: 0.8;
}

.docs-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 39;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.docs-sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ── Keyboard shortcut badge ── */
.docs-layout kbd,
.docs-section kbd,
kbd {
    background: rgb(var(--c-sunken));
    border: 1px solid rgb(var(--c-line-strong));
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: rgb(var(--c-muted));
}

@media (max-width: 1024px) {
    .docs-sidebar {
        position: fixed;
        left: 0;
        bottom: 0;
        height: auto;
        transform: translateX(-100%);
        width: 280px;
    }

    .docs-sidebar.mobile-open {
        transform: translateX(0);
    }

    .docs-content {
        margin-left: 0;
        padding: 24px 20px 80px;
    }

    .docs-mobile-toggle {
        display: flex;
    }

    .docs-sidebar-overlay {
        display: block;
    }
}

@media (max-width: 640px) {
    .docs-section h1 {
        font-size: 22px;
    }

    .docs-section h2 {
        font-size: 17px;
    }

    .docs-metric-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════
   Strategy tab — Phase 1 mobile polish (max-md only).
   Everything below lives inside max-width:767.98px, so
   md and lg+ rendering cannot change. Selectors are
   id-scoped above Tailwind utilities so the prebuilt
   tailwind.css (loaded before this file) never wins.
   ══════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* 1. Dock clearance: the fixed glass dock is ~76px tall plus
       env(safe-area-inset-bottom) on notched phones. Body already
       reserves 96px below lg; top it up with the safe area and give
       the Strategy tab its own bottom breathing room so the last
       card / code block scrolls fully clear of the dock. Clip any
       page-level horizontal overflow at the tab (code keeps its own
       internal scroller; no sticky/fixed descendants inside). */
    body {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }
    #tab-strategy {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
        overflow-x: clip;
    }

    /* 2. Indicator Reference: header stacks (title row, then an even
       Python/TradingView split — no squeeze at 360px); selector sits
       on top as a horizontal pill strip; code sits below and scrolls
       internally without pushing the page sideways. */
    #logic-intuitive-container .ind-stack-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    #logic-intuitive-container .ind-stack-toggles {
        gap: 8px;
    }
    #logic-intuitive-container .ind-stack-toggles .ind-toggle-btn {
        flex: 1 1 0%;
        justify-content: center;
    }
    #logic-intuitive-container .ind-card {
        min-width: 0;
        max-width: 100%;
    }
    #logic-intuitive-container .ind-stack-body {
        min-width: 0;
    }
    #logic-intuitive-container .ind-list-panel {
        height: auto;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 12px;
        margin-bottom: 12px;
        border-bottom: 1px solid rgb(var(--c-line));
    }
    #logic-intuitive-container .ind-code-wrap {
        width: 100%;
    }
    #logic-intuitive-container .ind-code-block {
        max-width: 100%;
        height: 320px;
    }
    #logic-intuitive-container .ind-code-block pre {
        max-width: 100%;
    }

    /* 3. Strategy params card grid: same plain 2-col grid as the
       Settings grids (Tailwind already sets grid-cols-2; these guards
       only keep cells shrinkable so nothing overflows at 360px). No
       orphan centering — plain grid like Settings. */
    #strategy-params-grid > * {
        min-width: 0;
    }
    #strategy-params-grid label {
        white-space: normal;
        overflow-wrap: break-word;
    }
    #strategy-params-grid select,
    #strategy-params-grid input {
        max-width: 100%;
    }
    #strategy-params-grid .grid-param-input {
        width: 100%;
    }

    /* Static Strategy Settings grid: keep cells shrinkable so long
       selects/inputs can't push the page sideways at 360px.
       (No orphan rule here — #strike-wrapper is display:none outside
       option modes, so DOM position can't tell odd from even.) */
    #strategy-settings-grid > * {
        min-width: 0;
    }
    #strategy-settings-grid select,
    #strategy-settings-grid input {
        max-width: 100%;
    }
}

/* ══════════════════════════════════════════════════════
   Strategy tab — Phase 2 mobile polish (max-md only).
   Same contract as phase 1: everything lives inside
   max-width:767.98px, id-scoped above Tailwind utilities,
   so md and lg+ rendering cannot change. No copy/logic
   changes — plain CSS in this file only.
   ══════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* 1. Buy/Sell inline-param pills: never break mid-word, wrap
       onto their own line cleanly with vertical breathing room.
       Hues stay inline (style attr) — only layout props here. */
    #logic-intuitive-container .inline-param {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        word-break: keep-all;
        vertical-align: baseline;
        line-height: 1.6;
        margin-top: 2px;
        margin-bottom: 2px;
    }
    /* Condition sentences wrap between words (not inside pills)
       with relaxed leading so wrapped pill rows never collide. */
    #logic-intuitive-container .space-y-3 > div > span.text-sm,
    #logic-intuitive-container .space-y-4 > div > span.text-sm {
        overflow-wrap: break-word;
        min-width: 0;
        line-height: 1.75;
    }

    /* 2. Top tab strip: edge padding + fade affordance, and room
       for the 2px active underline so it is never clipped by the
       scrollport. End spacer lets the last tab scroll clear of
       the right edge. */
    #detail-tabs-nav nav {
        scroll-padding-left: 16px;
        scroll-padding-right: 16px;
        padding-top: 8px;
        padding-bottom: 9px;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); /* token-exempt: mask needs literal black for luminance */
        mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); /* token-exempt: mask needs literal black for luminance */
    }
    #detail-tabs-nav nav::after {
        content: "";
        flex: 0 0 4px;
    }
    #detail-tabs-nav nav .detail-tab-btn {
        flex-shrink: 0;
    }

    /* 3. Settings input rhythm: 36px compact touch targets, 6px label gap,
       roomier rows. Date + Backtest stack untouched structurally —
       only touch height so the full-width stack stays intact. */
    #strategy-settings-grid,
    #results-settings-grid,
    #setup-grid-setup,
    #setup-grid-costs,
    #setup-grid-settings,
    #strategy-params-grid {
        row-gap: 16px;
        column-gap: 12px;
    }
    #strategy-settings-grid > div,
    #results-settings-grid > div,
    #setup-grid-setup > div,
    #setup-grid-costs > div,
    #setup-grid-settings > div,
    #strategy-params-grid > div {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }
    #strategy-settings-grid label,
    #results-settings-grid label,
    #setup-grid-setup label,
    #setup-grid-costs label,
    #setup-grid-settings label,
    #strategy-params-grid label {
        overflow-wrap: break-word;
        line-height: 1.35;
    }
    #strategy-settings-grid select,
    #strategy-settings-grid input,
    #results-settings-grid select,
    #results-settings-grid input,
    #results-settings-grid .custom-dropdown-toggle,
    #setup-grid-setup select,
    #setup-grid-setup input,
    #setup-grid-setup .custom-dropdown-toggle,
    #setup-grid-costs select,
    #setup-grid-costs input,
    #setup-grid-costs .custom-dropdown-toggle,
    #setup-grid-settings select,
    #setup-grid-settings input,
    #setup-grid-settings .custom-dropdown-toggle,
    #strategy-params-grid select,
    #strategy-params-grid input {
        min-height: 36px;
    }
    #run-btn-sidebar {
        min-height: 44px;
    }

    /* 4. Results Preview: hidden on mobile (settings + the
       Backtest tab cover it); md+ untouched. Id-scoped so it
       beats the JS-added .flex display class without logic. */
    #strategy-tab-backtest-preview {
        display: none;
    }

    /* 5. Tab-top hardening: keeps pane tops clear of the sticky
       unit (app header 56px + header row ~49px + L1 row ~56px)
       on native anchors. */
    .tab-pane {
        scroll-margin-top: 172px;
    }
}

/* ══════════════════════════════════════════════════════
   Settings grids — unified field height (Strategy + Results).
   Native date/time/number inputs, selects, and the Days
   custom-dropdown-toggle render pixel-equal: 32px desktop,
   36px compact target on mobile. Id-scoped above Tailwind
   utilities (h-[32px]/py-1.5); vertical padding is zeroed
   and line-height carries centering so UA date/time inner
   elements can't inflate cells. No layout/copy/logic change.
   ══════════════════════════════════════════════════════ */
/* ── Strategy Parameters card (left column, below Setup).
   Plain settings-style grid; each input is a hue-tinted text box paired
   to its inline Buy/Sell pill (param-hue-N follows the same param order
   as the pills). Text stays text-fg: none of the six chart hues passes
   AA on white in light mode, so tinted text would fail readability —
   only the box (bg + border) is tinted. !important beats the global
   input:not() panel-background rule; :focus falls back to accent like
   every other settings field; :disabled restores the sunken lock look. ── */
#strategy-params-grid > div {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: flex-start;
}
#strategy-params-grid label {
    white-space: normal;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0;
    margin: 0;
    line-height: 1.35;
}
#strategy-params-grid .grid-param-input {
    color: rgb(var(--c-fg)) !important;
}
#strategy-params-grid .grid-param-input.param-hue-1 { background-color: rgb(var(--c-chart-1) / 0.12) !important; border-color: rgb(var(--c-chart-1) / 0.45) !important; }
#strategy-params-grid .grid-param-input.param-hue-2 { background-color: rgb(var(--c-chart-2) / 0.12) !important; border-color: rgb(var(--c-chart-2) / 0.45) !important; }
#strategy-params-grid .grid-param-input.param-hue-3 { background-color: rgb(var(--c-chart-3) / 0.12) !important; border-color: rgb(var(--c-chart-3) / 0.45) !important; }
#strategy-params-grid .grid-param-input.param-hue-4 { background-color: rgb(var(--c-chart-4) / 0.12) !important; border-color: rgb(var(--c-chart-4) / 0.45) !important; }
#strategy-params-grid .grid-param-input.param-hue-5 { background-color: rgb(var(--c-chart-5) / 0.12) !important; border-color: rgb(var(--c-chart-5) / 0.45) !important; }
#strategy-params-grid .grid-param-input.param-hue-6 { background-color: rgb(var(--c-chart-6) / 0.12) !important; border-color: rgb(var(--c-chart-6) / 0.45) !important; }
#strategy-params-grid .grid-param-input.param-hue-1:hover { border-color: rgb(var(--c-chart-1) / 0.75) !important; }
#strategy-params-grid .grid-param-input.param-hue-2:hover { border-color: rgb(var(--c-chart-2) / 0.75) !important; }
#strategy-params-grid .grid-param-input.param-hue-3:hover { border-color: rgb(var(--c-chart-3) / 0.75) !important; }
#strategy-params-grid .grid-param-input.param-hue-4:hover { border-color: rgb(var(--c-chart-4) / 0.75) !important; }
#strategy-params-grid .grid-param-input.param-hue-5:hover { border-color: rgb(var(--c-chart-5) / 0.75) !important; }
#strategy-params-grid .grid-param-input.param-hue-6:hover { border-color: rgb(var(--c-chart-6) / 0.75) !important; }
#strategy-params-grid .grid-param-input:focus {
    border-color: rgb(var(--c-accent)) !important;
    box-shadow: 0 0 0 1px rgb(var(--c-ring) / 0.25);
}
#strategy-params-grid .grid-param-input:disabled {
    background-color: rgb(var(--c-sunken)) !important;
    border-color: rgb(var(--c-line-strong)) !important;
}
#strategy-settings-grid select,
#strategy-settings-grid input:not([type="checkbox"]):not([type="radio"]),
#strategy-settings-grid .custom-dropdown-toggle,
#results-settings-grid select,
#results-settings-grid input:not([type="checkbox"]):not([type="radio"]),
#results-settings-grid .custom-dropdown-toggle,
#setup-grid-setup select,
#setup-grid-setup input:not([type="checkbox"]):not([type="radio"]),
#setup-grid-setup .custom-dropdown-toggle,
#setup-grid-costs select,
#setup-grid-costs input:not([type="checkbox"]):not([type="radio"]),
#setup-grid-costs .custom-dropdown-toggle,
#setup-grid-settings select,
#setup-grid-settings input:not([type="checkbox"]):not([type="radio"]),
#setup-grid-settings .custom-dropdown-toggle,
#strategy-params-grid select,
#strategy-params-grid input:not([type="checkbox"]):not([type="radio"]) {
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 30px;
}
/* ══════════════════════════════════════════════════════
   Strategy tab — Phase 3 mobile readability: Buy/Sell/Exit
   cards (max-md only). Same contract as phases 1-2: all
   inside max-width:767.98px, id-scoped above Tailwind
   utilities, so sm+ 2-col label/value layout cannot change.
   Desktop row names stay verbatim on mobile (Entry Order
   Type, Entry Order Validity, etc.) — no footnote vocabulary.
   ══════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    #strategy-settings-grid select,
    #strategy-settings-grid input:not([type="checkbox"]):not([type="radio"]),
    #strategy-settings-grid .custom-dropdown-toggle,
    #results-settings-grid select,
    #results-settings-grid input:not([type="checkbox"]):not([type="radio"]),
    #results-settings-grid .custom-dropdown-toggle,
    #setup-grid-setup select,
    #setup-grid-setup input:not([type="checkbox"]):not([type="radio"]),
    #setup-grid-setup .custom-dropdown-toggle,
    #setup-grid-costs select,
    #setup-grid-costs input:not([type="checkbox"]):not([type="radio"]),
    #setup-grid-costs .custom-dropdown-toggle,
    #setup-grid-settings select,
    #setup-grid-settings input:not([type="checkbox"]):not([type="radio"]),
    #setup-grid-settings .custom-dropdown-toggle,
    #strategy-params-grid select,
    #strategy-params-grid input:not([type="checkbox"]):not([type="radio"]) {
        height: 36px;
        min-height: 36px;
        line-height: 34px;
    }
}

/* ══════════════════════════════════════════════════════
   Strategy tab — Phase 3 mobile readability: Buy/Sell/Exit
   cards (max-md only). Same contract as phases 1-2: all
   inside max-width:767.98px, id-scoped above Tailwind
   utilities, so sm+ 2-col label/value layout cannot change.
   Desktop row names render verbatim on mobile.
   ══════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* Trimmed card padding + tighter headers on mobile only. */
    #logic-intuitive-container .logic-entry-card.ui-card,
    #logic-intuitive-container .logic-exit-card.ui-card {
        padding: 16px;
    }
    #logic-intuitive-container .logic-entry-card > div:first-child,
    #logic-intuitive-container .logic-exit-card > div:first-child {
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

    /* Smaller label eyebrows: quieter, tighter, faint over muted. */
    #logic-intuitive-container .logic-label,
    #logic-intuitive-container .logic-exec-row > span:first-child {
        font-size: 10px;
        letter-spacing: 0.06em;
        line-height: 1.3;
        color: rgb(var(--c-faint));
    }

    /* 1. Entry Signal: full-width block, relaxed ~1.7 leading so
       wrapped pill rows never collide. Pills keep their inline
       hue pairing (style attr) — only layout props here. */
    #logic-intuitive-container .logic-signal-row {
        width: 100%;
    }
    #logic-intuitive-container .logic-signal-val {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-wrap: break-word;
        line-height: 1.7;
    }
    #logic-intuitive-container .logic-signal-val .inline-param {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        word-break: keep-all;
        vertical-align: baseline;
        line-height: 1.6;
        margin-top: 2px;
        margin-bottom: 2px;
    }

    /* Clearer row separation: hairline between stacked rows. */
    #logic-intuitive-container .logic-entry-card .logic-signal-row,
    #logic-intuitive-container .logic-entry-card .logic-row,
    #logic-intuitive-container .logic-entry-card .logic-exec-row {
        padding-bottom: 12px;
        border-bottom: 1px solid rgb(var(--c-line));
    }
    #logic-intuitive-container .logic-exit-card .logic-row + .logic-row {
        border-top: 1px solid rgb(var(--c-line));
        padding-top: 12px;
    }
}