/* ─────────────────────────────────────────────────────────
   styles-append-bh-hero-v0.1.0.css
   SHARED Board Command hero primitives — third+ consumer page
   triggered extraction per the shared-helper threshold rule.
   Base bh-* rules verbatim from styles-append-props-command-
   v0.17.0.7.css (tokens only), plus the flow-shell 64px num
   normalization so pages WITHOUT flow-shell still match.
   LINK ORDER: before styles-append-flow-shell-*.css — flow-shell
   wins cascade ties, exactly as it does on props.html, so every
   consumer resolves identically. Consumers: slip-analyzer, board,
   banned, settings, wnba-injuries, wnba-standings (batch 1);
   players + trends keep their earlier page-scoped copies until a
   CSS consolidation folds them onto this file.
───────────────────────────────────────────────────────── */
.bh-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-tertiary); }
.bh-hero {
    border-bottom: 1px solid var(--border);
    padding: 30px 0 26px;
    display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: center;
}
.bh-num { font-family: var(--font-display); font-size: 64px; font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; color: var(--text-primary); }
.bh-num small { font-size: 24px; font-weight: 700; color: var(--text-secondary); margin-left: 12px; letter-spacing: -0.01em; }
.bh-chips { margin-top: 11px; display: flex; gap: 9px; flex-wrap: wrap; }
.bh-chip { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 99px; }
.bh-chip-mint { color: var(--accent-pos); background: var(--accent-pos-dim); border: 1px solid var(--accent-pos-border); }
.bh-chip-gray { color: var(--text-primary); background: var(--bg-elev-2); border: 1px solid var(--border-strong); }
.bh-read { margin-top: 12px; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--text-secondary); max-width: 560px; }
.bh-read b { color: var(--accent-pos); letter-spacing: 0.08em; }
.bh-side { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--divider); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; align-self: stretch; }
.bh-side-cell { background: var(--bg-elev-1); padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; }
.bh-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; }
.bh-v { font-family: var(--font-mono); font-size: 19px; font-weight: 600; color: var(--text-primary); }
.bh-s { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-tertiary); margin-top: 4px; }
@media (max-width: 900px) {
    .bh-hero { grid-template-columns: 1fr; gap: 20px; padding: 20px 0; }
    .bh-num { font-size: 48px; }
    .bh-num small { font-size: 18px; }
}
@media (max-width: 620px) {
    .bh-side { grid-template-columns: 1fr; }
}