/* Result page for a final game with graded parlays (tools/results/build_game_results.py, 2026-10-02).
   The game frame is in pk-pair.css; the ticket card, scoreboard and tables reuse gameday.css. Tokens only.
   Status is shown by a drawn mark and a word, never colour alone (Mary). */

.h-l1,.h-l2{display:block;text-wrap:balance}
/* Small phones: sized so each phrase holds two words or more a line (Jay's headline rule). */
@media (max-width:380px){.rx-h1{font-size:34px}}
.rx-byl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:16px}
.rx-by{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;min-height:44px}
.rx-by img{border-radius:50%;flex:none}
.rx-by b{display:block;font:800 14px/1.2 var(--sans)}
.rx-by small{display:block;font:600 12px/1.2 var(--sans);color:var(--ink-3)}
.rx-byl-m{flex-basis:100%;margin:0;font:500 13px/1.4 var(--sans);color:var(--ink-3)}
.rx-back{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 0;font:500 14px/1.5 var(--sans);color:var(--ink-2)}
.rx-back-b{min-height:44px}

.rx-sec .wrap{max-width:var(--wrap,1200px)}
.rx-toc{margin:0 0 26px}
.rx-toc ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:8px 0 0;padding:0}
.rx-toc a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;
  font:700 13px/1 var(--sans);color:var(--ink);text-decoration:none;background:var(--paper)}
.rx-toc a:hover,.rx-toc a:focus-visible{border-color:var(--ink)}
.rx-s{padding:0 0 40px;scroll-margin-top:90px}
.rx-s>p,.rx-s>h3{max-width:72ch}
.rx-h2{margin-bottom:18px}

