/* ============================================================
   ATLAS — Billet Board (billet-board WP02 / T007)
   The slide (slide-moe-02) as a product surface: billet cards,
   central ATLAS band, state-coloured pool dot grid + legend.
   All colours via tokens: light = correct, dark = the slide.
   ============================================================ */

#board .bb-root,
#board .bb-state {
    /* state colours (light) — mirrored by the legend + card chips */
    --bb-match:   #16a34a;
    --bb-partial: #c2610c;
    --bb-below:   #94a3b8;
    --bb-ne:      #94a3b8;
    --bb-best:    #0891b2;
    --bb-best-glow: rgba(8, 145, 178, 0.35);

    --bb-card-bg: var(--surface);
    --bb-card-border: var(--border);
    --bb-card-selected: var(--rd-blue, #2175d9);

    --bb-band-bg: var(--surface);
    --bb-band-border: rgba(8, 145, 178, 0.45);
    --bb-band-name: #0e7490;
    --bb-band-glow: rgba(8, 145, 178, 0.18);

    font-family: var(--font-atlas, inherit);
    color: var(--text-primary);
}

[data-theme="dark"] #board .bb-root,
[data-theme="dark"] #board .bb-state {
    /* dark = slide-native: saturated states on deep navy */
    --bb-match:   #2ea75f;
    --bb-partial: #c2610c;
    --bb-below:   #55627a;
    --bb-ne:      #66738c;
    --bb-best:    #22d3ee;
    --bb-best-glow: rgba(34, 211, 238, 0.45);

    --bb-card-bg: #0e1c38;
    --bb-card-border: #24406e;
    --bb-card-selected: #22d3ee;

    --bb-band-bg: #0c1a34;
    --bb-band-border: #22d3ee;
    --bb-band-name: #22d3ee;
    --bb-band-glow: rgba(34, 211, 238, 0.30);
}

#board .bb-root {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0.5rem 0 2.5rem;
    position: relative; /* flyout anchor */
}

/* ── Header ─────────────────────────────────────────────── */
#board .bb-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
#board .bb-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
#board .bb-sub {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ── Section micro-labels (slide language) ──────────────── */
#board .bb-section-label {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    margin: 0.75rem 0 0.6rem;
}
#board .bb-section-label .bb-dim { text-transform: none; letter-spacing: normal; }

/* ── Billet cards row ───────────────────────────────────── */
#board .bb-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 1.4rem;
}
#board .bb-card {
    position: relative;
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 250px;
    background: var(--bb-card-bg);
    border: 1px solid var(--bb-card-border);
    border-radius: 10px;
    padding: 0.85rem 0.9rem 0.8rem;
    text-align: center;
    cursor: pointer;
    color: inherit;
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
#board .bb-card:hover { transform: translateY(-1px); border-color: var(--bb-card-selected); }
#board .bb-card:focus-visible { outline: 2px solid var(--bb-card-selected); outline-offset: 2px; }
#board .bb-card--selected {
    border-color: var(--bb-card-selected);
    box-shadow: 0 0 0 1px var(--bb-card-selected), 0 0 18px var(--bb-best-glow);
}
#board .bb-card-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--rd-blue, #2175d9);
}
[data-theme="dark"] #board .bb-card-title { color: #6fd7ef; }
#board .bb-card-unit  { font-size: 0.78rem; color: var(--text-secondary); }
#board .bb-card-timing { font-size: 0.74rem; color: var(--text-muted); }
#board .bb-card-timing--urgent { color: var(--bb-partial); font-weight: 600; }
#board .bb-card-activechip {
    position: absolute;
    top: -0.55rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bb-card-selected);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
}
[data-theme="dark"] #board .bb-card-activechip { color: #06222e; }

#board .bb-card-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem 0.45rem;
    margin-top: 0.3rem;
}
#board .bb-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.68rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
#board .bb-chip-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex: none;
}
#board .bb-chip--match   .bb-chip-dot { background: var(--bb-match); }
#board .bb-chip--partial .bb-chip-dot { background: var(--bb-partial); }
#board .bb-chip--below   .bb-chip-dot { background: var(--bb-below); }
#board .bb-chip--ne      .bb-chip-dot { background: transparent; border: 1.5px dashed var(--bb-ne); }

