/* The Book Picker and the My Books button (prompt 348, BL-1706).
   Loaded on every page by templates/_pwa_head.html with static/book-picker.js.
   Colors are the site's palette variables, so both themes follow; the few
   fixed shades carry their light overrides in theme-light.css (the
   "golive348: Book Picker" block). */

/* ── My Books in the settings row (templates/_nav.html) ───────────────── */
.tog-mybooks-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 26px; padding: 0 10px; margin: 0; flex: 0 0 auto;
  border: 1px solid var(--gold, #B69862); border-radius: 999px; background: transparent;
  color: var(--gold-lt, #DDBC84); cursor: pointer; white-space: nowrap;
  font: 700 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.tog-mybooks-btn:hover { background: rgba(182, 152, 98, .12); }
.tog-mybooks-btn:focus-visible { outline: 2px solid var(--gold, #B69862); outline-offset: 2px; }

/* Desktop and tablet rail: above the AM / DEC / ¢ row, left-aligned with the
   nav text like the other controls and as wide as the AM / DEC / ¢ pill
   under it (128 px measured at 1280; its mount reserves 153 including the
   14 px inset). Dan, Nov 4: the mockup's hung under the theme toggle,
   clipped. */
@media (min-width: 601px) {
  nav.tab-nav .tog-mybooks-btn {
    align-self: flex-start; width: 128px; height: 28px; margin: 12px 0 0 14px !important;
    font-size: 12px; padding: 0 6px;
  }
  nav.tab-nav .tog-mybooks-btn + .odds-toggle-mount { margin-top: 0 !important; padding-top: 8px !important; }
}

/* Phone and the app: in the settings row, which stays ONE line at 375 px.
   Measured at 375 (tests/_dry_test_book_picker.py): theme 65, My Books 84,
   odds 112, state 94, with 4 px gaps. The odds pill and the state pill
   give up a few pixels of padding at this width only. */
@media (max-width: 600px) {
  nav.tab-nav:has(.tog-mybooks-btn) { flex-wrap: nowrap !important; gap: 4px; }
  nav.tab-nav .tog-mybooks-btn {
    order: 1; height: 24px; padding: 0 7px; font-size: 11px; margin-right: auto !important;
  }
  nav.tab-nav:has(.tog-mybooks-btn) .theme-toggle-mount { order: 0; min-width: 0; }
  nav.tab-nav:has(.tog-mybooks-btn) .odds-toggle-mount { order: 2; min-width: 0; margin-left: 0 !important; }
  nav.tab-nav:has(.tog-mybooks-btn) .state-filter-mount { order: 3; min-width: 0; }
}
@media (max-width: 400px) {
  nav.tab-nav:has(.tog-mybooks-btn) { padding-left: 6px !important; padding-right: 6px !important; }
  nav.tab-nav:has(.tog-mybooks-btn) .odds-toggle-mount button { padding-left: 8px !important; padding-right: 8px !important; }
  nav.tab-nav:has(.tog-mybooks-btn) .tog-state-btn { padding-left: 7px !important; padding-right: 6px !important; white-space: nowrap; }
}

/* ── The count line under the sport row (prompt 348) ──────────────────────
   Where a board's Books dropdown and Presets were: +EV and LIVE (when the
   page has them), My Books, and the count, on their own row under the sport
   row. One line on a 375 px phone, never scrolling sideways (CLAUDE.md, the
   filter-bar rule); the count wraps under it only if a page's labels ever
   outgrow the line. */
.tog-countline {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  flex: 1 1 100%; width: 100%; min-width: 0;
}
.tog-countline .game-count, .tog-countline .tog-count { margin-left: auto !important; white-space: nowrap; }
.tog-countline .filter-btn { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 600px) {
  .tog-countline { gap: 5px; }
  .tog-countline .filter-btn { padding: 5px 9px; }
}

/* ── The My Books row that replaces a page's book dropdown ────────────── */
.tog-mybooks-row {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer;
  color: var(--gold-lt, #DDBC84) !important; border-color: var(--gold, #B69862) !important;
  font-weight: 700;
}
.tog-mybooks-row::after { content: "\203A"; font-size: 15px; line-height: 1; margin-left: 2px; }

/* ── The Book Picker ──────────────────────────────────────────────────── */
html.tog-bp-open, body.tog-bp-open { overflow: hidden; }
.tog-bp {
  position: fixed; inset: 0; z-index: 2147483000; background: rgba(0, 0, 0, .6);
  display: flex; align-items: stretch; justify-content: center;
}
.tog-bp-panel {
  background: var(--bg, #0A0A0A); color: var(--text, #EEE); width: 100%;
  display: flex; flex-direction: column; min-height: 0;
  padding-top: env(safe-area-inset-top, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (min-width: 760px) {
  .tog-bp { align-items: center; padding: 32px; }
  .tog-bp-panel { width: 720px; max-height: calc(100vh - 64px); border: 1px solid var(--border, #2A2A2A);
    border-radius: 16px; overflow: hidden; padding-top: 0; }
}
.tog-bp-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 6px; }
.tog-bp-head h2 { margin: 0; font-size: 19px; font-weight: 800; outline: none; }
.tog-bp-count { color: var(--gold-lt, #DDBC84); font-weight: 700; font-size: 13px; }
.tog-bp-x { margin-left: auto; background: none; border: 0; color: var(--muted, #888); font-size: 26px; line-height: 1;
  cursor: pointer; padding: 0 4px; min-width: 40px; min-height: 40px; }
.tog-bp-empty { margin: 2px 16px 6px; font-size: 13.5px; line-height: 1.4; color: var(--muted, #888); }
.tog-bp-presets { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 8px; }
.tog-bp-presets .filter-btn { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--bg3, #1A1A1A); border: 1px solid var(--border, #2A2A2A); color: var(--text, #EEE); cursor: pointer; }
.tog-bp-presets .filter-btn.active { background: var(--gold, #B69862); border-color: var(--gold, #B69862); color: var(--on-gold, #000); }
.tog-bp-body { flex: 1 1 auto; overflow-y: auto; padding: 0 16px 12px; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.tog-bp-grp h3 { font-size: 11.5px; color: var(--muted, #888); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; margin: 14px 0 6px; }
.tog-bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tog-bp-bk { display: flex; align-items: center; gap: 9px; background: var(--bg2, #111); border: 1px solid var(--border, #2A2A2A);
  border-radius: 10px; padding: 9px 10px; font-size: 13.5px; font-weight: 700; cursor: pointer; min-height: 46px; }
.tog-bp-bk.on { border-color: var(--gold, #B69862); }
.tog-bp-bk img { width: 26px; height: 26px; border-radius: 6px; flex: 0 0 auto; }
.tog-bp-name { flex: 1 1 auto; min-width: 0; }
.tog-bp-bk input { margin-left: auto; width: 18px; height: 18px; accent-color: var(--gold, #B69862); flex: 0 0 auto; }
.tog-bp-bk.off { opacity: .42; cursor: default; }
.tog-bp-note { font-size: 12px; color: var(--muted, #888); margin: 6px 0 0; line-height: 1.4; }
.tog-bp-msg { margin: 0 16px; font-size: 13px; color: var(--gold-lt, #DDBC84); min-height: 0; }
.tog-bp-msg:empty { display: none; }
.tog-bp-foot { display: flex; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border, #2A2A2A); }
.tog-bp-foot button { flex: 1; border-radius: 10px; padding: 12px; font-weight: 800; font-size: 15px; cursor: pointer;
  border: 1px solid var(--border, #2A2A2A); background: none; color: var(--text, #EEE); }
.tog-bp-foot .tog-bp-save { flex: 2; background: var(--gold, #B69862); border-color: var(--gold, #B69862); color: var(--on-gold, #000); }

/* The /book-picker page: the same panel, in the page. */
.tog-bp.tog-bp-inline { position: static; inset: auto; background: none; display: block; padding: 0; z-index: auto; }
.tog-bp-inline .tog-bp-panel { width: auto; max-height: none; border: 1px solid var(--border, #2A2A2A); border-radius: 14px;
  overflow: visible; padding-top: 0; }
.tog-bp-inline .tog-bp-body { overflow: visible; }