/* ═══ THE BRIEF'S OWN SETTINGS ════════════════════════════════════════════
   Lifted out of /profile's inline <style> on 2026-09-11, when the Daily Sports
   Brief stopped being a tab of the detector's account page and became a
   property of its own at /brief.

   Somebody paying $5/mo for the brief alone should never have to open the
   detector — or hunt through a four-tab account page — to choose their teams.
   The controls live with the thing they control now.

   Consumed by web/app/brief/index.html; built by assets/brief_settings.js,
   which needs exactly one element in the page (#bs-controls) and writes the
   rest itself.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══ THE NAMES THESE RULES ASK FOR ═══════════════════════════════════════
   ⛔ These controls were written for /profile, /billing and /redeem, which are
   apex-styled pages: each declares its own :root aliasing --bg / --surface /
   --text / --line / --accent onto the shared token file. /brief is an APP page
   and uses the shared names directly (--bg-page, --text-primary, --gold), so
   every one of the twelve names below resolved to NOTHING when the settings
   moved here.

   Nothing caught it. An undefined custom property in `color:` inherits, and in
   `background:` goes transparent — so the text stayed readable, contrast came
   back clean, tap targets came back clean, and the page was simply MISSING its
   surfaces: the master switch had no track, the sport chips no outline, the
   search boxes no field, the palette cards no border.

   Aliased, never re-stated as hex, so light mode is answered by the shared
   theme and cannot drift. Scoped to this view so the rest of /brief is
   untouched.
   ══════════════════════════════════════════════════════════════════════════ */
#brief-settings {
  --bg:         var(--bg-page);
  --surface:    var(--bg-card);
  --surface-2:  var(--bg-inset);
  --line:       var(--border);
  --line-soft:  var(--border-dashed);
  --text:       var(--text-primary);
  --text-2:     var(--text-secondary);
  --text-3:     var(--text-tertiary);
  --accent:     var(--gold);
  --accent-ink: var(--on-gold);
  --r:          15px;
  --r-sm:       11px;
}

/* ── Daily Brief settings picker (live tokens → matches theme + light toggle) ── */
.bs-gate{ border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; color:var(--text-2); font-size:14px; }
.bs-gate a{ color:var(--accent); }
.bs-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
.bs-lab{ font-size:14.5px; } .bs-hint{ color:var(--text-2); font-size:12px; margin-top:3px; }
/* ⚠️ 44x25 on a phone. The switch ITSELF stays 44x25 — a wider pill would
   look wrong — but the hit area is grown around it with padding, so the
   target meets the 44px floor in both directions without moving the pixel. */
.bs-sw{ width:44px; height:25px; border-radius:20px; background:var(--line-soft); position:relative; cursor:pointer; border:0; flex:0 0 auto; }
@media (max-width:720px){
  .bs-sw{ box-sizing:content-box; padding:10px 0; background-clip:content-box; }
}
.bs-sw i{ position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; transition:left .15s; }
.bs-sw[aria-pressed="true"]{ background:var(--accent); } .bs-sw[aria-pressed="true"] i{ left:22px; }
.bs-sec{ margin-top:24px; }
.bs-sec-t{ font-size:11px; letter-spacing:.22em; color:var(--text-2); font-weight:700; text-transform:uppercase; }
.bs-deliv{ display:flex; gap:14px 16px; flex-wrap:wrap; padding:12px 0 2px; align-items:flex-end; }
.bs-chk{ display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.bs-chk input{ width:16px; height:16px; accent-color:var(--accent); }
.bs-field{ display:flex; flex-direction:column; gap:5px; }
.bs-field label{ font-size:11px; letter-spacing:.14em; color:var(--text-2); text-transform:uppercase; }
#brief-settings select, #brief-settings input[type="text"]{ background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:9px; padding:9px 11px; font:inherit; font-size:13.5px; }
.bs-trk-head{ display:flex; justify-content:space-between; align-items:baseline; margin:4px 0 10px; }
.bs-cap{ font-size:12px; color:var(--text-2); } .bs-cap b{ color:var(--accent); }
.bs-pick{ display:flex; gap:10px; }
.bs-pick select{ flex:0 0 96px; } .bs-box{ flex:1; position:relative; } .bs-box input{ width:100%; }
.bs-sugg{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface); border:1px solid var(--line); border-radius:11px; z-index:20; box-shadow:0 14px 30px -8px rgba(0,0,0,.6); max-height:280px; overflow-y:auto; }
.bs-opt{ display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; border-top:1px solid var(--line); }
.bs-opt:first-child{ border-top:0; } .bs-opt:hover{ background:var(--surface-2); }
.bs-opt .nm{ font-size:14px; } .bs-opt .meta{ margin-left:auto; font-size:11px; color:var(--text-2); letter-spacing:.08em; }
.bs-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--accent); }
.bs-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.bs-chip{ display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:6px 8px 6px 12px; font-size:13px; }
.bs-chip .tm{ color:var(--text-2); font-size:11px; }
.bs-chip button{ cursor:pointer; color:var(--text-2); border:0; background:none; font-size:15px; line-height:1; padding:0 2px; }
.bs-chip button:hover{ color:var(--text); }
/* your-sports toggle chips */
.bs-sports{ display:flex; flex-wrap:wrap; gap:8px; }
.bs-sport-chip{ font:inherit; font-size:13px; cursor:pointer; background:var(--surface); color:var(--text-2);
  border:1px solid var(--line); border-radius:20px; padding:7px 14px; transition:color .12s, border-color .12s, background .12s; }
.bs-sport-chip:hover{ color:var(--text); border-color:var(--text-2); }
.bs-sport-chip.on{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
/* per-sport config cards */
.bs-cards{ display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.bs-cards:empty{ display:none; }
.bs-card{ border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:var(--surface); }
.bs-card-h{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bs-card-name{ font-weight:600; font-size:15px; color:var(--text); }
.bs-pill{ font-family:var(--font-sans, "Avenir Next", Avenir, Mulish, system-ui, sans-serif); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
  border:1px solid var(--line); border-radius:5px; padding:2px 7px; }
.bs-picker{ margin-top:14px; }
.bs-picker > label{ display:block; font-size:11px; letter-spacing:.14em; color:var(--text-2); text-transform:uppercase; margin-bottom:7px; }
.bs-picker .bs-chips{ margin-top:10px; }
.bs-note{ font-size:12px; color:var(--text-2); margin-top:10px; }
/* news-display radios */
.bs-radios{ display:flex; flex-direction:column; gap:10px; padding:10px 0 2px; }
.bs-radio{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--text-2); cursor:pointer; line-height:1.45; }
.bs-radio input{ margin-top:2px; width:16px; height:16px; accent-color:var(--accent); flex:0 0 auto; }
.bs-radio strong{ color:var(--text); font-weight:600; }
.bs-modes{ display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; margin:12px 0 14px; }
.bs-mode{ background:var(--surface); color:var(--text-2); border:0; padding:8px 18px; font:inherit; font-size:12.5px; cursor:pointer; }
.bs-mode + .bs-mode{ border-left:1px solid var(--line); }
/* ⛔ Was color:#fff. The accent is a LIGHT sage in dark mode, so white on it
   measured 2.56:1 against a 4.5 floor — the "Dark" and "Light" buttons of the
   theme picker itself. The chips two rules up already used the right token;
   this one was written by hand. Third fault found in this panel that no check
   had ever seen, because the controls only paint for an entitled account and
   the test stub answered the preferences call with an empty object. */
.bs-mode.on{ background:var(--accent); color:var(--accent-ink); }
.bs-palettes{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.bs-pal{ text-align:left; cursor:pointer; border:1px solid var(--line); border-radius:12px; padding:11px 13px; background:var(--surface); color:var(--text); transition:border-color .12s ease; }
.bs-pal:hover{ border-color:var(--text-2); }
.bs-pal.on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.bs-pal .pn{ font-weight:600; font-size:14px; }
.bs-pal .pb{ font-size:11px; color:var(--text-2); margin-top:2px; line-height:1.4; }
.bs-sw2{ display:flex; gap:5px; margin-top:9px; }
.bs-sw2 i{ width:20px; height:20px; border-radius:5px; border:1px solid rgba(128,128,128,.25); display:block; }
.bs-save{ margin-top:28px; display:flex; align-items:center; gap:14px; }
.bs-status{ font-size:13px; color:var(--accent); }
.bs-status.err{ color:#d98a8a; }

/* ═══ PHONE TAP TARGETS ════════════════════════════════════════════════════
   ⛔ Every control below sat under the 44px floor on a phone, and had done
   since the panel was written — on /profile, behind the Customize Brief tab.
   Nothing caught it because nothing had ever PAINTED these controls under
   test: the panel only fills in for an entitled account, and the test stub
   answered the preferences call with an empty object, so every check ran
   against an empty panel and reported it clean.

   Measured on the real page: the three delivery dropdowns 39px, all eleven
   sport chips 34px, the Dark/Light buttons 35px, and the × that removes a
   team 14x15.

   Phone only, which is the same shape the switch above already uses: a mouse
   does not need a 44px target and the desktop layout is right as it is.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  #brief-settings select,
  #brief-settings input[type="text"] { min-height: 44px; }
  .bs-sport-chip { min-height: 44px; }
  .bs-mode { min-height: 44px; }
  /* The pill grows to meet the floor and its × becomes a real target inside
     it, rather than a 14px glyph with nothing around it. */
  .bs-chip { min-height: 44px; padding: 4px 4px 4px 12px; }
  .bs-chip button {
    display: flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0;
  }
  /* The checkbox and the radios are 16px squares, and always were. What a
     finger actually hits is the LABEL wrapped round each one, so that is what
     has to meet the floor. "Email it to me" was a single 20px line. */
  .bs-chk, .bs-radio { min-height: 44px; }
}