/* band chips reused in the ranked panel rows */
#board .bb-ranked .bb-chip { border: 1px solid var(--bb-card-border); border-radius: 999px; padding: 0.08rem 0.5rem; }
#board .bb-ranked .bb-chip--match   { color: var(--bb-match); border-color: var(--bb-match); }
#board .bb-ranked .bb-chip--partial { color: var(--bb-partial); border-color: var(--bb-partial); }

#board .bb-card-best {
    margin-top: 0.35rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--bb-best);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
#board .bb-card-best-ring {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bb-best);
    box-shadow: 0 0 6px var(--bb-best-glow);
    flex: none;
}
#board .bb-card-unevaluated {
    margin-top: 0.35rem;
    font-size: 0.74rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* ── ATLAS band ─────────────────────────────────────────── */
#board .bb-band {
    display: flex;
    justify-content: center;
    margin: 0.4rem 0 1.4rem;
}
#board .bb-band-core {
    background: var(--bb-band-bg);
    border: 1.5px solid var(--bb-band-border);
    border-radius: 14px;
    padding: 0.9rem 2.2rem 1rem;
    text-align: center;
    box-shadow: 0 0 24px var(--bb-band-glow), inset 0 0 18px rgba(34, 211, 238, 0.04);
    max-width: 560px;
}
#board .bb-band-name {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: var(--bb-band-name);
    text-shadow: 0 0 14px var(--bb-band-glow);
}
#board .bb-band-status {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
#board .bb-band-pulse { display: inline-flex; gap: 4px; }
#board .bb-band-pulse span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--bb-match);
    opacity: 0.5;
    animation: bb-pulse 1.8s ease-in-out infinite;
}
#board .bb-band-pulse span:nth-child(2) { animation-delay: 0.3s; }
#board .bb-band-pulse span:nth-child(3) { animation-delay: 0.6s; }
@keyframes bb-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.9); }
    50%      { opacity: 1;    transform: scale(1.1); }
}
#board .bb-band-tagline {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

/* ── Pool dot grid ──────────────────────────────────────── */
#board .bb-pool { margin-bottom: 1.4rem; }
#board .bb-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 14px;
    padding: 0.6rem 0.4rem 0.9rem;
    max-width: 980px;
    margin: 0 auto;
}
#board .bb-dot {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    position: relative;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.2s ease, border-color 0.2s ease;
    flex: none;
}
#board .bb-grid .bb-dot:hover { transform: scale(1.18); }
#board .bb-dot:focus-visible { outline: 2px solid var(--bb-best); outline-offset: 2px; }

#board .bb-dot--match           { background: var(--bb-match);   border-color: color-mix(in srgb, var(--bb-match) 65%, #000 12%); }
#board .bb-dot--partial         { background: var(--bb-partial); border-color: color-mix(in srgb, var(--bb-partial) 65%, #000 12%); }
#board .bb-dot--evaluated_below { background: var(--bb-below);   border-color: color-mix(in srgb, var(--bb-below) 65%, #000 12%); }
#board .bb-dot--not_evaluated   { background: transparent; border: 2px dashed var(--bb-ne); }

#board .bb-dot--best {
    box-shadow: 0 0 0 2.5px var(--bb-best), 0 0 14px var(--bb-best-glow);
    animation: bb-best-glow 2.4s ease-in-out infinite;
}
#board .bb-dot--best::after {
    content: "i";
    position: absolute;
    top: -6px; right: -6px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--bb-best);
    color: #06222e;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    font-style: normal;
}
@keyframes bb-best-glow {
    0%, 100% { box-shadow: 0 0 0 2.5px var(--bb-best), 0 0 10px var(--bb-best-glow); }
    50%      { box-shadow: 0 0 0 2.5px var(--bb-best), 0 0 20px var(--bb-best-glow); }
}

/* ── Legend ─────────────────────────────────────────────── */
#board .bb-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bb-card-border);
    max-width: 900px;
    margin: 0 auto;
    font-size: 0.76rem;
    color: var(--text-secondary);
}
#board .bb-legend-item { display: inline-flex; align-items: center; gap: 0.45rem; }
#board .bb-dot--mini {
    width: 16px; height: 16px;
    cursor: default;
    animation: none;
}
#board .bb-dot--mini::after { display: none; }
#board .bb-dot--mini.bb-dot--best { box-shadow: 0 0 0 2px var(--bb-best); }

