/* ==========================================================================================================
   TIME SLIP PAGE (2026-10 ride redesign) -- /assets/rides/timeslip.css
   Built from the CEO artifact's time slip CSS (claude/dev-docs/thefoat/ride-redesign/artifacts/timeslip.html:
   the .sp-* / .slip-card / .sl-* / .sp-run* / .sp-ride* rules + its :root tokens), with these mechanical changes:
     - every selector is scoped under .ts-page (m/lay_ride_page.php wraps m.timeslip in it) and every class is
       prefixed ts-  (.sp-hero -> .ts-hero, .slip-card -> .ts-slip, .sl-top -> .ts-sl-top, .btn -> .ts-btn,
       .sr -> .ts-sr, td.best -> td.ts-best, ...). Bootstrap 2.1.1 + theme_bs_tb.css are loaded globally;
     - the artifact's own NAV and FOOTER are not built (the site header and footer are used);
     - the sticky rail offset reads --ts-nav-h (the fixed #navbar: 64px, 0 at <= 979px where Bootstrap makes it
       static), as news.css does with --news-nav-h;
     - a base block neutralises the Bootstrap element rules (headings, links, lists, buttons, tables).
   Every size, colour and radius is the artifact's. Extras that the artifact does not need: the state pages
   (not found / private), the empty lane, the red-light colour, the no-photo placeholder.
   HAND-EDITED like every shipped stylesheet: no LESS, no build.
   ========================================================================================================== */

.ts-page {
  --orange: #F47B20; --orange-dark: #D96400; --orange-tint: #FFF3E8;
  --black: #0D0D0D; --white: #FFFFFF; --gray-bg: #F4F4F4; --gray-border: #E5E5E5;
  --ink: #1A1A1A; --muted: #666; --soft: #8A8A8A;
  --g1: #F4F4F4; --g2: #E2E2E2; --g3: #9A9A9A; --g4: #5E5E5E; --g5: #1C1C1C; --g6: #262626;
  --red: #D32F2F;
  --font-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --ts-nav-h: 64px;   /* the site's fixed #navbar (measured on the News pages 2026-10-28) */
  box-sizing: border-box;
  font-family: var(--font-body); font-size: 16px; background: var(--gray-bg); color: var(--ink); line-height: 1.6;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
@media (max-width: 979px) { .ts-page { --ts-nav-h: 0px; } }
/* signed in, the navbar has no Join / Sign In buttons and is 60px (else a 4px strip shows under the orange line) */
@media (min-width: 980px) { body.tf-logged-in .ts-page { --ts-nav-h: 60px; } }
/* desktop: theme_bs_tb.css pads html AND body 50px each under the fixed #navbar; tuck the hero up under it (as News does) */
@media (min-width: 980px) { .ts-page { margin-top: calc(var(--ts-nav-h) - 100px); } }
.ts-page *, .ts-page *::before, .ts-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ts-page a { color: inherit; text-decoration: none; }
.ts-page a:hover, .ts-page a:active { color: inherit; text-decoration: none; }
.ts-page a:focus:not(:focus-visible) { outline: 0; }
.ts-page img { max-width: 100%; display: block; }
.ts-page button { font-family: inherit; cursor: pointer; }
.ts-page :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.ts-page :is(h1, h2) { font-family: inherit; font-weight: bold; line-height: inherit; color: inherit; text-rendering: auto; }
.ts-page :is(ul, ol) { list-style: none; }
.ts-page li { line-height: inherit; }
.ts-page table { max-width: none; background: transparent; border-spacing: 0; }
.ts-page p { margin: 0; }
.ts-page b { font-weight: bold; }
.ts-page small { font-size: smaller; }
.ts-page .ts-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ts-page .ts-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ----- buttons ----- */
.ts-page .ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 26px; border-radius: 6px; font-weight: 600; font-size: 15px; line-height: 1.2; border: 2px solid transparent; transition: background .2s, border-color .2s, color .2s, transform .2s; white-space: nowrap; background: none; box-shadow: none; text-shadow: none; text-transform: none; -webkit-appearance: none; appearance: none; }
.ts-page .ts-btn-orange { background: var(--orange); border-color: var(--orange); color: var(--white); }
.ts-page .ts-btn-orange:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: var(--white); }
.ts-page .ts-btn-ghost { background: rgba(13,13,13,.45); border-color: rgba(255,255,255,.5); color: var(--white); }
.ts-page .ts-btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.1); color: var(--white); }
.ts-page .ts-btn-more { background: var(--white); border-color: var(--g2); color: var(--black); }
.ts-page .ts-btn-more:hover { border-color: var(--black); color: var(--black); }

