/* /greyhound-trap-bias — Labs trap bias.
   Colour carries the meaning here: green above an even draw, red below, and the
   six trap colours are the real racing silks so the key needs no explaining. */

.tb-hero{ background:var(--night); color:#fff; padding:44px 0 0; }
.tb-eyebrow{ font:500 11.5px var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin:0 0 14px; }
.tb-hero h1{ font:700 52px/1.0 var(--disp); text-transform:uppercase; margin:0 0 16px; max-width:17ch; }
.tb-hero h1 em{ font-style:normal; color:#6FD3A4; }
.tb-sub{ font-size:18px; color:rgba(255,255,255,.84); max-width:62ch; margin:0 0 22px; }
.tb-pills{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 30px; }
.tb-pill{ font:600 11.5px var(--mono); letter-spacing:.04em; text-transform:uppercase;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:20px;
  padding:5px 12px; text-decoration:none; color:#fff; }
.tb-pill:hover{ background:rgba(255,255,255,.18); }
.tb-pill.on{ background:rgba(111,211,164,.18); border-color:rgba(111,211,164,.4); color:#8FE3BE; }

/* ---- the race ----
   One gesture, once. Bars run out to their real averages, then stop. */
.tb-race{ margin:0 0 30px; }
.tb-lane{ display:flex; align-items:center; gap:10px; margin:0 0 7px; }
.tb-lane b{ width:16px; font:600 12px var(--mono); color:rgba(255,255,255,.65); text-align:right; }
.tb-bar{ height:16px; border-radius:0 4px 4px 0; width:0; display:block;
  transition:width 1.1s cubic-bezier(.22,.9,.3,1); }
.tb-lane em{ font:500 12.5px var(--mono); font-style:normal; color:rgba(255,255,255,.75);
  opacity:0; transition:opacity .4s .7s; }
.tb-race.go .tb-bar{ width:var(--w); }
.tb-race.go .tb-lane em{ opacity:1; }
.tb-race-cap{ margin:12px 0 0; font-size:13px; color:rgba(255,255,255,.6); max-width:60ch; }
.tb-race-cap span{ color:#8FE3BE; font-weight:600; }
@media (prefers-reduced-motion:reduce){
  .tb-bar{ transition:none; width:var(--w); }
  .tb-lane em{ transition:none; opacity:1; }
}

.tb-figs{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.16); }
.tb-fig{ padding:20px 22px 24px; border-left:1px solid rgba(255,255,255,.13); }
.tb-fig:first-child{ border-left:0; padding-left:0; }
.tb-fig b{ display:block; font:650 30px/1 var(--body); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.tb-fig span{ display:block; font-size:13px; color:rgba(255,255,255,.8); margin-top:7px; }
.tb-fig i{ display:block; font:400 11.5px/1.45 var(--mono); color:rgba(255,255,255,.5);
  font-style:normal; margin-top:3px; }

.tb-sec{ padding:42px 0 0; }
.tb-sec h2{ font:700 31px/1.04 var(--disp); text-transform:uppercase; margin:0 0 10px; }
.tb-lede{ font-size:16.5px; color:var(--mut); max-width:72ch; margin:0 0 22px; }
.tb-find{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin:0 0 8px; }
.tb-card{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:20px 21px; }
.tb-card h3{ margin:0 0 8px; font:700 19px/1.1 var(--disp); text-transform:uppercase; }
.tb-card p{ margin:0; font-size:14.5px; color:var(--mut); line-height:1.6; }
.tb-card p + p{ margin-top:9px; }
.tb-card b{ color:var(--ink); }

.tb-legend{ display:flex; gap:14px; flex-wrap:wrap; margin:0 0 16px; align-items:center; }
.tb-traps,.tb-keys{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:var(--white);
  border:1px solid var(--line); border-radius:10px; padding:8px 13px; font-size:13px; color:var(--mut); }
.tb-traps b{ font:600 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--mut); }
.tb-tc{ display:inline-flex; align-items:center; gap:6px; font:500 12.5px var(--mono); color:var(--ink); }
.tb-tc i{ width:15px; height:15px; border-radius:4px; border:1px solid rgba(0,0,0,.18); display:inline-block; }
.tb-keys span{ display:inline-flex; align-items:center; gap:7px; }
.tb-sw{ width:26px; height:14px; border-radius:4px; display:inline-block; border:1px solid rgba(0,0,0,.06); }
.tb-sw.win{ outline:2px solid var(--green); outline-offset:-2px; }

.tb-tbl{ background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:auto; margin:0 0 16px; }
.tb-tbl table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; min-width:700px; }
.tb-tbl th{ text-align:left; font:500 11px var(--body); letter-spacing:.05em; text-transform:uppercase;
  color:var(--mut); padding:11px 12px; background:var(--paper); border-bottom:1px solid var(--line); white-space:nowrap; }
.tb-tbl th.n,.tb-tbl td.n{ text-align:center; }
.tb-tbl td{ padding:10px 12px; border-bottom:1px solid var(--line); font-size:13.5px; }
.tb-tbl tr:last-child td{ border-bottom:0; }
.tb-tbl tr:hover td{ background:var(--paper); }
.tb-tbl td.trk{ font-weight:600; white-space:nowrap; }
.tb-tbl td.dist{ font:500 12.5px var(--mono); color:var(--mut); }
.tb-quiet td{ opacity:.62; }
.tb-cell{ display:inline-block; min-width:48px; padding:4px 0; border-radius:6px; font:500 12.5px var(--mono); }
.tb-cell.win{ outline:2px solid var(--green); outline-offset:-2px; font-weight:600; }
.tb-nil{ color:var(--mut); opacity:.5; }
.tb-real{ color:var(--green); font-weight:600; }
.tb-chance{ color:var(--mut); }

.tb-note{ background:#E7EEF9; border:1px solid #C3D5EE; border-radius:12px; padding:16px 18px;
  font-size:14.5px; color:#1B4FA0; margin:16px 0 0; }
.tb-note b{ font-weight:650; }

.tb-cta{ background:var(--green); color:#fff; border-radius:16px; padding:28px 30px; display:flex;
  gap:24px; align-items:center; flex-wrap:wrap; margin:42px 0 48px; }
.tb-cta h3{ margin:0 0 6px; font:700 23px/1.1 var(--disp); text-transform:uppercase; color:#fff; }
.tb-cta p{ margin:0; color:rgba(255,255,255,.84); font-size:15px; max-width:56ch; }
.tb-acts{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; }
.tb-acts a{ background:#fff; color:var(--green); font:600 14.5px var(--body); padding:11px 20px;
  border-radius:10px; text-decoration:none; white-space:nowrap; }
.tb-acts a.ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.45); }

@media (max-width:900px){
  .tb-hero h1{ font-size:34px; }
  .tb-figs{ grid-template-columns:repeat(2,1fr); }
  .tb-fig{ border-left:0; padding-left:0; }
  .tb-cta{ padding:22px; } .tb-acts{ margin-left:0; }
}