/* ── Selected billet panel ──────────────────────────────── */
#board .bb-panel {
    background: var(--bb-card-bg);
    border: 1px solid var(--bb-card-border);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    max-width: 860px;
    margin: 0 auto;
}
#board .bb-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
#board .bb-panel-head h3 { margin: 0; font-size: 1rem; }
#board .bb-panel-empty { margin: 0.4rem 0 0; }
#board .bb-ranked {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
#board .bb-ranked-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 0.42rem 0.5rem;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
}
#board .bb-ranked-row:hover,
#board .bb-ranked-row:focus-visible { background: var(--atlas-surface, rgba(0,0,0,0.04)); outline: none; }
#board .bb-rank {
    width: 1.5rem;
    text-align: right;
    color: var(--text-muted);
    font-family: var(--font-atlas-mono, monospace);
    font-size: 0.78rem;
    flex: none;
}
#board .bb-ranked-name { flex: 1 1 auto; font-size: 0.88rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#board .bb-ranked-score {
    font-family: var(--font-atlas-mono, monospace);
    font-weight: 600;
    font-size: 0.9rem;
    width: 2.2rem;
    text-align: right;
    flex: none;
}
#board .bb-pips { display: inline-flex; gap: 3px; flex: none; }
#board .bb-pip {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--bb-ne);
}
#board .bb-pip--on { background: var(--bb-best); border-color: var(--bb-best); }

/* ── Flyout ─────────────────────────────────────────────── */
#board .bb-flyout {
    position: absolute;
    z-index: 40;
    pointer-events: none;
    background: var(--bb-card-bg);
    border: 1px solid var(--bb-card-border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg, 0 10px 15px rgba(0,0,0,0.2));
    padding: 0.45rem 0.7rem;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
}
#board .bb-flyout[hidden] { display: none; }
#board .bb-flyout-band { color: var(--text-secondary); }
#board .bb-flyout-band--match   { color: var(--bb-match); }
#board .bb-flyout-band--partial { color: var(--bb-partial); }
#board .bb-flyout-band--best    { color: var(--bb-best); font-weight: 600; }
#board .bb-flyout-score { font-family: var(--font-atlas-mono, monospace); font-weight: 600; }

/* ── Buttons / links / states ───────────────────────────── */
#board .bb-btn {
    background: var(--bb-card-bg);
    color: var(--text-primary);
    border: 1px solid var(--bb-card-border);
    border-radius: 8px;
    padding: 0.45rem 0.95rem;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
#board .bb-btn:hover { border-color: var(--bb-card-selected); }
#board .bb-btn--primary {
    background: var(--rd-blue, #2175d9);
    border-color: var(--rd-blue, #2175d9);
    color: #fff;
}
#board .bb-btn--primary:hover { filter: brightness(1.08); }
[data-theme="dark"] #board .bb-btn--primary {
    background: var(--bb-best);
    border-color: var(--bb-best);
    color: #06222e;
}
#board .bb-btn--ghost { background: transparent; }
#board .bb-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: inherit;
    color: var(--rd-blue, #2175d9);
    text-decoration: underline;
    cursor: pointer;
}
[data-theme="dark"] #board .bb-link { color: var(--bb-best); }
#board .bb-dim { color: var(--text-muted); font-weight: 400; }
#board .bb-mono { font-family: var(--font-atlas-mono, monospace); font-size: 0.72em; }

#board .bb-state {
    max-width: 560px;
    margin: 3rem auto;
    text-align: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}
#board .bb-state--inline { margin: 1.2rem auto; }
#board .bb-state--error p { color: var(--error-color, #ef4444); }
#board .bb-state-pulse { display: inline-flex; gap: 6px; }
#board .bb-state-pulse span {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--bb-best);
    opacity: 0.5;
    animation: bb-pulse 1.4s ease-in-out infinite;
}
#board .bb-state-pulse span:nth-child(2) { animation-delay: 0.25s; }
#board .bb-state-pulse span:nth-child(3) { animation-delay: 0.5s; }