/* ----- hero ----- */
.ts-page .ts-hero { background: var(--black); color: var(--white); padding: 24px 0 40px; border-bottom: 3px solid var(--orange); }
.ts-page .ts-hero .foat-crumbs { margin-bottom: 18px; }
.ts-page .ts-kicker { font-size: 13px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }
.ts-page .ts-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(4rem, 12vw, 9rem); line-height: .82; letter-spacing: .5px; color: var(--white); }
.ts-page .ts-title span { color: var(--g3); font-size: .5em; letter-spacing: 1px; }
.ts-page .ts-title-none, .ts-page .ts-title-state { font-size: clamp(2.6rem, 8vw, 5.5rem); line-height: .95; }
.ts-page .ts-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; color: var(--g2); font-size: 16px; }
.ts-page .ts-meta span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ts-page .ts-meta svg { color: var(--orange); flex-shrink: 0; }
.ts-page .ts-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ts-page .ts-acts .ts-btn { min-height: 46px; }
.ts-page .ts-state-text { margin-top: 16px; color: var(--g2); font-size: 16px; max-width: 560px; }

/* ----- main grid ----- */
.ts-page .ts-main { background: var(--g1); padding: 48px 0 88px; }
.ts-page .ts-grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px; align-items: start; }

/* ----- the slip ----- */
.ts-page .ts-slip { background: var(--white); border-radius: 18px; overflow: hidden; border: 1px solid var(--g2); box-shadow: 0 24px 60px rgba(0,0,0,.12); }
.ts-page .ts-sl-top { background: var(--black); color: var(--white); text-align: center; padding: 18px 16px 16px; border-bottom: 3px solid var(--orange); }
.ts-page .ts-sl-track { font-family: var(--font-display); font-size: 34px; line-height: 1; letter-spacing: 1.5px; overflow-wrap: anywhere; }
.ts-page .ts-sl-ev { font-size: 14px; font-weight: 600; margin-top: 6px; }
.ts-page .ts-sl-when { font-size: 14px; font-weight: 600; margin-top: 2px; }
.ts-page .ts-sl-pow { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--g3); margin-top: 6px; }
.ts-page .ts-sl-pow b { color: var(--orange); }
.ts-page .ts-sl-lanes { display: grid; grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr); border-bottom: 1px solid var(--g2); }
.ts-page .ts-sl-lane { padding: 14px 12px; text-align: center; min-width: 0; }
.ts-page .ts-sl-lane.ts-win { background: var(--g1); }
.ts-page .ts-sl-ph { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--g5); }
.ts-page .ts-sl-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-page .ts-sl-ph-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--g5), var(--g6)); color: var(--g3); font-family: var(--font-display); font-size: 40px; letter-spacing: 1.5px; line-height: 1; overflow: hidden; }
.ts-page .ts-sl-lane.ts-win .ts-sl-ph { box-shadow: 0 0 0 3px var(--orange); }
/* winner badge: in the lane bar, on the outside of the winning lane's name */
.ts-page .ts-sl-tag { display: inline-block; vertical-align: middle; background: var(--orange); color: var(--white); font-size: 10px; font-weight: 800; letter-spacing: 1px; padding: 2px 8px; border-radius: 100px; line-height: 1.4; }
.ts-page .ts-sl-table thead th:first-child .ts-sl-tag { margin-right: 8px; }
.ts-page .ts-sl-table thead th:last-child .ts-sl-tag { margin-left: 8px; }
.ts-page .ts-sl-lbl { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--g3); margin-top: 10px; }
.ts-page .ts-sl-lane.ts-win .ts-sl-lbl { color: var(--black); }
.ts-page .ts-sl-h { display: block; font-family: var(--font-display); font-size: 24px; line-height: 1; letter-spacing: .5px; margin-top: 3px; overflow-wrap: anywhere; }
.ts-page .ts-sl-lane:not(.ts-win) .ts-sl-h { color: var(--g4); }
.ts-page .ts-sl-c { display: block; font-size: 13px; color: var(--g4); margin-top: 3px; }
.ts-page .ts-sl-vs { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 20px; color: var(--g3); border-left: 1px solid var(--g2); border-right: 1px solid var(--g2); }

.ts-page .ts-sl-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; margin: 0; }
.ts-page .ts-sl-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ts-page .ts-sl-table thead th { background: var(--black); color: var(--g3); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; padding: 9px 12px; }
.ts-page .ts-sl-table thead th:first-child { text-align: right; }
.ts-page .ts-sl-table thead th:last-child { text-align: left; color: var(--white); }
.ts-page .ts-sl-table th[scope="row"] { width: 104px; background: var(--g1); color: var(--g4); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; text-align: center; border-left: 1px solid var(--g2); border-right: 1px solid var(--g2); padding: 0; }
.ts-page .ts-sl-table tbody tr { border-bottom: 1px solid var(--g2); }
.ts-page .ts-sl-table td { padding: 9px 14px; font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--g3); border: 0; line-height: 1.4; overflow-wrap: anywhere; }
.ts-page .ts-sl-table td.ts-l { text-align: right; }
.ts-page .ts-sl-table td.ts-r { text-align: left; }
.ts-page .ts-sl-table td.ts-best { color: var(--black); font-weight: 800; }
.ts-page .ts-sl-table td.ts-own { color: var(--black); }
.ts-page .ts-sl-table td.ts-red { color: var(--red); }
.ts-page .ts-sl-table td.ts-best::after, .ts-page .ts-sl-table td.ts-l.ts-best::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); vertical-align: middle; position: relative; top: -2px; }
.ts-page .ts-sl-table td.ts-r.ts-best::after { margin-left: 8px; }
.ts-page .ts-sl-table td.ts-l.ts-best::after { content: none; }
.ts-page .ts-sl-table td.ts-l.ts-best::before { margin-right: 8px; }
.ts-page .ts-sl-table tr.ts-big td { font-size: 27px; padding: 12px 14px; }
.ts-page .ts-sl-table tr.ts-big th[scope="row"] { color: var(--black); }

/* THIS RIDE'S LANE (m.timeslip only, when both lanes ran: .ts-focus): this ride at full strength with a "This ride" pill
   under its car (never over the photo; none on phones) and an arrow in the head's middle cell; the other lane dimmed.
   The win still reads from the WINNER pill, the ring and the winner bar (Sam, 2026-11-04) */
.ts-page .ts-focus .ts-sl-lane.ts-dim .ts-sl-ph > *, .ts-page .ts-focus .ts-sl-lane.ts-dim > span { filter: grayscale(1); opacity: .4; }
.ts-page .ts-sl-this { display: block; width: max-content; margin: 8px auto 0; border-radius: 100px; background: var(--black); color: var(--white); box-shadow: 0 0 0 1.5px var(--orange); padding: 1px 9px; font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: .8px; text-transform: uppercase; }
.ts-page .ts-focus .ts-sl-table td.ts-own { font-weight: 700; }
.ts-page .ts-focus .ts-sl-table td.ts-best.ts-own { font-weight: 800; }
.ts-page .ts-focus .ts-sl-table td.ts-dim { color: var(--g3); font-weight: 400; }
.ts-page .ts-focus .ts-sl-table td.ts-dim.ts-red { color: var(--red); }
.ts-page .ts-focus .ts-sl-table thead th.ts-dim { color: var(--g3); }
.ts-page .ts-sl-table thead .ts-sl-ptr { color: var(--orange); white-space: nowrap; }
@media (min-width: 601px) {
  .ts-page .ts-focus .ts-sl-lane.ts-dim { background: transparent; }
  .ts-page .ts-focus .ts-sl-lane.ts-this .ts-sl-lbl { color: var(--black); }
  .ts-page .ts-focus .ts-sl-lane.ts-this .ts-sl-h { color: var(--ink); }
}
@media (max-width: 600px) {
  .ts-page .ts-sl-this { display: none; }
}

.ts-page .ts-sl-win { background: var(--black); color: var(--white); text-align: center; padding: 16px 14px; }
.ts-page .ts-sl-win b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: 1.5px; line-height: 1; overflow-wrap: anywhere; }
.ts-page .ts-sl-win span { display: block; margin-top: 6px; color: var(--orange); font-size: 15px; font-weight: 600; }
.ts-page .ts-sl-cond-h { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--g3); text-align: center; padding: 12px 0 0; }
.ts-page .ts-sl-cond { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); padding: 8px 10px 14px; }
.ts-page .ts-sl-cond span { text-align: center; font-family: var(--font-mono); font-size: 14px; font-weight: 700; padding: 6px 2px; border-left: 1px solid var(--g2); }
.ts-page .ts-sl-cond span:first-child { border-left: none; }
.ts-page .ts-sl-credit { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--g3); margin-top: 2px; }

/* ----- rail ----- */
.ts-page .ts-rail { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--ts-nav-h) + 24px); min-width: 0; }
.ts-page .ts-card { background: var(--white); border: 1px solid var(--g2); border-radius: 16px; padding: 20px; }
.ts-page .ts-card h2 { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: .4px; margin-bottom: 14px; }
.ts-page .ts-url { display: block; width: 100%; font-family: var(--font-mono); font-size: 13px; color: var(--g4); background: var(--g1); border: 1px solid var(--g2); border-radius: 10px; padding: 11px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 12px; }
.ts-page .ts-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-page .ts-btns .ts-btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
.ts-page .ts-hint { font-size: 13px; color: var(--g4); margin-top: 12px; }
.ts-page .ts-runs { list-style: none; border: 1px solid var(--g2); border-radius: 12px; overflow: hidden; }
.ts-page .ts-run { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--g2); color: var(--black); min-height: 56px; }
.ts-page .ts-runs li:first-child .ts-run { border-top: none; }
.ts-page a.ts-run:hover { background: var(--g1); color: var(--black); }
.ts-page .ts-run.ts-cur { background: var(--black); color: var(--white); }
.ts-page .ts-run .ts-t { font-size: 14px; font-weight: 600; }
.ts-page .ts-run .ts-t small { display: block; font-size: 12px; font-weight: 500; color: var(--g3); }
.ts-page .ts-run .ts-et { font-family: var(--font-mono); font-size: 20px; font-weight: 700; }
.ts-page .ts-run.ts-top .ts-et { color: var(--orange); }
.ts-page .ts-run .ts-go { font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.ts-page .ts-run.ts-cur .ts-go { color: var(--orange); }
.ts-page .ts-run .ts-bt { display: inline-block; margin-left: 8px; font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: 1px; background: var(--orange); color: var(--white); border-radius: 100px; padding: 2px 7px; vertical-align: middle; }
.ts-page .ts-ride { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.ts-page .ts-ride img, .ts-page .ts-ride-ph { width: 96px; height: 64px; border-radius: 10px; object-fit: cover; }
.ts-page .ts-ride-ph { display: flex; align-items: center; justify-content: center; background: var(--g5); color: var(--g3); font-family: var(--font-display); font-size: 28px; }
.ts-page .ts-ride b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1; overflow-wrap: anywhere; }
.ts-page .ts-ride span { display: block; font-size: 13px; color: var(--g4); margin-top: 3px; overflow-wrap: anywhere; }
.ts-page .ts-ride-btn { margin-top: 14px; width: 100%; min-height: 44px; }

/* ----- toast ----- */
.ts-page .ts-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--black); color: var(--white); padding: 12px 20px; border-radius: 100px; font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 1300; display: flex; gap: 10px; align-items: center; max-width: calc(100vw - 32px); }
.ts-page .ts-toast.ts-show { opacity: 1; transform: translate(-50%, 0); }
.ts-page .ts-toast i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }

@media (max-width: 1024px) {
  .ts-page .ts-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; gap: 24px; }
  .ts-page .ts-rail { position: static; }
}
@media (max-width: 768px) {
  .ts-page .ts-hero { padding: 24px 0 30px; }
  .ts-page .ts-meta { font-size: 14.5px; }
  .ts-page .ts-acts .ts-btn { flex: 1 1 auto; }
  .ts-page .ts-main { padding: 24px 0 64px; }
}
@media (max-width: 480px) {
  .ts-page .ts-wrap { padding: 0 16px; }
  .ts-page .ts-sl-lanes { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); }
  .ts-page .ts-sl-lane { padding: 10px 8px; }
  .ts-page .ts-sl-h { font-size: 20px; }
  .ts-page .ts-sl-c { font-size: 12px; }
  .ts-page .ts-sl-vs { font-size: 16px; }
  .ts-page .ts-sl-track { font-size: 28px; }
  .ts-page .ts-sl-table th[scope="row"] { width: 78px; font-size: 10px; letter-spacing: .6px; padding: 0 4px; }
  .ts-page .ts-sl-table td { font-size: 15px; padding: 8px 8px; }
  .ts-page .ts-sl-table tr.ts-big td { font-size: 19px; padding: 10px 6px; }
  .ts-page .ts-sl-table td { white-space: nowrap; }
  .ts-page .ts-sl-table td.ts-r.ts-best::after { margin-left: 5px; }
  .ts-page .ts-sl-table td.ts-l.ts-best::before { margin-right: 5px; }
  .ts-page .ts-sl-table thead th { padding: 8px; font-size: 10px; }
  .ts-page .ts-sl-win b { font-size: 21px; }
  .ts-page .ts-sl-cond span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-page .ts-btn, .ts-page .ts-toast { transition: none; }
}

