/* Bet at your book (spec docs/superpowers/specs/2026-09-29-bet-at-book-design.md).
   Loaded on /slate (after slate.css), /me and /me/log-bet. Type floor 16px.
   Borders are a literal 28% white, not --slate-border-soft (4% on /slate, invisible).
   .bet-sheet sets no `display` on the closed dialog: the UA's
   dialog:not([open]) { display: none } must win. */
/* The state prompt ("Choose your state for <Book>") and the Confirm chip on
   /me keep the neutral outline. Neutral ink, not green: on the board and Best
   Bets green means a GRADED call (slate.css, Bill 2026-09-22), and these sit
   on every card, graded or not. The border, ink and hover are
   .slate-takeover-action's (slate.css); /me loads no slate.css, so there the
   fallbacks keep the border visible. */
.bet-slip {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--slate-border, rgba(255, 255, 255, 0.28)); border-radius: 8px;
  background: transparent; color: var(--slate-text-2, var(--text-muted, #d4d4d8));
  font: inherit; font-size: var(--text-xs, 16px); font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.bet-slip:hover { border-color: var(--slate-text-2, var(--text-muted, #d4d4d8)); color: var(--slate-text, var(--text-primary, #f4f4f5)); }
.bet-slip:focus-visible { outline: 2px solid var(--slate-green, #22c55e); outline-offset: 2px; }
.bet-slip--state { border-style: dashed; }

/* Place on <Book> (Bill, 2026-09-30): the book's logo, then "Place on
   FanDuel", its price and an arrow, in large type on a BRIGHT light fill. Not
   the book's colour: DraftKings' is green, and green means a graded call; the
   logo carries the brand. A block-level flex row, so it fills its container
   (a Best Bets card, the takeover header's row, the log-bet form). The name
   may wrap to a second line on a 320px phone; the price and the arrow never
   do. justify-content and text-align undo .slate-takeover-action's centring
   (slate.css, 639px block), which the header's primary also carries. */
.bet-slip--place {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  box-sizing: border-box; min-height: 56px; padding: 8px 14px 8px 10px;
  border: 1px solid #f4f6f5; border-radius: 10px;
  background: #f4f6f5; color: #0b0f0d;
  font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.2;
  text-align: left; text-decoration: none; white-space: normal; cursor: pointer;
}
.bet-slip--place:hover { background: #d5dbd8; border-color: #d5dbd8; color: #0b0f0d; }
.bet-slip--place:focus-visible { outline: 3px solid #f4f6f5; outline-offset: 3px; }
.bet-slip-logo { display: block; flex: none; border-radius: 7px; }
.bet-slip--place .bet-slip-logo { width: 36px; height: 36px; }
/* overflow-wrap: a long name next to a long price ("+1200") breaks inside the
   name's own box rather than running under the price. */
.bet-slip--place .bet-slip-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.bet-slip-odds { display: inline-flex; align-items: center; gap: 6px; flex: none; }
/* The primary stacks the "best" tag under its price: no width is spent on it. */
.bet-slip--place .bet-slip-odds { flex-direction: column; align-items: flex-end; gap: 2px; }
.bet-slip--place .bet-slip-price {
  font-family: var(--slate-mono, var(--font-mono, ui-monospace, monospace));
  font-size: 20px; font-weight: 700; line-height: 1.1; white-space: nowrap;
}
.bet-slip-arrow { flex: none; }
/* Under 375px (a 320px phone gives the button ~244px) "DraftKings" at 20px ran
   into its price. The type stays 20px; the logo drops to 32px, the gaps
   tighten and the decorative arrow goes (the label says what a tap does). */
@media (max-width: 374px) {
  .bet-slip--place { gap: 8px; padding: 8px 10px 8px 8px; }
  .bet-slip--place .bet-slip-logo { width: 32px; height: 32px; }
  .bet-slip--place .bet-slip-arrow { display: none; }
}
/* Your book at another number (Bill, 2026-10-02, spec
   2026-10-02-place-on-book-off-number s2): the same bright button with an
   amber border -- the slate's caution colour (--accent-amber, main.css), never
   green -- the book's own number over its price, and a strip across the
   bottom naming our bet. Two classes, so the border and gaps win over the
   one-class .bet-slip--place rules above at every width. */
.bet-slip--place.bet-slip--off { flex-wrap: wrap; row-gap: 0; border: 2px solid #f59e0b; overflow: hidden; }
.bet-slip--place.bet-slip--off:hover { border-color: #f59e0b; }
/* With flex-wrap the name's content-width basis decided the line break, and the
   price and arrow wrapped onto their own rows on a phone. A zero basis keeps
   logo, name, price and arrow on one row; the name takes what is left and
   wraps inside its own box, and only the strip goes to the second row. */
.bet-slip--place.bet-slip--off .bet-slip-name { flex-basis: 0; }
.bet-slip--off .bet-slip-line {
  font-family: var(--slate-mono, var(--font-mono, ui-monospace, monospace));
  font-size: 16px; font-weight: 700; line-height: 1.1; white-space: nowrap;
}
/* Edge to edge: the negative margins undo the button's padding (8px 14px 8px
   10px; 8px 10px 8px 8px under 375px). Dark amber on pale amber, about 8:1. */
.bet-slip-offnote {
  display: block; flex: 1 1 100%; box-sizing: border-box;
  margin: 8px -14px -8px -10px; padding: 6px 12px;
  border-top: 1px solid #f59e0b; background: #fdf0d5; color: #6b3f00;
  font-size: 16px; font-weight: 600; line-height: 1.3; white-space: normal;
}
@media (max-width: 374px) {
  .bet-slip-offnote { margin: 8px -10px -8px -8px; }
}
/* The best price among the books shown: a small outlined tag in the ink of
   whatever it sits in (dark on the primary, light on a tile). Never green. */
.bet-slip-best {
  padding: 0 5px; border: 1px solid currentColor; border-radius: 4px;
  font-size: 16px; font-weight: 600; line-height: 1.2;
}

/* The other books (Bill, 2026-09-30, on a phone): an "Other books" heading
   line, then ONE row of equal tiles at every width from 320px, a grid column
   per book (data-n, 1-3), best price first. Each tile stacks the logo, the
   name and the price, centred. The wrapping chips this replaces stacked
   raggedly, about 180px tall at 375px. */
.bet-slip-others { box-sizing: border-box; max-width: 100%; margin-top: 8px; }
.bet-slip-others-l {
  margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.2;
  color: var(--slate-text-2, var(--text-muted, #d4d4d8));
}
.bet-slip-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bet-slip-tiles[data-n="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.bet-slip-tiles[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bet-slip-tiles[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The whole tile is the tap target. One solid border for every tile, the one
   that needs the user's state included: dashed read as disabled. The tile is
   also a size container, so its own width decides DraftKings's short label. */
.bet-slip--tile {
  container-type: inline-size;
  flex-direction: column; justify-content: center; align-items: center; gap: 2px;
  box-sizing: border-box; min-width: 0; min-height: 64px; padding: 6px 2px;
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.06);
  color: var(--slate-text, var(--text-primary, #f4f4f5));
  font-size: 16px; font-weight: 600; line-height: 1.15; text-align: center; white-space: normal;
}
.bet-slip--tile:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.12); color: var(--slate-text, var(--text-primary, #f4f4f5)); }
.bet-slip--tile .bet-slip-logo { width: 24px; height: 24px; }
.bet-slip--tile .bet-slip-name { max-width: 100%; overflow-wrap: anywhere; }
/* "best" sits beside the price, and drops under it when the tile is narrow. */
.bet-slip--tile .bet-slip-odds { flex-wrap: wrap; justify-content: center; gap: 2px 4px; }
.bet-slip--tile .bet-slip-price {
  font-family: var(--slate-mono, var(--font-mono, ui-monospace, monospace));
  font-size: 16px; font-weight: 700;
}
/* "DraftKings" (about 83px at 16px) does not fit a third of a 320px phone;
   there, and only there, the tile reads "DK" under the logo. */
.bet-slip-name-short { display: none; }
@container (max-width: 84px) {
  .bet-slip-name-full { display: none; }
  .bet-slip-name-short { display: inline; }
}

/* The takeover header. The state prompt is one of the action buttons, so it
   takes their type, radius and padding (.slate-takeover-action, slate.css),
   which this file would otherwise override by loading after slate.css. 44px
   tall like the neighbours at <=639px, counted border-box as the <button>s
   among them are; a flex row stretches the neighbours to it above that. Its
   text may wrap: "Choose your state for BetMGM" is wider than a 320px phone. */
.slate-takeover-actions > .bet-slip--state {
  box-sizing: border-box; font-family: var(--slate-mono); font-weight: 700;
  border-radius: 5px; padding: 7px 13px; white-space: normal; text-align: center;
}
/* The primary and the other books each take a full row after + Add to
   parlay, so the actions wrap at every width. */
.slate-takeover-actions:has(> .bet-slip) { flex-wrap: wrap; max-width: 100%; }
.slate-takeover-actions > .bet-slip--place,
.slate-takeover-actions > .bet-slip-others { flex: 1 1 100%; }
.slate-takeover-actions > .bet-slip-others { margin-top: 0; }
/* Above the phones the actions sit beside the title, and a flex item's basis
   is its content laid out on ONE line: with the full-row button and chips in
   it, that squeezed the title to one word per line (115px at 1440, measured
   on the /slate page). 640-1199px: the header wraps instead -- Back and the
   title share the first row, the actions take a full row under them -- and
   the button stops at 560px so its price stays near its name, and the tiles
   row under it stops there too. 1200px and up:
   the actions keep their place at the right, as a 480px column. */
@media (min-width: 640px) and (max-width: 1199px) {
  .slate-takeover-h:has(> .slate-takeover-actions > .bet-slip) { flex-wrap: wrap; }
  .slate-takeover-actions:has(> .bet-slip) { flex: 1 1 100%; }
  .slate-takeover-actions > .bet-slip--place { max-width: 560px; }
  .slate-takeover-actions > .bet-slip-others { max-width: 560px; }
}
@media (min-width: 1200px) {
  .slate-takeover-actions:has(> .bet-slip) { flex: 0 1 480px; min-width: 0; }
}
/* Phones. 540-639px: the actions row wraps instead of pushing the header
   wide. <=539px: the actions are a two-column grid (slate.css); the state
   prompt, the primary and the other books each take a full-width row under
   Log bet and + Add to parlay, like Share above them. */
@media (max-width: 639px) {
  .slate-takeover-actions { flex-wrap: wrap; max-width: 100%; }
  .slate-takeover-actions > .bet-slip--state { padding: 5px 9px; }
}
@media (max-width: 539px) {
  .slate-takeover-actions > .bet-slip--state { grid-column: 1 / -1; padding: 8px 6px; }
  .slate-takeover-actions > .bet-slip--place,
  .slate-takeover-actions > .bet-slip-others { grid-column: 1 / -1; }
}

/* Best Bets: under the card, never inside its <a>. */
.bb-slip { margin: 6px 0 4px 8px; }
.bb-slip.bet-slip--place { margin: 8px 0 0; }
.best-bets .bet-slip-others { margin: 8px 0 4px; }
/* The Confirm chip on /me and /me/log-bet is a grid item: keep it chip-sized. */
.recent-confirm { justify-self: start; }
/* /me/log-bet: "Log & place on <Book>" under the form's submit. */
#bet-form > .bet-slip--place { margin-top: 12px; }

.bet-sheet {
  width: min(420px, calc(100vw - 32px)); padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 12px;
  background: var(--bg-elevated, #18181b); color: var(--text-primary, #f4f4f5);
  font-size: var(--text-sm, 17px);
}
.bet-sheet::backdrop { background: rgba(0, 0, 0, 0.6); }
.bet-sheet-q { margin: 0 0 14px; }
.bet-sheet-field { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 10px; }
.bet-sheet-field input, .bet-sheet-field select {
  width: 9em; min-height: 44px; padding: 0 10px; font: inherit; font-size: var(--text-base, 18px);
}
.bet-sheet-err { min-height: 1.4em; margin: 4px 0; color: var(--danger, #f87171); font-size: var(--text-xs, 16px); }
.bet-sheet-actions { display: flex; gap: 10px; margin-top: 8px; }
.bet-sheet-actions button {
  flex: 1; min-height: 48px; border-radius: 8px; font: inherit; font-size: var(--text-sm, 17px); font-weight: 600; cursor: pointer;
}
.bet-sheet-yes { border: 0; background: var(--slate-green, #22c55e); color: #0b0b0c; }
.bet-sheet-no { border: 1px solid rgba(255, 255, 255, 0.28); background: transparent; color: inherit; }

/* Parlays to your book (spec 2026-09-30 s3): the cart's parlay block reuses
   the Place on <Book> button and tiles; these add its notes and tile states.
   Neutral ink only -- the accent colour is reserved for graded calls. */
.parlay-place { display: grid; gap: 8px; margin-top: 12px; }
.parlay-place-note { margin: 0; font-size: 16px; line-height: 1.4; opacity: 0.85; }
.parlay-tile-sub { display: block; font-size: 16px; font-weight: 500; opacity: 0.8; }
.parlay-tile--off { opacity: 0.7; cursor: default; }
.parlay-place-sub { display: block; font-size: 16px; font-weight: 500; opacity: 0.8; }