/* ══ THE CONTROLS (prompt 397, BL-1803, Nov 11 2026) ═══════════
   Dan, Nov 10: "everything is not even close to uniform ... fix it for good
   ... whenever we build something new these things need to be remembered and
   implemented. we're constantly creating more work for ourselves." The CEO
   desk measured 48 button styles, 7 dropdown styles and 15 text box styles on
   25 pages, the same choice built four ways, and most phone controls under
   36 px. 394 fixed the page top with one shared piece and a test; this file
   does the same for everything a reader taps. It is now the ONLY place a
   button, choice pill, dropdown, text box, switch, checkbox pill, settings
   panel, filter bar, helper line or page column is styled.

   Markup comes from templates/_controls.html (Jinja macros) and, for rows a
   page builds in JavaScript, the same class names (static/controls.js has the
   dropdown menu and the panel memory). A page passes labels, options and what
   happens on a tap. Never a size, color, corner or spacing.

   The look is the one the site already used most: the 29 px pill (13 px
   text, fully round, var(--bg3) with a hairline border, gold when chosen),
   the Line Shop's chip. Nothing new was invented. Every control is at least
   44 px to the touch at phone width, reached with an invisible tap area
   around the drawn pill (the ::after below), so dense rows do not grow.

   The !important flags are deliberate, as in page-top.css: pages still carry
   old rules (".filter-btn { padding: 5px 10px }" at 600 px and many
   page-local copies); the shared values must win whatever a page still says.
   tests/_dry_test_controls.py and qa/controls_measure.py fail on any
   difference. */

:root {
  --tog-c-h: 29px;          /* regular control, drawn */
  --tog-c-h-sm: 25px;       /* small, inside a row or table */
  --tog-c-fs: 13px;         /* text never under 13 px */
  --tog-c-lh: 15px;
  --tog-c-padx: 14px;
  --tog-c-padx-phone: 10px;
  --tog-c-padx-sm: 10px;
  --tog-c-rad: 999px;       /* one corner shape: fully round */
  --tog-c-gap: 6px;
  --tog-c-tap: 44px;        /* to the touch, every control, every width */
  --tog-in-h: 36px;         /* text and number box, drawn */
  --tog-in-h-phone: 44px;
  --tog-col: 1000px;        /* the page column: 54 pages used it on Nov 11 */
  --tog-col-wide: 1360px;   /* the one wide variant (Linesheet, Books) */
  --tog-col-side: 20px;
  --tog-col-side-phone: 16px;
}

/* ── The tap area every control shares: 44 px tall, centred on the drawn
   control, as wide as it. Invisible; adds nothing to the layout. ───────── */
.tog-btn, .tog-pill, .tog-dd, .tog-check, .tog-switch { position: relative; }
/* display is never forced: a page's own hide rules (the sport chips behind
   More, [hidden]) must keep working. */
.tog-btn[hidden], .tog-pill[hidden], .tog-dd[hidden], .tog-check[hidden], .tog-switch[hidden], .tog-panel[hidden], .tog-fbar[hidden] { display: none !important; }
.tog-btn::after, .tog-pill::after, .tog-check::after, .tog-switch::after, button.tog-dd::after {
  content: "" !important; position: absolute !important; left: 50% !important; right: auto !important;
  width: max(100%, var(--tog-c-tap)) !important;
  top: 50% !important; height: var(--tog-c-tap) !important; transform: translate(-50%, -50%) !important;
  background: transparent !important; border: 0 !important; pointer-events: auto;
}

/* ── The one chassis: buttons, choice pills, dropdowns, checkbox pills ─── */
.tog-btn, .tog-pill, .tog-dd, .tog-check {
  display: inline-flex; align-items: center !important; justify-content: center;
  gap: var(--tog-c-gap); box-sizing: border-box !important;
  min-height: var(--tog-c-h) !important; height: auto;
  padding: 6px var(--tog-c-padx) !important;
  font-family: inherit !important; font-size: var(--tog-c-fs) !important;
  line-height: var(--tog-c-lh) !important; letter-spacing: normal !important;
  text-transform: none !important; text-decoration: none !important;
  border-radius: var(--tog-c-rad) !important; border: 1px solid var(--border) !important;
  background: var(--bg3) !important; color: var(--muted) !important;
  font-weight: 500 !important; white-space: nowrap; cursor: pointer;
  vertical-align: middle; flex-shrink: 0; width: auto; align-self: center;
  box-shadow: none !important; transition: border-color .15s, color .15s, background .15s;
  -webkit-tap-highlight-color: transparent; margin: 0;
}
@media (max-width: 600px) {
  .tog-btn, .tog-pill, .tog-dd, .tog-check { padding-left: var(--tog-c-padx-phone) !important; padding-right: var(--tog-c-padx-phone) !important; }
}
@media (hover: hover) {
  .tog-pill:hover, .tog-dd:hover, .tog-check:hover, .tog-btn-plain:hover { border-color: var(--gold) !important; color: var(--text) !important; }
}
.tog-btn:focus-visible, .tog-pill:focus-visible, .tog-dd:focus-within:has(:focus-visible), .tog-check:focus-within:has(:focus-visible), .tog-switch:focus-visible {
  outline: 2px solid var(--gold) !important; outline-offset: 2px;
}
:is(.tog-field, .field) > :is(.tog-btn, .tog-pill, .tog-dd, .tog-check) { align-self: flex-start; }
.tog-btn[disabled], .tog-btn[aria-disabled="true"], .tog-pill[disabled] { opacity: .5; cursor: default; }