/* ----- narrow phones (320-360) ----- */
.ts-page .ts-run .ts-t { white-space: nowrap; }
.ts-page .ts-run .ts-et { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; text-align: right; }
.ts-page .ts-run .ts-bt { margin-left: 0; }
@media (max-width: 360px) {
  .ts-page .ts-card { padding: 16px; }
  .ts-page .ts-run { gap: 8px; padding: 10px; }
  .ts-page .ts-run .ts-et { font-size: 17px; }
  .ts-page .ts-sl-h { font-size: 17px; }
  .ts-page .ts-sl-table td { padding: 8px 5px; }
}

/* the root layout prints <div class="row-fluid"><div class="span12"><hr> after the page: a white strip above the footer */
#main > .ts-page + .row-fluid { display: none; }

/* privacy-hidden lane placeholder */
.ts-page .ts-sl-ph-priv { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: 1.6px; }
#main + .row-fluid:has(> .span12 > hr) { display: none; }
/* the site footer carries margin-top: 40px, a white strip under the grey page; pull it up flush */
.ts-page { margin-bottom: -40px; }

/* ----- phone slip: short enough to screenshot whole ----- */
@media (max-width: 600px) {
  /* tighter header, table, winner bar and conditions */
  .ts-page .ts-slip .ts-sl-top { padding: 9px 10px 8px; }
  .ts-page .ts-slip .ts-sl-track { font-size: 24px; }
  .ts-page .ts-slip .ts-sl-ev,
  .ts-page .ts-slip .ts-sl-when { font-size: 12.5px; line-height: 1.3; margin-top: 2px; }
  .ts-page .ts-slip .ts-sl-pow,
  .ts-page .ts-slip .ts-sl-credit { font-size: 9.5px; letter-spacing: 1px; line-height: 1.3; margin-top: 2px; }
  .ts-page .ts-slip .ts-sl-table thead th { padding: 3px 6px; line-height: 1.3; white-space: nowrap; }
  /* the badge sits inside the lane bar's line height, so a winner doesn't change the bar's height */
  .ts-page .ts-slip .ts-sl-tag { font-size: 9px; letter-spacing: .6px; line-height: 13px; padding: 0 5px; vertical-align: top; }
  .ts-page .ts-slip .ts-sl-table thead th:first-child .ts-sl-tag { margin-right: 5px; }
  .ts-page .ts-slip .ts-sl-table thead th:last-child .ts-sl-tag { margin-left: 5px; }
  .ts-page .ts-slip .ts-sl-table td { font-size: 14px; line-height: 1.25; padding: 3px 8px; }
  .ts-page .ts-slip .ts-sl-table tr.ts-big td { font-size: 18px; line-height: 1.2; padding: 4px 6px; }
  .ts-page .ts-slip .ts-sl-win { padding: 7px 10px; }
  .ts-page .ts-slip .ts-sl-win b { font-size: 18px; }
  .ts-page .ts-slip .ts-sl-win span { font-size: 12.5px; line-height: 1.25; margin-top: 2px; }
  .ts-page .ts-slip .ts-sl-cond-h { font-size: 9.5px; line-height: 1.2; padding-top: 5px; }
  .ts-page .ts-slip .ts-sl-cond { padding: 1px 8px 5px; }
  .ts-page .ts-slip .ts-sl-cond span { font-size: 12px; line-height: 1.25; padding: 1px 2px; }

  /* edge-to-edge photo band with names on the photos */
  .ts-page .ts-sl-lanes { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; background: var(--white); border-bottom: 2px solid var(--white); }
  .ts-page .ts-sl-lane { position: relative; height: 92px; padding: 0; background: var(--g5); overflow: hidden; text-align: left; }
  .ts-page .ts-sl-ph { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
  .ts-page .ts-sl-lane.ts-win .ts-sl-ph { box-shadow: none; }
  .ts-page .ts-sl-ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 8%, rgba(0,0,0,.2) 62%, rgba(0,0,0,0) 100%); }
  .ts-page .ts-sl-ph-empty { align-items: flex-start; padding-top: 24px; font-size: 24px; }
  .ts-page .ts-sl-lane.ts-win { box-shadow: inset 0 -3px 0 var(--orange); }
  .ts-page .ts-sl-lbl { display: none; }
  .ts-page .ts-sl-h, .ts-page .ts-sl-lane:not(.ts-win) .ts-sl-h { position: absolute; left: 7px; right: 7px; bottom: 19px; margin: 0; font-size: 18px; color: var(--white); text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ts-page .ts-sl-c { position: absolute; left: 7px; right: 7px; bottom: 5px; margin: 0; font-size: 11px; line-height: 1.2; color: var(--g2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ts-page .ts-sl-vs { position: absolute; top: 34px; left: 50%; width: 24px; height: 24px; margin-left: -12px; z-index: 2; border: 0; border-radius: 50%; background: var(--black); color: var(--white); font-size: 12px; line-height: 1; }
}

/* narrow phones: keep each track condition on one line */
@media (max-width: 380px) {
  .ts-page .ts-slip .ts-sl-cond span { font-size: 11px; padding: 1px; white-space: nowrap; }
}

/* empty table rows: hidden, except on the fixed-height phone slip below */
.ts-page .ts-sl-table tr.ts-empty { display: none; }

/* phone slip: one fixed height for every slip, whatever it holds. Every row always shows, and the table takes the
   space that is left, so a missing winner bar or conditions strip makes its rows taller, not the slip shorter. */
@media (max-width: 600px) {
  .ts-page .ts-slip { display: flex; flex-direction: column; height: 552px; }
  .ts-page .ts-slip > * { flex: none; }
  .ts-page .ts-slip > .ts-sl-table { flex: 1 1 0; min-height: 0; }
  /* the table lays out as flex + grid so its rows share the leftover height the same way in every browser (roles keep it a table to screen readers) */
  .ts-page .ts-slip { --ts-label-w: 104px; }
  .ts-page .ts-slip .ts-sl-table { display: flex; flex-direction: column; width: 100%; }
  .ts-page .ts-slip .ts-sl-table thead { display: block; flex: none; }
  .ts-page .ts-slip .ts-sl-table tbody { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .ts-page .ts-slip .ts-sl-table tr,
  .ts-page .ts-slip .ts-sl-table tr.ts-empty { display: grid; grid-template-columns: minmax(0, 1fr) var(--ts-label-w) minmax(0, 1fr); }
  .ts-page .ts-slip .ts-sl-table tbody tr { flex: 1 1 auto; }
  .ts-page .ts-slip .ts-sl-table td, .ts-page .ts-slip .ts-sl-table th[scope="row"] { display: flex; align-items: center; width: auto; }
  .ts-page .ts-slip .ts-sl-table th[scope="row"] { justify-content: center; }
  .ts-page .ts-slip .ts-sl-table td.ts-l { justify-content: flex-end; }
  .ts-page .ts-slip .ts-sl-table td.ts-r { justify-content: flex-start; }
  .ts-page .ts-slip .ts-sl-table td.ts-best::before, .ts-page .ts-slip .ts-sl-table td.ts-best::after { top: 0; flex: none; }
  .ts-page .ts-slip .ts-sl-table td { padding-top: 1px; padding-bottom: 1px; }
  .ts-page .ts-slip .ts-sl-table tr.ts-big td { padding-top: 2px; padding-bottom: 2px; }
  /* every header line holds exactly one line, even when empty, so the orange bar, photos and lane bar line up on every slip */
  .ts-page .ts-slip .ts-sl-track { min-height: 1em; }
  .ts-page .ts-slip .ts-sl-ev,
  .ts-page .ts-slip .ts-sl-when { min-height: 1.3em; }
  .ts-page .ts-slip .ts-sl-track,
  .ts-page .ts-slip .ts-sl-ev,
  .ts-page .ts-slip .ts-sl-when,
  .ts-page .ts-slip .ts-sl-credit,
  .ts-page .ts-slip .ts-sl-win b,
  .ts-page .ts-slip .ts-sl-win span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 480px) {
  .ts-page .ts-slip { --ts-label-w: 78px; }
}