/* ═══ 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, so the target meets the
   44px floor in both directions without moving the pixel. The growth is an
   invisible ::after, not padding: padding + background-clip squashed the
   pill, put the knob above it, and the "on" colour reset the clip into a
   tall blob (iPhone, 2026-10-22). */
.bs-sw{ width:44px; height:25px; border-radius:20px; background:var(--line-soft); position:relative; cursor:pointer; border:0; padding:0; box-sizing:border-box; -webkit-appearance:none; appearance:none; flex:0 0 auto; }
@media (max-width:720px){
  .bs-sw::after{ content:""; position:absolute; inset:-10px 0; }
}
.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; }
/* Fantasy: one switch per league (2026-10-19). */
.bs-fx-leagues{ margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.bs-fx-leagues .bs-lab{ margin-bottom:2px; }
.bs-fx-meta{ font-size:12px; color:var(--text-2); margin-left:4px; }
/* 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; }
/* ── how much: steppers ──────────────────────────────────────────────────
   A stepper rather than a slider or a free number field: the useful range is
   0-12, every value is one tap away, and there is no state where the control
   shows a number the brief cannot honour. 0 is a real setting — it is how a
   reader turns rumors off without unfollowing the sport — so the minus button
   disables AT zero rather than the control refusing to go there. */
.bs-counts{ display:flex; flex-wrap:wrap; gap:14px 28px; padding:14px 0 2px; }
.bs-count{ display:flex; align-items:center; gap:16px; }
.bs-count > div:first-child{ min-width:124px; }
.bs-step{ display:inline-flex; align-items:stretch; border:1px solid var(--line); border-radius:9px; background:var(--surface); overflow:hidden; }
.bs-step button{ background:none; border:0; color:var(--text-2); font:inherit; font-size:16px; line-height:1; width:38px; cursor:pointer; }
.bs-step button:hover:not(:disabled){ color:var(--text); background:var(--surface-2); }
.bs-step button:disabled{ opacity:.35; cursor:default; }
.bs-step .v{ min-width:46px; display:flex; align-items:center; justify-content:center; font-size:15px; font-variant-numeric:tabular-nums; color:var(--text); border-left:1px solid var(--line); border-right:1px solid var(--line); }
.bs-step .v.zero{ color:var(--text-2); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
/* per-sport overrides — hidden until the switch asks for them */
.bs-limits{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.bs-limits:empty{ display:none; }
.bs-limit{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--surface); }
.bs-limit .nm{ font-size:14px; display:flex; align-items:center; gap:9px; min-width:150px; flex:1 1 150px; }
.bs-limit .bs-step-l{ display:flex; align-items:center; gap:8px; }
.bs-limit .bs-step-l span{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); }

/* ── how far back: the two scales ────────────────────────────────────────
   Fixed choices, not a free number: the values a person actually wants are
   few, and naming them ("7 days") is clearer than a slider they have to read
   off. The two rows are separate controls on purpose — news and rumors age at
   different rates and one dial for both was the thing being complained about. */
.bs-ages{ display:flex; flex-direction:column; gap:16px; padding:14px 0 2px; }
.bs-age > label{ display:block; font-size:11px; letter-spacing:.14em; color:var(--text-2); text-transform:uppercase; margin-bottom:8px; }
.bs-scale{ display:flex; flex-wrap:wrap; gap:8px; }
.bs-scale button{ font:inherit; font-size:13px; cursor:pointer; background:var(--surface); color:var(--text-2); border:1px solid var(--line); border-radius:20px; padding:7px 16px; transition:color .12s, border-color .12s, background .12s; }
.bs-scale button:hover{ color:var(--text); border-color:var(--text-2); }
.bs-scale button.on{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

.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; }
  /* Same floor for the two controls added 2026-09-20. The stepper buttons are
     38px wide by design (the pill would look wrong wider), so they grow
     VERTICALLY to the floor and the row keeps its shape. */
  .bs-step button { min-height: 44px; }
  .bs-step .v { min-height: 44px; }
  .bs-scale button { min-height: 44px; }
  /* A stepper and its label stop sharing a line once the label wraps. */
  .bs-count { width: 100%; justify-content: space-between; }
}