/* GetWheelSpinner v7.1.7 — quality overrides (loaded after style.css / page CSS).
   C1 primary-button contrast · C2 light-mode small text · C3 keyboard focus on
   text fields · T1 remove-option tap target · F1 narrow-grid overflow guard.
   Every colour below measures >= 4.5:1 against white text (C1) or against the
   light-theme page/card backgrounds (C2). Hover/active/disabled behaviour of the
   original rules is preserved: only the properties named here are overridden. */

/* ── C1: primary gradients darkened so white text clears WCAG AA at every stop ──
   default   amber #F59E0B → 2.15:1  ==>  #B45309 / #C2410C / #B91C1C  (5.02 / 5.20 / 6.45) */
#spin-btn,
.cp-btn-primary, .cp-btn-primary:hover,
.mw-btn-spin, .mw-btn-primary,
html[data-theme="light"] .mw-btn-spin, html[data-theme="light"] .mw-btn-primary,
.hh-btn-primary, .fd-btn-primary, .nfl-btn-primary, .plss-btn-primary, .nba-btn-primary, .fbd-btn-primary {
  background: linear-gradient(135deg, #B45309 0%, #C2410C 50%, #B91C1C 100%);
  color: #fff;
}
/* Light-theme variants. Several families ship their own `html[data-theme="light"]`
   rule, which outranks the plain class selectors above; NBA/FBD still carried the
   v7.0.1 brand gradient there (measured 2.15:1). Matching the specificity fixes
   them without touching the shipped files. */
html[data-theme="light"] .nba-btn-primary, html[data-theme="light"] .fbd-btn-primary,
html[data-theme="light"] .cp-btn-primary, html[data-theme="light"] .cp-btn-primary:hover,
html[data-theme="light"] .hh-btn-primary, html[data-theme="light"] .fd-btn-primary,
html[data-theme="light"] .nfl-btn-primary, html[data-theme="light"] .plss-btn-primary {
  background: linear-gradient(135deg, #B45309 0%, #C2410C 50%, #B91C1C 100%);
  color: #fff;
}
/* per-page theme gradients keep their hue family, one shade darker (white text >= 5:1) */
body.theme-food #spin-btn          { background: linear-gradient(135deg, #C2410C, #B91C1C); }   /* was #FF8C42→#FF1744 (2.31) */
body.theme-classroom #spin-btn     { background: linear-gradient(135deg, #1565C0, #0E7490); }   /* was #42A5F5→#26C6DA (2.06) */
body.theme-truth-or-dare #spin-btn { background: linear-gradient(135deg, #B91C1C, #7E22CE); }   /* was #FF1744→#AA00FF (3.85) */
body.theme-team #spin-btn          { background: linear-gradient(135deg, #15803D, #0369A1); }   /* was #00C853→#00B0FF (1.75) */
body.theme-date-night #spin-btn    { background: linear-gradient(135deg, #BE185D, #7E22CE); }   /* was #F06292→#9C27B0 (3.06) */
body.theme-chore #spin-btn         { background: linear-gradient(135deg, #0F766E, #15803D); }   /* was #4DB6AC→#81C784 (2.01) */
/* giveaway theme (dark text on gold, 9.19:1) is intentionally left as shipped */
body.theme-giveaway #spin-btn      { background: linear-gradient(135deg, #FFD700, #FFA000); color: #1a1000; }
/* Disabled Spin button must look inert on EVERY page.
   In v7.1.6 the per-page theme rule `body.theme-x #spin-btn` (specificity 1,1,1)
   already outranked the shipped `#spin-btn:disabled` (1,1,0), so a disabled Spin
   button on a themed page was painted with the live enabled gradient (measured
   1.75:1 on Team Generator, 3.38:1 with the darker gradients above). These two
   rules (1,1,2) restore the shipped disabled appearance everywhere, themed or not,
   in both themes. Values are exactly the ones already shipped in style.css. */
html body #spin-btn:disabled {
  background: linear-gradient(135deg, #252535, #1b1b28);
  color: rgba(255,255,255,.72);
  box-shadow: none;
}
html[data-theme="light"] body #spin-btn:disabled {
  background: linear-gradient(135deg, #E5E7EB, #CBD5E1);
  color: rgba(15,23,42,.78);
}

/* ── C2: light-mode small text (measured 3.41–4.0:1) → >= 7:1 on white / card ── */
html[data-theme="light"] .spin-hint   { color: #475569; }              /* was rgba(15,23,42,.5)  3.41:1 */
html[data-theme="light"] .card-label  { color: #334155; }              /* #hist-title, #opts-count: was .55 → 4.0:1 */
html[data-theme="light"] .opt-remove  { color: rgba(15,23,42,.75); }   /* was .55 → 4.0:1 */

/* ── C3: visible keyboard focus on text fields that had outline:none ── */
#options-textarea:focus-visible,
#nba-names:focus-visible, #fbd-names:focus-visible,
.mw-input:focus-visible, .mw-textarea:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
html[data-theme="light"] #options-textarea:focus-visible,
html[data-theme="light"] #nba-names:focus-visible, html[data-theme="light"] #fbd-names:focus-visible,
html[data-theme="light"] .mw-input:focus-visible, html[data-theme="light"] .mw-textarea:focus-visible {
  outline: 2px solid #B45309;
}

/* ── T1: per-option remove button — 14×18 px glyph → >= 28×28 hit area (32×32 on touch) ── */
.opt-remove {
  min-width: 28px; min-height: 28px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
@media (pointer: coarse) {
  .opt-remove { min-width: 32px; min-height: 32px; }
}
.opt-remove:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

/* ── F1: single-column layout must never let a min-content contribution widen the track ──
   (Chromium expanded the 1fr track to 302 px on /icebreaker-wheel/ at 320 px) */
@media (max-width: 900px) {
  .tool-section { grid-template-columns: minmax(0, 1fr); }
  .wheel-col, .controls-col { min-width: 0; }
}