/* ── Reduced motion (T007) ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #board .bb-band-pulse span,
    #board .bb-state-pulse span,
    #board .bb-dot--best {
        animation: none;
    }
    #board .bb-card,
    #board .bb-dot { transition: none; }
    #board .bb-grid .bb-dot:hover,
    #board .bb-card:hover { transform: none; }
}

/* ── Responsive (1440 / 1024 / 768) ─────────────────────── */
@media (max-width: 1024px) {
    #board .bb-card { flex-basis: calc(33.33% - 0.8rem); max-width: none; }
    #board .bb-band-core { padding: 0.8rem 1.4rem 0.9rem; }
}
@media (max-width: 820px) {
    /* The fixed nav grows taller when the status pills wrap at narrow
       widths; give the board headline room so it never slides under it. */
    #board .bb-root { padding-top: 4.5rem; }
}
@media (max-width: 768px) {
    #board .bb-head { flex-direction: column; }
    #board .bb-card { flex-basis: calc(50% - 0.8rem); min-width: 150px; }
    #board .bb-dot { width: 28px; height: 28px; }
    #board .bb-grid { gap: 10px 11px; }
    #board .bb-legend { gap: 0.4rem 1rem; }
    #board .bb-panel-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    #board .bb-card { flex-basis: 100%; }
}

/* ============================================================
   Scale Demo section (WP04 · FR-010..016)
   A deliberately DISTINCT, striped/muted synthetic surface so it
   can never be mistaken for the real board — in light AND dark.
   ============================================================ */
/* Palette hoisted to #board so consumers OUTSIDE .bb-scale (the
   REAL-billet decorations on .bb-cards and the admin re-enable bar)
   resolve the same custom properties. .bb-scale keeps its own copy. */
#board {
    --bbs-accent: #7c3aed;
    --bbs-accent-soft: rgba(124, 58, 237, 0.12);
    --bbs-stripe: rgba(124, 58, 237, 0.06);
    --bbs-border: rgba(124, 58, 237, 0.35);
    --bbs-surface: var(--surface);
    --bbs-real: var(--bb-card-selected, #2175d9);
}
[data-theme="dark"] #board {
    --bbs-accent: #c4b5fd;
    --bbs-accent-soft: rgba(124, 58, 237, 0.18);
    --bbs-stripe: rgba(196, 181, 253, 0.07);
    --bbs-border: rgba(196, 181, 253, 0.4);
    --bbs-surface: #12162e;
}
#board .bb-scale {
    --bbs-accent: #7c3aed;          /* violet = "invented", not a state colour */
    --bbs-accent-soft: rgba(124, 58, 237, 0.12);
    --bbs-stripe: rgba(124, 58, 237, 0.06);
    --bbs-border: rgba(124, 58, 237, 0.35);
    --bbs-surface: var(--surface);
    --bbs-real: var(--bb-card-selected, #2175d9);
    margin-top: 1.6rem;
    padding: 0.9rem 1rem 1.1rem;
    border: 1px dashed var(--bbs-border);
    border-radius: 12px;
    background:
        repeating-linear-gradient(45deg, var(--bbs-stripe) 0 10px, transparent 10px 20px),
        var(--bbs-accent-soft);
}
[data-theme="dark"] #board .bb-scale {
    --bbs-accent: #c4b5fd;
    --bbs-accent-soft: rgba(124, 58, 237, 0.18);
    --bbs-stripe: rgba(196, 181, 253, 0.07);
    --bbs-border: rgba(196, 181, 253, 0.4);
    --bbs-surface: #12162e;
}

/* ── SYNTHETIC badge (survives any crop) ─────────────────── */
#board .bb-scale-badge {
    display: inline-block;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1;
    padding: 0.2rem 0.36rem;
    border-radius: 4px;
    color: #fff;
    background: var(--bbs-accent);
    text-transform: uppercase;
    flex: none;
}
[data-theme="dark"] #board .bb-scale-badge { color: #1b1130; }
#board .bb-scale-badge--lg { font-size: 0.64rem; padding: 0.26rem 0.46rem; }

/* ── Banner + admin toggle ───────────────────────────────── */
#board .bb-scale-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-bottom: 0.6rem;
    border-bottom: 1px dashed var(--bbs-border);
}
#board .bb-scale-banner-main { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
#board .bb-scale-banner-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
#board .bb-scale-banner-title { font-size: 0.9rem; color: var(--text-primary); }
#board .bb-scale-banner-label { font-size: 0.72rem; color: var(--text-secondary); }
#board .bb-scale-toggle {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.74rem; font-weight: 600;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--bbs-accent);
    border-radius: 999px;
    background: transparent;
    color: var(--bbs-accent);
    cursor: pointer;
    flex: none;
}
#board .bb-scale-toggle:hover { background: var(--bbs-accent-soft); }
#board .bb-scale-toggle:focus-visible { outline: 2px solid var(--bbs-accent); outline-offset: 2px; }
#board .bb-scale-toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bbs-accent); }

