/* static/css/props_market.css -- the Props tab as the props market board (plan 2).
   Spec docs/superpowers/specs/2026-10-01-props-market-board-design.md section 3.
   Linked after main.css, slate.css, bet_slip.css and chat.css (templates/index.html).

   16px floor: every font-size is a --text-* token (16/17/18/22, main.css). No row tints, no
   side colours: .pm-side is one neutral chip for Over and Under alike, and .pm-ev--pos is the
   only colour on the board. Nothing here is shown or hidden with the `hidden` attribute (the
   phone sheet is a class), so no rule needs a [hidden] pair. Desktop first; at 1279px and
   below (the seven columns need about 960px beside the sidebar) the row folds to the
   phone's two lines. */

.pm { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 16px 24px 32px; box-sizing: border-box;
  color: var(--text-primary); }
.pm-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.pm-title { margin: 0; font-size: var(--text-lg); font-weight: 700; }
.pm-sub, .pm-rules, .pm-notice { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.pm-notice { color: var(--text-secondary); }
.pm-rules:empty, .pm-notice:empty, .pm-count:empty, .pm-fresh:empty { display: none; }

.pm-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; scrollbar-width: none; }
.pm-chip { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 1px solid var(--border-strong);
  border-radius: 999px; background: var(--bg-surface); color: var(--text-secondary); font: inherit;
  font-size: var(--text-xs); cursor: pointer; }
.pm-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--bg-elevated); color: var(--text-primary); }
.pm-chip-lock { margin-left: 2px; }

.pm-toolbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 8px 0; background: var(--bg-base); }
.pm-fresh { margin: 0; font-size: var(--text-xs); color: var(--text-dim); }
.pm-filters-btn { display: none; min-height: 44px; padding: 0 16px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--bg-surface); color: var(--text-primary); font: inherit;
  font-size: var(--text-xs); cursor: pointer; }
.pm-count { margin-left: 8px; padding: 0 8px; border-radius: 999px; background: var(--bg-active); }

.pm-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 8px 0; }
.pm-f { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); color: var(--text-muted); }
.pm-f select { max-width: 360px; }
.pm-f select, .pm-f input { min-height: 44px; padding: 0 10px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--bg-surface); color: var(--text-primary); font: inherit;
  font-size: var(--text-xs); box-sizing: border-box; }
.pm-f-q input { width: 220px; }
.pm-f-n input { width: 96px; }
.pm-reset, .pm-done, .pm-more, .pm-lock-cta { min-height: 44px; padding: 0 16px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--bg-surface); color: var(--text-primary); font: inherit;
  font-size: var(--text-xs); cursor: pointer; }
.pm-done { display: none; }
.pm-more { display: block; margin: 16px auto; }

.pm-status { margin: 8px 0; font-size: var(--text-sm); color: var(--text-muted); }

/* At 1280px (the narrowest desktop: 200px sidebar, the page and .pm padding, a 15px scrollbar) a
   row has 954px: 256px for Place on <Book>, and 120 + 80 + 112 + 112 + 136 + 64, five 8px gaps and
   24px of padding (688px) for the rest. The side column fits "O 224.5" on one line. */
.pm-headrow, .pm-row { display: grid; grid-template-columns: minmax(0, 1fr) 256px; align-items: center; }
.pm-hcells, .pm-toggle { display: grid; column-gap: 8px; align-items: center;
  grid-template-columns: minmax(120px, 1fr) 80px 112px 112px 136px 64px; }
.pm-headrow { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-dim); }
.pm-hcells { padding: 0 12px; }
.pm-list { margin: 0; padding: 0; list-style: none; }
.pm-row { border-bottom: 1px solid var(--border-subtle); }
.pm-toggle { width: 100%; min-height: 56px; padding: 8px 12px; border: 0; background: none; color: inherit;
  font: inherit; font-size: var(--text-xs); text-align: left; cursor: pointer; }
.pm-toggle:hover, .pm-toggle:focus-visible { background: var(--bg-hover); }
.pm-c-prop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.pm-name { font-weight: 600; color: var(--text-primary); }
.pm-meta, .pm-bk { color: var(--text-dim); }
.pm-bk { margin-left: 8px; }
.pm-tag { padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-muted); }
.pm-side { display: inline-block; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--bg-surface); color: var(--text-secondary); white-space: nowrap; }
.pm-price, .pm-fair, .pm-ev { font-variant-numeric: tabular-nums; }
.pm-sub2 { display: block; color: var(--text-dim); }
.pm-reason, .pm-check, .pm-at, .pm-lock, .pm-bestat { color: var(--text-muted); }
.pm-ev { font-weight: 700; }
.pm-ev--pos { color: var(--ev-pos); }
.pm-ev--grey { color: var(--text-dim); font-weight: 400; }
.pm-c-place { padding: 8px 12px; }
/* The row's own Place button: bet_slip.css's primary, compact (16px, a 24px logo, no arrow). The
   name may wrap to two lines ("Place on DraftKings" is 149px, its box 129px beside "+1200"; the
   state prompt "Choose your state for BetMGM" is 233px): shorten the line, never the type. The
   price never wraps (bet_slip.css). */
.pm-c-place .pm-place--row, .pmc-place .pm-place--row { min-height: 44px; gap: 8px; padding: 4px 10px 4px 6px;
  font-size: var(--text-xs); line-height: 1.2; white-space: normal; }
.pm-c-place .pm-place--row .bet-slip-logo, .pmc-place .pm-place--row .bet-slip-logo { width: 24px; height: 24px; }
.pm-c-place .pm-place--row .bet-slip-price, .pmc-place .pm-place--row .bet-slip-price { font-size: var(--text-xs); }
.pm-c-place .pm-place--row .bet-slip-arrow, .pmc-place .pm-place--row .bet-slip-arrow { display: none; }
/* The amber strip runs edge to edge: its negative margins undo THIS button's padding (bet_slip.css
   assumes the 20px primary's). Three classes beat bet_slip.css's 374px rule. */
.pm-c-place .pm-place--row .bet-slip-offnote, .pmc-place .pm-place--row .bet-slip-offnote { margin: 6px -10px -4px -6px; }
.pm-ph { display: none; }

.pm-x { grid-column: 1 / -1; padding: 8px 12px 16px; background: var(--bg-surface); }
.pm-books { width: 100%; max-width: 640px; table-layout: fixed; border-collapse: collapse; font-size: var(--text-xs); }
/* main.css styles every th (uppercase, letter-spaced, nowrap): undone here so four columns fit a
   phone. break-word, not anywhere: a long book name may break, but "Under", "+5.1%" and "-110" never
   split (anywhere let the fixed columns shrink below them: "Unde|r", "+5.1|%" at 375px). */
.pm-books th, .pm-books td { padding: 8px 6px; border-bottom: 1px solid var(--border-subtle); background: none;
  text-align: left; text-transform: none; letter-spacing: normal; white-space: normal; font-size: var(--text-xs);
  font-weight: 400; vertical-align: top; overflow-wrap: break-word; }
.pm-books thead th { color: var(--text-dim); }
.pm-books thead th:first-child { width: 38%; }
.pm-books th[scope="row"] { color: var(--text-primary); }
.pm-books td:last-child { white-space: nowrap; }
.pm-bev { display: block; white-space: nowrap; }
.pm-note { color: var(--text-dim); }
.pm-ol { margin: 16px 0 4px; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
.pm-why, .pm-hold, .pm-rule { margin: 8px 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.pm-lock-cta { margin-top: 12px; }

@media (max-width: 1279px) {
  .pm { padding: 12px 16px 24px; }
  .pm-headrow { display: none; }
  .pm-row { grid-template-columns: minmax(0, 1fr); }
  .pm-toggle { display: block; min-height: 64px; }
  .pm-c { display: none; }
  /* Place on <Book> under every prop, no tap needed (Bill, 2026-10-04, layout A). Two classes beat
     .pm-c's one; the cell is a sibling of the row's toggle button, so the link is never inside it. */
  .pm-row .pm-c-place { display: block; padding: 0 12px 12px; }
  /* Free rows: no "Best at <Book>" strip when folded, line 2 already names the best book and price
     (Bill, 2026-10-04); desktop keeps it in its column. An empty cell (started game, no price) hides too. */
  .pm-row .pm-c-place--locked { display: none; }
  .pm-row .pm-c-place:empty { display: none; }
  .pm-c-place .pm-place--row { width: 100%; justify-content: center; }
  .pm-ph { display: flex; flex-direction: column; gap: 4px; }
  .pm-ph1 { display: flex; justify-content: space-between; gap: 12px; }
  .pm-ph-what { min-width: 0; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  .pm-ph-ev { flex: none; white-space: nowrap; }
  .pm-ph2 { color: var(--text-dim); }
  .pm-filters-btn { display: inline-flex; align-items: center; }
  .pm-filters { display: none; }
  /* Above the floating buttons (chat.css's Ask FAB is 95), below the top and bottom navs (100). */
  /* nowrap: a wrapping column under a max-height grows a second column instead of scrolling. */
  .pm-filters.pm-filters--open { position: fixed; left: 0; right: 0; bottom: 0; z-index: 96; display: flex;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; margin: 0; max-height: 70vh; overflow-y: auto;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-strong);
    border-radius: 16px 16px 0 0; background: var(--bg-elevated); }
  .pm-f select, .pm-f input, .pm-f-q input, .pm-f-n input { width: 100%; max-width: none; }
  .pm-done { display: block; }
}

@media (max-width: 1024px) {
  /* main.css's one scroll region: at 1024px and below the PAGE scrolls, not the pane (#view-props
     is released there), so the board does not scroll itself and the pinned freshness line sits
     under the fixed 56px top nav rather than behind it. */
  .pm { flex: 0 1 auto; overflow-y: visible; }
  .pm-toolbar { top: 56px; }
}

@media (max-width: 799px) {
  /* main.css shows the fixed bottom nav (64px + a 1px border + the safe area) at 799px and below
     (its 639px block and its 640-799px block): the sheet sits on top of it, not under it. */
  .pm-filters.pm-filters--open { bottom: calc(65px + env(safe-area-inset-bottom)); }
}

@media (max-width: 639px) {
  /* .main-content keeps a 24px gutter, so the board adds none of its own: at 375px the book list
     gets 311px, not 271px. The list sizes its columns by their content there. */
  .pm { padding: 12px 0 24px; }
  .pm-x { padding: 8px 8px 16px; }
  .pm-books { table-layout: auto; }
  .pm-books thead th:first-child { width: auto; }
}

@media (max-width: 374px) {
  /* A 320px phone gives the book list 256px: tighter cells, and "48 min" may take two lines. */
  .pm-books th, .pm-books td { padding: 8px 4px; }
  .pm-books td:last-child { white-space: normal; }
}

/* ---- plan 3: the pointer to today's free game in another sport (props_market.js freePointer) ---- */
.pm-free { margin: 0; }
.pm-free:empty { display: none; }
.pm-free-btn { min-height: 44px; padding: 8px 16px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: var(--text-xs); text-align: left;
  cursor: pointer; }

/* ---- plan 3: the game card's props section (static/js/props_market_card.js) ----------------------
   Inside the slate takeover's .slate-sec card, which is narrower than the tab: every side is drawn as
   the phone's parts at every width -- a neutral chip, "DK -105 · Fair -118 · 7 books" and the EV on one
   row on desktop, two rows on a phone. Same 16px floor (every size a --text-* token), same one colour
   (the EV). Nothing here is shown or hidden with the `hidden` attribute: a closed group is not drawn. */
.pmc { display: flex; flex-direction: column; gap: 8px; }
.pmc-top, .pmc-rules, .pmc-status, .pmc-fresh { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.pmc-fresh { color: var(--text-dim); }
.pmc-btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: var(--text-xs); text-align: left;
  cursor: pointer; }
.pmc-players, .pmc-sides { margin: 0; padding: 0; list-style: none; }
.pmc-player { border-bottom: 1px solid var(--border-subtle); }
.pmc-player-btn { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%;
  min-height: 48px; padding: 8px 4px; border: 0; background: none; color: inherit; font: inherit;
  font-size: var(--text-xs); text-align: left; cursor: pointer; }
.pmc-player-btn:hover, .pmc-player-btn:focus-visible, .pmc-side:hover, .pmc-side:focus-visible { background: var(--bg-hover); }
.pmc-player-name { font-weight: 600; color: var(--text-primary); min-width: 0; }
.pmc-player-n { flex: none; color: var(--text-dim); white-space: nowrap; }
.pmc-props { padding: 0 0 8px; }
.pmc-market { margin: 8px 0 4px; padding: 0 4px; font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
.pmc-side { display: grid; grid-template-areas: "chip line ev"; grid-template-columns: 80px minmax(0, 1fr) auto;
  align-items: center; column-gap: 12px; row-gap: 4px; width: 100%; min-height: 48px; padding: 6px 4px; border: 0;
  background: none; color: inherit; font: inherit; font-size: var(--text-xs); text-align: left; cursor: pointer; }
.pmc-side .pm-side { grid-area: chip; justify-self: start; }
.pmc-line { grid-area: line; min-width: 0; color: var(--text-dim); }
.pmc-ev { grid-area: ev; white-space: nowrap; text-align: right; }
/* The card has no Place column: every side's Place line sits under it, full width up to 420px. */
.pmc .pm-x { padding: 8px 4px 16px; }
.pmc-place { padding: 0 4px 10px; font-size: var(--text-xs); }
.pmc-place .pm-place--row { width: 100%; max-width: 420px; justify-content: center; }
.pmc-open { align-self: flex-start; margin-top: 8px; }

@media (max-width: 639px) {
  .pmc-side { grid-template-areas: "chip ev" "line line"; grid-template-columns: auto minmax(0, 1fr); }
  .pmc-place .pm-place--row { max-width: none; }
  .pmc-open { align-self: stretch; text-align: center; }
}