/* ============================================================
   Historical Signal Backtesting — page styles
   Scoped under .bt-page so we never accidentally leak into
   other pages' styles.
   ============================================================ */

.bt-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 20px 80px;
    box-sizing: border-box;
}
.bt-page * { box-sizing: border-box; }
/* Section gap below the hero — matches the rhythm on /roadmap & /faq */
.bt-page > .page-hero { margin-bottom: 20px; }

/* CRITICAL: respect the [hidden] attribute regardless of any display: rule below.
   Without this, .bt-status / .bt-types-grid / .bt-blur-overlay (each with display:flex
   or display:grid) ignore the JS-set `hidden` attribute and stay permanently visible. */
.bt-page [hidden] { display: none !important; }

/* ── Mobile tightening ────────────────────────────────────────
   Without this, the outer .bt-page padding (20px) plus the inner
   .bt-controls/.bt-types-grid paddings (18px / 14px) compound to
   make content feel shifted from the screen edges. Tighten the
   outer wrap and trim each inner panel.

   IMPORTANT: must match the .bt-controls grid-stacking breakpoint (900px)
   above — otherwise tablets in the 768-900px range get the stacked
   layout with the wider desktop padding, which is exactly the
   off-center perception we're trying to eliminate. */
@media (max-width: 900px) {
    .bt-page          { padding: 8px 14px 60px; }
    .bt-controls      { padding: 14px 12px 12px; gap: 12px; }
    .bt-types-grid    { padding: 10px 12px; }
    .bt-table-head    { padding: 14px 16px 6px; }
    .bt-scroll        { padding: 0; overflow-x: auto; }
    .bt-method        { padding: 16px 16px; }
    .bt-stat-card     { padding: 14px 16px; }
    .bt-fires-cta-inner { gap: 10px; }
    .bt-table th, .bt-table td { padding: 8px 10px; }
    .bt-fires-wrap, .bt-table-wrap { margin-bottom: 14px; }

    /* Stretch the filter controls so nothing reads as left-justified
       inside an otherwise centered box. The dropdown-toggle takes the
       full row; quick-filter buttons split the next row evenly. */
    .bt-types-row {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    .bt-types-toggle {
        flex: 1 1 100%;
        text-align: center;
    }
    .bt-types-meta {
        flex: 1 1 0;
        text-align: center;
        white-space: nowrap;
        padding: 8px 6px;
    }

    /* Date input stack: labels were anchoring to their column edges,
       making the row look weighted toward the outsides. Make labels
       center-aligned within their column so START / END read symmetrically. */
    .bt-control-date label { text-align: center; }
    .bt-control input[type="date"] { text-align: center; }
}

/* Below 600px (phones): stack the date inputs vertically.
   This eliminates ALL column-overflow possibilities that iOS Safari has
   with its native <input type="date"> intrinsic widths. Each input becomes
   full-width of the box's content area — guaranteed mirror-symmetric. */
@media (max-width: 600px) {
    .bt-controls { grid-template-columns: 1fr; }
    .bt-control-date {
        min-width: 0;
        width: 100%;
    }
    .bt-control input[type="date"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
    }
}

/* Below 480px (small phones): drop bt-page padding further so the inner
   cards reach closer to the screen edge. Inner panels keep their 12px
   padding so content is never edge-flush. */
@media (max-width: 480px) {
    .bt-page          { padding: 6px 10px 60px; }
    .bt-controls      { padding: 12px 12px 10px; }
    .bt-control input[type="date"] { padding: 9px 10px; }
}

/* ── Hero badge variants ─────────────────────────────────
   Page hero itself uses .page-hero / .page-hero-title / .page-hero-highlight
   from the global stylesheet (matches /roadmap, /news, /faq, etc.). We only
   override the two badge variants we add: orange "Coming Soon" + violet "Alpha Tier". */
.bt-badge-coming {
    color: #ff9900 !important;
    background: rgba(255,153,0,0.10) !important;
    border-color: rgba(255,153,0,0.35) !important;
}
.bt-badge-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ff9900;
    box-shadow: 0 0 6px #ff9900;
    margin-right: 6px;
    vertical-align: middle;
}
.bt-badge-alpha {
    color: var(--purple) !important;
    background: rgba(224,64,251,0.12) !important;
    border-color: rgba(224,64,251,0.35) !important;
    /* Match the pulsing glow used on /picks and /whaile.
       The keyframes (`badge-glow-alpha`) are already defined in base.html. */
    animation: badge-glow-alpha 2s ease-in-out infinite;
}

