/* ==================================================================
   Hot Boards — CFB game picker
   docs/superpowers/specs/2026-07-18-cfb-game-picker-design.md

   Composer register, not toolbar register: --border-hair (not -strong),
   --radius-sm, var(--font-sans). The trigger must be visually identical
   to .dash-select beside it (styles.css:208).

   Root font-size is 13px (styles.css:158), so px values here are literal
   and rem values would NOT mean what they do in a 16px-root stylesheet.

   Prefixed cfbp- deliberately: cfb.js:769 blind-sweeps .cfb-career-block
   / .cfb-pedigree-block / .cfb-ov-host out of the DOM on team switch.
   ================================================================== */

#dMatchupField.cfbp-host { position: relative; }

/* ---- trigger: mirrors .dash-select exactly, with a currentColor chevron
        instead of a hardcoded data-URI stroke (which never adapts to light) ---- */
.cfbp-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--surface-input);
  border: 1px solid var(--border-hair); border-radius: var(--radius-sm);
  padding: 11px 12px 11px 13px;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500;
  color: var(--text-body); text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.cfbp-trigger:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring-focus); }
.cfbp-trigger[aria-expanded="true"] { border-color: var(--border-focus); }
.cfbp-trigger-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfbp-trigger-txt.is-empty { color: var(--text-faint); }
.cfbp-chev { flex: 0 0 auto; color: var(--text-muted); transition: transform .15s; }
.cfbp-trigger[aria-expanded="true"] .cfbp-chev { transform: rotate(180deg); }

/* ---- panel ---- */
/* position:FIXED, not absolute, and deliberately so: .dash-composer sets
   overflow:hidden (styles.css:201) to clip its gradient top-bar into the
   rounded corner, which also clips any absolutely-positioned child. Fixed
   takes the panel out of that ancestor's clipping context entirely. The
   trade is that JS must place it from the trigger's rect and reposition on
   scroll/resize — see _place() in cfb-picker.js.

   In light theme every surface token is #FFFFFF, so the border + shadow are
   the ONLY separation from the composer card behind it. Both are required. */
.cfbp-panel {
  position: fixed; z-index: 300;
  display: none; flex-direction: column; max-height: 420px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  animation: cfbpIn .14s var(--ease-out, ease-out);
}
.cfbp-panel.is-open { display: flex; }
@keyframes cfbpIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.cfbp-searchwrap { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; }
.cfbp-searchwrap svg { flex: 0 0 auto; color: var(--text-faint); }
.cfbp-search {
  flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px; box-sizing: border-box;
  background: var(--surface-input); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); color: var(--text-strong);
  font-family: var(--font-sans); font-size: 13px; outline: none;
}
.cfbp-search:focus { border-color: var(--border-focus); box-shadow: var(--ring-focus); }
.cfbp-search::placeholder { color: var(--text-faint); }

/* ---- conference chips ---- */
/* flex-wrap here only. .dc-seg deliberately pins nowrap for the board band
   (styles.css:1094), so this must not reuse that class. */
.cfbp-chips {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 5px;
  padding: 0 12px 9px; border-bottom: 1px solid var(--border-hair);
}
.cfbp-chips.is-dim { opacity: .38; pointer-events: none; }
.cfbp-chip {
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.cfbp-chip:hover { border-color: var(--accent); color: var(--accent); }
.cfbp-chip.on { background: var(--accent-grad); border-color: transparent; color: var(--text-on-heat); }
.cfbp-chip-n { opacity: .6; margin-left: 4px; font-family: var(--font-mono); font-size: 10px; }

/* ---- scrolling body ---- */
/* min-height:0 is load-bearing: without it a flex child refuses to shrink
   below content height and the panel grows past max-height instead of scrolling. */
.cfbp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 6px 8px; }

.cfbp-grp {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: baseline; gap: 7px;
  padding: 9px 8px 5px; background: var(--surface-raised);
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}
.cfbp-grp-n { font-family: var(--font-mono); letter-spacing: 0; opacity: .7; }

.cfbp-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 8px; border: none; background: transparent;
  border-radius: var(--radius-sm); cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: 12.5px; color: var(--text-secondary);
  transition: background .1s, color .1s;
}
.cfbp-row:hover { background: var(--surface-input); color: var(--text-strong); }
.cfbp-row.is-sel { background: var(--accent-wash); color: var(--text-strong); }
.cfbp-row-teams { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfbp-at { color: var(--text-faint); }
.cfbp-row-meta {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-faint); white-space: nowrap;
}

/* Unpickable: one side isn't in the team registry, so there is no key to
   build a board from. Shown rather than hidden so the announcer can see the
   game exists — but honestly marked, not silently disabled. */
.cfbp-row.is-thin { cursor: not-allowed; }
.cfbp-row.is-thin:hover { background: transparent; color: var(--text-secondary); }
.cfbp-row.is-thin .cfbp-row-teams { opacity: .55; }
.cfbp-badge {
  flex: 0 0 auto; padding: 2px 7px; border-radius: var(--radius-pill);
  background: var(--draft-wash); color: var(--draft-500);
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}

/* NO BOARD CAN BE BUILT FOR THIS GAME — one of its schools has neither a
   readable roster page nor a depth source, so the data route 502s no matter how
   many times it is asked. Five schools are in that state.

   Marked RED and left in the list, deliberately: the game is real and the
   announcer may be working it, so hiding it would only make him hunt for a
   matchup that appears to be missing. Telling him plainly costs one line;
   letting him pick it cost a bare HTTP 502 with no explanation.

   --status-out / --status-out-wash are the design system's red pair (MASTER.md
   §Colour) and are defined for BOTH themes -- not a raw hex, which §6 forbids as
   a text fill on a dark surface. Same wash+ink shape as the badge above, so the
   two read as siblings rather than as two different design languages. */
.cfbp-row.is-nodata { cursor: not-allowed; }
.cfbp-row.is-nodata:hover { background: transparent; }
.cfbp-row.is-nodata .cfbp-row-teams { color: var(--status-out); opacity: .8; }
.cfbp-badge.is-nodata {
  background: var(--status-out-wash); color: var(--status-out);
  text-transform: none; letter-spacing: .02em;
}

.cfbp-empty {
  padding: 22px 12px; text-align: center; color: var(--text-faint);
  font-family: var(--font-sans); font-size: 12.5px; font-style: italic;
}

/* The composer has no breakpoint of its own — .dash-field-matchup wraps
   intrinsically. Only clamp the panel so it can't exceed the viewport. */
@media (max-width: 560px) { .cfbp-panel { max-height: 60vh; } }