/* Button: three kinds only. Main is gold, one per screen. */
.tog-btn-main { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--on-gold, #000) !important; font-weight: 700 !important; padding-left: 20px !important; padding-right: 20px !important; }
@media (hover: hover) { .tog-btn-main:hover { filter: brightness(1.06); } }
.tog-btn-plain { background: transparent !important; color: var(--text) !important; font-weight: 600 !important; }
.tog-btn-quiet { background: transparent !important; border-color: transparent !important; color: var(--gold) !important; font-weight: 600 !important; padding-left: 4px !important; padding-right: 4px !important; }
@media (hover: hover) { .tog-btn-quiet:hover { text-decoration: underline !important; } }
/* Two sizes only. Small is for inside a row or table. */
.tog-btn-sm, .tog-pill-sm { min-height: var(--tog-c-h-sm) !important; padding: 4px var(--tog-c-padx-sm) !important; }

/* The sport row on a phone: All, the first four sports and More on one
   line (the binding More rule, BL-534), so its pills sit 4 px apart with
   8 px sides, the spacing the narrowest phones already used. Same height,
   text and corner; the tap areas stay 44 px. */
@media (max-width: 600px) {
  [data-sport-row]:has(> .sport-more-btn) { column-gap: 4px !important; }
  [data-sport-row]:has(> .sport-more-btn) > .tog-pill { padding-left: 8px !important; padding-right: 8px !important; }
}

/* Choice pill: pick one or many. One look for chosen, one for not. */
.tog-pill.is-on, .tog-pill.active, .tog-pill.on, .tog-pill[aria-pressed="true"], .tog-pill[aria-selected="true"], .tog-pill[aria-current="page"],
.tog-pill.has-filter, .tog-dd.is-set, .tog-dd.has-filter, .tog-check:has(> input:checked) {
  background: var(--gold) !important; border-color: var(--gold) !important; color: var(--on-gold, #000) !important; font-weight: 600 !important;
}
@media (hover: none) {
  .tog-pill:not(.is-on):not(.active):not(.on):not(.has-filter):not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-current="page"]):hover { background: var(--bg3) !important; border-color: var(--border) !important; color: var(--muted) !important; }
}
/* Counts sit inside the pill the same way everywhere. */
.tog-pill-n, .tog-pill .sc-n { font-weight: 800 !important; margin-left: 2px; color: var(--gold-lt, var(--gold)) !important; font-size: var(--tog-c-fs) !important; }
.tog-pill.is-on .tog-pill-n, .tog-pill.active .tog-pill-n, .tog-pill.on .tog-pill-n, .tog-pill[aria-pressed="true"] .tog-pill-n,
.tog-pill.is-on .sc-n, .tog-pill.active .sc-n, .tog-pill.on .sc-n, .tog-pill[aria-pressed="true"] .sc-n { color: inherit !important; }

/* Dropdown: the site's own pill menu. A native <select> lies invisibly over
   the pill (and its 44 px tap area) so a phone opens its own picker for a
   long list; static/controls.js swaps in the site's menu on a computer and
   for short lists, keeping the select as the source of truth (its change
   event still fires, so a page's own code is untouched). */
