/* ============================================================================
   previously — The Ticket · Option C rooms (2026-10-15)
   Three rooms, one address: The Card / Build Your Own / The Record.
   Presentation only. Loads after board.css; reuses its tokens (Package A:
   cream / ink / brick, Fraunces via the masthead layers, mono labels).
   ============================================================================ */

/* The old single-scroll merge grid goes away: rooms stack in normal flow. */
.tb-merge{display:block}
.tb-room[hidden]{display:none!important}
.tb-room{outline:none}

/* ---------- room switch (sticky segmented bar) ---------- */
.tb-roombar{position:sticky;top:0;z-index:56;padding:12px 0 4px;background:#000000}
.tb-seg{display:flex;border:2px solid #2C2C2C;border-radius:10px;overflow:hidden;background:#101010;box-shadow:3px 3px 0 rgba(12,12,14,.14)}
.tb-seg-btn{flex:1 1 0;min-width:0;font-family:var(--tb-mono);font-weight:400;font-size:12px;letter-spacing:.04em;text-transform:uppercase;line-height:1.25;padding:12px 4px;background:transparent;color:#A5ACAF;border:none;border-right:2px solid #2C2C2C;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tb-seg-btn:last-child{border-right:none}
/* Active room: ink fill + paper text + a brick bar along the bottom edge —
   shape and weight cues, not color alone. */
.tb-seg-btn[aria-selected="true"]{background:var(--tb-ink);color:var(--tb-paper);box-shadow:inset 0 -5px 0 var(--tb-red)}
.tb-seg-btn:focus-visible{outline:3px solid var(--tb-red);outline-offset:-3px}
@media(min-width:760px){.tb-seg-btn{font-size:14px;padding:14px 8px}}

/* ---------- the record strip (Card room, under the switch) ---------- */
.tb-recstrip{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:baseline;background:var(--tb-ink);color:var(--tb-paper);border-radius:10px;padding:11px 16px;margin-top:20px;font-family:var(--tb-mono);font-size:13px;letter-spacing:.03em}
.tb-recstrip .rs-lab{color:#8C9399;text-transform:uppercase;font-size:11px;letter-spacing:.09em}
.tb-recstrip b{color:#fff;font-size:15px}
.tb-recstrip[hidden]{display:none}
#room-card #ticketSection{margin-top:20px}

/* ---------- bridge: send this card to the builder ---------- */
.tb-bridge-row{margin-top:26px}
.tb-bridge-btn{font-family:var(--tb-mono);font-weight:400;font-size:14px;letter-spacing:.03em;background:var(--tb-red);color:#FFFFFF;border:2px solid var(--tb-ink);border-radius:10px;padding:13px 20px;cursor:pointer;box-shadow:3px 3px 0 rgba(12,12,14,.2)}
.tb-bridge-btn:hover{background:#6E7478;color:#FFFFFF}
.tb-bridge-btn:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px}
.tb-copynote{background:#1B1B1B;border:1px solid #2C2C2C;border-left:5px solid var(--tb-red);border-radius:8px;color:#A5ACAF;font-size:14px;line-height:1.5;padding:12px 16px;margin:22px 0 0}
.tb-copynote[hidden]{display:none}

/* ---------- The Card room: rows lead, the paper ticket is the artifact ----------
   Phone: flag, then the graded why-rows, then the paper slip.
   Desktop: why-rows left, paper slip right. */
@media(max-width:1019px){
  #room-card .tb-hero{display:flex;flex-direction:column}
  #room-card .tb-hero .tb-hero-flag{order:1}
  #room-card .tb-hero .tb-why{order:2;margin-top:0}
  #room-card .tb-hero .tb-slip{order:3;margin-top:22px}
}
@media(min-width:1020px) and (max-width:1149px){
  #room-card .tb-hero{grid-template-columns:minmax(0,1fr)}
  #room-card .tb-hero .tb-slip{grid-column:1;grid-row:2}
}
@media(min-width:1150px){
  /* desk2 (2026-10-16): the Takes live inside the slip now — the spread is
     slip left at paper width, the flag standing as its cover card right. */
  #room-card .tb-hero{display:grid;grid-template-columns:minmax(0,680px) minmax(0,1fr)}
  #room-card .tb-hero .tb-slip{grid-column:1;grid-row:1}
  #room-card .tb-hero .tb-hero-flag{grid-column:2;grid-row:1}
}

/* ---------- Super Ticker: a visibly different animal ----------
   Same family, different coat: gold top rule, gold slip stripe and title,
   so it never reads as a second copy of the featured ticket. */
#room-card .tb-hero.tb-super{border-top:6px solid #FFFFFF}
#room-card .tb-super .tb-slip::before{background:#FFFFFF}
#room-card .tb-super .tb-slip-title{color:#000000}

/* ---------- Build Your Own room ---------- */
/* The phone builder bar belongs to this room only — other rooms stay clean. */
body:not(.room-build) #stickyBar{display:none!important}
@media(max-width:1019px){
  /* The slip sits at the TOP of the room on the phone — docked in reach,
     not buried under the whole board. */
  #room-build .tb-boardwrap{display:flex;flex-direction:column}
  #room-build .tb-boardwrap .tb-aside{order:-1;position:static;margin:26px 0 4px}
  /* Room to rest above the docked slip bar while scrolling the board. */
  #room-build{padding-bottom:128px}
}
@media(min-width:1020px){
  /* Keep the desktop rail clear of the sticky room switch. */
  #room-build .tb-boardwrap .tb-aside{top:78px}
}

/* ---------- The Record room ---------- */
#room-record .b-block:first-child{margin-top:26px}
/* ================================================================
   DESKTOP COMPOSITION REPAIR — appended 2026-10-15 (stamp dc8)
   Fixes two "phone layout stretched" defects measured on the live
   page; presentation only. Every rule is scoped to desktop bands so
   the approved phone rendering (<1020px, and the 1020-1279 single-
   column board) cannot change. The board's real grid is .tb-grid
   inside each .tb-game (board.css gives it a wide template from
   1150px up: minmax(170px,1fr) 132px 152px 152px — that template's
   ~630px min-content is also why a flexed card cannot shrink below
   it, so the bands below retarget .tb-grid itself and free the
   flex items with min-width:0.
   ================================================================ */

/* --- Laptop band A (1280-1349): board two-across on a tightened
   game grid; team identity stacks (logo over name) so long names
   wrap inside their column instead of running under the moneyline
   pill; section column labels re-aligned to the first card's grid. --- */
@media (min-width:1280px) and (max-width:1349px){
  #boardMount{display:flex;flex-wrap:wrap;gap:0 26px}
  #boardMount>.tb-day,#boardMount>.tb-more-btn{flex:1 1 100%}
  #boardMount>.tb-cols{flex:0 0 100%;
    grid-template-columns:minmax(88px,1fr) 88px 88px 88px;column-gap:5px;
    padding:0 calc(50% + 13px) 0 10px;margin:0 0 6px}
  #boardMount>.tb-game{flex:1 1 calc(50% - 13px);max-width:calc(50% - 13px);min-width:0}
  #boardMount .tb-game{padding:14px 10px 12px}
  #boardMount .tb-grid{grid-template-columns:minmax(88px,1fr) 88px 88px 88px;column-gap:5px}
  #boardMount .tb-team .nm{font-size:14px}
  #boardMount .tb-pr-row{padding:8px 9px}
  #boardMount .tb-tid{flex-direction:column;align-items:flex-start;gap:2px}
}

/* --- Laptop band B (1350-1399): take the existing >=1400 chrome
   step (the 1400px measure) 50px early, flow two-across, and give
   the game grid mid-size market columns so the name column lands
   ~135-140px (what names get at 1440) with the identity stacked. --- */
@media (min-width:1350px) and (max-width:1399px){
  .tb-page{--bible-max:1400px}
  .tb-page main{max-width:1400px}
  #boardMount{display:flex;flex-wrap:wrap;gap:0 26px}
  #boardMount>.tb-day,#boardMount>.tb-more-btn{flex:1 1 100%}
  #boardMount>.tb-cols{flex:0 0 100%;
    grid-template-columns:minmax(132px,1fr) 90px 94px 94px;column-gap:8px;
    padding:0 calc(50% + 13px) 0 14px;margin:0 0 6px}
  #boardMount>.tb-game{flex:1 1 calc(50% - 13px);max-width:calc(50% - 13px);min-width:0}
  #boardMount .tb-grid{grid-template-columns:minmax(132px,1fr) 90px 94px 94px;column-gap:8px}
  #boardMount .tb-team .nm{font-size:16px}
  #boardMount .tb-pr-row{padding:8px 9px}
  #boardMount .tb-tid{flex-direction:column;align-items:flex-start;gap:2px}
}

/* --- Record room (all desktop widths): Dead Money is a full-width
   longform plate (masthead + 12 slip cards); inside the rooms grid it
   was trapped in a single ~490-670px column running ~6,900px tall
   while its neighbours stood ~1,200px. Span it across the mount and
   let the numbered blocks backfill the top row. --- */
@media (min-width:1020px){
  #room-record #extrasMount{grid-auto-flow:dense}
  #room-record #extrasMount>#dead-money{grid-column:1/-1}
}

/* RAIDERS PHASE 2 (2026-10-16): Super slip stripe text rides the white stripe */
#room-card .tb-super .tb-stripe-text{color:#000000}
/* ---------- room purpose headers (2026-10-16: sharpen the separation) ----------
   One compact bar atop each room: the room's name and, in plain words, what
   the room is for. The three rooms stay at one address; nobody should have
   to guess which product they are looking at. */
.tb-room-intro{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap;margin:22px 0 2px;padding:13px 0 11px;border-top:1px solid #2C2C2C;border-bottom:1px solid #2C2C2C}
.tb-room-intro>span{font-family:var(--tb-mono);font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:#FFFFFF;white-space:nowrap}
.tb-room-intro p{margin:0;color:#A5ACAF;font-size:14.5px;line-height:1.45}
.tb-room-intro .tb-room-fresh{flex:1 1 100%;font-family:var(--tb-mono);font-size:11px;letter-spacing:.07em;color:#959DA2;text-transform:uppercase}