/* ── Throughput split (always two labelled figures) ──────── */
#board .bb-scale-throughput {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.45rem;
    margin: 0.7rem 0 0.2rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
#board .bb-scale-real-fig { font-weight: 700; color: var(--bbs-real); }
#board .bb-scale-synth-fig { font-weight: 700; color: var(--bbs-accent); }
#board .bb-scale-sep, #board .bb-scale-dash { opacity: 0.6; }
#board .bb-scale-invented { font-style: italic; opacity: 0.85; }

/* ── Recruiter strip ─────────────────────────────────────── */
#board .bb-scale-strip {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin: 0.7rem 0 0.5rem;
}
#board .bb-scale-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.32rem 0.55rem;
    border: 1px solid var(--bbs-border);
    border-radius: 999px;
    background: var(--bbs-surface);
    color: var(--text-primary);
    font-size: 0.72rem;
    cursor: pointer;
}
#board .bb-scale-chip:hover { border-color: var(--bbs-accent); }
#board .bb-scale-chip:focus-visible { outline: 2px solid var(--bbs-accent); outline-offset: 2px; }
#board .bb-scale-chip--on { background: var(--bbs-accent-soft); border-color: var(--bbs-accent); font-weight: 600; }
#board .bb-scale-chip-name { font-weight: 600; }
#board .bb-scale-chip-meta { color: var(--text-secondary); font-size: 0.68rem; }

/* ── Synthetic card grid ─────────────────────────────────── */
#board .bb-scale-grid-count { font-size: 0.7rem; color: var(--text-secondary); margin: 0.2rem 0 0.5rem; }
#board .bb-scale-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.7rem;
}
#board .bb-scale-card {
    position: relative;
    display: flex; flex-direction: column; gap: 0.25rem;
    text-align: left;
    padding: 0.6rem 0.65rem 0.7rem;
    border: 1px solid var(--bbs-border);
    border-radius: 10px;
    background: var(--bbs-surface);
    cursor: pointer;
    min-width: 0;
}
#board .bb-scale-card:hover { border-color: var(--bbs-accent); transform: translateY(-1px); }
#board .bb-scale-card:focus-visible { outline: 2px solid var(--bbs-accent); outline-offset: 2px; }
#board .bb-scale-card--sel { border-color: var(--bbs-accent); box-shadow: 0 0 0 1px var(--bbs-accent); }
#board .bb-scale-card-badge { position: absolute; top: 0.5rem; right: 0.5rem; }
#board .bb-scale-card-title { font-weight: 700; font-size: 0.82rem; color: var(--text-primary); padding-right: 4.5rem; }
#board .bb-scale-card-unit { font-size: 0.72rem; color: var(--text-secondary); }
#board .bb-scale-card-recruiter { font-size: 0.68rem; color: var(--bbs-accent); font-weight: 600; }
#board .bb-scale-card-chips { display: flex; flex-wrap: wrap; gap: 0.2rem 0.4rem; margin-top: 0.2rem; }
#board .bb-scale-card-best { margin-top: 0.3rem; font-size: 0.72rem; font-weight: 600; color: var(--bb-best); }
#board .bb-scale-card-best--none { color: var(--text-secondary); font-weight: 500; }

#board .bb-scale-more-wrap { text-align: center; margin-top: 0.8rem; }
#board .bb-scale-more {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--bbs-accent);
    border-radius: 999px;
    background: transparent;
    color: var(--bbs-accent);
    font-size: 0.76rem; font-weight: 600;
    cursor: pointer;
}
#board .bb-scale-more:hover { background: var(--bbs-accent-soft); }
#board .bb-scale-empty { font-size: 0.76rem; color: var(--text-secondary); padding: 0.5rem; }

