/* filter-bar.css: the Line Shop's filter toolbar, shared (BL-590, BL-591).
 *
 * The search box, the filter chips (.filter-btn), the SPORT row and its More
 * chip, the date row, and the phone rules that keep each chip row on one
 * line. Lifted verbatim from templates/lineshop.html on 2026-09-15, when Dan
 * asked for Props and Futures to look and behave exactly like the Line Shop.
 * templates/lineshop.html, props.html and futures.html load this file and
 * carry NO copy of these rules.
 *
 * filter-pill.css is still the Books pill, its menu and the Presets sheet;
 * this file is the toolbar around them. Each page keeps its own sticky
 * offsets (top:) and its own phone .toolbar layout, because those depend on
 * what that page stacks above the toolbar, not on the chips.
 *
 * Load it right after filter-pill.css and before the page's own <style>, so
 * a page rule of the same weight still wins.
 */

/* ── Search ── */
.search-wrap {
  position: relative; flex: 1; min-width: 200px; max-width: 360px;
}
.search-wrap input {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); padding: 8px 12px 8px 34px; border-radius: 20px;
  font-size: 14px; outline: none; transition: border-color 0.15s;
}
.search-wrap input:focus { border-color: var(--gold); }
.search-wrap input::placeholder { color: var(--muted); }
.search-icon {
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%); color: var(--muted); font-size: 15px;
}

/* ── Filter chips ── */
.filter-btn {
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--muted); padding: 6px 14px; border-radius: 20px;
  font-size: 13px; cursor: pointer; transition: all 0.15s;
}
.filter-btn:hover, .filter-btn.active {
  background: var(--gold); border-color: var(--gold); color: #000; font-weight: 600;
}
/* Touch devices apply :hover on tap and KEEP it until the next tap, so the
   +EV toggle looked stuck-on after unfiltering. Only style hover where a
   real hover pointer exists. */
@media (hover: none) {
  .filter-btn:not(.active):hover {
    background: var(--bg3); border-color: var(--border); color: var(--muted); font-weight: 400;
  }
}

/* SPORT CHIPS: FOUR ON A PHONE, THE REST BEHIND MORE (Dan, 2026-09-11,
   BL-534). A phone shows All, NFL, NCAAF and MLB; every other sport is
   tagged sport-extra-m in the markup and waits behind More. Desktop keeps
   every chip, less any the page tags sport-extra (the Line Shop's
   trimSportChips() does that for out-of-season sports). Both rules are
   classes, not inline styles, so the phone paints the short row from the
   first frame, and the chip that is ACTIVE always shows, whichever sport it
   is. A page with nothing behind More leaves the chip out. */
.sport-more-btn { display: none; }
.filter-group.has-extra .sport-more-btn { display: inline-block; }
.filter-group:not(.sports-open) .filter-btn.sport-extra:not(.active) { display: none; }
@media (max-width: 600px) {
  .sport-more-btn { display: inline-block; }
  .filter-group:not(.sports-open) .filter-btn.sport-extra-m:not(.active) { display: none; }
}
/* The app's planner (BL-564): a sport with no board gets no chip at all,
   and More goes away when nothing is waiting behind it. */
html.is-native-app .filter-btn.sport-none:not(.active) { display: none !important; }
html.is-native-app .filter-group.app-no-extra .sport-more-btn { display: none; }