/* ── Filter controls ─────────────────────────────────── */
.bt-controls {
    display: grid;
    grid-template-columns: 160px 160px 1fr auto;
    gap: 16px;
    align-items: end;
    background: rgba(0,102,255,0.06);
    border: 1px solid rgba(0,102,255,0.18);
    border-radius: 12px;
    padding: 18px 18px 16px;
    margin-bottom: 22px;
}
@media (max-width: 900px) {
    /* minmax(0, 1fr) instead of 1fr — without it, grid items with intrinsic
       content width (like the rendered date input value "Apr 27, 2026") can
       force their column wider than the allocated track, overflowing past the
       parent's padding-right. This was the right-shift the user was seeing. */
    .bt-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bt-control-types, .bt-control-run { grid-column: 1 / -1; }
    .bt-control { min-width: 0; }
    .bt-control input[type="date"] { max-width: 100%; box-sizing: border-box; }
}
.bt-control label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7BB3FF;
    margin-bottom: 6px;
}
.bt-control-hint {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #5A7FAA;
    margin-left: 6px;
    text-transform: none;
}
.bt-control input[type="date"] {
    width: 100%;
    background: rgba(7,18,38,0.85);
    border: 1px solid rgba(0,102,255,0.28);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    color-scheme: dark;
}
.bt-control input[type="date"]:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(0,229,255,0.15);
}

.bt-types-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.bt-types-toggle {
    background: rgba(7,18,38,0.85);
    border: 1px solid rgba(0,102,255,0.28);
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    font-family: inherit;
}
.bt-types-toggle:hover { border-color: var(--cyan); }
.bt-types-meta {
    background: transparent;
    border: 1px solid rgba(0,102,255,0.22);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #B8D4FF;
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
}
.bt-types-meta:hover { background: rgba(0,194,255,0.10); color: var(--cyan); }
.bt-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px 14px;
    margin-top: 10px;
    padding: 12px 14px;
    background: rgba(7,18,38,0.6);
    border: 1px solid rgba(0,102,255,0.18);
    border-radius: 8px;
}
.bt-types-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #c8d1dc;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    margin: 0;
}
.bt-types-grid input[type="checkbox"] {
    accent-color: var(--cyan);
    cursor: pointer;
}
.bt-types-grid label .bt-thesis-tag {
    margin-left: auto;
    font-size: 9px;
    letter-spacing: 0.10em;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0,229,255,0.10);
    color: var(--cyan);
    text-transform: uppercase;
    font-weight: 700;
}
.bt-types-grid label .bt-thesis-tag.b {
    background: rgba(255,82,82,0.12);
    color: #ff8888;
}
.bt-types-grid label .bt-thesis-tag.m {
    background: rgba(148,163,184,0.14);
    color: #94a3b8;
}

.bt-control-run {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
}
.bt-run-btn {
    background: linear-gradient(135deg, var(--cyan), #0066ff);
    color: #001020;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.bt-run-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 20px rgba(0,229,255,0.35);
}
.bt-run-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}
.bt-run-hint {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7BB3FF;
    text-align: center;
}

/* ── Status ──────────────────────────────────────────── */
.bt-status {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,194,255,0.06);
    border: 1px solid rgba(0,194,255,0.20);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 600;
    color: #B8D4FF;
}
.bt-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0,229,255,0.25);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: bt-spin 0.8s linear infinite;
}
@keyframes bt-spin { to { transform: rotate(360deg); } }

/* ── Overall stat cards ──────────────────────────────── */
.bt-overall {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.bt-stat-card {
    background: rgba(0,102,255,0.10);
    border: 1px solid rgba(0,102,255,0.25);
    border-radius: 12px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
}
.bt-stat-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, #0066FF, var(--cyan));
}
.bt-stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #7BB3FF;
    text-transform: uppercase;
}
.bt-stat-value {
    font-size: 1.5rem;       /* ~24px — matches picks-stat-value scale */
    font-weight: 800;
    color: #ffffff;
    margin-top: 4px;
    line-height: 1.0;
    letter-spacing: -0.02em;
}
.bt-stat-value.cyan { color: var(--cyan); }
.bt-stat-value.green { color: var(--green); }
.bt-stat-value.red { color: var(--red); }
.bt-stat-sub {
    font-size: 12px;
    color: #B8D4FF;
    margin-top: 4px;
}

/* ── Tables ──────────────────────────────────────────── */
.bt-table-wrap, .bt-fires-wrap {
    background: rgba(7,18,38,0.80);
    border: 1px solid rgba(0,102,255,0.18);
    border-radius: 12px;
    margin-bottom: 22px;
}
.bt-table-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 16px 20px 8px;
    flex-wrap: wrap;
    gap: 10px;
}
.bt-table-head h2 {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    color: #ffffff;
    letter-spacing: -0.01em;
}
.bt-table-sub {
    font-size: 11px;
    font-weight: 600;
    color: #7BB3FF;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.bt-scroll {
    overflow-x: auto;
    padding: 0 4px 4px;
}
.bt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.bt-table th, .bt-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    white-space: nowrap;
}
.bt-table th {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #7BB3FF;
    background: rgba(0,102,255,0.05);
    border-bottom-color: rgba(0,102,255,0.18);
    position: sticky; top: 0;
}
.bt-table tbody tr:hover { background: rgba(0,194,255,0.04); }
.bt-table tbody tr:last-child td { border-bottom: none; }
.bt-col-num { text-align: right; }
.bt-col-vd  { white-space: nowrap; }
.bt-col-thesis { text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; color: #B8D4FF; }
.bt-pos { color: var(--green); font-weight: 700; }
.bt-neg { color: var(--red); font-weight: 700; }
.bt-zero { color: #B8D4FF; }

.bt-thesis-bull  { color: var(--cyan); }
.bt-thesis-bear  { color: #ff8888; }
.bt-thesis-macro { color: #94a3b8; }  /* slate-400 — neutral, distinct from
                                         bullish-cyan and bearish-red. Macro
                                         signals are regime indicators, not
                                         token-thesis predictions. */

.bt-verdict {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.bt-verdict.big-win { background: rgba(0,230,118,0.16); color: var(--green); }
.bt-verdict.win     { background: rgba(0,194,255,0.16); color: var(--cyan); }
.bt-verdict.flat    { background: rgba(255,255,255,0.06); color: #B8D4FF; }
.bt-verdict.loss    { background: rgba(255,82,82,0.14); color: var(--red); }

.bt-vd-counts {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: #c8d1dc;
}
.bt-vd-counts .bw { color: var(--green); }
.bt-vd-counts .w  { color: var(--cyan); }
.bt-vd-counts .f  { color: #B8D4FF; }
.bt-vd-counts .l  { color: var(--red); }

/* ── Audit-trail tease pattern (sample banner + clean rows + CTA + blurred rows) ── */

/* Sample-data warning ribbon row at the top of the audit trail */
tr.bt-fires-banner td {
    background: rgba(255,153,0,0.06);
    border-top: 1px solid rgba(255,153,0,0.20);
    border-bottom: 1px solid rgba(255,153,0,0.20);
    padding: 11px 18px;
    color: #B8D4FF;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: normal;
}
.bt-banner-icon {
    color: #ff9900;
    font-weight: 700;
    margin-right: 4px;
}
tr.bt-fires-banner strong {
    color: #ff9900;
    letter-spacing: 0.10em;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    margin-right: 2px;
}

/* Violet CTA bar between visible-sample rows and blurred-tease rows */
tr.bt-fires-cta td {
    background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(139,92,246,0.08));
    border-top: 1px solid rgba(139,92,246,0.40);
    border-bottom: 1px solid rgba(139,92,246,0.40);
    padding: 14px 18px;
}
.bt-fires-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.bt-fires-cta-msg {
    font-size: 13px;
    color: #c4b5fd;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.bt-fires-cta-msg strong {
    color: #ffffff;
    font-weight: 800;
}
.bt-fires-cta-lock {
    font-size: 14px;
    line-height: 1;
}
.bt-fires-cta-btn {
    display: inline-block;
    background: linear-gradient(135deg, rgba(139,92,246,0.55), rgba(139,92,246,0.30));
    color: #c4b5fd;
    text-decoration: none;
    border: 1px solid rgba(139,92,246,0.65);
    border-radius: 8px;
    padding: 8px 18px;
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: filter 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
.bt-fires-cta-btn:hover {
    filter: brightness(1.15);
    background: linear-gradient(135deg, rgba(139,92,246,0.70), rgba(139,92,246,0.45));
    box-shadow: 0 0 18px rgba(139,92,246,0.40);
    color: #ffffff;
}

/* Per-row blur for the "more is locked" tease rows */
tr.bt-fires-blur-row td {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
    opacity: 0.85;
}

/* ── Blur paywall overlay (legacy — retained for any future centered-overlay usage) ── */
.bt-blur-target {
    position: relative;
}
.bt-blur-target.is-blurred .bt-scroll {
    filter: blur(7px);
    pointer-events: none;
    user-select: none;
}
.bt-blur-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,
        rgba(4,13,30,0.40) 0%,
        rgba(4,13,30,0.85) 50%,
        rgba(4,13,30,0.95) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 10;
    border-radius: 12px;
}
.bt-blur-card {
    max-width: 440px;
    text-align: center;
    padding: 24px 28px;
    background: rgba(7,18,38,0.95);
    border: 1px solid rgba(139,92,246,0.30);
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.bt-blur-eyebrow {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #c4b5fd;
    background: rgba(139,92,246,0.12);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.bt-blur-card h3 {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 8px;
    color: #ffffff;
    letter-spacing: -0.01em;
}
.bt-blur-card p {
    font-size: 13px;
    color: #B8D4FF;
    margin: 0 0 16px;
    line-height: 1.5;
}
/* Violet upgrade CTA — matches existing site pattern (trends.html tier-strip-btn,
   whaile.html tier-note-alpha link). Uses violet-500/300 (#8b5cf6 / #c4b5fd). */
.bt-blur-cta {
    display: inline-block;
    background: linear-gradient(135deg, rgba(139,92,246,0.55), rgba(139,92,246,0.30));
    color: #c4b5fd;
    text-decoration: none;
    border: 1px solid rgba(139,92,246,0.65);
    border-radius: 8px;
    padding: 10px 22px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.04em;
    transition: filter 0.15s, box-shadow 0.15s, background 0.15s;
}
.bt-blur-cta:hover {
    filter: brightness(1.15);
    background: linear-gradient(135deg, rgba(139,92,246,0.70), rgba(139,92,246,0.45));
    box-shadow: 0 0 20px rgba(139,92,246,0.40);
    color: #ffffff;
}

/* ── Methodology footer ──────────────────────────────── */
.bt-method {
    margin-top: 32px;
    padding: 20px 22px;
    background: rgba(7,18,38,0.60);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
}
.bt-method h3 {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7BB3FF;
    margin: 0 0 12px;
}
.bt-method ul {
    margin: 0 0 14px;
    padding-left: 18px;
    color: #c8d1dc;
    font-size: 13px;
    line-height: 1.6;
}
.bt-method ul strong { color: #ffffff; }
.bt-disclaimer {
    font-size: 11px;
    color: #5A7FAA;
    margin: 0;
    line-height: 1.5;
    font-style: italic;
}

/* ── Empty / error state ─────────────────────────────── */
.bt-empty {
    padding: 40px 20px;
    text-align: center;
    color: #7BB3FF;
    font-size: 14px;
}
.bt-error {
    padding: 14px 16px;
    background: rgba(255,82,82,0.10);
    border: 1px solid rgba(255,82,82,0.30);
    border-radius: 8px;
    color: #ff8888;
    font-size: 13px;
    margin-bottom: 18px;
}