/* ── Inline synthetic detail panel (own family, own state) ── */
#board .bb-scale-panel {
    margin-top: 0.9rem;
    padding: 0.8rem 0.9rem 0.9rem;
    border: 1px dashed var(--bbs-border);
    border-radius: 10px;
    background: var(--bbs-surface);
}
#board .bb-scale-panel[hidden] { display: none; }
#board .bb-scale-panel-head { display: flex; align-items: center; gap: 0.5rem; }
#board .bb-scale-panel-titles { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
#board .bb-scale-panel-unit { font-size: 0.72rem; color: var(--text-secondary); }
#board .bb-scale-panel-close {
    border: none; background: transparent; cursor: pointer;
    font-size: 1.2rem; line-height: 1; color: var(--text-secondary); padding: 0.1rem 0.3rem;
}
#board .bb-scale-panel-close:hover { color: var(--text-primary); }
#board .bb-scale-panel-meta { font-size: 0.72rem; color: var(--text-secondary); margin: 0.4rem 0; }
#board .bb-scale-notice {
    margin: 0.4rem 0; padding: 0.4rem 0.6rem;
    border-radius: 8px;
    background: var(--bbs-accent-soft);
    border: 1px solid var(--bbs-border);
    color: var(--text-primary);
    font-size: 0.74rem;
}
#board .bb-scale-ranked { display: flex; flex-direction: column; gap: 0.3rem; }
#board .bb-scale-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--bbs-border);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    text-align: left;
}
#board .bb-scale-row:hover { border-color: var(--bbs-accent); background: var(--bbs-accent-soft); }
#board .bb-scale-row:focus-visible { outline: 2px solid var(--bbs-accent); outline-offset: 2px; }
#board .bb-scale-row-name { font-weight: 600; font-size: 0.78rem; color: var(--text-primary); flex: 1; min-width: 0; }
#board .bb-scale-row-score { font-weight: 700; font-size: 0.78rem; color: var(--bbs-accent); }

/* ── REAL-billet primacy (only while the scale section is up) ─ */
#board .bb-card--real-demo {
    border-color: var(--bbs-real);
    box-shadow: 0 0 0 2px var(--bbs-real), 0 4px 16px rgba(33, 117, 217, 0.22);
}
#board .bb-real-chip {
    display: block;
    margin: -0.15rem auto 0.4rem;
    width: fit-content;
    padding: 0.16rem 0.5rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--bbs-real);
    border-radius: 999px;
}
[data-theme="dark"] #board .bb-real-chip { color: #06131f; }

/* ── Admin re-enable affordance (disabled + admin only) ────
   A slim, clearly SYNTHETIC-flavoured bar where the section
   would sit. Non-admins never get this node (zero footprint). */
#board .bb-scale-enable {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
    margin-top: 1.6rem;
    padding: 0.45rem 0.8rem;
    border: 1px dashed var(--bbs-border);
    border-radius: 999px;
    background:
        repeating-linear-gradient(45deg, var(--bbs-stripe) 0 10px, transparent 10px 20px),
        var(--bbs-accent-soft);
}
#board .bb-scale-enable-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--bbs-accent);
    border-radius: 999px;
    background: transparent;
    color: var(--bbs-accent);
    cursor: pointer;
    flex: none;
}
#board .bb-scale-enable-btn:hover { background: var(--bbs-accent-soft); }
#board .bb-scale-enable-btn:focus-visible { outline: 2px solid var(--bbs-accent); outline-offset: 2px; }
#board .bb-scale-enable-btn[disabled] { opacity: 0.6; cursor: default; }
#board .bb-scale-enable-hint {
    font-size: 0.7rem;
    color: var(--text-secondary);
    min-width: 0;
    overflow-wrap: anywhere;
}
#board .bb-scale-enable-error { font-size: 0.7rem; font-weight: 600; color: #c0392b; }
[data-theme="dark"] #board .bb-scale-enable-error { color: #ff8a80; }

/* ── Responsive (1440 / 1024 / 768) ─────────────────────── */
@media (max-width: 1024px) {
    #board .bb-scale-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (max-width: 768px) {
    #board .bb-scale-banner { flex-direction: column; align-items: flex-start; }
    #board .bb-scale-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    #board .bb-scale-panel-head { flex-wrap: wrap; }
    /* Wrapped pill reads better as a rounded card; never overflows. */
    #board .bb-scale-enable { border-radius: 14px; }
}
@media (max-width: 480px) {
    #board .bb-scale-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    #board .bb-scale-card:hover { transform: none; }
}