/* =============================================================================
   Today's Best Trades board — shared component (dashboard + trade-finder).

   Self-contained + namespaced under .bt-board so it can drop into ANY page
   without colliding with that page's own .card / .card-header / .strategy-card
   rules. Every value mirrors the Trade Finder strategy-card look and uses the
   shared design-system custom properties (--bg-*, --accent-*, --profit, etc.),
   so it is visually identical to the rest of the app in both dark and light
   themes (theme is driven by the [data-theme] attribute already on <html>).
   ========================================================================== */

.bt-board {
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 20px);
}

/* ---- Header ------------------------------------------------------------- */
.bt-board-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    flex-wrap: wrap;
}


.bt-board-title {
    font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary, #edf0f3);
    line-height: 1.15;
}

.bt-board-sub {
    font-size: 14px;
    color: var(--text-tertiary, #9bb3be);
    margin-top: 4px;
}

.bt-board-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Freshness pill (Live / Last close) */
.bt-fresh {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid var(--border-default, #2a5f72);
    background: var(--bg-tertiary, #143846);
    color: var(--text-secondary, #9ab0ba);
    white-space: nowrap;
}

.bt-fresh .bt-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted, #8fa3ac);
    flex-shrink: 0;
}

.bt-fresh.live {
    border-color: rgba(16, 185, 129, 0.35);
    background: var(--profit-muted, rgba(16, 185, 129, 0.18));
    color: var(--profit, #10b981);
}
.bt-fresh.live .bt-dot {
    background: var(--profit, #10b981);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
    animation: btPulse 2.2s ease-out infinite;
}
.bt-fresh.stale {
    border-color: rgba(245, 166, 35, 0.35);
    background: var(--warning-muted, rgba(245, 166, 35, 0.18));
    color: var(--warning, #f5a623);
}
.bt-fresh.stale .bt-dot { background: var(--warning, #f5a623); }

@keyframes btPulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    70%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ---- Stale-market banner (mirrors trade-finder's closed banner) --------- */
.bt-stale-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(245, 166, 35, 0.30);
    border-radius: var(--radius-md, 8px);
    background: rgba(245, 166, 35, 0.10);
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary, #9ab0ba);
}
.bt-stale-banner svg { flex-shrink: 0; }
.bt-stale-banner strong { color: var(--text-primary, #edf0f3); }

/* ---- Saber teaser banner (mirrors trade-finder #saberTease) ------------- */
.bt-tease-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px dashed var(--accent-primary, #5b94b8);
    border-radius: var(--radius-md, 8px);
    background: var(--accent-primary-muted, rgba(91, 148, 184, 0.18));
    font-size: 13px;
    line-height: 1.5;
}
.bt-tease-banner strong { color: var(--accent-primary, #5b94b8); }
.bt-tease-banner span { color: var(--text-secondary, #9ab0ba); }
.bt-tease-banner a {
    margin-left: auto;
    font-weight: 700;
    white-space: nowrap;
    color: var(--accent-primary, #5b94b8);
    text-decoration: none;
}
.bt-tease-banner a:hover { text-decoration: underline; }

/* ---- HERO (#1) card ---------------------------------------------------- */
.bt-hero {
    position: relative;
    background: var(--bg-elevated, #1a4858);
    border: 1px solid var(--accent-primary, #5b94b8);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 0 0 1px var(--accent-primary, #5b94b8), 0 8px 30px var(--accent-glow, rgba(91, 148, 184, 0.4));
    overflow: hidden;
}

/* Accent wash at the top of the hero for a touch of landing-page polish */
.bt-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 120px;
    background: radial-gradient(ellipse 70% 100% at 15% 0%, var(--accent-primary-muted, rgba(91,148,184,0.18)) 0%, transparent 70%);
    pointer-events: none;
}

.bt-hero-inner {
    position: relative;
    padding: var(--space-6, 24px);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-6, 24px);
    align-items: center;
}

.bt-hero-left { min-width: 0; }

.bt-rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 4px;
    border-radius: var(--radius-sm, 6px);
    background: var(--accent-primary, #5b94b8);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: var(--space-3, 12px);
}

.bt-hero-tickrow {
    display: flex;
    align-items: baseline;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
    margin-bottom: var(--space-2, 8px);
}

.bt-hero-ticker {
    font-family: var(--font-mono, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text-primary, #edf0f3);
    line-height: 1;
}

.bt-hero-spot {
    font-family: var(--font-mono, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary, #9ab0ba);
}

/* Hero row: strat pill + flow/held/earnings chips + the Saber box on ONE
   composed flex row (they were inline siblings sharing a baseline-aligned
   line box, which floated the small pill at an odd height beside the tall
   Saber box and made every gap emergent instead of deliberate). */
.bt-hero-stratrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    margin-top: var(--space-4, 16px);
}
/* Neutralize the standalone-era margins on the chips now that they live in the
   flex row — the flow chip's margin-left/‑bottom made the gap uneven (20px vs
   12px) and knocked it off the row's vertical centre. */
.bt-hero-stratrow .bt-strat-pill,
.bt-hero-stratrow .bt-flow,
.bt-hero-stratrow .bt-held,
.bt-hero-stratrow .bt-earn {
    margin: 0;
    /* Uniform chip geometry: the pill (11px, inline-block) and the flow chip
       (10px, inline-flex + ▲ glyph) centered at different heights and read
       crooked next to each other (J's screenshot). One height, one font. */
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    font-size: 11px;
}

.bt-strat-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-sm, 6px);
    background: var(--accent-primary-muted, rgba(91, 148, 184, 0.18));
    color: var(--accent-primary, #5b94b8);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4, 16px);
}

/* Saber score — the ranking key, shown prominently */
.bt-saber {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid var(--accent-primary-muted, rgba(91, 148, 184, 0.18));
    background: var(--accent-primary-muted, rgba(91, 148, 184, 0.18));
    border-radius: var(--radius-md, 8px);
}
.bt-saber-num {
    font-family: var(--font-mono, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary, #edf0f3);
}
.bt-saber-lab {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-primary, #5b94b8);
    line-height: 1.3;
}
.bt-saber-lab small {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-tertiary, #9bb3be);
}

/* Hero metric grid — stat cells (label above value) */
.bt-hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--border-subtle, #1e4d5e);
    border: 1px solid var(--border-subtle, #1e4d5e);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

.bt-stat {
    background: var(--bg-secondary, #0f2b36);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.bt-stat-lab {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #8fa3ac);
    white-space: nowrap;
}
.bt-stat-val {
    font-family: var(--font-mono, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary, #edf0f3);
    white-space: nowrap;
}
.bt-stat-val.profit { color: var(--profit, #10b981); }

/* ---- Build button (mirrors .btn-build-this, elevated for the hero) ------ */
.bt-build {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    width: 100%;
    margin-top: var(--space-4, 16px);
    padding: var(--space-3, 12px) var(--space-5, 20px);
    background: var(--accent-primary, #5b94b8);
    color: #fff;
    border: none;
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base, 180ms ease);
}
.bt-build:hover {
    background: var(--accent-primary-hover, #4a7fa0);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-glow, rgba(91, 148, 184, 0.4));
}

/* ---- Alternatives grid ------------------------------------------------- */
.bt-alts-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-primary, #edf0f3);
    padding-bottom: var(--space-2, 8px);
    padding-left: var(--space-3, 12px);
    border-bottom: 1px solid var(--border-subtle, #1e4d5e);
    border-left: 2px solid var(--accent-primary, #5b94b8);
    margin-bottom: var(--space-4, 16px);
}

.bt-alts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4, 16px);
}

/* Alt strategy card — mirrors trade-finder .strategy-card */
.bt-card {
    background: var(--bg-elevated, #1a4858);
    border: 1px solid var(--border-subtle, #1e4d5e);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    transition: border-color var(--transition-base, 180ms ease), transform var(--transition-base, 180ms ease);
    display: flex;
    flex-direction: column;
}
.bt-card:hover {
    border-color: var(--border-default, #2a5f72);
    transform: translateY(-2px);
}

.bt-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    padding: var(--space-4, 16px) var(--space-5, 20px);
    border-bottom: 1px solid var(--border-subtle, #1e4d5e);
}
.bt-card-tick {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.bt-card-rank {
    font-family: var(--font-mono, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted, #8fa3ac);
}
.bt-card-symbol {
    font-family: var(--font-mono, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary, #edf0f3);
}
.bt-card-strat {
    padding: 2px 8px;
    border-radius: var(--radius-sm, 6px);
    background: var(--accent-primary-muted, rgba(91, 148, 184, 0.18));
    color: var(--accent-primary, #5b94b8);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Score bar — mirrors trade-finder .score-bar-* */
.bt-score {
    padding: var(--space-3, 12px) var(--space-5, 20px);
    border-bottom: 1px solid var(--border-subtle, #1e4d5e);
}
.bt-score-lab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-1, 4px);
}
.bt-score-lab span:first-child {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #8fa3ac);
}
.bt-score-lab span:last-child {
    font-family: var(--font-mono, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-primary, #5b94b8);
}
.bt-score-track {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary, #143846);
    border-radius: 3px;
    overflow: hidden;
}
.bt-score-fill {
    height: 100%;
    background: var(--accent-primary, #5b94b8);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Alt-card metric rows — mirrors .card-row */
.bt-card-body {
    padding: var(--space-3, 12px) var(--space-5, 20px);
    flex: 1;
}
.bt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2, 8px) 0;
    border-bottom: 1px solid var(--border-subtle, #1e4d5e);
}
.bt-row:last-child { border-bottom: none; }
.bt-row-lab { font-size: 13px; color: var(--text-tertiary, #9bb3be); }
.bt-row-val {
    font-family: var(--font-mono, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #edf0f3);
}
.bt-row-val.profit { color: var(--profit, #10b981); }

.bt-card .bt-build {
    width: auto;
    margin: 0;
    border-radius: 0;
    background: var(--accent-primary-muted, rgba(91, 148, 184, 0.18));
    color: var(--accent-primary, #5b94b8);
    border-top: 1px solid var(--border-subtle, #1e4d5e);
    padding: var(--space-3, 12px);
}
.bt-card .bt-build:hover {
    background: var(--accent-primary, #5b94b8);
    color: #fff;
    transform: none;
    box-shadow: none;
}

/* ---- Banded (locked-depth) alt card — same frame, muted body, Unlock pill --- */
.bt-card-banded { }                     /* structural clone of .bt-card, no extra chrome */
.bt-card-banded .bt-score-fill { opacity: 0.75; }
.bt-locked-row {
    margin-top: var(--space-2, 8px);
    padding-top: var(--space-2, 8px);
    border-top: 1px dashed var(--border-subtle, #1e4d5e);
    font-size: 11.5px;
    color: var(--text-muted, #8fa3ac);
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Tasteful (small, not a wall) lock glyph, tinted via currentColor mask. */
.bt-locked-row::before {
    content: '';
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
    background: currentColor;
}
/* Unlock pill — reuses .bt-card .bt-build footer treatment (accent-muted). */
.bt-card .bt-unlock { font-weight: 700; }

/* ---- Depth-unlock CTA banner — clean, no blur wall --------------------- */
.bt-depth-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    flex-wrap: wrap;
    padding: var(--space-4, 16px) var(--space-5, 20px);
    border: 1px solid var(--accent-primary, #5b94b8);
    border-radius: var(--radius-md, 8px);
    background: var(--accent-primary-muted, rgba(91, 148, 184, 0.18));
}
.bt-depth-cta.expired {
    border-color: rgba(245, 166, 35, 0.45);
    background: var(--warning-muted, rgba(245, 166, 35, 0.18));
}
.bt-depth-cta-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bt-depth-cta-txt strong { color: var(--text-primary, #edf0f3); font-size: 14px; }
.bt-depth-cta-txt span { color: var(--text-secondary, #9ab0ba); font-size: 13px; line-height: 1.5; }
.bt-depth-cta .bt-upgrade { flex-shrink: 0; }
@media (max-width: 560px) { .bt-depth-cta .bt-upgrade { width: 100%; justify-content: center; } }

/* ---- Upgrade pill (shared by the depth CTA) ---------------------------- */
.bt-upgrade {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-6, 24px);
    background: var(--accent-primary, #5b94b8);
    color: #fff;
    border: none;
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-base, 180ms ease);
}
.bt-upgrade:hover {
    background: var(--accent-primary-hover, #4a7fa0);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-glow, rgba(91, 148, 184, 0.4));
}

/* ---- Loading / empty / error states ------------------------------------ */
.bt-skel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4, 16px);
}
.bt-skel {
    background: var(--bg-secondary, #0f2b36);
    border: 1px solid var(--border-subtle, #1e4d5e);
    border-radius: var(--radius-lg, 12px);
    height: 150px;
    position: relative;
    overflow: hidden;
}
.bt-skel.tall { height: 190px; grid-column: 1 / -1; }
.bt-skel::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--bg-hover, #1e4d5e), transparent);
    opacity: 0.5;
    animation: btShimmer 1.4s infinite;
}
@keyframes btShimmer { 100% { transform: translateX(100%); } }

.bt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2, 8px);
    padding: var(--space-8, 32px) var(--space-6, 24px);
    background: var(--bg-secondary, #0f2b36);
    border: 1px solid var(--border-subtle, #1e4d5e);
    border-radius: var(--radius-lg, 12px);
    color: var(--text-tertiary, #9bb3be);
    font-size: 14px;
    line-height: 1.6;
}
.bt-empty-icon { font-size: 28px; margin-bottom: 4px; opacity: 0.8; }
.bt-empty strong { color: var(--text-primary, #edf0f3); font-weight: 600; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
    .bt-alts-grid, .bt-skel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .bt-hero-inner { grid-template-columns: 1fr; gap: var(--space-5, 20px); }
    .bt-hero-ticker { font-size: 30px; }
    .bt-alts-grid, .bt-skel-grid { grid-template-columns: 1fr; }
    .bt-board-title { font-size: 22px; }
    .bt-board-head { align-items: flex-start; }
}

/* ---- Serve-time annotation chips (flow alignment + personalization match) --- */

/* Smart-money alignment chip — profit-toned, mirrors .bt-strat-pill sizing. Only
   ever rendered on trades whose real signed flow ALIGNS with the position. */
.bt-flow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--radius-sm, 6px);
    background: var(--profit-muted, rgba(16, 185, 129, 0.18));
    color: var(--profit, #10b981);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: help;
}
.bt-hero .bt-flow {
    margin-bottom: var(--space-4, 16px);
    margin-left: 8px;
}

/* Alt-card header stacks CONSISTENTLY: rank+ticker on row 1, the strategy + flow
   chips left-aligned on row 2 — every card the same, regardless of ticker length.
   (Inline-right wrapping made 5-char tickers like GOOGL drop their chips to a
   second line while 4-char ones kept them inline — an inconsistent, funky look.) */
.bt-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3, 12px);
}
.bt-card-tags {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Personalization match chip — accent-toned, mirrors the .bt-fresh pill. */
.bt-match {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid var(--accent-primary-muted, rgba(91, 148, 184, 0.18));
    background: var(--accent-primary-muted, rgba(91, 148, 184, 0.18));
    color: var(--accent-primary, #5b94b8);
    white-space: nowrap;
}

/* ---- Position-awareness + honest-risk chips (Features A + B) ------------- */

/* "In your portfolio" chip — NEUTRAL slate (never green/red): owning a name is
   context, not good-or-bad. Mirrors .bt-flow sizing. Uses the neutral ● glyph. */
.bt-held {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-tertiary, #143846);
    color: var(--text-secondary, #9ab0ba);
    border: 1px solid var(--border-subtle, #1e4d5e);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: help;
}
/* Heavy/over-concentrated variant — warning-toned to nudge diversification. */
.bt-held.heavy {
    background: var(--warning-muted, rgba(245, 166, 35, 0.18));
    color: var(--warning, #f5a623);
    border-color: rgba(245, 166, 35, 0.35);
}

/* Earnings-before-expiry chip — warning-toned, same sizing as .bt-flow. Only ever
   rendered on trades whose CONFIRMED earnings land on/before expiry. */
.bt-earn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--radius-sm, 6px);
    background: var(--warning-muted, rgba(245, 166, 35, 0.18));
    color: var(--warning, #f5a623);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: help;
}
.bt-hero .bt-held,
.bt-hero .bt-earn {
    margin-bottom: var(--space-4, 16px);
    margin-left: 8px;
}

/* "Manage what you own" banner — accent-info toned; reuses the .bt-stale-banner
   structure. Read-only pointer to Wheel Co-Pilot (no roll/close math here). */
.bt-manage {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--accent-primary-muted, rgba(91, 148, 184, 0.30));
    border-radius: var(--radius-md, 8px);
    background: var(--accent-primary-muted, rgba(91, 148, 184, 0.10));
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary, #9ab0ba);
}
.bt-manage svg { flex-shrink: 0; color: var(--accent-primary, #5b94b8); }
.bt-manage strong { color: var(--text-primary, #edf0f3); }
.bt-manage a {
    font-weight: 700;
    white-space: nowrap;
    color: var(--accent-primary, #5b94b8);
    text-decoration: none;
}
.bt-manage a:hover { text-decoration: underline; }

/* Plain-English risk line — assignment odds + what-goes-wrong. Muted, always shown
   on any visible idea (risk is never hidden behind the teaser paywall). */
.bt-risk-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin-top: var(--space-3, 12px);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-tertiary, #9bb3be);
}
.bt-risk-note.compact {
    margin: 0;
    padding: var(--space-3, 12px) var(--space-5, 20px);
    border-top: 1px solid var(--border-subtle, #1e4d5e);
    font-size: 11.5px;
}
.bt-assign {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-tertiary, #143846);
    color: var(--text-secondary, #9ab0ba);
    font-family: var(--font-mono, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.bt-risk-txt { flex: 1; min-width: 0; }

/* Board footer disclaimer — kept visible on every board render. */
.bt-disclaimer {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted, #8fa3ac);
    text-align: center;
    padding-top: var(--space-2, 8px);
}

/* ---- CTA row: Build & simulate + Run in screener (user-requested) ------- */
.bt-cta-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-2, 8px);
    margin-top: var(--space-4, 16px);
}
/* Build (primary) and Run in screener (secondary) are a MATCHED PAIR: same
   height (align-items:stretch), same radius/padding/type, split ~1.35:1. The
   secondary is ACCENT-TINTED (accent text on an accent wash) — one colour
   family with the primary, legible, not the washed-out grey it was. */
.bt-cta-row .bt-build { margin-top: 0; flex: 1.35; width: auto; }
/* Inside alt/banded cards the old full-bleed FOOTER treatment
   (.bt-card .bt-build: radius 0, border-top, flush edges) used to win by
   specificity and made Build square while Run stayed rounded — the
   "different shapes" bug. In a cta-row the pair is inset and both rounded. */
.bt-card .bt-cta-row { padding: 0 var(--space-3, 12px) var(--space-3, 12px); }
.bt-card .bt-cta-row .bt-build {
    border-radius: var(--radius-md, 8px);
    border-top: none;
    background: var(--accent-primary, #5b94b8);
    color: #fff;
    padding: var(--space-3, 12px);
}
.bt-card .bt-cta-row .bt-build:hover {
    background: var(--accent-primary-hover, #4a7fa0);
    color: #fff;
}
.bt-screener {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-5, 20px);
    border: 1px solid rgba(91, 148, 184, 0.26);
    border-radius: var(--radius-md, 8px);
    background: var(--accent-primary-muted, rgba(91, 148, 184, 0.18));
    color: var(--accent-primary, #5b94b8);
    font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--transition-base, 180ms ease);
}
.bt-screener:hover {
    border-color: var(--accent-primary, #5b94b8);
    background: var(--accent-primary-muted, rgba(91, 148, 184, 0.24));
    transform: translateY(-1px);
}
@media (max-width: 560px) {
    .bt-cta-row { flex-direction: column; }
    .bt-cta-row .bt-build,
    .bt-cta-row .bt-screener { flex: none; width: 100%; }
}