.tog-dd-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; flex-shrink: 0; }
.tog-dd[aria-expanded="true"] .tog-dd-caret, .tog-dd.is-open .tog-dd-caret { transform: rotate(180deg); }
.tog-dd > select.tog-dd-native, .tog-dd > .tog-dd-btn {
  position: absolute !important; left: 0 !important; width: 100% !important; top: 50% !important;
  height: var(--tog-c-tap) !important; min-height: 0 !important; transform: translateY(-50%) !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important;
  color: transparent !important; opacity: 0 !important; cursor: pointer; font-size: 16px !important;
  -webkit-appearance: none; appearance: none; z-index: 1;
}
.tog-dd > .tog-dd-btn { opacity: 1 !important; }
.tog-dd.tog-dd-menu-mode > select.tog-dd-native { pointer-events: none; visibility: hidden; }
.tog-dd-label { pointer-events: none; }
.tog-dd-list {
  position: fixed; top: 0; left: 0; z-index: 10000; display: none;
  max-width: calc(100vw - 16px); max-height: min(340px, 60vh); overflow-y: auto;
  overscroll-behavior: contain; margin: 0; padding: 6px 0; list-style: none;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); text-align: left; white-space: normal;
}
.tog-dd-list.is-open { display: block; }
.tog-dd-opt {
  display: flex; align-items: center; min-height: 40px; padding: 0 16px; cursor: pointer;
  font-size: var(--tog-c-fs); line-height: 1.3; color: var(--text); font-weight: 500;
}
.tog-dd-opt[aria-selected="true"] { color: var(--gold); font-weight: 700; }
.tog-dd-opt.is-active, .tog-dd-opt:hover { background: var(--bg3); }
.tog-dd-opt[aria-disabled="true"] { color: var(--muted); cursor: default; }
.tog-dd-group { padding: 8px 16px 4px; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; }

/* The menus a page builds behind a dropdown pill (the Books pill, Max Loss)
   keep static/filter-pill.css's .book-dropdown panel: that file is part of
   this shared set. */

/* A dropdown whose select a page marks as missing (the wallet's Add check). */
.tog-dd:has(> select.bw-bad), .tog-dd:has(> select[aria-invalid="true"]) { border-color: var(--red) !important; }

/* Checkbox pill: a choice pill with a real checkbox inside, for "Include
   Player Props" and pick-many lists. */
.tog-check > input[type="checkbox"], .tog-check > input[type="radio"] {
  position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important;
  margin: 0 !important; pointer-events: none;
}