/* Two tickets side by side: one grid of six rows, each column a subgrid, so the numbers line up. */
.rx-tk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,auto);column-gap:28px}
.rx-tk{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:6px;padding:0 0 4px}
.rx-tk+.rx-tk{border-left:1px solid var(--line);padding-left:28px}
.rx-tk-n{margin:0;font:800 19px/1.2 var(--cond);text-transform:uppercase;letter-spacing:.01em;color:var(--ink);text-wrap:balance}
.rx-tk .bc-net{color:var(--gain)}
.rx-tk .bc-net--loss{color:var(--loss-ink)}  /* a missed ticket's stake (Falcons at Saints, 2026-10-05) */
.rx-tk-when{margin:0;font:600 14px/1.4 var(--sans);color:var(--ink-2)}
.rx-pill{gap:6px;min-width:12ch;justify-content:center;font:800 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.rx-mk{flex:none;vertical-align:-3px}
@media (max-width:700px){
  .rx-tk-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .rx-tk{grid-row:auto;grid-template-rows:none}
  .rx-tk+.rx-tk{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:16px;margin-top:12px}
}

/* The clock: a wide drawing at 700px and up, a small one below; the table carries every fact. */
.rx-clk{margin:0 0 18px;padding:14px 16px 10px;border:1px solid var(--line-2);border-radius:var(--r-lg,16px);background:var(--paper)}
.rx-clk svg{display:block;width:100%;height:auto}
.rx-clk-mini{display:none}
@media (max-width:700px){.rx-clk-wide{display:none}.rx-clk-mini{display:block}}
.rx-clk figcaption{margin:10px 0 0;font:500 13px/1.5 var(--sans);color:var(--ink-3);max-width:80ch}
.rx-qb{fill:var(--paper)}
.rx-qb--alt{fill:var(--surface-2,#f4f6fb)}
.rx-qt{font:700 11px var(--sans);fill:var(--ink-3);letter-spacing:.06em}
.rx-lane{font:800 13px var(--sans);fill:var(--ink)}
.rx-lane-l{stroke:var(--line-2);stroke-width:1}
.rx-wait{stroke:var(--ink-3);stroke-width:2;stroke-dasharray:4 4}
.rx-dot{fill:var(--gain);stroke:var(--paper);stroke-width:1.5}
.rx-dot-n{font:700 10px var(--sans);fill:var(--ink-2);paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}
.rx-lane-end{font:700 11px var(--sans);fill:var(--ink-2)}
.rx-mid{stroke:var(--line-2);stroke-dasharray:3 4}
.rx-wp{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-linejoin:round}
.rx-wp-k{font:600 10.5px var(--sans);fill:var(--ink-3)}
.rx-kick{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:4 3}
.rx-clinch{stroke:var(--ink);stroke-width:2}
.rx-flag{fill:var(--ink)}
.rx-clinch-t{font:800 12.5px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round}
.rx-clk-svg--mini .rx-clinch-t{font-size:12px}
.rx-clk-svg--mini .rx-lane{font-size:12px}

/* Tables: fit first; where they scroll, they say so and the outcome column stays put. */
.rx-tw{overflow-x:auto;border:1px solid var(--line-2);border-radius:14px;background:var(--paper)}
.rx-tw:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.rx-t{width:100%;border-collapse:collapse;font:500 14px/1.45 var(--sans);color:var(--ink-2)}
.rx-t caption{caption-side:top;text-align:left;padding:12px 14px 8px;font:800 15px/1.3 var(--sans);color:var(--ink)}
.rx-t caption span{display:block;font:500 12.5px/1.4 var(--sans);color:var(--ink-3)}
.rx-t th,.rx-t td{padding:10px 12px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.rx-t thead th{font:700 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.rx-t tbody th{font-weight:700;color:var(--ink)}
.rx-t time{display:block;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rx-gc{display:block;font:600 12px/1.3 var(--sans);color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.rx-line{display:block;font:500 13px/1.3 var(--sans);color:var(--ink-3)}
.rx-cnt{display:block;font:800 14px/1.3 var(--sans);color:var(--ink);white-space:nowrap}
.rx-leg{display:block;font:500 12.5px/1.35 var(--sans);color:var(--ink-2)}
.rx-win,.rx-res{display:inline-flex;align-items:center;gap:5px;font:800 12px/1.2 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--gain)}
.rx-win{margin-top:4px}
.rx-res--miss{color:var(--ink-2)}
.rx-res-w{display:block;margin-top:3px;font:700 11.5px/1.2 var(--sans);color:var(--ink)}
.rx-row-win td,.rx-row-win th{border-top:2px solid var(--ink)}
.rx-row-kick td,.rx-row-kick th{background:var(--surface-2,#f4f6fb)}
.rx-kick-w{display:block;margin-top:2px;font:700 11.5px/1.2 var(--sans);color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.rx-sc{white-space:nowrap}
.rx-answer{margin:0 0 16px;font:500 16px/1.6 var(--sans);color:var(--ink-2)}
.rx-h3{margin:22px 0 6px}
.rx-fine{margin:14px 0 0;font:500 13px/1.5 var(--sans);color:var(--ink-3)}
.rx-more{margin:14px 0 0}

/* Under 700px a wide table becomes cards, one per row; the result sits at the foot of each card. */
@media (max-width:700px){
  .rx-tw{overflow:visible;border:0;background:none}
  .rx-t,.rx-t tbody,.rx-t tr,.rx-t th,.rx-t td{display:block;width:auto}
  .rx-t thead{display:none}
  .rx-t caption{display:block;padding:0 0 10px}
  .rx-t tr{margin:0 0 10px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--paper)}
  .rx-t th,.rx-t td{padding:2px 0;border:0}
  .rx-t--clock td[data-k]::before{content:attr(data-k) "\2019s legs in: ";font:700 11px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
  .rx-t--clock td[data-k] .rx-cnt{display:inline}
  .rx-t--legs td.num:first-child{display:none}
  .rx-t--legs td.num:nth-child(3)::before{content:"Final ";font:700 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
  .rx-res-c{margin-top:8px!important;padding:8px 10px!important;border-radius:8px;background:var(--gain-soft)}
  .rx-row-win{border:2px solid var(--ink)!important}
  .rx-row-win td,.rx-row-win th{border-top:0}
}