/* ── Day pills ── */
.day-filter-wrap {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 24px 0; scrollbar-width: none;
  background: var(--bg2);
  position: sticky; top: 113px; z-index: 998; isolation: isolate;
}
.day-filter-wrap::-webkit-scrollbar { display: none; }
.day-pill {
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--muted); padding: 6px 14px; border-radius: 20px;
  font-size: 13px; cursor: pointer; transition: all 0.15s;
  white-space: nowrap; flex-shrink: 0;
}
.day-pill:hover { border-color: var(--gold); color: var(--text); }
.day-pill.active { background: var(--gold); border-color: var(--gold); color: #000; font-weight: 600; }
/* "More dates ▼" pill that opens a multi-select dropdown for any future
   date past tomorrow. Replaces the long horizontal scroll of date pills. */
.day-more-wrap { position: relative; display: inline-block; }
.day-more-pill {
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--muted); padding: 6px 14px; border-radius: 20px;
  font-size: 13px; cursor: pointer; transition: all 0.15s;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.day-more-pill:hover { border-color: var(--gold); color: var(--text); }
.day-more-pill.has-filter { background: var(--gold); border-color: var(--gold); color: #000; font-weight: 600; }
.day-more-pill .arrow { font-size: 10px; }
/* position:fixed so the dropdown escapes .day-filter-wrap's overflow-x
   clipping. Coordinates are set at click time from the button's
   getBoundingClientRect(), see each page's day-pill builder. */
.day-more-dropdown {
  display: none; position: fixed; top: 0; left: 0;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 0; min-width: 220px;
  z-index: 9999; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  max-height: 340px; overflow-y: auto;
}
.day-more-dropdown.open { display: block; }
.day-more-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; cursor: pointer; font-size: 13px;
  color: var(--text); transition: background 0.1s;
}
.day-more-item:hover { background: var(--bg3); }
.day-more-item input[type="checkbox"] {
  accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0;
}
.day-more-actions {
  display: flex; gap: 8px; padding: 8px 16px 4px;
  border-top: 1px solid var(--border); margin-top: 4px;
}
.day-more-actions button {
  background: none; border: none; color: var(--gold); font-size: 12px;
  cursor: pointer; padding: 2px 0; font-weight: 600;
}
.day-more-actions button:hover { text-decoration: underline; }

/* ════════════ PHONE ════════════ */
@media (max-width: 600px) {
  .search-wrap { max-width: 100%; min-width: 0; }
  .filter-btn { flex-shrink: 0; font-size: 12px; padding: 5px 10px; }
  /* The SPORT row is one line (BL-575). With More closed it is All, NFL,
     NCAAF, MLB, More, which fits; a sport picked from behind More joins it,
     and then the row scrolls sideways rather than taking a second line.
     Opening More still wraps, so every sport is in view. */
  .toolbar > .filter-group:not(.filter-group-books):not(.filter-group-presets):not(.sports-open) {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .toolbar > .filter-group:not(.filter-group-books):not(.filter-group-presets)::-webkit-scrollbar { display: none; }
  /* THE BOOKS ROW IS ONE LINE (Dan, 2026-09-14, BL-579; he asked twice).
     Line Shop: Books, +EV, LIVE, Presets. Props: Books, +EV, Presets.
     Futures: Saved, Books, Presets. The BOOKS: label is dropped here because
     the row is no longer only books, and the row scrolls sideways before it
     would ever wrap. The scrolling row cannot clip the Books menu: on a
     phone every open .book-dropdown is a bottom sheet (site-chrome.css,
     "Mobile book-filter dropdown -> fixed sheet", 2026-07-07). */
  .toolbar > .filter-group.filter-group-books {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: 5px;
  }
  .toolbar > .filter-group.filter-group-books::-webkit-scrollbar { display: none; }
  .toolbar > .filter-group.filter-group-books > .filter-label { display: none; }
  .toolbar > .filter-group.filter-group-books .filter-btn,
  .toolbar > .filter-group.filter-group-books .book-filter-btn { padding: 5px 9px; white-space: nowrap; flex-shrink: 0; }
  .toolbar > .filter-group.filter-group-books .filter-group-presets { flex-shrink: 0; flex-wrap: nowrap; padding: 0; margin: 0; }
  .toolbar > .filter-group.filter-group-books .book-dropdown { position: fixed; }
}

/* THE BOARDS' CHIPS AT THE LINE SHOP'S HEIGHT ON A PHONE (prompt 87, Dan
   2026-10-02: "make every filter on Props the same size and shape as the
   Line Shop's chips ... do the same on Futures"). site-chrome.css gives every
   chip outside the Line Shop a 40px minimum height for taps
   (body:not(.og-ls)), so on Props and Futures the same chips measured 40px
   against the Line Shop's 27px. Said once here, in the file all three boards
   share, rather than copied into two pages. The Line Shop is untouched:
   body:not(.og-ls) never matches it. Three classes, so this outranks that
   rule in any order. The trade-off is the Line Shop's own: a 27px chip. */
@media (max-width: 600px) {
  body:not(.og-ls) .toolbar .filter-btn,
  body:not(.og-ls) .toolbar .sport-more-btn,
  body:not(.og-ls) .toolbar .book-filter-btn,
  body:not(.og-ls) .day-filter-wrap .day-pill,
  body:not(.og-ls) .day-filter-wrap .day-more-pill { min-height: 0; }
}