/* Switch: on or off. A button with role="switch". */
.tog-switch {
  display: inline-flex; align-items: center !important; gap: 8px; cursor: pointer;
  background: none !important; border: 0 !important; padding: 0 !important; margin: 0;
  min-height: var(--tog-c-h) !important; font: inherit; font-size: var(--tog-c-fs) !important;
  line-height: var(--tog-c-lh) !important; color: var(--text) !important; font-weight: 500 !important;
  -webkit-tap-highlight-color: transparent;
}
.tog-switch-track {
  position: relative; width: 34px; height: 20px; border-radius: 999px; flex-shrink: 0;
  background: var(--bg3); border: 1px solid var(--border); box-sizing: border-box; transition: background .15s;
}
.tog-switch-track::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--muted); transition: transform .15s, background .15s;
}
.tog-switch[aria-checked="true"] .tog-switch-track { background: var(--gold); border-color: var(--gold); }
.tog-switch[aria-checked="true"] .tog-switch-track::before { transform: translateX(14px); background: var(--on-gold, #000); }

/* ── Text and number box, with its label above in one style ──────────── */
.tog-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tog-label {
  font-size: var(--tog-c-fs) !important; line-height: var(--tog-c-lh) !important; font-weight: 600 !important;
  color: var(--text) !important; text-transform: none !important; letter-spacing: normal !important; margin: 0 !important;
}
.tog-input {
  box-sizing: border-box !important; width: 100%; height: var(--tog-in-h) !important; min-height: 0 !important;
  padding: 0 14px !important; border-radius: var(--tog-c-rad) !important; border: 1px solid var(--border) !important;
  background: var(--bg3) !important; color: var(--text) !important; font-family: inherit !important;
  font-size: 14px !important; line-height: 1.2 !important; outline: none; box-shadow: none !important; margin: 0;
  -webkit-appearance: none; appearance: none;
}
textarea.tog-input { height: auto !important; min-height: 88px !important; padding: 10px 14px !important; border-radius: 14px !important; resize: vertical; }
.tog-input:focus { border-color: var(--gold) !important; }
.tog-input::placeholder { color: var(--muted); opacity: 1; }
.tog-input-search { padding-left: 34px !important; background-image: none; }
.tog-search { position: relative; display: block; flex: 1 1 220px; min-width: 0; max-width: 360px; }
.tog-search > .tog-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 15px; pointer-events: none; line-height: 1; }
@media (max-width: 600px) {
  /* 16 px stops iOS zooming the page when a box takes focus (BL-063). */
  .tog-input { height: var(--tog-in-h-phone) !important; font-size: 16px !important; }
  .tog-search { max-width: none; flex-basis: 100%; }
}
/* A results list under a search box shows only once it has something in it. */
.tog-search-menu:empty, .tog-search-menu[hidden] { display: none !important; }

/* ── Helper text: at most one short line under a control ──────────────── */
.tog-help {
  display: block; margin: 4px 0 0 !important; font-size: var(--tog-c-fs) !important; line-height: 1.35 !important;
  color: var(--muted) !important; font-weight: 400 !important; max-width: 640px;
}
/* The price time and the "confirm at the book" line near the results
   (CCO, Nov 11): the same one muted line. */
.tog-asof { display: block; margin: 6px 0 !important; font-size: var(--tog-c-fs) !important; line-height: 1.35 !important; color: var(--muted) !important; }

/* ── Settings panel: one collapsible panel, one mark (How It Works' arrow),
   closed by default, a one-line summary of what is set, remembered per page.
   A native <details>: opens with no script. ───────────────────────────── */
/* details.og-fold (the site's older fold, prompt 36, on the explainers and
   the folds under boards) is the same panel: one look, one mark. A class,
   never a bare details rule: /data's bare one boxed the sidebar's groups. */
details.og-fold { margin: 0 0 10px; }
details.og-fold > :not(summary) { margin-left: 14px; margin-right: 14px; }
details.og-fold > :last-child { margin-bottom: 16px; }
.tog-panel, details.og-fold { border: 1px solid var(--border) !important; border-radius: 12px !important; background: var(--bg2) !important; padding: 0 !important; }
.tog-panel { margin: 0 !important; }
.tog-fbar > .tog-panel { flex: 1 1 100%; }
.tog-panel > summary, details.og-fold > summary {
  list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 10px;
  min-height: var(--tog-c-tap) !important; padding: 0 14px !important; box-sizing: border-box;
  font-size: var(--tog-c-fs) !important; line-height: var(--tog-c-lh) !important; font-weight: 700 !important; color: var(--text) !important;
  -webkit-tap-highlight-color: transparent; background: none !important; border: 0 !important;
}
.tog-panel > summary::-webkit-details-marker, details.og-fold > summary::-webkit-details-marker { display: none; }
.tog-panel > summary::marker, details.og-fold > summary::marker { content: ""; }
.tog-panel > summary::after, details.og-fold > summary::after {
  content: ""; width: 0; height: 0; margin-left: auto; flex-shrink: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--gold);
}
.tog-panel[open] > summary::after, details.og-fold[open] > summary::after { transform: rotate(180deg); }
.tog-panel > summary:focus-visible, details.og-fold > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 12px; }
.tog-panel-title { flex-shrink: 0; }
.tog-panel-what { font-weight: 500; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.tog-panel-body { padding: 4px 14px 14px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.tog-panel-body > .tog-field { flex: 1 1 140px; }

/* ── Filter bar: dates, sports, market, books, the page's own extras, then
   the settings panel, in that order on every page. Wraps to rows on a
   phone, never scrolls sideways. ────────────────────────────────────── */
.tog-fbar {
  display: flex; flex-wrap: wrap !important; align-items: center; gap: 8px 6px !important;
  margin: 0 0 12px; overflow: visible !important;
}
.tog-fbar-group {
  display: flex; flex-wrap: wrap !important; align-items: center; gap: 8px 6px !important; min-width: 0;
  overflow: visible !important; position: static !important; top: auto !important;
  padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important;
  max-width: 100%;
}
.tog-fbar-group.tog-fbar-row { flex: 1 1 100%; }
/* A phone's bar is never taller than the one it replaced (Growth, Nov 11):
   6 px between rows there. The 44 px tap areas are centred on each pill. */
@media (max-width: 600px) {
  .tog-fbar, .tog-fbar-group { row-gap: 6px !important; }
}

/* ── The page column: one width and one left edge for every tool and board
   page, so the title sits in the same spot on every page. ──────────────── */
.tog-col, .tog-col-wide {
  box-sizing: border-box !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important;
  padding-left: var(--tog-col-side) !important; padding-right: var(--tog-col-side) !important;
}
.tog-col { max-width: calc(var(--tog-col) + 2 * var(--tog-col-side)) !important; }
.tog-col-wide { max-width: calc(var(--tog-col-wide) + 2 * var(--tog-col-side)) !important; }
@media (max-width: 600px) {
  .tog-col, .tog-col-wide { padding-left: var(--tog-col-side-phone) !important; padding-right: var(--tog-col-side-phone) !important; }
}
.tog-col .tog-col, .tog-col-wide .tog-col { padding-left: 0 !important; padding-right: 0 !important; }

/* A label read by screen readers only. */
.tog-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }