/* The Ticket — Board + Builder (preview v2, design repass 2026-10-14)
   Page chrome: Bible desert theme (inherited). Ticket-family surfaces use the
   locked Ticket palette: ink #0C0C0E, silver paper #A5ACAF, accent #E10600,
   pinline #000000. Mono for all prices/data.
   REPASS: one quiet chip per market (both books' prices as rows inside),
   red used ONCE per chip at most (a dot on the best price), serif team
   names lead, section-level column headers, text-link detail toggle. */

:root{
  --tb-ink:#0C0C0E;
  --tb-panel:#101010;
  --tb-paper:#A5ACAF;
  --tb-paper-dim:#959DA2;
  --tb-red:#E10600;
  --tb-gold:#000000;
  --tb-slipink:#000000;
  --tb-mono:"Previously Display",sans-serif;
  --tb-serif:"Previously Display",sans-serif;
}
.tb-page main{max-width:1240px;margin:0 auto;padding:0 16px 96px}
.tb-section{margin-top:34px}
.tb-sec-head h2{font-family:var(--tb-serif);font-size:clamp(26px,4.6vw,38px);margin:0 0 4px;color:#A5ACAF}
.tb-sec-sub{margin:0 0 14px;color:#959DA2;font-size:14px}
.tb-state{background:#101010;border:1px dashed #2C2C2C;border-radius:12px;padding:22px 18px;text-align:center;color:#959DA2}
.tb-state b{color:#A5ACAF}

/* ---------- layout: board + slip aside ---------- */
.tb-layout{display:block}
@media (min-width:1020px){
  .tb-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
  .tb-aside{position:sticky;top:18px;margin-top:34px}
}

/* ================= THE TICKET SLIP (locked hybrid) ================= */
.tb-hero{background:var(--tb-ink);border-radius:20px;padding:26px 18px 30px;box-shadow:0 18px 44px rgba(20,12,6,.28)}
@media (min-width:1020px){
  .tb-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:30px;padding:34px 36px 38px;align-items:start}
}
.tb-slip{position:relative;background:var(--tb-paper);color:var(--tb-slipink);border-radius:4px;padding:20px 18px 16px 52px;box-shadow:0 10px 26px rgba(0,0,0,.45);overflow:hidden;
  -webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}
/* red edge stripe + gold pinline + vertical microtext */
.tb-slip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:26px;background:#000000}
.tb-slip::after{content:"";position:absolute;left:30px;top:0;bottom:0;width:2px;background:var(--tb-gold)}
.tb-stripe-text{position:absolute;left:0;top:0;bottom:0;width:26px;color:var(--tb-red);font-family:var(--tb-mono);font-weight:400;font-size:10px;letter-spacing:.14em;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;z-index:1}
.tb-slip .tb-slip-in{position:relative;z-index:2}
.tb-slip h3{margin:0;color:var(--tb-red);font-family:var(--tb-serif);letter-spacing:.34em;font-size:15px;text-align:center}
.tb-slip .tb-slip-title{font-family:var(--tb-serif);font-weight:400;letter-spacing:.18em;font-size:27px;text-align:center;margin:2px 0 0;color:var(--tb-red)}
.tb-slip .tb-slip-sub{text-align:center;font-family:var(--tb-mono);font-size:10.5px;letter-spacing:.12em;color:#1B1B1B;margin-top:3px}
.tb-perf{border-top:2px dashed rgba(0,0,0,.4);margin:12px 0}
.tb-slip .tb-card-line{font-family:var(--tb-mono);font-size:12px;letter-spacing:.06em;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tb-leg{padding:9px 0 2px}
.tb-leg .tb-leg-meta{font-family:var(--tb-mono);font-size:10.5px;letter-spacing:.1em;color:#1B1B1B}
.tb-leg .tb-leg-match{font-family:var(--tb-mono);font-size:12.5px;font-weight:400;letter-spacing:.02em;margin-top:1px}
.tb-leg .tb-leg-pick{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:2px}
.tb-leg .tb-leg-pick .pk{font-family:var(--tb-mono);font-size:13px;font-weight:400}
.tb-leg .tb-leg-pick .ln{font-family:var(--tb-mono);font-size:16px;font-weight:400;color:#000000}
.tb-totals{font-family:var(--tb-mono);font-size:13px}
.tb-totals .row{display:flex;justify-content:space-between;padding:2.5px 0}
.tb-totals .row.grand{font-size:15px;font-weight:400}
.tb-totals .row.grand .v{color:#000000}
/* example-stake adjusters (James, 2026-10-14) — featured + Super Ticker slips */
.tb-stk{display:inline-flex;align-items:center;gap:5px}
.tb-stk-btn{width:26px;height:26px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(0,0,0,.55);border-radius:3px;color:#211910;font-family:var(--tb-mono);font-size:15px;font-weight:400;line-height:1;cursor:pointer;padding:0}
.tb-stk-btn:active{background:rgba(0,0,0,.08)}
.tb-stk-btn:focus-visible,.tb-stk-in:focus-visible{outline:2px solid var(--tb-red);outline-offset:1px}
.tb-stk-amt{display:inline-flex;align-items:center}
.tb-stk-in{width:62px;border:none;background:transparent;font:inherit;color:inherit;text-align:right;padding:0;appearance:textfield;-moz-appearance:textfield}
/* quick-amount stake chips (James, 2026-10-17) — the slip's own paper/ink
   language: squared, ink-outlined, black fill while the amount is current */
.tb-stk-chips{display:flex;gap:6px;padding:4px 0 1px}
.tb-stk-chip{flex:1 1 0;background:transparent;border:1px solid rgba(0,0,0,.55);border-radius:3px;color:#211910;font-family:var(--tb-mono);font-size:12.5px;font-weight:400;line-height:1;padding:7px 0;cursor:pointer}
.tb-stk-chip:active{background:rgba(0,0,0,.08)}
.tb-stk-chip[aria-pressed="true"]{background:#000000;color:var(--tb-paper);border-color:#000000}
.tb-stk-chip:focus-visible{outline:2px solid var(--tb-red);outline-offset:1px}
.tb-barcode{margin-top:10px;height:34px;background:repeating-linear-gradient(90deg,#000000 0 2px,transparent 2px 5px,#000000 5px 6px,transparent 6px 10px,#000000 10px 13px,transparent 13px 16px,#000000 16px 17px,transparent 17px 21px)}
.tb-barcode-num{font-family:var(--tb-mono);font-size:11px;letter-spacing:.28em;text-align:center;margin-top:4px}
.tb-slip .tb-slip-fine{font-family:var(--tb-mono);font-size:9.5px;line-height:1.5;letter-spacing:.05em;color:#1B1B1B;text-align:center;margin-top:9px}
.tb-stamp{position:absolute;left:36%;bottom:118px;width:104px;height:104px;transform:rotate(-8deg);opacity:.88;pointer-events:none;z-index:3}
@media (max-width:640px){.tb-stamp{left:44%;bottom:118px;width:80px;height:80px}.tb-slip h3{font-size:12.5px;letter-spacing:.2em}.tb-slip .tb-slip-title{font-size:20px;letter-spacing:.12em}.tb-slip h3,.tb-slip .tb-slip-title,.tb-slip .tb-slip-sub{margin-right:64px}}
.tb-qr{position:absolute;right:16px;top:16px;width:54px;height:54px;z-index:2}
.tb-qr figcaption{font-family:var(--tb-mono);font-size:7.5px;letter-spacing:.08em;text-align:center;color:#1B1B1B;margin-top:2px}
.tb-why{color:#A5ACAF;margin-top:22px}
@media (min-width:1020px){.tb-why{margin-top:4px}}
.tb-why h3{font-family:var(--tb-serif);color:#fff;font-size:21px;margin:0 0 4px;letter-spacing:.02em}
.tb-why .tb-why-sub{color:#959DA2;font-size:13px;margin:0 0 14px}
.tb-why-item{border-top:1px solid rgba(237,230,210,.18);padding:12px 0}
.tb-why-item h4{margin:0 0 5px;font-size:15px;color:#fff}
.tb-why-item h4 .gr{color:#D7DBDD;font-family:var(--tb-mono);font-size:12px;letter-spacing:.08em}
.tb-why-item p{margin:0;font-size:14px;line-height:1.55;color:#A5ACAF}
.tb-why-item .tb-guard{margin-top:6px;font-family:var(--tb-mono);font-size:11.5px;color:#D7DBDD;letter-spacing:.03em}
.tb-killed{border-top:1px solid rgba(237,230,210,.18);padding:12px 0 2px}
.tb-killed h4{margin:0 0 6px;font-size:13px;color:#fff;font-family:var(--tb-mono);letter-spacing:.12em;text-transform:uppercase}
.tb-killed ul{margin:0;padding-left:17px}
.tb-killed li{font-size:13.5px;line-height:1.55;color:#A5ACAF;margin-bottom:4px}
.tb-killed li b{color:#fff}
.tb-super-head{margin:30px 0 12px}
.tb-super-head h3{font-family:var(--tb-serif);font-size:clamp(22px,3.6vw,30px);margin:0 0 3px;color:#A5ACAF}
.tb-super-head p{margin:0;color:#959DA2;font-size:14px}
.tb-super{margin-top:0}

/* ================= THE BOARD ================= */
.tb-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;-webkit-overflow-scrolling:touch}
.tb-tab{flex:0 0 auto;font-family:var(--tb-mono);font-size:13px;font-weight:400;letter-spacing:.06em;padding:8px 14px;border-radius:999px;border:1.5px solid #A5ACAF;background:transparent;color:#A5ACAF;cursor:pointer}
.tb-tab[aria-selected="true"]{background:var(--tb-ink);color:var(--tb-paper);border-color:var(--tb-ink)}
.tb-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tb-red);margin-right:6px;animation:tbpulse 1.6s infinite}
@keyframes tbpulse{0%,100%{opacity:1}50%{opacity:.35}}
.tb-day{font-family:var(--tb-mono);font-size:12px;font-weight:400;letter-spacing:.14em;color:#959DA2;margin:22px 0 8px;text-transform:uppercase}
/* long-section expand toggle — squared (no pills), quiet ink outline,
   full-width under the section's preview games; flips to "Show fewer" */
.tb-more-btn{display:block;width:100%;margin:0 0 16px;padding:11px 12px;background:transparent;border:1.5px solid #A5ACAF;border-radius:8px;font-family:var(--tb-mono);font-size:12.5px;font-weight:400;letter-spacing:.06em;color:#A5ACAF;cursor:pointer;text-align:center}
.tb-more-btn:hover{background:rgba(255,255,255,.06)}
.tb-more-btn .tb-more-picks{color:var(--tb-red)}
/* column headers: ONCE per section, aligned to the game grid, kept faint */
.tb-cols{display:grid;grid-template-columns:minmax(0,1fr) 80px 94px 94px;gap:6px;padding:0 14px;margin:0 0 6px}
.tb-cols div{font-family:var(--tb-mono);font-size:10px;letter-spacing:.14em;color:#8C9399;text-align:center}
@media (min-width:760px){.tb-cols{grid-template-columns:minmax(170px,1fr) 132px 152px 152px;gap:8px;padding:0 16px}}
.tb-game{position:relative;background:#101010;border:1px solid #2C2C2C;border-radius:16px;padding:16px 14px 12px;margin-bottom:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 26px rgba(0,0,0,.11),0 2px 6px rgba(0,0,0,.07)}
/* double hairline frame — the card master's printed border, in the gutter */
.tb-game::before{content:"";position:absolute;inset:5px;border:1px solid rgba(166,124,0,.30);border-radius:12px;pointer-events:none}
.tb-game::after{content:"";position:absolute;inset:8px;border:1px solid rgba(0,0,0,.10);border-radius:10px;pointer-events:none}
.tb-game-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px;border-bottom:1px solid rgba(0,0,0,.13);padding-bottom:9px}
.tb-game-time{font-family:var(--tb-mono);font-size:11px;font-weight:400;color:#959DA2;letter-spacing:.13em;text-transform:uppercase}
.tb-live-tag{font-family:var(--tb-mono);font-size:11px;font-weight:400;color:var(--tb-red);letter-spacing:.06em}
.tb-grid{display:grid;grid-template-columns:minmax(0,1fr) 80px 94px 94px;gap:12px 6px;align-items:stretch}
@media (min-width:760px){.tb-grid{grid-template-columns:minmax(170px,1fr) 132px 152px 152px;gap:14px 8px}.tb-game{padding:18px 16px 14px}}
/* phone: each team gets a full-width name row, its three market chips spread
   beneath it — names never squeeze, prices never clip */
@media (max-width:759px){
  .tb-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .tb-grid>.tb-team{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:8px;padding:6px 0 0}
  .tb-grid>.tb-team .ab{margin-top:0}
  .tb-cols{grid-template-columns:repeat(3,1fr)}
  .tb-cols div:first-child{display:none}
}
.tb-team{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:2px 0}
.tb-team .nm{font-family:var(--tb-serif);font-weight:400;font-size:17px;line-height:1.15;color:#A5ACAF}
.tb-team .ab{font-family:var(--tb-mono);font-size:10.5px;color:#8C9399;margin-top:2px}
.tb-cell{display:flex;flex-direction:column;justify-content:center}
/* ONE chip per market: both books' prices as rows inside. The better price
   leads, large + bold, with the page's single red cue — a dot. The other
   price sits quiet under it. No ribbons, no red borders. */
.tb-mkt{background:#1B1B1B;border:1px solid #2C2C2C;border-radius:12px;padding:6px 7px 5px;display:flex;flex-direction:column;gap:1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.06)}
.tb-mkt-line{font-family:var(--tb-mono);font-size:11px;letter-spacing:.03em;color:#959DA2;text-align:center;padding-bottom:2px}
.tb-pr-row{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;padding:3px 2px;border:none;border-radius:7px;background:transparent;cursor:pointer;font-family:var(--tb-mono);line-height:1.2;color:#959DA2}
.tb-pr-row .bk{font-size:8.5px;letter-spacing:.1em;color:#8C9399}
.tb-pr-row .pr{font-size:14px;font-weight:400}
.tb-pr-row .dot{width:6px;height:6px;border-radius:50%;background:var(--tb-red);flex:0 0 auto}
.tb-pr-row.is-best,.tb-pr-row.is-solo{color:#A5ACAF}
.tb-pr-row.is-best .pr,.tb-pr-row.is-solo .pr{font-size:17px;font-weight:400}
.tb-pr-row.is-best .bk,.tb-pr-row.is-solo .bk{color:#959DA2}
.tb-pr-row:hover{background:rgba(0,0,0,.05)}
.tb-pr-row.is-sel{background:var(--tb-ink);color:var(--tb-paper)}
.tb-pr-row.is-sel .pr{color:var(--tb-paper)}
.tb-pr-row.is-sel .bk{color:#8C9399}
.tb-pr-row.is-sel .dot{background:#FFFFFF}
.tb-pr-row.is-sel:hover{background:var(--tb-ink)}
.tb-off{font-family:var(--tb-mono);font-size:12px;color:#8C9399;text-align:center;padding:10px 0;border:1px dashed rgba(0,0,0,.16);border-radius:12px}
.tb-detail-btn{margin-top:10px;background:none;border:none;font-family:var(--tb-mono);font-size:12.5px;letter-spacing:.02em;padding:6px 2px 2px;color:#959DA2;cursor:pointer;text-align:left}
.tb-detail-btn:hover{color:var(--tb-red);text-decoration:underline}
.tb-detail{border-top:1px dashed #2C2C2C;margin-top:10px;padding-top:10px;font-size:13.5px;line-height:1.55}
.tb-detail h5{margin:10px 0 4px;font-family:var(--tb-mono);font-size:11px;letter-spacing:.12em;color:var(--tb-red)}
.tb-detail h5:first-child{margin-top:0}
.tb-detail p{margin:0 0 6px}
.tb-detail .tb-guard{font-family:var(--tb-mono);font-size:11.5px;color:#D7DBDD}
.tb-detail a{color:var(--tb-red);font-weight:400}
.tb-detail ul{margin:0;padding-left:17px}
.tb-detail li{margin-bottom:3px}
.tb-move{font-family:var(--tb-mono);font-size:12px}

/* ================= THE BUILDER SLIP ================= */
.tb-slipcard{position:relative;background:var(--tb-paper);color:var(--tb-slipink);border-radius:6px;padding:18px 16px 14px 44px;box-shadow:0 10px 26px rgba(20,12,6,.25);overflow:hidden}
.tb-slipcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:22px;background:#000000}
.tb-slipcard::after{content:"";position:absolute;left:26px;top:0;bottom:0;width:2px;background:var(--tb-gold)}
.tb-slipcard .tb-stripe-text{width:22px;font-size:9px}
.tb-slipcard h3{margin:0;color:var(--tb-red);font-family:var(--tb-serif);letter-spacing:.3em;font-size:13px;text-align:center}
.tb-slipcard .tb-slip-title{font-family:var(--tb-serif);font-weight:400;letter-spacing:.14em;font-size:21px;text-align:center;color:#000000;margin-top:2px}
.tb-slip-empty{font-family:var(--tb-mono);font-size:12.5px;line-height:1.6;color:#1B1B1B;text-align:center;padding:14px 4px 8px}
.tb-myleg{border-top:2px dashed rgba(0,0,0,.35);padding:9px 0 7px;position:relative}
.tb-myleg .g{font-family:var(--tb-mono);font-size:10px;letter-spacing:.08em;color:#1B1B1B}
.tb-myleg .o{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.tb-myleg .o .ol{font-family:var(--tb-mono);font-size:13px;font-weight:400}
.tb-myleg .o .pr{font-family:var(--tb-mono);font-size:14px;font-weight:400;color:#000000;white-space:nowrap}
.tb-myleg .bk{font-family:var(--tb-mono);font-size:10px;color:#1B1B1B}
.tb-myleg .rm{position:absolute;top:8px;right:0;background:none;border:none;font-size:16px;line-height:1;color:#1B1B1B;cursor:pointer;padding:2px 4px}
.tb-myleg .o{padding-right:20px}
.tb-stake{display:flex;align-items:center;gap:8px;margin-top:10px;font-family:var(--tb-mono);font-size:13px}
.tb-stake input{width:96px;font-family:var(--tb-mono);font-size:15px;padding:7px 8px;border:1.5px solid rgba(0,0,0,.4);border-radius:8px;background:#FFFDF4;color:var(--tb-slipink)}
.tb-bookrow{border-top:2px dashed rgba(0,0,0,.35);margin-top:10px;padding-top:9px;font-family:var(--tb-mono);font-size:12.5px}
.tb-bookrow .r{display:flex;justify-content:space-between;padding:2px 0}
.tb-bookrow .r .v{font-weight:400}
.tb-bookrow .miss{color:#1B1B1B;font-size:11.5px}
.tb-betbtn{display:block;width:100%;margin-top:9px;background:#FFFFFF;color:#000000;font-family:var(--tb-mono);font-weight:400;font-size:13.5px;letter-spacing:.04em;text-align:center;padding:12px 10px;border-radius:10px;text-decoration:none;border:none;cursor:pointer}
.tb-betbtn:hover{background:#6E7478;color:#FFFFFF}
.tb-copybtn{display:block;width:100%;margin-top:8px;background:transparent;color:var(--tb-slipink);font-family:var(--tb-mono);font-weight:400;font-size:12.5px;padding:10px;border-radius:10px;border:1.5px solid rgba(0,0,0,.45);cursor:pointer}
.tb-slip-note{font-family:var(--tb-mono);font-size:10px;line-height:1.55;color:#1B1B1B;margin-top:9px;text-align:center}
.tb-clearbtn{background:none;border:none;font-family:var(--tb-mono);font-size:11px;color:#1B1B1B;text-decoration:underline;cursor:pointer;display:block;margin:8px auto 0}

/* sticky phone bar */
.tb-sticky[hidden]{display:none!important}
.tb-sticky{position:fixed;left:10px;right:10px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:60;background:var(--tb-ink);color:var(--tb-paper);border-radius:13px;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;box-shadow:0 10px 28px rgba(0,0,0,.4);cursor:pointer;border:1px solid rgba(246,240,224,.25)}
.tb-sticky .l{font-family:var(--tb-mono);font-size:12px;line-height:1.35}
.tb-sticky .l b{color:#D7DBDD}
.tb-sticky .r{font-family:var(--tb-mono);font-weight:400;font-size:12.5px;background:#FFFFFF;color:#000000;padding:8px 12px;border-radius:9px;white-space:nowrap}
@media (min-width:1020px){.tb-sticky{display:none!important}}

/* fine print */
.tb-fine{margin-top:44px;border-top:1px solid #2C2C2C;padding-top:16px;font-size:12.5px;line-height:1.6;color:#959DA2;max-width:820px}
.tb-fine b{color:#A5ACAF}

/* ---------- FLAIR: team identity on the board (James 2026-10-14) ----------
   No more bare white: cards sit on the warm cream ground above, framed by
   the double hairline. Each team the directory holds wears its identity —
   real logo beside the name, its held color as a fine left rule with a
   soft wash behind the name row. A team the directory doesn't hold gets
   .tb-team with no .has-id and renders clean, exactly as before.
   Prices keep their geometry and contrast — flair never touches a number. */
.tb-tid{display:flex;align-items:center;gap:9px;min-width:0}
.tb-tnames{display:flex;flex-direction:column;min-width:0}
.tb-logo{width:27px;height:27px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.20))}
.tb-team.has-id{background:linear-gradient(90deg,var(--tcw) 0%,rgba(255,255,255,0) 82%);box-shadow:inset 3px 0 0 var(--tc);border-radius:3px;padding-left:10px}
@media (max-width:759px){
  .tb-tnames{flex-direction:row;align-items:baseline;gap:8px}
  .tb-tnames .ab{margin-top:0}
}

/* Pressable ticket legs + leg popup (James 2026-10-14). At rest the legs
   look exactly as before; the press is the only new affordance. The popup
   itself is the site's one MiniPopup shell with tpop markup (mini-popup.css);
   only the leg-specific rows are styled here. */
.tb-leg--tap{cursor:pointer}
.tb-leg--tap:hover{background:rgba(0,0,0,.07)}
.tb-leg--tap:active{background:rgba(0,0,0,.15)}
.tb-leg--tap:focus-visible{outline:2px solid var(--tb-red);outline-offset:1px}
.tb-legpop-teams{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 9px}
.tb-legpop-team{display:inline-flex;align-items:center;gap:7px;font-weight:400;font-size:13.5px;color:#000000}
.tb-legpop-team img{width:26px;height:26px;object-fit:contain;display:block}
.tb-legpop-at{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-on-light-muted)}
.tb-legpop-now{flex:none;font-size:13px;color:var(--text-on-light-muted);margin:0}
.tb-legpop-now b{color:#000000}
.tb-legpop-take{flex:none;font-size:14.5px;line-height:1.6;color:#000000;margin:6px 0 0}
.tb-legpop-guard{flex:none;font-family:var(--tb-mono);font-size:11.5px;letter-spacing:.03em;color:#1B1B1B;margin:8px 0 0}

/* ================= MERGE — Ticket | Board, one shared page (2026-10-14) =================
   James: the ticket and the odds board share the page — ticket one side,
   the board the other. Below the merge breakpoint the page stacks in DOM
   areas: ticket, board, extras (Fight Night / Yesterday / The Record /
   Dead Money ride under the ticket column on desktop). */
.tb-merge{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"ticket" "board" "extras";column-gap:30px;align-items:start}
.tb-merge #ticketSection{grid-area:ticket;min-width:0}
.tb-merge #extrasMount{grid-area:extras;min-width:0}
.tb-boardwrap{grid-area:board;min-width:0;scroll-margin-top:90px}
.tb-boardwrap .tb-aside{position:static;margin-top:26px}
#boardSection{scroll-margin-top:90px}
@media (min-width:1020px) and (max-width:1149px){
  .tb-boardwrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start}
  .tb-boardwrap .tb-aside{position:sticky;top:18px;margin-top:34px}
}
@media (min-width:1150px){
  .tb-merge{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"ticket board" "extras board"}
  .tb-merge .tb-hero{grid-template-columns:minmax(0,1fr);padding:26px 22px 28px}
  .tb-merge .tb-why{margin-top:22px}
  .tb-boardwrap .tb-grid{grid-template-columns:minmax(140px,1fr) 112px 132px 132px;gap:12px 6px}
  .tb-boardwrap .tb-cols{grid-template-columns:minmax(140px,1fr) 112px 132px 132px;gap:6px}
  .tb-merge .tt-legs{grid-template-columns:minmax(0,1fr)}
}
/* why-we're-on-it: per-pick expanders — pick + GRADE + guardrail visible,
   the take (description) opens on tap */
.tb-why-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;margin:0;padding:0;background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.tb-why-pick{font-size:15px;font-weight:400;color:#fff}
.tb-why-pick .gr{color:#D7DBDD;font-family:var(--tb-mono);font-size:12px;letter-spacing:.08em;font-weight:400}
.tb-why-toggle{font-family:var(--tb-mono);font-size:11.5px;letter-spacing:.04em;color:#D7DBDD;white-space:nowrap}
.tb-why-body p{margin:8px 0 0}

/* ============ TODAY'S CARD FLAG (labels, James 2026-10-14): the featured
   hero carries a full-width red flag so today's card can never be mistaken
   for yesterday's settled one — on the card itself, not an eyebrow. */
.tb-hero-flag{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#1B1B1B;color:#FFFFFF;padding:10px 16px;border:2px solid #2C2C2C}
.tb-flag-word{font-family:var(--disp);font-size:22px;letter-spacing:.05em;line-height:1}
.tb-flag-note{font:600 12.5px var(--sans)}

/* ================= ODDS CARD — VARIANT B "FILLED CHIPS" =================
   James's pick (2026-10-14) from the Canva variants
   (~/workspace/canva-odds-card-2026-10-14/CHECKPOINT.md, variant-b.html is
   the exact spec). DESIGN LAYER ONLY: same feed fields, same render, same
   tap-to-slip behavior. The three outlined market boxes are gone — every
   price is now its own soft sand pill (#1B1B1B); the best price in each
   market — computed at render by board.js bestPrice() and marked .is-best,
   never baked — is a solid brick-red chip with cream text. The old red dot
   is retired (the chip itself is the marker). A tie gets no red chip
   (board.js only marks a unique best). Selected state stays unmistakable:
   ink-filled on a sand chip, cream-ringed on the red chip. */
.tb-mkt{background:transparent;border:none;border-radius:0;box-shadow:none;padding:2px 0 0;gap:7px}
.tb-mkt-line{font-family:var(--tb-serif);font-size:19px;font-weight:400;letter-spacing:0;color:#A5ACAF;text-align:left;padding:0 0 0 14px}
.tb-pr-row{font-family:inherit;justify-content:space-between;gap:9px;padding:8px 14px;border-radius:999px;background:#1B1B1B;color:#A5ACAF;line-height:1.25}
.tb-pr-row .bk{font-size:11px;font-weight:400;letter-spacing:.16em;color:#8C9399}
.tb-pr-row .pr{font-size:19px;font-weight:400;font-variant-numeric:tabular-nums;margin-left:auto;color:#A5ACAF}
.tb-pr-row .dot{display:none}
.tb-pr-row.is-best{background:#FFFFFF;color:#000000}
.tb-pr-row.is-best .bk{color:#000000}
.tb-pr-row.is-best .pr{font-size:19px;font-weight:400;color:#000000}
.tb-pr-row.is-solo .pr{font-size:19px;font-weight:400}
.tb-pr-row:hover{background:#2C2C2C}
.tb-pr-row.is-best:hover{background:#D7DBDD}
.tb-pr-row.is-sel{background:var(--tb-ink);color:var(--tb-paper)}
.tb-pr-row.is-sel .pr{color:var(--tb-paper)}
.tb-pr-row.is-sel .bk{color:#8C9399}
.tb-pr-row.is-sel:hover{background:var(--tb-ink)}
.tb-pr-row.is-best.is-sel{background:#FFFFFF;box-shadow:inset 0 0 0 2px #000000}
.tb-pr-row.is-best.is-sel:hover{background:#FFFFFF}
.tb-pr-row:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
.tb-cols div{font-family:inherit;font-size:11px;font-weight:400;letter-spacing:.3em;color:#8C9399;text-align:left;padding-left:14px}
.tb-cols div:first-child{padding-left:0}
/* phone: markets become labeled rows under each team (per the Canva phone
   study, translated to B) — chips stay chips, two to a row; the section
   column-header row is retired here because each row now carries its own
   label. Grid child order in gameHtml is fixed: team, ML, SP, TOT, team,
   ML, SP, TOT — the labels key off that order. */
@media (max-width:759px){
  .tb-cols{display:none}
  .tb-grid{grid-template-columns:1fr;gap:0}
  .tb-grid>.tb-cell{flex-direction:row;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #2C2C2C}
  .tb-grid>.tb-cell:nth-child(4),.tb-grid>.tb-cell:nth-child(8){border-bottom:none}
  .tb-grid>.tb-cell::before{font-size:10px;font-weight:400;letter-spacing:.22em;color:#8C9399;width:86px;flex:0 0 auto}
  .tb-grid>.tb-cell:nth-child(2)::before,.tb-grid>.tb-cell:nth-child(6)::before{content:"MONEYLINE"}
  .tb-grid>.tb-cell:nth-child(3)::before,.tb-grid>.tb-cell:nth-child(7)::before{content:"SPREAD"}
  .tb-grid>.tb-cell:nth-child(4)::before,.tb-grid>.tb-cell:nth-child(8)::before{content:"TOTAL"}
  .tb-grid>.tb-team{padding-top:12px}
  .tb-grid>.tb-team:first-child{padding-top:2px}
  .tb-cell .tb-mkt{flex-direction:row;align-items:center;gap:8px;flex:1;padding:0}
  .tb-cell .tb-mkt-line{font-size:17px;min-width:38px;padding:0}
  .tb-cell .tb-pr-row{flex:1 1 0;padding:7px 11px;width:auto}
  .tb-cell .tb-pr-row .pr{font-size:16px}
  .tb-cell .tb-pr-row .bk{font-size:9.5px}
  .tb-cell .tb-off{flex:1}
}

/* ===== WHY — GRADE BADGE (James 2026-10-14: "make the grade stand out") =====
   Same badge language as the homepage takes: the grade LEADS the pick line
   as a solid color-banded chip — green A band, brick B band, muted C band —
   visible in the collapsed head before any expander opens. Grade values are
   the brain's, unchanged; presentation only. */
.tb-why-head{align-items:center}
.tb-why-pick{display:inline-flex;align-items:center;gap:10px}
.tb-grb{flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:48px;padding:5px 8px 6px;border-radius:7px;background:#FFFFFF;color:#000000;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.tb-grb-k{font-family:var(--tb-mono);font-size:7.5px;font-weight:400;letter-spacing:.18em;color:#000000;line-height:1}
.tb-grb-v{font-family:var(--tb-serif);font-size:18px;font-weight:400;line-height:1.15;color:#000000}
.tb-grb-a{background:#FFFFFF}
.tb-grb-b{background:#FFFFFF}
.tb-grb-c{background:#FFFFFF}

/* ================= THE WIRE TICKER (restored 2026-10-14) =================
   The line-move ticker from the old standalone odds board — dropped in the
   Ticket merge, restored on James's approval. Rules ported verbatim from
   /sports/odds/odds.css; the odds-board palette vars are scoped onto the
   ticker with their original values (the Ticket page does not load
   odds.css). Behavior in js/board.js renderWireTicker. */
.ob-ticker{--ob-ink:#000000;--ob-led:#A5ACAF;--ob-hot:#FFFFFF;--ob-peach:#D7DBDD}
.ob-ticker{display:flex;align-items:stretch;background:var(--ob-ink);border-radius:10px;overflow:hidden;margin-top:26px}
.ob-ticker-tag{flex:0 0 auto;display:flex;align-items:center;background:var(--bible-red);color:var(--bible-cream);font:800 10.5px/1 var(--bible-sans);letter-spacing:.22em;text-transform:uppercase;padding:0 14px}
.ob-ticker-view{overflow:hidden;flex:1 1 auto;display:flex;align-items:center}
.ob-ticker-track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform;animation:obTick 70s linear infinite;padding:11px 0}
.ob-ticker:hover .ob-ticker-track{animation-play-state:paused}
.ob-tick{font:600 12.5px/1 var(--bible-sans);letter-spacing:.04em;color:var(--ob-led)}
.ob-tick b{font-weight:400}
.ob-tick .mv{color:var(--ob-peach);font-weight:400}
.ob-tick .lv{color:var(--ob-hot);font-weight:400;letter-spacing:.14em}
.ob-tick-sep{color:var(--ob-hot);font-size:8px;margin:0 16px}
@keyframes obTick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ob-ticker-track{animation:none}}
@media (max-width:640px){.ob-ticker-tag{padding:0 10px}}

/* ================= DESKTOP COMPOSITION (2026-10-14 · desk1) =================
   James, on his laptop: the page read as a phone column adrift in empty
   space — hero crushed into the ticket column, the builder slip buried
   under a 16,000px board (the boardwrap grid lapsed at 1150px), extras
   stacked in the narrow column while the board ran on alone.
   From 1150px up the page now composes on purpose, in the page's own
   ticket language: the hero takes the full measure in its designed
   two-column form (paper slip | why we're on it), the board runs as the
   main column with the builder slip sticky beside it, and Fight Night /
   Yesterday / The Record ride in a multi-column band (Dead Money keeps
   its full-width plate below the merge, untouched). From 1400px the
   measure widens — the page chrome follows via --bible-max — and board
   games flow two-across as cards. Nothing at or below 1149px changes
   except the extras band at 1020–1149; the phone layout is untouched. */
@media (min-width:1020px) and (max-width:1149px){
  #extrasMount{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start}
  #extrasMount>*{min-width:0}
  #extrasMount #ppRecord{grid-column:1/-1}
  #extrasMount .b-block{padding:28px 0}
  #extrasMount .b-block + .b-block{border-top:none}
}
@media (min-width:1150px){
  .tb-merge{grid-template-columns:minmax(0,1fr);grid-template-areas:"ticket" "board" "extras"}
  .tb-merge .tb-hero{grid-template-columns:minmax(0,5fr) minmax(0,6fr);padding:34px 36px 38px}
  .tb-merge .tb-why{margin-top:4px}
  .tb-boardwrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start}
  .tb-boardwrap .tb-aside{position:sticky;top:18px;margin-top:34px}
  .tb-boardwrap .tb-grid{grid-template-columns:minmax(170px,1fr) 132px 152px 152px;gap:14px 8px}
  .tb-boardwrap .tb-cols{grid-template-columns:minmax(170px,1fr) 132px 152px 152px;gap:8px}
  #extrasMount{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start}
  #extrasMount>*{min-width:0}
  #extrasMount #ppRecord{grid-column:1/-1}
  #extrasMount .b-block{padding:28px 0}
  #extrasMount .b-block + .b-block{border-top:none}
}
@media (min-width:1400px){
  .tb-page{--bible-max:1400px}
  .tb-page main{max-width:1400px}
  #boardMount{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 26px}
  #boardMount .tb-day,#boardMount .tb-cols,#boardMount .tb-more-btn{flex:0 0 100%}
  #boardMount .tb-game{flex:1 1 calc(50% - 13px);max-width:calc(50% - 13px)}
  #boardMount .tb-cols{display:flex;gap:22px;align-items:baseline}
  .tb-boardwrap .tb-game{padding:16px 10px 12px}
  .tb-boardwrap .tb-game .tb-grid{grid-template-columns:minmax(132px,1fr) 100px 100px 100px;gap:10px 6px}
  .tb-boardwrap .tb-game .tb-team .nm{font-size:16px}
  .tb-boardwrap .tb-game .tb-team img{width:24px;height:24px}
}
@media (min-width:1500px){
  #extrasMount{grid-template-columns:repeat(3,minmax(0,1fr))}
  #extrasMount #ppRecord{grid-column:auto}
}
@media (min-width:1680px){
  .tb-page{--bible-max:1560px}
  .tb-page main{max-width:1560px}
}

/* ================= RAIDERS PHASE 2 (2026-10-16) =================
   Page-scoped token flip: --bible-* re-valued for THIS page only
   (board.css loads only on The Ticket, after bible.css). Text silver
   #A5ACAF on black; accents white; accent-deep #6E7478. */
:root{
  --bible-bg:#000000; --bible-card:#101010;
  --bible-ink:#A5ACAF; --bible-ink-soft:#959DA2; --bible-ink-dim:#8C9399;
  --bible-red:#FFFFFF; --bible-red-deep:#6E7478; --bible-rule:#2C2C2C;
  --bible-cream:#A5ACAF; --bible-cream-dim:rgba(165,172,175,.82);
  --bible-peach:#D7DBDD; --bible-champagne:#D7DBDD; --bible-fdf:#101010;
  --bible-win:#FFFFFF;
  --bible-shadow-soft:rgba(0,0,0,.08); --bible-shadow-mid:rgba(0,0,0,.18);
  --bible-shadow-deep:rgba(0,0,0,.35); --bible-shadow-bar:rgba(0,0,0,.12);
  --bible-shadow-avatar:rgba(0,0,0,.20); --bible-shadow-red:rgba(0,0,0,.35);
  --bible-shadow-live:rgba(0,0,0,.20); --bible-shadow-play:rgba(0,0,0,.30);
  --bible-minibar:rgba(0,0,0,.97); --bible-indexbar:rgba(0,0,0,.96);
  --bible-tabbar:rgba(0,0,0,.97);
}
html{background:#000000}
.tb-page{background:#000000}
/* inverted bible panels keep a black ground under their silver text */
.tt-odds{background:#000000;color:#A5ACAF}
.tally{background:#000000;color:#A5ACAF}
/* verdicts: the W/L letter carries the meaning; lost muted, won bright */
.verdict.lost,.tt-mark.lost{color:#8C9399}
.past-leg.l .pl-final{color:#8C9399}
/* wire-ticker tag: signal-red block, white word — the homepage ticker
   treatment (James 2026-10-16: the wire is red) */
.ob-ticker-tag{background:#E10600;color:#FFFFFF}
/* best price by book — DK wears the white chip (base .is-best rules);
   PM wears Polymarket blue #2E5CFF (brand hex, polymarket.com/brand) */
.tb-pr-row.is-best[data-book="polymarket"]{background:#2E5CFF;color:#FFFFFF}
.tb-pr-row.is-best[data-book="polymarket"] .bk{color:#FFFFFF}
.tb-pr-row.is-best[data-book="polymarket"] .pr{color:#FFFFFF}
.tb-pr-row.is-best[data-book="polymarket"]:hover{background:#2E5CFF;box-shadow:inset 0 0 0 2px #FFFFFF}
.tb-pr-row.is-best[data-book="polymarket"].is-sel{background:#2E5CFF;box-shadow:inset 0 0 0 2px #FFFFFF}
.tb-pr-row.is-best[data-book="polymarket"].is-sel:hover{background:#2E5CFF}
/* book legend (board.js renders it into #boardState) */
.tb-lg{display:inline-flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.tb-lg-item{display:inline-flex;align-items:center;gap:6px}
.tb-lg-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.tb-lg-dot--dk{background:#FFFFFF;box-shadow:inset 0 0 0 1px #2C2C2C}
.tb-lg-dot--pm{background:#2E5CFF}
.tb-lg-note{opacity:.75}
.tb-lg-rule{flex:1 1 100%}
/* THE TAKES — section-level collapse (board.js whyHtml + data-takes) */
.tb-why-sec-head{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;margin:0 0 4px;padding:2px 0 10px;background:none;border:0;border-bottom:1px solid #2C2C2C;cursor:pointer;text-align:left;font:inherit;color:inherit}
.tb-why-sec-t{display:flex;flex-direction:column;gap:2px}
.tb-why-sec-k{font-family:var(--tb-mono);font-size:11px;font-weight:400;letter-spacing:.22em;color:#FFFFFF}
.tb-why-sec-h{font-family:var(--tb-serif);font-size:21px;color:#fff;letter-spacing:.02em}
.tb-why-sec-cue{font-family:var(--tb-mono);font-size:11.5px;letter-spacing:.04em;color:#D7DBDD;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.tb-why-sec-ch{color:#FFFFFF}
.tb-why-sec-clip{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1),visibility 0s linear .38s}
.tb-why-sec-clip>div{overflow:hidden;min-height:0}
.tb-why.is-open .tb-why-sec-clip{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1),visibility 0s}
@media (prefers-reduced-motion:reduce){.tb-why-sec-clip{transition:none}}

/* ================= RAIDERS P2 — TAKES ATTACHED (James 2026-10-16 07:15) =================
   The Takes are the ticket's own lower stub section: inside the silver
   slip, below the perforation, in slip ink — one continuous artifact,
   closed on arrival, unmistakable invitation. */
@media (min-width:1020px){.tb-hero{display:block}}
.tb-slip{max-width:940px;margin:0 auto}
.tb-slip .tb-why{margin-top:12px;color:#000000;text-align:left}
.tb-slip .tb-why-sec-head{border-bottom:1px solid rgba(0,0,0,.35);padding-bottom:8px}
.tb-slip .tb-why-sec-k{color:#000000}
.tb-slip .tb-why-sec-h{color:#000000}
.tb-slip .tb-why-sec-cue{color:#1B1B1B}
.tb-slip .tb-why-sec-ch{color:#000000}
.tb-slip .tb-why-sub{color:#1B1B1B}
.tb-slip .tb-why-item{border-top-color:rgba(0,0,0,.22)}
.tb-slip .tb-why-head{color:#000000}
.tb-slip .tb-why-pick-t{color:#000000}
.tb-slip .tb-why-toggle{color:#1B1B1B}
.tb-slip .tb-why-item p{color:#1B1B1B}
.tb-slip .tb-guard{color:#1B1B1B}
.tb-slip .tb-killed{border-top-color:rgba(0,0,0,.22)}
.tb-slip .tb-killed h4{color:#000000}
.tb-slip .tb-killed li{color:#1B1B1B}
.tb-slip .tb-killed li b{color:#000000}
.tb-slip .tb-grb{border:1.5px solid #000000}

/* ================= LAPTOP COMPOSITION (2026-10-16 · desk2) =================
   James's laptop ruling: phone and laptop are separate compositions.
   From 1150px the Card room composes as a desk spread — the paper slip
   at its natural width on the left, the flag standing as its cover
   card on the right — and the room tabs take the underline treatment
   inside the measure instead of spanning the viewport as segments.
   Nothing at or below 1149px changes; the phone composition is as
   approved. */
@media (min-width:1150px) and (max-width:1399px){
  .tb-page main{max-width:1320px}
}
@media (min-width:1150px){
  .tb-merge .tb-roombar{gap:38px;justify-content:flex-start;border-bottom:1px solid #2C2C2C;padding-top:4px}
  .tb-merge .tb-roombar .tb-seg-btn{flex:0 0 auto;background:none;border:0;color:#8C9399;padding:12px 2px 13px;box-shadow:none}
  .tb-merge .tb-roombar .tb-seg-btn:hover{color:#D7DBDD}
  .tb-merge .tb-roombar .tb-seg-btn[aria-selected="true"]{background:none;color:#FFFFFF;box-shadow:inset 0 -2px 0 #FFFFFF}
  .tb-merge .tb-roombar .tb-seg-btn:focus-visible{outline:2px solid #FFFFFF;outline-offset:-3px}
  .tb-merge .tb-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 22px;flex-wrap:wrap}
  .tb-merge .tb-hero{display:grid;grid-template-columns:minmax(0,680px) minmax(0,1fr);gap:30px;align-items:stretch;padding:30px 32px 34px}
  .tb-merge .tb-hero .tb-slip{grid-column:1;grid-row:1;max-width:none;width:100%;margin:0}
  .tb-merge .tb-hero-flag{grid-column:2;grid-row:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:30px 28px}
  .tb-merge .tb-flag-word{font-size:30px}
  .tb-merge .tb-flag-note{font-size:13.5px;line-height:1.55}
  .tb-merge .tb-bridge-row{display:flex;justify-content:flex-end}
}
/* per-pick price provenance on the desk's card (2026-10-16, \u00a76.3):
   small mono label in slip ink under each priced leg */
.tb-slip .tb-leg-prov{font-family:var(--tb-mono);font-size:9.5px;letter-spacing:.08em;color:#1B1B1B;margin-top:3px;text-transform:uppercase}

/* Ticket branding restoration 2026-10-17: at phone widths the QR caption
   overlapped the slip's first card line (the date) — caption yields, QR stays. */
@media (max-width:560px){.tb-qr figcaption{display:none}}