/* ============================================================================
   ROTTERDAM 2026 SKIN — loaded after app.css, restyles every inner page to the look of
   rotterdam2026.com and the approved landing page 1: flat navy canvas, orange pills, cream tints,
   heavy uppercase Montserrat. Styling only: no markup depends on it.

   Palette measured from the live site (2026-10-08): navy #101242 (bands) / #000735 (header, footer),
   orange #ff6315, cream #fff8f4.

   CONTRAST RULES (WCAG AA 4.5:1, measured):
   - white on #ff6315 is only 2.98:1 and FAILS for small text, so every orange FILL carries navy
     ink (#000735 on #ff6315 = 6.51:1). Flip --on-accent to #fff here if the client insists on the
     reference site's white-on-orange (it fails AA; large bold text only).
   - orange as TEXT is only legal on navy (#ff6315 on #101242 = 5.94:1, on #000735 = 6.51:1);
     on white/cream cards the in-card accent ink is the darker --accent-ink #b83b00
     (5.73:1 white, 5.46:1 cream, 5.26:1 on #f5f5f5).
   - the player and live pages stay `.theme-dark` (near-black); only the header, footer and
     accents are shared with them.
   ============================================================================ */
:root{
  --rt-navy:#101242;
  --rt-navy-2:#181b5c;
  --rt-ink:#000735;
  --rt-orange:#ff6315;
  --rt-cream:#fff8f4;
  --rt-mute:#b9bbe0;

  --band:var(--rt-navy);
  --accent:var(--rt-orange);
  --on-accent:var(--rt-ink);
  --accent-ink:#b83b00;
  --primary:var(--rt-navy);
  --live:var(--rt-orange);
  --support:#ffb08a;
  --nav-active:var(--rt-orange);
  --on-nav:var(--rt-ink);

  --text:var(--rt-navy);
  --text-soft:#2b2e63;
  --text-muted:#5b5d86;
  --bg-raised:var(--rt-cream);
  --surface-2:#f4efec;
  --border:#e9dfd8;
  --border-card:#e9dfd8;
  --border-btn:#cfc3bb;

  --metal-gold-ink:#836200;
  --metal-silver-ink:#5b5d86;
  --metal-bronze-ink:#8f5a28;

  /* flat: no shadow stacks, no glows */
  --shadow-card:none;
  --glow-cta:none;
  --glow-card:none;
}
/* the watch/live scope keeps the near-black player theme; it only borrows the accent set */
.theme-dark{
  --accent:var(--rt-orange);
  --accent-ink:var(--rt-orange);
  --on-accent:var(--rt-ink);
  --live:var(--rt-orange);
  --primary:var(--rt-orange);
  --nav-active:var(--rt-orange);
  --on-nav:var(--rt-ink);
}

/* ---- canvas: flat navy, no ribbon art anywhere ---- */
body:not(.theme-dark){background:var(--rt-navy)}
body:not(.theme-dark)::before{content:none;background:none}
body.theme-dark::after{display:none}
.page-loader,body:not(.theme-dark) .page-loader{background:var(--rt-navy)}

/* ---- headings: heavy, uppercase, tight (the reference's voice) ---- */
.hero h1,.hero-sm h1,.rail h2,.rail-h,.shelf-title,.sec-h,.day-h,.sport-h,.event-h,.ec-h,
.footer-statement,.profile-id h1,.page-portal h1{
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02}
.hero h1,.hero-sm h1{font-size:clamp(2rem,5vw,3.6rem);hyphens:auto}
.hero .eyebrow,.hero-sm .eyebrow,.hero-sm:not(.hero-img) .eyebrow{color:var(--rt-orange);font-weight:800;letter-spacing:.14em}
.prose-card h1,.prose-card h2,body:not(.theme-dark) .prose-card h1,body:not(.theme-dark) .prose-card h2{
  color:var(--rt-navy);text-transform:uppercase;font-weight:800}
/* ghost watermark words fight the flat look */
[data-ghost]::before,.hero-sm:not(.hero-img) h1[data-ghost]::before,.ec-ghost{display:none !important}

/* ---- hero bands: flat navy-2 blocks instead of the photographic veils ---- */
.hero-sm:not(.hero-img),.hero-img,.hero.hero-art{
  background:var(--rt-navy-2);background-image:none;border-radius:14px;border:0}
.hero-sm:not(.hero-img){padding:1.75rem 1.5rem 1.5rem}
.hero-img::after,.hero-sm:not(.hero-img)::before,.hero-sm:not(.hero-img)::after,.hero-art::after{display:none}
.hero{border-block-end-color:rgba(255,255,255,.14)}

/* ---- buttons: orange pills with navy ink (6.51:1) ---- */
.btn,.btn-accent,button.btn{
  background:var(--rt-orange);color:var(--rt-ink);border:2px solid var(--rt-orange);border-radius:999px;
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:.7rem 1.4rem;box-shadow:none}
.btn:hover,.btn-accent:hover{filter:none;transform:none;background:#ff7a36;border-color:#ff7a36;color:var(--rt-ink)}
.btn-ghost,.btn-outline{
  background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7);border-radius:999px;
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.btn-ghost:hover,.btn-outline:hover,body:not(.theme-dark) .sched-gateways .btn-outline:hover{
  background:transparent;color:var(--rt-orange);border-color:var(--rt-orange)}
/* outline buttons that live INSIDE a white/cream card keep navy ink */
.un-card .btn-outline,.prose-card .btn-outline,.auth-card .btn-outline,.af .btn-outline,.af .btn-ghost{
  color:var(--rt-navy);border-color:var(--rt-navy)}
.un-card .btn-outline:hover,.prose-card .btn-outline:hover,.af .btn-outline:hover,.af .btn-ghost:hover{
  color:var(--accent-ink);border-color:var(--accent-ink)}
.skip-link{background:var(--rt-orange);color:var(--rt-ink)}

/* ---- header: ink bar, white nav, orange active pill ---- */
.site-header,body:not(.theme-dark) .site-header,.theme-dark .site-header{
  background:var(--rt-ink);backdrop-filter:none;border-block-end:1px solid rgba(255,255,255,.14);color:#fff}
.site-header.scrolled{background:var(--rt-ink)}
.site-header .brand,.site-header .wm{color:#fff}
.nav a,.theme-dark .nav a{color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.76rem;border-radius:999px;padding:.5rem .8rem}
.nav a:hover,.theme-dark .nav a:hover{color:var(--rt-orange);background:transparent}
.nav a.active,.theme-dark .nav a.active{color:var(--rt-ink);background:var(--rt-orange)}
.nav a.active .live-dot{background:var(--rt-ink)}
/* The ACTIVE pill is navy ink on orange (6.51:1) on every page. app.css's `.site-header .nav a.active`
   (white on orange, 2.98:1) has the same specificity as the dark-theme rule above and only lost on
   Live, so Live looked different from Schedule/Draw/Athletes/Results/Rewatch. Same specificity,
   later in source: it wins on both themes. --on-accent is the documented one-line switch. */
.site-header .nav a.active{color:var(--on-accent)}
.live-dot{background:var(--rt-orange)}
/* Client round 15 Oct: the Live item is always an orange pill, for every visitor on every page (static
   styling, not entitlement-aware). Navy ink on orange = 6.51:1. Because the active pill is orange too,
   an active page that is not Live gets a white ring so the two states stay distinguishable. */
.site-header .nav a.nav-live,.site-header .nav a.nav-live:hover,.site-header .nav a.nav-live.active{color:var(--rt-ink);background:var(--rt-orange)}
.site-header .nav a.nav-live:hover{background:#ff7a38}
.nav a.nav-live .live-dot,.nav a.nav-live.active .live-dot{background:var(--rt-ink)}
.site-header .nav a.active:not(.nav-live){box-shadow:inset 0 0 0 2px #fff}
.nav a.nav-live{border-color:transparent}
.event-mark,.event-mark .sep,.theme-dark .event-mark .sep{color:rgba(255,255,255,.72)}
.event-mark:hover{color:#fff}
.icon-btn,.signin-link,.account-menu summary,.lang-menu summary{color:#fff}
.icon-btn:hover,.signin-link:hover{background:transparent;color:var(--rt-orange)}
/* The language menu sits on the navy header. app.css paints its OPEN state in var(--text) (indigo),
   which on navy is invisible: once clicked, "EN" vanished unless the pointer stayed on it. Open stays
   white with an orange ring; orange text is the hover cue only. */
.lang-menu summary{border-color:rgba(255,255,255,.55)}
.lang-menu[open] summary{color:#fff;border-color:var(--rt-orange)}
.lang-menu summary:hover{color:var(--rt-orange);border-color:var(--rt-orange)}
/* The account button turns into a white disc on hover/open (app.css), but app.css also forces the
   header icon white, so the open menu showed an empty white circle. Navy icon on the white disc. */
.site-header .account-menu summary:hover,.site-header .account-menu[open] summary{color:var(--rt-ink)}
.account-list .account-staff{margin-block-start:.2rem;padding:.55rem .6rem .15rem;border-block-start:1px solid var(--border);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.burger span{background:#fff}
@media (max-width:64rem){
  .nav{background:var(--rt-ink)}
  /* Drawer items are pills: the base rule only drew border-block-end, which on a 999px radius
     shows as a lone lower curve (read as a clipped pill). Draw the whole outline; the filled
     orange CTA and the active pill keep no extra edge. */
  .nav a{border:1px solid rgba(255,255,255,.32)}
  .nav a.active{border-color:transparent}
  .nav a.nav-action-cta{border:0}
}

/* ---- footer: flat ink band, no ribbon image ---- */
.site-footer,.theme-dark .site-footer{background:var(--rt-ink);color:var(--rt-mute)}
.footer-hero,.ec,body:not(.theme-dark) .footer-hero,.theme-dark .footer-hero{
  background:var(--rt-navy-2);border-block-end:0}
.footer-eyebrow,.ec-eyebrow{color:var(--rt-orange);font-weight:800}
.footer-statement,.ec-h{color:#fff}
.site-footer a:hover{color:var(--rt-orange)}
.site-footer .footer-col h4,.site-footer h4{color:#fff}
.site-footer .footer-col h4::after,.footer-col h3::after{background:var(--rt-orange)}
.footer-social .social-link{border-color:rgba(255,255,255,.35);color:#fff}
.footer-social .social-link:hover{border-color:var(--rt-orange);color:var(--rt-orange)}
.footer-bottom,.footer-legal{color:var(--rt-mute)}

/* ---- wordmark chip ("TV" was a lime fill) ---- */
.wm-tv{background:var(--rt-orange);color:var(--rt-ink)}

/* ---- cards: flat, 12px, no gradient, orange hover ---- */
body:not(.theme-dark) .card,
body:not(.theme-dark) .athlete-card,
body:not(.theme-dark) .day-card,
body:not(.theme-dark) .un-card,
body:not(.theme-dark) .event-card,
body:not(.theme-dark) .portal-card,
body:not(.theme-dark) .prose-card,
body:not(.theme-dark) .auth-card,
body:not(.theme-dark) .draw-card,
body:not(.theme-dark) .standings-wrap,
body:not(.theme-dark) .filters,
body:not(.theme-dark) .athlete-filters{
  background:#fff;background-image:none;border:1px solid var(--border-card);border-radius:12px;box-shadow:none}
body:not(.theme-dark) .card:hover,
body:not(.theme-dark) .athlete-card:hover,
body:not(.theme-dark) .day-card:hover,
body:not(.theme-dark) .event-card:hover,
body:not(.theme-dark) .portal-card:hover{
  border-color:var(--rt-orange);box-shadow:none;transform:none}
/* Flags: a hairline navy outline so white flag areas (INA, POL, MON, JPN, SGP...) read on any
   light surface. app.css's own ring is white at 14%, invisible on light. */
body:not(.theme-dark) .flag-img{box-shadow:0 0 0 1px rgba(0,7,53,.32)}
/* Nation cards: light periwinkle blue so they lift off the navy canvas and white flags keep an edge.
   Ink #000735 on #d3dcfa = 14.6:1; --nc-mute #33356b = 8.1:1; code #1d2080 = 10.5:1 (all AA). */
body:not(.theme-dark) .nation-card{
  --nc-mute:#33356b;
  background:#d3dcfa;background-image:none;border:1px solid #a9b6ec;border-radius:12px;box-shadow:none;color:var(--rt-ink)}
body:not(.theme-dark) .nation-card:hover{background:#e0e7fd;border-color:var(--rt-orange);box-shadow:none;transform:none}
body:not(.theme-dark) .nation-card .flag{filter:none}
body:not(.theme-dark) .nation-card .code{color:#1d2080}
body:not(.theme-dark) .nation-card .n-athletes,
body:not(.theme-dark) .nation-card .tally{color:var(--nc-mute)}
body:not(.theme-dark) .athlete-card .a-nation{color:var(--accent-ink)}
body:not(.theme-dark) .athlete-card .a-nation{color:var(--accent-ink)}
body:not(.theme-dark) .athlete-card .a-nation{color:var(--text-muted)}
body:not(.theme-dark) .day-card-tba{opacity:1}
body:not(.theme-dark) .filters label,
body:not(.theme-dark) .athlete-filters label{color:var(--text-muted);font-weight:700}
body:not(.theme-dark) .filters select,
body:not(.theme-dark) .athlete-filters select,
body:not(.theme-dark) .athlete-filters input,
body:not(.theme-dark) .auth-form input,
body:not(.theme-dark) .auth-form select,
body:not(.theme-dark) input[type=search],
body:not(.theme-dark) input[type=text],
body:not(.theme-dark) input[type=email],
body:not(.theme-dark) input[type=password],
body:not(.theme-dark) select,
body:not(.theme-dark) textarea{
  border:2px solid var(--border-btn);border-radius:10px;color:var(--rt-navy);background:#fff}
body:not(.theme-dark) .filters select:focus,
body:not(.theme-dark) .athlete-filters input:focus,
body:not(.theme-dark) .auth-form input:focus,
body:not(.theme-dark) input:focus,
body:not(.theme-dark) select:focus,
body:not(.theme-dark) textarea:focus{
  outline:0;border-color:var(--rt-orange);box-shadow:0 0 0 3px rgba(255,99,21,.25)}
body:not(.theme-dark) .filters button,
body:not(.theme-dark) .athlete-filters button{background:var(--rt-orange);color:var(--rt-ink);border:0;border-radius:999px;
  font-family:inherit;font-size:.92rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:.65rem 1.2rem}

/* ---- badges ---- */
.badge{border-radius:999px;font-weight:800;letter-spacing:.06em}
.badge-live{background:var(--rt-orange);color:var(--rt-ink)}
.badge-upcoming{background:var(--rt-navy);color:var(--rt-orange)}
.badge-replay{background:var(--rt-navy);color:#fff}
.portal-card--replay .badge-replay{background:var(--rt-navy);color:#fff}
.athlete-card .rank-badge{background:var(--rt-navy);color:#fff}

/* ---- canvas ink: white on navy, ORANGE (not lime) links on navy ---- */
body:not(.theme-dark) .shelf-more,body:not(.theme-dark) .sec-more,body:not(.theme-dark) .mosaic-more,
body:not(.theme-dark) .all-events-link a,body:not(.theme-dark) .archive-banner a,body:not(.theme-dark) .empty-cta a,
body:not(.theme-dark) .crumbs a:hover,body:not(.theme-dark) .all-days:hover,body:not(.theme-dark) .back a:hover{
  color:var(--rt-orange)}
body:not(.theme-dark) .pagination .page-cur{color:var(--rt-orange)}
body:not(.theme-dark) .pagination .page-link{border-radius:999px}
body:not(.theme-dark) .day-nav{background:var(--rt-navy)}
body:not(.theme-dark) .day-nav a{border-radius:12px}
body:not(.theme-dark) .day-nav a.active,body:not(.theme-dark) .day-nav a:hover{border-color:var(--rt-orange)}
body:not(.theme-dark) .day-nav a.active .d,body:not(.theme-dark) .medal-jump a.active .d{color:var(--rt-orange)}
body:not(.theme-dark) .facet{border-radius:999px}
body:not(.theme-dark) .facet-on{color:var(--rt-orange);border-color:var(--rt-orange)}
body:not(.theme-dark) .facet:hover{border-color:var(--rt-orange)}
body:not(.theme-dark) .stab-bar label:hover{color:#fff}
body:not(.theme-dark) .empty{border-radius:12px}
.hero-dot.is-active,.af-dot.is-active,body:not(.theme-dark) .hero-dot.is-active,body:not(.theme-dark) .af-dot.is-active{
  background:var(--rt-orange);border-color:var(--rt-orange)}

/* ---- draw page: headings sit BARE on the navy canvas, so white/pale ink (the card ink stays navy) ---- */
.draw-gender h2{color:#fff;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.6rem,3.5vw,2.4rem)}
.draw-gender h3{color:var(--rt-mute);font-weight:800}
.draw-note{color:var(--rt-mute)}
.draw-card{border-radius:12px}
.draw-card header b{font-family:var(--display);font-weight:800;color:var(--rt-navy)}
.draw-card header{border-block-end:3px solid var(--rt-orange);padding-block-end:.5rem}

/* ---- medal podium: leader is the ORANGE block (navy ink 6.51:1), the rest white cards ---- */
.mp-card{background:#fff;background-image:none;box-shadow:none;border-color:var(--border-card)}
.mp-card:hover{transform:none;box-shadow:none;border-color:var(--rt-orange)}
.mp-lead,.mp-lead:hover{background:var(--rt-orange);background-image:none;border-color:var(--rt-orange);
  box-shadow:none;color:var(--rt-ink)}
.mp-lead .mp-name,.mp-lead .mp-num{color:var(--rt-ink)}
.mp-lead .mp-code,.mp-lead .mp-glabel{color:var(--rt-ink)}
.mp-lead .mp-chip{background:var(--rt-ink);border-color:var(--rt-ink)}
.mp-num{color:var(--metal-gold-ink)}               /* metals are FILLS; as text on white use the ink tokens */
.mp-1 .mp-pos{box-shadow:0 0 0 4px var(--rt-orange)}
.mp-pos{box-shadow:none}
.col-gold .col-label{color:var(--metal-gold-ink)}
.col-silver .col-label{color:var(--metal-silver-ink)}
.col-bronze .col-label{color:var(--metal-bronze-ink)}
.medals-panel{box-shadow:none;border-radius:14px}
.page-medals .medals tbody tr:hover{background:#fff1e9}

/* ---- medal + results tables: white rows, navy header ink ---- */
table.results th,.medal-table th,table th{color:var(--text-muted);font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.un-time{color:var(--accent-ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--rt-orange);outline-offset:2px}

/* ---- leftovers found by the contrast scan ---- */
.sched .sched-head{background:var(--rt-orange);color:var(--rt-ink);border-start-start-radius:12px;border-start-end-radius:12px}
.sched-eyebrow{opacity:1}
.btn-ghost.auth-secondary,.auth-card .btn-ghost,.filters .btn-ghost,.card .btn-ghost,.prose-card .btn-ghost{
  color:var(--rt-navy);border-color:var(--rt-navy)}
.btn-ghost.auth-secondary:hover,.auth-card .btn-ghost:hover{color:var(--accent-ink);border-color:var(--accent-ink)}
.theme-dark .score-breakdown{color:#9a9aa4}   /* was #5f5f69 = 3.13:1 on the near-black */

/* ---- the player pages stay dark; just keep the live pill on-palette ---- */
.theme-dark .badge-live{background:var(--rt-orange);color:var(--rt-ink)}
.theme-dark .hero-sm:not(.hero-img){background:transparent}

@media (prefers-reduced-motion:reduce){
  .btn,.nav a,.card,.nation-card,.athlete-card{transition:none}
  .live-dot{animation:none}
}

/* ---- B1 client round 2: schedule days (Day 1..N) ---- */
.sd-list{display:flex;flex-direction:column;gap:10px;margin-block:1rem 1.5rem}
.sd{background:#fff;border:1px solid var(--border-card);border-radius:12px;overflow:hidden}
.sd[open]{border-color:var(--rt-orange)}
.sd>summary{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;padding:.9rem 1.1rem;cursor:pointer;list-style:none;color:var(--rt-navy)}
.sd>summary::-webkit-details-marker{display:none}
.sd>summary::after{content:"+";margin-inline-start:auto;font-weight:800;font-size:1.3rem;color:var(--accent-ink)}
.sd[open]>summary::after{content:"\2212"}
.sd-n{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.15rem}
.sd-date{font-weight:700}
.sd-count{color:var(--text-muted);font-size:.85rem}
/* Collapsed day: what happens that day, one line per block, readable without opening it. */
.sd-blocks{flex-basis:100%;order:5;display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;margin:0;font-size:.92rem;color:var(--text)}
.sd-block b{font-weight:800}
.sd-block i{font-style:normal;color:var(--text-muted)}
.sd-block i{font-size:.85rem}
.row-time .t-tz{display:block;font-size:.75rem;color:var(--text-muted)}
.sd-prov{background:var(--rt-orange);color:var(--rt-ink);border-radius:999px;padding:.05rem .55rem;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.sd .rows{border-top:1px solid var(--border-card);margin:0;padding:.3rem .6rem .6rem;list-style:none}
.sd .row-title{color:var(--rt-navy)}
.day-jump a{scroll-margin-top:5rem}
.sd{scroll-margin-top:5rem}

/* ---- B1: live page in the Rotterdam navy (still .theme-dark for the badges) ---- */
body.page-live{background:var(--rt-navy)}
body.page-live::before,body.page-live::after{content:none;background:none;display:none}
.page-live .hero-sm{background:var(--rt-navy-2);background-image:none}
.page-live .filters{background:var(--rt-navy-2);border:0;border-radius:12px}
.page-live .filters label{color:var(--rt-mute);font-weight:700}
.page-live .filters select{background:#fff;color:var(--rt-navy);border:2px solid var(--border-btn);border-radius:10px}
.live-feature{background:var(--rt-navy-2);background-image:none;border:0;border-left:6px solid var(--rt-orange);border-radius:12px;box-shadow:none;min-block-size:0}
.live-feature::after{content:none;background:none}
.live-feature:hover{transform:none;box-shadow:none}
.live-feature .lf-body{padding:1.6rem}
/* "Latest replay" (Rewatch) carries its photo as --lf-img: layered UNDER the navy veil here, so the
   flat-card rule above cannot strip it and an inline background-image cannot paint over the veil. */
.live-feature.lf-photo{background-image:linear-gradient(to top,rgba(16,18,66,.95),rgba(16,18,66,.55) 58%,rgba(16,18,66,.2)),var(--lf-img);
  background-size:cover;background-position:center;min-block-size:clamp(15rem,34vw,22rem)}
.lf-eyebrow{color:var(--rt-mute)}
.lf-title{color:#fff}
.page-live .rail-h{color:#fff}
.ln-list{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-direction:column;gap:8px}
.ln-row{display:grid;grid-template-columns:4.5rem 1fr auto;align-items:center;gap:1rem;background:var(--rt-navy-2);border-left:6px solid var(--rt-orange);border-radius:10px;padding:.85rem 1rem;color:#fff}
.ln-row:hover{background:#20246f}
.ln-time{font-family:var(--display);font-weight:800;color:var(--rt-orange);font-variant-numeric:tabular-nums}
.ln-title{font-weight:700}
.ln-date{color:var(--rt-mute);font-size:.85rem;white-space:nowrap}
@media(max-width:34rem){.ln-row{grid-template-columns:3.6rem 1fr}.ln-date{grid-column:2}}

/* ---- B1 round 2 hygiene: nothing under 12px, 44px touch targets ---- */
.profile-stats span,.day-nav a .dow,.day-count,.dc-dow,.dc-live,.dc-sports,.picker-label,.footer-eyebrow,
.footer-col h3,.site-footer .sponsors-label,.sport-count,.ep-edition,.col-label,.mc-nat,.mc-name,.mdf-label,
.mp-code,.mp-glabel,.bout-round,.bout-event,.bout-time,.np-h .code,.lf-bout .vs,.un-cal,.athlete-rank .rank-disc,
.career-when,.code-children .code,.athlete-bio .k,.court-live,.court-match .vs,.pl-sponsor-label,.badge,
.sched-eyebrow,.dow,.athlete-card .rank-badge,.mp-chip i,small{font-size:.75rem}
.footer-col a{display:flex;align-items:center;min-height:44px}
.l-head a{display:inline-flex;align-items:center;min-height:44px}
.l-day__h{min-height:44px;justify-content:center}
@media(max-width:64rem){
  .nav a,.nav .nav-actions a{display:flex;align-items:center;min-height:44px}
  .nav .nav-action-cta{justify-content:center}
}
.row-cal{font-size:.75rem;min-height:44px}
/* Phone tap targets (WCAG 2.5.5, 44px): sign-in form labels and its alt links; on a phone the draw
   page's nation-code links too (24px high). Desktop keeps the compact draw list. */
.auth-form label{display:flex;align-items:center;min-height:44px}
.auth-alt a,.page-link{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:48rem){
  /* Watch-page links (edition, discipline, back) and the sign-up Terms/Privacy links sat at 19-43px.
     The sentence links grow their hit area with padding (an inline box's padding does not move the
     line); the stand-alone ones become 44px flex rows. */
  .watch-edition a,.watch-sub .meta a,.back a{display:inline-flex;align-items:center;min-height:44px}
  .auth-note a{padding-block:.8rem}
  .draw-card li{min-height:44px}
  .draw-card li a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---- B5-mobile: 375/390 pass ---- */
/* Header and footer logo links were 38-42px high. */
/* Landing: the three-up stat boxes ("FEDERATIONS" at 12px cannot fit a third of 303px), so a grid
   child's min-content pushed the whole column to 347px and the page clipped it at 375. */
.landing--1 .l-two>*{min-width:0}
@media(max-width:30rem){
  .landing--1 .l-stats{grid-template-columns:1fr;gap:8px}
  .landing--1 .l-stats div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 18px;text-align:start}
}
/* Landing orange buttons carried white ink (2.98:1); every other orange fill here uses navy (6.51:1). Ghost and dark variants keep white. */
.l-btn:not(.l-btn--ghost):not(.l-btn--dark):not(.l-btn--navy){color:var(--rt-ink) !important}
/* Desktop (pointer-fine) target floor is 24px; these were 19-22px high or wide. Sign-in matches the
   44px header icon buttons beside it. */
.site-header .signin-link{display:inline-flex;align-items:center;min-height:44px}
.crumbs a{display:inline-flex;align-items:center;min-height:24px}
.draw-card li a{min-width:24px;justify-content:center}
.auth-form input[type=checkbox]{width:1.5rem;height:1.5rem}
@media(max-width:48rem){
  .header-inner>.brand,.footer-brand .brand,.crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .footer-col a,.draw-card li a{min-width:44px;justify-content:center}
  .footer-col a{justify-content:flex-start}
  .continent-tab,.facet,.chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
  .all-days,.sec-more{display:inline-flex;align-items:center;min-height:44px}
  .sport-dd-panel a{display:flex;align-items:center;min-height:44px}
  /* A card link holds a stack (poster or state badge, title, meta): flex laid those out as three
     squeezed columns on Rewatch and Search. It keeps the 44px floor but stays a block. */
  .card-link{display:block;min-height:44px}
  .athlete-list li a{display:inline-flex;align-items:center;min-height:44px}
  .verify-banner a{display:inline-flex;align-items:center;min-height:44px}
  .sports-filter-input{min-height:44px}
  .account-menu summary{width:2.75rem;height:2.75rem}
  .account-menu a,.account-menu button{min-height:44px}
  /* iOS zooms the page on focus when a field is under 16px. */
  .filters select,.sports-filter-input,.search-form input,input[type=search],input[type=text],input[type=email],input[type=password],select,textarea{font-size:1rem}
}

/* ---- g3 design audit (2026-10-14) ---------------------------------------------------------- */
/* Bare account forms (password reset/change/confirm, settings) sit directly on the navy canvas,
   but their labels, headings, help text and error lists inherited the light-card ink: navy-on-navy
   headings (1.0:1), --text-muted labels (2.8:1), brown links (3.1:1). Canvas ink here; the cards
   (login/signup) restore the card ink right below. */
body:not(.theme-dark) .auth-form legend,
body:not(.theme-dark) .auth-form h2,
body:not(.theme-dark) .auth-form strong{color:#fff}
body:not(.theme-dark) .auth-form label,
body:not(.theme-dark) .auth-form .helptext,
body:not(.theme-dark) .auth-form ul,
body:not(.theme-dark) .auth-form .auth-alt,
body:not(.theme-dark) .auth-form .auth-note{color:var(--rt-mute)}
body:not(.theme-dark) .auth-form .errorlist,
body:not(.theme-dark) .auth-form .errorlist li{color:var(--support)}
body:not(.theme-dark) .auth-form .auth-alt a,
body:not(.theme-dark) .auth-form .auth-note a{color:var(--rt-orange)}
body:not(.theme-dark) .auth-card .auth-form legend,
body:not(.theme-dark) .auth-card .auth-form h2,
body:not(.theme-dark) .auth-card .auth-form strong{color:var(--text)}
body:not(.theme-dark) .auth-card .auth-form label,
body:not(.theme-dark) .auth-card .auth-form .helptext,
body:not(.theme-dark) .auth-card .auth-form ul,
body:not(.theme-dark) .auth-card .auth-form .auth-alt,
body:not(.theme-dark) .auth-card .auth-form .auth-note{color:var(--text-muted)}
body:not(.theme-dark) .auth-card .auth-form .errorlist,
body:not(.theme-dark) .auth-card .auth-form .errorlist li{color:#a32500}
body:not(.theme-dark) .auth-card .auth-form .auth-alt a,
body:not(.theme-dark) .auth-card .auth-form .auth-note a{color:var(--accent-ink)}
/* the consent checkbox shrank to 16px beside its long label; keep every checkbox the same size */
.auth-form input[type=checkbox]{flex:none}
/* long emails / names must wrap inside the profile header, not push the page 8px wide at 390 */
.profile-id,.profile-id h1,.profile-sub{min-width:0;overflow-wrap:anywhere}

/* 404 and other .back rows: the generic `.back a` canvas link colour (white 72%) beat `.btn`'s navy
   ink, leaving "Back to home" 2.2:1 on its own orange pill; the plain link beside it read as unstyled. */
body:not(.theme-dark) .back a.btn{color:var(--on-accent)}
body:not(.theme-dark) .back a:not(.btn){color:var(--rt-orange);font-weight:800;text-decoration:underline;text-underline-offset:.2em}

/* News dates: --support (peach) is for navy bands; on the cream teaser rows it was 1.6:1. */
.news-teaser .nt-date{color:var(--accent-ink)}

/* Long family names (ADALSTEINSDOTTIR) clipped at the athlete card edge. */
/* Names never hyphenate (Safari split surnames); a break inside a word is the last resort only. */
.athlete-card .a-name{overflow-wrap:anywhere;hyphens:manual}

/* Legal tables (cookies) squeezed into slivers on a phone: keep readable columns and let the
   table scroll sideways inside its own box. */
.prose table th,.prose table td{min-width:5.5rem;vertical-align:top}

/* Venues: plain list under the map (the whole page when no venue has coordinates yet). */
.venue-list{list-style:none;padding:0}
.venue-row{min-height:44px;justify-content:center}
.venue-row .venue-name{font-weight:800}

/* Footer FIG mark was a 30px tap target. */
.footer-brand .brand-wg{min-height:44px;align-items:center}

/* Tablet (<=1024px is touch as often as not): chips, tabs and filter controls were 34-41px high; the
   phone rule stopped at 48rem. */
@media(max-width:64rem){
  .continent-tab,.facet,.chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
  .filters select,.athlete-filters select,.athlete-filters input,.filters button,.athlete-filters button,.mf-field select{min-height:44px}
}
/* The search placeholder ("Search athletes, nations, sessions…") was cut to "…s…" on a 390px phone. */
@media(max-width:30rem){input[type=search]::placeholder{font-size:.85rem}}

/* Gated / not-yet-live player card: forced to 16:9 + overflow:hidden it was 195px tall at 390px and
   sliced "Sign in to watch" in half. On a phone it grows with its content; from tablet up it is the
   16:9 frame again. Ink is white on the dark poster gradient (grey was ~3:1). */
.player-gated,.player-empty{aspect-ratio:auto;min-height:12.5rem;padding:1.5rem 1.25rem}
@media(min-width:48rem){.player-gated,.player-empty{aspect-ratio:16/9;min-height:0}}
.player-gated .pl-title,.player-empty .pl-title{color:#fff;font-size:1.15rem}
.player-gated .pl-note,.player-empty .pl-note{color:rgba(255,255,255,.88)}
.player-empty p{color:#fff}
.player-empty .badge-upcoming{background:var(--rt-orange);color:var(--rt-ink)}
/* Geo-blocked card WITH official broadcasters for the viewer's country: a column like the gated
   card (the plain blocked card is untouched), one row per broadcaster: name, then its new-tab link. */
.player-blocked--partners{flex-direction:column;gap:.8rem;text-align:center;aspect-ratio:auto;min-height:12.5rem;padding:1.5rem 1.25rem}
@media(min-width:48rem){.player-blocked--partners{aspect-ratio:16/9;min-height:0}}
.player-blocked--partners p{color:#fff}
.player-blocked--partners .pl-title{font-size:1.15rem;margin:0 0 .5rem}
.pl-partner-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;align-items:center}
.pl-partner-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem .8rem}
.pl-partner-name{color:#fff;font-weight:700}
.theme-dark .badge-replay{border:1px solid rgba(255,255,255,.4)}
@media(max-width:48rem){.ap-nation{display:inline-flex;align-items:center;min-height:44px}}

/* Athletes without a photo get one neutral silhouette (client 15 Oct), never initials. */
.phantom{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;padding-top:12%}
.athlete-card .face .phantom{background:var(--bg-raised)}
.mc-face .phantom{padding-top:8%}
.af-portrait .phantom{position:absolute;inset:0;padding-top:10%}
.ap-mono-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;padding:14% 10% 0;opacity:.55}
.footer-social .official-site{display:flex;align-items:center;min-height:44px;margin-top:.4rem;color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.footer-social .official-site:hover{color:var(--rt-orange)}
/* Footer: link texts keep the client's wording ("Terms of Use", "worldgymnastics.sport"); the five social icons stay on one row. */
.footer-col a{text-transform:none}
.footer-social .social-links{gap:.4rem;flex-wrap:nowrap}
.footer-social .social-link{flex:0 0 auto}
@media (max-width:30rem){.footer-social .social-links{flex-wrap:wrap}}

/* ---- cookie consent banner (non-blocking, bottom sheet) ---- */
.cookie-banner{position:fixed;inset:auto 0 0 0;z-index:90;background:var(--rt-navy-2);color:#fff;border-top:3px solid var(--rt-orange);box-shadow:0 -6px 24px rgba(0,7,53,.35)}
.cookie-banner[hidden]{display:none}
.cookie-inner{max-width:78rem;margin-inline:auto;padding:1rem 1.25rem;display:grid;gap:.6rem;max-height:80dvh;overflow-y:auto}
.cookie-banner h2{margin:0;font-size:1.05rem;color:#fff}
.cookie-banner p{margin:0;font-size:.9rem;line-height:1.45;color:#fff}
.cookie-banner a{color:var(--rt-orange);text-decoration:underline}
.cookie-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.cookie-btn{min-height:44px;padding:.55rem 1.1rem;border-radius:999px;border:2px solid #fff;background:transparent;color:#fff;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer}
.cookie-btn--primary{background:var(--rt-orange);border-color:var(--rt-orange);color:var(--rt-ink)}
.cookie-btn--ghost{border-color:transparent;text-decoration:underline}
.cookie-btn:focus-visible,.cookie-banner a:focus-visible,.cookie-settings input:focus-visible,.footer-link-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.cookie-settings{display:grid;gap:.5rem;padding:.6rem 0}
.cookie-settings[hidden]{display:none}
.cookie-settings label{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;line-height:1.4}
.cookie-settings input{margin-top:.2rem;width:1.1rem;height:1.1rem;accent-color:var(--rt-orange)}
.cookie-settings .cookie-btn{justify-self:start}
.cookie-note{font-size:.82rem;color:var(--rt-mute)}
.footer-link-btn{display:flex;align-items:center;min-height:44px;background:none;border:0;padding:0;font:inherit;font-size:.9rem;color:rgba(255,255,255,.75);cursor:pointer;text-align:left}
.footer-link-btn:hover{color:var(--rt-orange)}
@media (min-width:48rem){.cookie-inner{grid-template-columns:1fr auto;align-items:center;column-gap:1.5rem}.cookie-inner>h2,.cookie-inner>p{grid-column:1}.cookie-actions{grid-column:2;grid-row:1 / span 2}.cookie-settings{grid-column:1 / -1}}

/* ---- g4 polish (2026-10-16): layout, symmetry and quality-of-life pass ------------------------ */
/* One outer edge for the whole site. main is 78rem with 1.25rem gutters, so content starts at the
   header's logo edge; the draw page and the footer rules used their own 1200px/16px boxes and sat
   20px in (or the footer rule 20px out). Inner card padding is unchanged. */
.draw-page{max-width:none;padding:0 0 3rem}
.footer-bottom,.site-footer .sponsors{max-width:none;inline-size:min(100% - 2.5rem,75.5rem);padding-inline:0}

/* Footer: Follow sits on the right edge instead of beside an empty fifth column, and on a mouse the
   link lists drop the 44px touch pitch (53px a row); touch screens keep 44px. Phones get Watch and
   Information side by side instead of one long column. */
@media (min-width:64.01rem){.footer-cols.footer-event{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto}}
@media (hover:hover) and (pointer:fine){
  .footer-col{gap:.1rem}
  .footer-col a,.footer-link-btn{min-height:2rem}
}
@media (max-width:30rem){
  .footer-cols{grid-template-columns:1fr 1fr;column-gap:1rem}
  .footer-brand,.footer-social{grid-column:1 / -1}
}

/* Live hero: the navy-2 card every other page title sits in. `.theme-dark .hero-sm:not(.hero-img)`
   (0,3,0) made it transparent and beat `.page-live .hero-sm` (0,2,0) above. */
.page-live .hero-sm:not(.hero-img){background:var(--rt-navy-2)}
.page-live .hero-sm .hero-lead{margin-block-end:0;color:var(--rt-mute)}

/* Filter bars. One-control bars (Group on Live, Schedule, Rewatch) hug their control instead of
   spanning the page with one small select in the corner. The "Updating…" indicator no longer takes
   a row of its own, which was the extra space under every filter card on a phone. */
.filters{position:relative}
.filters .htmx-indicator{position:absolute;inset-block-start:.6rem;inset-inline-end:1rem}
.filters:not(:has(label ~ label)){inline-size:fit-content;max-inline-size:100%}
.filters:not(:has(label ~ label)) label{flex:0 1 16rem}
@media (max-width:40rem){
  .filters:not(:has(label ~ label)){inline-size:auto}
  .filters:not(:has(label ~ label)) label{flex:1 1 100%}
  /* One column: at half width the selects cut their labels mid-word in most languages. */
  .athlete-filters{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem}
  .athlete-filters>*{min-inline-size:0;max-inline-size:none;inline-size:100%}
  .athlete-filters input{grid-column:1 / -1}
}

/* Schedule day header: a fixed grid, so "Day 7 Friday 23 October" never pushes the count or the
   +/- toggle onto stray rows, and the toggle always sits top-right. */
.sd>summary{display:grid;grid-template-columns:auto auto 1fr auto;align-items:baseline;column-gap:.9rem;row-gap:.35rem}
.sd>summary>.sd-n{grid-column:1}
.sd>summary>.sd-date{grid-column:2}
.sd>summary>.sd-count{grid-column:3;grid-row:1;justify-self:start}
.sd>summary>.badge-live{grid-column:3;grid-row:1;justify-self:end;align-self:center}
.sd>summary::after{grid-column:4;grid-row:1;align-self:center;margin:0}
.sd>summary>.sd-blocks{grid-column:1 / -1}
@media (max-width:40rem){
  .sd>summary{grid-template-columns:auto 1fr auto}
  .sd>summary>.sd-n{grid-column:1;grid-row:1}
  .sd>summary>.sd-date{grid-column:2;grid-row:1}
  .sd>summary::after{grid-column:3;grid-row:1}
  .sd>summary>.sd-count{grid-column:1 / 3;grid-row:2}
  .sd>summary>.badge-live{grid-column:3;grid-row:2}
  .sd>summary>.sd-blocks{grid-row:3}
}
/* "Add to calendar" is the session card's footer strip instead of a tall separate card beside it. */
.sd .row{flex-direction:column;gap:0}
.sd .row:has(.row-cal)>.row-link{border-end-start-radius:0;border-end-end-radius:0;border-block-end:0}
.sd .row-cal{align-self:stretch;justify-content:flex-end;gap:.4rem;min-height:2.5rem;padding:.35rem .9rem;
  border:1px solid var(--border);border-block-start:1px dashed var(--border);border-radius:0 0 .6rem .6rem;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.sd .row-cal:hover{border-color:var(--rt-orange);background:var(--rt-cream)}
.sd .row:has(.row-cal:hover)>.row-link{border-color:var(--rt-orange)}
@media (max-width:48rem){.sd .row-cal{min-height:44px}}
/* phones: the title gets the row's full width; the Details pill moves under it */
@media (max-width:40rem){
  .sd .row-link{grid-template-columns:3.4rem 1fr;row-gap:.35rem}
  .sd .row-link>.badge{grid-column:2;justify-self:start}
  .row-ch li{font-size:.84rem;gap:.35rem}
  /* Wrap, never '…': most languages cut 3-4 of the six apparatus names at 390px. */
  .row-ch .ch-name{min-inline-size:0;overflow-wrap:break-word;hyphens:auto}
}

/* Draw: the group's time always sits on its own line under the name, so every orange rule in a row
   of cards lines up; rows without a flag keep the flag slot; phones list nations in two columns
   (down, then across: start order is kept) instead of one 44px row each. */
.draw-card header{flex-direction:column;align-items:flex-start;gap:.15rem}
.draw-noflag{flex:0 0 24px;block-size:16px}
@media (max-width:40rem){
  .draw-card ol:has(img,.draw-noflag){display:block;columns:2;column-gap:1rem}
  .draw-card ol:has(img,.draw-noflag) li{break-inside:avoid}
  .draw-card ol{gap:0}
  /* specialist lists are plain names, not links: no 44px tap rows */
  .draw-card li:not(:has(a)){min-height:0;padding-block:.3rem}
  /* ...but in a nation list that also has linked rows (WG1, TTO), keep the 44px pitch so the two
     columns line up row for row. */
  .draw-card ol:has(li a) li:not(:has(a)){min-height:44px;padding-block:0}
}

/* Nation page: the hero centres its flag and name, so the medal line centres with them. */
.nation-head .tally-lg{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem}
.nation-card .tally{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.15rem .55rem}

/* Search results: the flag touched the nation name. */
.cards .card h3 .flag,.cards .card .meta .flag{margin-inline-end:.35rem}

/* Watch: the grid never grows wider than the phone (a long channel name in the select made the page
   417px wide at 390 and clipped the title). Layout: "g5 Watch page, YouTube-style" at the end. */
.watch>*{min-inline-size:0}
.channel-pick{min-inline-size:0;max-inline-size:100%}
/* Long single-word family names: size follows the card width (container units), so the whole word
   fits on one line instead of splitting mid-word; never larger than the normal 1rem. */
.athlete-card{container-type:inline-size}
.athlete-card .a-name--long{font-size:min(1rem,7.4cqi);letter-spacing:-.01em}
/* Languages on phones (i18n, 16 Oct): below 26rem the header cannot hold the language menu AND the
   sign-in link (they ran off a 360px screen), so the menu moves into the drawer as a plain list. */
.nav-langs{display:none}
@media (max-width:26rem){
  .header-actions .lang-menu{display:none}
  .nav-langs{display:flex;flex-wrap:wrap;gap:.25rem .5rem;margin-block-start:.75rem;padding-block-start:.75rem;border-block-start:1px solid rgba(255,255,255,.32)}
  .nav .nav-langs a{inline-size:auto;min-height:44px;display:inline-flex;align-items:center;border:0;border-radius:0;padding:.25rem .4rem;font-size:.82rem;font-weight:600;text-transform:none;letter-spacing:0;color:#fff}
  .nav .nav-langs a[aria-current]{color:var(--rt-orange)}
}

/* Gymnastics TV wordmark (16 Oct): a 9.5:1 wordmark, so it is sized by HEIGHT well below the old
   38px event mark (which would make it ~360px wide and cost the nav its width budget). */
.site-header .brand img.brand-logo{height:24px;width:auto;display:block}
.site-header.scrolled .brand img.brand-logo{height:20px}
@media (max-width:30rem){.site-header .brand img.brand-logo,.site-header.scrolled .brand img.brand-logo{height:18px}}
/* Seven nav items (Nations added 16 Oct) in ten languages: between the drawer breakpoint and ~1240px
   the signed-out header (pass + sign-in + language) overflowed by up to ~130px in Russian. Tighten
   only this band; wider screens keep the full spacing. Measured in all ten languages, signed out. */
@media (min-width:64.01rem) and (max-width:77.5rem){
  .site-header .header-inner{gap:.75rem}
  .site-header .brand img.brand-logo,.site-header.scrolled .brand img.brand-logo{height:19px}
  .site-header .nav{gap:.1rem}
  .site-header .nav a{padding:.5rem .4rem;letter-spacing:.02em}
  .header-actions{gap:.5rem}
}
/* Eight items (Best of added 19 Oct, Alex): wide screens give up a little of their spacing too, or
   Russian runs ~75px over at 1241-1440. Measured signed out in all ten languages (worst: ru, ~24px
   spare at 1280). */
@media (min-width:77.51rem){
  .site-header .brand img.brand-logo,.site-header.scrolled .brand img.brand-logo{height:20px}
  .site-header .nav{gap:.1rem}
  .site-header .nav a{padding-inline:.55rem;letter-spacing:.03em}
}

/* Draw: apparatus specialists grouped by apparatus, one column per apparatus as the organiser's
   sheet prints them (Zita, 16 Oct). Men 6 columns / women 4 on desktop, 3 or 4 on tablets, 2 on
   phones. Each entry: name on the first row, flag + federation code on the second. */
.draw-grid--as{grid-template-columns:minmax(0,1fr)}
.draw-app-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem .75rem}
@media(min-width:48rem){
  .draw-app-grid--6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .draw-app-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:64rem){.draw-app-grid--6{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* subgrid: a heading that wraps ('Вольные упражнения') grows its whole row of headings, so the
   first entries still line up across the columns */
.draw-app{min-inline-size:0;display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
.draw-app h4{margin:0 0 .5rem;padding:.4rem .6rem;border-radius:6px;background:var(--rt-cream);color:var(--rt-navy);
  font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.25}
.draw-card .draw-app ol{display:grid;gap:.55rem;align-content:start;columns:auto;counter-reset:as}
.draw-card .draw-app li{display:grid;grid-template-columns:1.1rem minmax(0,1fr);column-gap:.45rem;align-items:start;
  min-height:0;padding:0;font-weight:600;counter-increment:as}
.draw-app li::before{content:counter(as);grid-row:span 2;font-family:var(--display);font-weight:800;color:var(--rt-navy);line-height:1.3}
.draw-who{font-size:.88rem;line-height:1.3;overflow-wrap:anywhere}
.draw-noc{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;color:#5b5d86;letter-spacing:.03em}
@media(max-width:40rem){
  /* two columns of ~150px: keep 'ADALSTEINSDOTTIR' whole */
  .draw-app-grid{column-gap:.5rem}
  .draw-card .draw-app li{grid-template-columns:.8rem minmax(0,1fr);column-gap:.35rem}
  .draw-who{font-size:.8rem}
}

/* Header at 320-360px (17 Oct): logo + burger + "Sign in" ran 6-34px off a 320px screen (en..fr).
   Smaller wordmark and gaps buy ~40px; the pass/sign-in copies in the drawer are unchanged. */
@media (max-width:22.5rem){
  .site-header .header-inner{gap:.5rem}
  .site-header .brand img.brand-logo,.site-header.scrolled .brand img.brand-logo{height:16px}
  .site-header .signin-link{font-size:.85rem}
}

/* Results empty state note (17 Oct): sits on the navy canvas, was inheriting navy ink (invisible). */
.rs-wait-note{color:rgba(255,255,255,.88);max-width:62ch;margin-block:.5rem 1.25rem}

/* ---- g5 round 2 (17 Oct): chrome, focus and small-screen pass ------------------------------ */
/* Height of the stuck (condensed) header: 44px controls + 2 x .5rem + 1px rule. Sticky bars sit
   under it and in-page jumps land below it. Signed-in desktop headers are ~10px shorter; the day
   bar's own shadow fills that gap so no content shows between the two. */
:root{--header-h:3.8rem}
html{scroll-padding-block-start:var(--header-h)}
.day-nav{inset-block-start:var(--header-h)}
body:not(.theme-dark) .day-nav{box-shadow:0 -1rem 0 var(--rt-navy)}
#live-scores{scroll-margin-block-start:1rem}
/* Condensing the header shrank it by .7rem in the flow; scroll anchoring then pulled the page back
   across the 24px threshold and it flickered between states. A matching margin keeps the in-flow
   height constant, so nothing below moves when it condenses. */
.site-header{transition:margin-block-end .2s ease}
.site-header.scrolled{margin-block-end:.7rem}
@media (prefers-reduced-motion:reduce){.site-header{transition:none}}

/* Empty states: the reset link used the on-white orange (2.74:1 on the navy box) at 26px tall. */
body:not(.theme-dark) .empty .clear-filters{color:var(--rt-orange);border-color:rgba(255,255,255,.45);min-height:44px;padding-inline:1rem}
body:not(.theme-dark) .empty .clear-filters:hover{border-color:var(--rt-orange)}
.empty-cta a{display:inline-flex;align-items:center;min-height:44px}

/* Checkboxes in the theme (cookie settings on navy, signup consent on the white card): a box in the
   label's own ink, orange with a navy tick when ticked. The locked "Strictly necessary" box keeps
   the full orange so its tick reads. */
body .cookie-settings input[type=checkbox],body .auth-form input[type=checkbox]{appearance:none;-webkit-appearance:none;
  flex:0 0 auto;display:inline-grid;place-content:center;margin:.1rem 0 0;color:inherit;
  border:2px solid currentColor;border-radius:.3rem;background:transparent;cursor:pointer}
.cookie-settings input[type=checkbox]{width:1.25rem;height:1.25rem}
.cookie-settings input[type=checkbox]::before,.auth-form input[type=checkbox]::before{content:"";width:.75rem;height:.75rem;
  background:var(--rt-ink);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);transform:scale(0)}
body .cookie-settings input[type=checkbox]:checked,body .auth-form input[type=checkbox]:checked{background:var(--rt-orange);border-color:var(--rt-orange)}
.cookie-settings input[type=checkbox]:checked::before,.auth-form input[type=checkbox]:checked::before{transform:scale(1)}
.auth-form input[type=checkbox]::before{width:.9rem;height:.9rem}
.cookie-settings input[type=checkbox]:disabled{cursor:not-allowed;opacity:1}
body .cookie-settings input[type=checkbox]:focus-visible{outline:3px solid #fff;outline-offset:2px}
body .auth-form input[type=checkbox]:focus-visible{outline:3px solid currentColor;outline-offset:2px}
/* The Terms / Privacy links in the consent label looked like the plain text around them. */
.auth-form label a{text-decoration:underline;text-underline-offset:2px}

/* Legal tables on phones: a fade on the side that has more columns (pure CSS scroll shadows). */
@media (max-width:40rem){
  .prose table,.prose-card table{
    background:
      linear-gradient(to right,var(--prose-bg,#fff) 30%,rgba(255,255,255,0)) left center / 2rem 100% no-repeat local,
      linear-gradient(to left,var(--prose-bg,#fff) 30%,rgba(255,255,255,0)) right center / 2rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%,rgba(0,7,53,.28),transparent) left center / .9rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%,rgba(0,7,53,.28),transparent) right center / .9rem 100% no-repeat scroll}
}

/* Draw: every card's time line takes two lines on desktop, so the orange rules under the headers
   line up across a row however the date and "CEST" wrap in each language. */
@media (min-width:48rem){
  .draw-card header span{line-height:1.35;min-block-size:calc(2 * 1.35em);text-wrap:balance}
}

/* Nation hero: a name that wraps stays centred with the flag and medal line. */
.nation-head h1{text-align:center;text-wrap:balance}
/* Phones: one unbreakable name (Великобритания) widened its 1fr track into the gutter. */
@media (max-width:30rem){
  .nation-grid,.athlete-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nation-card .name{overflow-wrap:break-word;hyphens:auto}
}
/* 320-360px: 12-letter surnames (ABDURAKHIMOV) broke mid-word; scale every name with its card. */
@media (max-width:22.5rem){
  .athlete-card .a-name:not(.a-name--long){font-size:min(1rem,8.6cqi)}
}

/* r2-auth (17 Oct): password rules shown up front on the white auth card (is-invalid lives in app.css). */
.auth-form .helptext{display:block;line-height:1.45;margin-block-start:.3rem}

/* ---- header search (17 Oct, Alex: "a little search icon in the menu bar on the right") -------- */
/* A plain link to /search/: a 20px glyph in a 44px round target, first in the actions cluster on
   every page and every width (it stays in the bar on phones, outside the drawer). Its negative
   inline margins give back the glyph's own whitespace, so it costs the bar ~40px, not 56.
   Measured signed out in all ten languages at 320-1440px (no nav item wraps, clips or overflows);
   the tighter bands below are what buy that room. */
.site-header .search-link{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  inline-size:2.75rem;block-size:2.75rem;margin-inline:-.375rem;border-radius:50%;color:#fff;
  transition:color .15s}
.site-header .search-link:hover{color:var(--rt-orange)}
.site-header .search-link.active{color:var(--rt-orange)}
.site-header .search-link:focus-visible{outline:3px solid var(--rt-orange);outline-offset:-3px}
.site-header .search-link svg{display:block}
/* 1025-1120px, the tightest desktop band (Russian needs every pixel): slimmer nav pills, and since
   the eighth item (Best of, 19 Oct) a smaller wordmark, slimmer side padding and a hair smaller label
   text. Russian keeps ~8px spare at 1025, signed out. */
@media (min-width:64.01rem) and (max-width:70rem){
  .site-header .header-inner{gap:.5rem;padding-inline:.875rem}
  .site-header .brand img.brand-logo,.site-header.scrolled .brand img.brand-logo{height:17px}
  .site-header .nav{gap:0}
  .site-header .nav a{padding-inline:.32rem;letter-spacing:0;font-size:.73rem}
}
/* Phones and small tablets: logo + burger + search + sign-in (+ language from 26rem) on one line,
   320px in French included; up to 36rem, where the full-size wordmark ran the bar off-screen. */
@media (max-width:36rem){
  .site-header .header-inner{padding-inline:1rem;gap:.5rem}
  .header-actions{gap:.5rem}
  .site-header .burger{padding-inline:.25rem}
  .site-header .brand img.brand-logo,.site-header.scrolled .brand img.brand-logo{height:16px}
}
@media (max-width:22.5rem){
  .site-header .header-inner{padding-inline:.75rem;gap:.4rem}
  .site-header .brand img.brand-logo,.site-header.scrolled .brand img.brand-logo{height:14px}
  .header-actions{gap:.25rem}
  .site-header .signin-link{font-size:.8rem}
}

/* ---- search page (17 Oct) ---------------------------------------------------------------------
   White panels on the navy canvas, like the Athletes filter bar and the schedule cards. One big
   labelled field; results grouped Athletes, Nations, Sessions, Disciplines, News, Pages, each a
   white card of one-link rows. Navy ink on white 15.9:1; muted #5b5d86 6.3:1. */
.site-search{background:#fff;border:1px solid var(--border-card);border-radius:12px;padding:1.1rem 1.25rem 1.25rem;margin-block:1.25rem 1rem}
.site-search-label{display:block;color:var(--text-muted);font-weight:700;font-size:.9rem;margin-block-end:.5rem}
.site-search-field{position:relative;display:flex;gap:.6rem;align-items:stretch}
.site-search-glyph{position:absolute;inset-inline-start:1rem;inset-block-start:50%;translate:0 -50%;color:var(--rt-navy);pointer-events:none}
body:not(.theme-dark) .site-search input[type=search]{flex:1;min-inline-size:0;font:inherit;font-size:1.2rem;font-weight:600;
  padding:.8rem 1rem .8rem 3.1rem;min-block-size:3.4rem;border-radius:999px}
html[dir=rtl] body:not(.theme-dark) .site-search input[type=search]{padding:.8rem 3.1rem .8rem 1rem}
.site-search input[type=search]::placeholder{color:#76789c;font-weight:500}
.site-search button{flex-shrink:0;background:var(--rt-orange);color:var(--rt-ink);border:0;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:.92rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:0 1.5rem;min-block-size:3.4rem}
.site-search button:hover{background:#ff7a38}
.site-search button svg{display:none}
/* Phones: the button shrinks to a round arrow (its word stays for screen readers) so the field
   keeps room for the placeholder. */
@media (max-width:36rem){
  .site-search button{inline-size:3.4rem;padding:0;display:inline-flex;align-items:center;justify-content:center}
  .site-search button svg{display:block}
  .site-search .btn-txt{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  body:not(.theme-dark) .site-search input[type=search]{font-size:1.05rem;padding-inline-end:.75rem}
}
/* In flight (HTMX): the glyph breathes; results dim a touch so a stale list never reads as final. */
.site-search.htmx-request .site-search-glyph{animation:search-pulse .8s ease-in-out infinite alternate}
.site-search.htmx-request ~ .search-results{opacity:.6;transition:opacity .15s .1s}
@keyframes search-pulse{to{opacity:.3}}
@media (prefers-reduced-motion:reduce){.site-search.htmx-request .site-search-glyph{animation:none}}

.search-status{color:#fff;font-weight:700;margin-block:0 1rem;min-block-size:1.5em}
.search-status:empty{margin:0;min-block-size:0}
.search-results{display:flex;flex-direction:column;gap:1rem}
.search-group{background:#fff;border:1px solid var(--border-card);border-radius:12px;padding:1rem 1.25rem 1.1rem}
.search-group-h{display:flex;align-items:center;gap:.6rem;margin:0 0 .75rem;color:var(--rt-navy);
  font-family:var(--display);font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}
.search-count{display:inline-flex;align-items:center;justify-content:center;min-inline-size:1.6rem;block-size:1.6rem;padding-inline:.45rem;
  border-radius:999px;background:var(--rt-navy);color:#fff;font-size:.75rem;letter-spacing:0}
.search-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,18.5rem),1fr))}
.search-group--sessions .search-list,.search-group--news .search-list{grid-template-columns:minmax(0,1fr)}
.search-row{display:flex;align-items:center;gap:.7rem;min-block-size:3rem;padding:.55rem .85rem;border:1px solid var(--border);
  border-radius:10px;color:var(--rt-navy);background:#fff;transition:border-color .15s,background .15s}
.search-row:hover{border-color:var(--rt-orange);background:var(--rt-cream)}
.search-row:focus-visible{outline:3px solid var(--rt-orange);outline-offset:1px}
.search-row .search-flag{inline-size:1.5rem;block-size:auto;flex-shrink:0;border-radius:2px}
.search-main{flex:1;min-inline-size:0;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.search-sub{display:block;font-weight:600;font-size:.82rem;color:var(--text-muted)}
.search-code{flex-shrink:0;font-size:.78rem;font-weight:800;letter-spacing:.05em;color:var(--text-muted)}
.search-when{flex-shrink:0;font-size:.85rem;font-weight:700;color:var(--text-muted);white-space:nowrap}
.search-row .badge{flex-shrink:0}
.search-go{color:var(--rt-orange);font-weight:800}
.search-capped{margin:.75rem 0 0;color:var(--text-muted);font-size:.88rem}
.search-capped a{color:var(--accent-ink);font-weight:700;text-decoration:underline}
/* Session rows on phones: title on its own line, time and state under it. */
@media (max-width:36rem){
  .site-search{padding:1rem}
  .search-group{padding:.9rem .9rem 1rem}
  .search-row--session{flex-wrap:wrap;row-gap:.35rem}
  .search-row--session .search-main{flex-basis:100%}
}
/* Empty and no-result states: the same white panel, with example queries and browse links. */
.search-empty{background:#fff;border:1px solid var(--border-card);border-radius:12px;padding:1.25rem;color:var(--rt-navy)}
.search-hint{margin:0 0 .9rem;font-weight:600;font-size:1.02rem}
.search-try{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 1rem}
.search-try>span,.search-browse>span{color:var(--text-muted);font-weight:700;font-size:.88rem}
.search-try .chip{display:inline-flex;align-items:center;min-block-size:44px;padding-inline:1rem;border:2px solid var(--rt-orange);
  background:#fff;color:var(--rt-navy);font-weight:700;border-radius:999px}
.search-try .chip:hover{background:var(--rt-orange);color:var(--rt-ink)}
.search-browse{display:flex;flex-wrap:wrap;align-items:center;gap:0 1rem;padding-block-start:.9rem;border-block-start:1px solid var(--border)}
.search-browse a{display:inline-flex;align-items:center;min-block-size:44px;color:var(--accent-ink);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.search-browse a:hover{color:var(--rt-orange)}
/* "Live now: <session> · Watch live" above the player of a session that is not the live one (17 Oct). */
.live-elsewhere{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin:0 0 .75rem;padding:.7rem 1rem;border-radius:.6rem;background:var(--rt-orange);color:var(--rt-ink);text-decoration:none;font-size:1rem}
.live-elsewhere__tag{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;padding:.15rem .5rem;border-radius:999px;background:var(--rt-ink);color:#fff}
.live-elsewhere__go{margin-inline-start:auto;font-weight:800;white-space:nowrap}
.live-elsewhere:hover .live-elsewhere__go,.live-elsewhere:focus-visible .live-elsewhere__go{text-decoration:underline}
/* Countdown on an upcoming session's player card (Vlad, 17 Oct). */
.pl-count{margin-top:1rem}
.pl-count__cells{display:flex;flex-wrap:wrap;gap:.5rem;font-weight:800;color:#fff}
.pl-count__cells div{min-width:3.6rem;padding:.4rem .6rem;border-radius:.5rem;background:var(--rt-ink);text-align:center}
.pl-count__cells b{display:block;font-size:1.5rem;line-height:1.1;font-variant-numeric:tabular-nums}
.pl-count__cells span{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.pl-count__local{margin:.6rem 0 0;color:#fff;font-weight:600}
/* "Watch now" on a running-order lane (Vlad, 17 Oct): a compact orange pill beside the apparatus
   name; the channel already playing reads "On screen" instead. Wraps under the name when a
   translation is long, so the lane never overflows on a phone. */
.lane-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem .5rem;margin:0 0 .35rem}
.lane-head .lane-app{margin:0}
.lane .lane-watch{display:inline-flex;align-items:center;min-block-size:2rem;padding:.2rem .8rem;font-size:.7rem;line-height:1.2;letter-spacing:.05em;white-space:nowrap}
.lane-watch--on{border:2px solid rgba(255,255,255,.3);border-radius:999px;color:var(--text-muted);font-weight:800;text-transform:uppercase}

/* watch page, ?routine=: the caption under a routine clip, with the way on to the full replay */
.player-routine{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem}
.player-routine .routine-full{margin-inline-start:auto;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:.2em}

/* ---- g5 Rewatch (18 Oct): the replay opened at a routine ---------------------------------- */
/* The bar under the player: who the replay starts with, then the two ways on (the clip of just
   that routine, the next routine on the same apparatus). Wraps under the name on a phone. */
.player-routine .pr-what{min-inline-size:0}
.player-routine .pr-lead{color:var(--rt-mute)}
.player-routine b{color:#fff}
.player-routine .pr-actions{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-inline-start:auto}
.player-routine .pr-actions a{display:inline-flex;align-items:center;gap:.35em;min-block-size:44px;font-weight:800;color:#fff;
  text-decoration:underline;text-underline-offset:.2em}
.player-routine .pr-actions .routine-next{color:var(--rt-orange)}
.player-routine .pr-actions a:hover{color:var(--rt-orange)}
.player-routine .pr-actions a[hidden]{display:none}

/* "Routines in this replay": a chapter list of the session, one row per routine, the one being
   watched in orange. Scrolls inside its own box so 150 rows never push the results away. */
.rr{margin-block:1.25rem 1.5rem}
.rr-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}
.rr-head .rail-h{margin:0}
.rr-count{font-size:.8em;color:var(--rt-mute);font-weight:700}
.rr-chips{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding-block:.75rem .6rem;margin-inline:-2px;padding-inline:2px}
.rr-chips::-webkit-scrollbar{display:none}
.rr-chips .chip{flex:none;display:inline-flex;align-items:center;min-block-size:44px;padding-inline:1rem;white-space:nowrap;
  background:transparent;color:#fff;border:2px solid rgba(255,255,255,.28);border-radius:999px;font-weight:700;text-decoration:none}
.rr-chips .chip:hover{border-color:var(--rt-orange)}
.rr-chips .chip-on,.rr-chips .chip-on:hover{background:var(--rt-orange);border-color:var(--rt-orange);color:var(--rt-ink)}
.rr-list{position:relative;list-style:none;margin:0;padding:0;max-block-size:min(30rem,70vh);overflow-y:auto;overscroll-behavior:contain;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.03)}
.rr-row+.rr-row{border-block-start:1px solid rgba(255,255,255,.08)}
.rr-row[hidden]{display:none}
.rr-row a{display:grid;grid-template-columns:4.2rem 8.5rem minmax(0,1fr) auto 1.5rem;align-items:center;gap:.75rem;
  min-block-size:48px;padding:.45rem .9rem;color:#fff;text-decoration:none}
.rr-row a:hover{background:rgba(255,255,255,.06)}
.rr-row a:focus-visible{outline:3px solid var(--rt-orange);outline-offset:-3px}
.rr-at{font-variant-numeric:tabular-nums;font-weight:800;color:var(--rt-mute)}
.rr-app{font-size:.8rem;font-weight:700;color:var(--rt-mute);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-who{min-inline-size:0;overflow-wrap:anywhere}
.rr-who b{font-weight:700}
.rr-nat{white-space:nowrap;font-size:.82rem;color:var(--rt-mute);font-weight:700}
.rr-score{font-variant-numeric:tabular-nums;font-weight:800;text-align:end;white-space:nowrap}
.rr-score small{font-size:.75rem;color:var(--rt-mute);font-weight:700}
.rr-go{color:var(--rt-orange);font-size:.8rem;text-align:end}
.rr-row.is-now a{background:var(--rt-orange);color:var(--rt-ink)}
.rr-row.is-now .rr-at,.rr-row.is-now .rr-app,.rr-row.is-now .rr-nat,.rr-row.is-now small,.rr-row.is-now .rr-go{color:var(--rt-ink)}
@media (max-width:40rem){
  .rr-row a{grid-template-columns:4.1rem minmax(0,1fr) auto;padding-inline:.7rem;grid-template-areas:"at who score" "at app score";gap:.1rem .7rem;padding-block:.55rem}
  .rr-at{grid-area:at;font-size:.85rem}.rr-who{grid-area:who}.rr-app{grid-area:app}.rr-score{grid-area:score}.rr-go{display:none}
}

/* "Hide scores" (app.js): every [data-score] blurs, on the hub and in the routine lists. */
.hide-scores{display:inline-flex;align-items:center;gap:.45rem;min-block-size:44px;padding:.4rem 1rem;border-radius:999px;cursor:pointer;
  font:inherit;font-size:.85rem;font-weight:800;background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)}
.hide-scores[hidden]{display:none}
.hide-scores:hover{border-color:var(--rt-orange)}
.hide-scores:focus-visible{outline:3px solid var(--rt-orange);outline-offset:2px}
.hide-scores .hs-ico{inline-size:1.6rem;block-size:.95rem;border-radius:999px;background:rgba(255,255,255,.3);position:relative}
.hide-scores .hs-ico::after{content:"";position:absolute;inset-block:2px;inset-inline-start:2px;inline-size:calc(.95rem - 4px);border-radius:50%;background:#fff;transition:transform .15s ease}
.hide-scores[aria-pressed=true]{border-color:var(--rt-orange)}
.hide-scores[aria-pressed=true] .hs-ico{background:var(--rt-orange)}
.hide-scores[aria-pressed=true] .hs-ico::after{transform:translateX(.65rem)}
html[dir=rtl] .hide-scores[aria-pressed=true] .hs-ico::after{transform:translateX(-.65rem)}
.scores-hidden [data-score]{filter:blur(6px);user-select:none}
@media (prefers-reduced-motion:reduce){.hide-scores .hs-ico::after{transition:none}}

/* Search: "Routines" (g5 Rewatch): each row opens the replay at the routine; orange play mark. */
.search-row--routine .search-play{flex-shrink:0;display:inline-grid;place-items:center;inline-size:2rem;block-size:2rem;border-radius:50%;
  background:var(--rt-orange);color:var(--rt-ink);font-size:.7rem}
.search-row--routine .search-code{color:var(--accent-ink)}
@media (max-width:40rem){.search-row--routine .search-code{display:none}}
.search-group--routines .search-list{grid-template-columns:minmax(0,1fr)}

/* ---- Schedule channel chips (Alex 18 Oct) ------------------------------------------------- */
/* Each channel is its own button under the session row, opening the session on that channel.
   The strip continues the row's card (same border), between the row link and "Add to calendar". */
.sd .row:has(.row-chs)>.row-link{border-end-start-radius:0;border-end-end-radius:0;border-block-end:0}
.row-chs{list-style:none;margin:0;padding:.15rem .9rem .8rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.45rem;
  background:var(--surface);border:1px solid var(--border);border-block-start:0;border-radius:0 0 .6rem .6rem}
.sd .row:has(.row-cal) .row-chs{border-radius:0}
.ch-chip{display:flex;align-items:center;gap:.5rem;min-block-size:44px;padding:.3rem .8rem .3rem .4rem;border-radius:999px;
  background:var(--rt-cream);border:2px solid var(--border-btn);color:var(--rt-navy);font-weight:700;font-size:.85rem;line-height:1.15;
  text-decoration:none;transition:border-color .15s ease,background-color .15s ease}
.ch-chip .ch-n{inline-size:1.7rem;block-size:1.7rem;font-size:.78rem;background:var(--rt-navy);color:#fff}
.ch-chip .ch-name{color:inherit;min-inline-size:0;overflow-wrap:break-word}
.ch-chip:hover{border-color:var(--rt-orange);background:#fff}
.ch-chip:hover .ch-n{background:var(--rt-orange);color:var(--rt-ink)}
.ch-chip:focus-visible{outline:3px solid var(--rt-orange);outline-offset:2px}
.row-link .row-ch--one{grid-column:1/-1}
@media (max-width:40rem){.row-chs{grid-template-columns:1fr 1fr;padding-inline:.6rem}.ch-chip{font-size:.82rem}}
@media (prefers-reduced-motion:reduce){.ch-chip{transition:none}}

/* ---- g5 Watch page, YouTube-style (Alex 18 Oct) ---------------------------------------------- */
/* Two layouts, both YouTube's (Alex 18 Oct ~22:10): phones and tablets = YouTube mobile (the video
   pinned to the top edge to edge, a compact title, channel chips, a thumbnail routine list); desktop
   (64rem+, where the header has its full nav) = theatre only (the video edge to edge, height-capped so
   the player, its title and the line under it fit the first view; everything else in two columns
   under it). Blocks are rendered once (watch.html) and only placed here; the two layouts are at the
   end of this section. */
body.page-watch main{max-width:105rem}
/* The header's content spans the same width, so the logo lines up with the title's left edge and
   the account icon with the right column's right edge (narrower windows: both are already full width). */
@media (min-width:64rem){body.page-watch .header-inner{max-width:105rem}}
.watch{gap:0;grid-template-columns:minmax(0,1fr);grid-template-areas:"banner" "player" "score" "sub" "side" "more"}
.watch>.live-elsewhere{grid-area:banner}
.watch>#player{grid-area:player;margin:0}
.watch>#scoreboard-wrap{grid-area:score}
.watch>.watch-sub{grid-area:sub}
.watch>.watch-side{grid-area:side;margin-block-start:1.25rem}
.watch>.watch-more{grid-area:more;margin-block-start:1rem}
/* Under the player: the title, then ONE line (state, channel, date, channel select). */
.watch-head{margin-block-start:.75rem}
.watch-title{margin:0;font-size:clamp(1.15rem,.95rem + .7vw,1.55rem);line-height:1.2;color:#fff;overflow-wrap:anywhere}
.watch-head .watch-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin:.45rem 0 0;font-size:.9rem;color:var(--rt-mute)}
.watch-bar .badge{flex:none}
.watch-ch{font-weight:700;color:#fff}
.watch-when{white-space:nowrap}
.watch-bar .channel-select{min-block-size:2.5rem}
.watch-head .player-routine{margin-block-start:.35rem}
/* Share (Alex 20 Oct): at the end of that line, right-aligned. Desktop: WhatsApp, Facebook, X and
   Copy link as icons the height of the channel select (+ the device's share sheet where the browser
   has one, .share--native from app.js). Phones and tablets: one "Share" button (below). */
.share{display:flex;align-items:center;gap:.375rem;margin-inline-start:auto}
.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;inline-size:2.75rem;block-size:2.75rem;padding:0;
  font:inherit;font-weight:700;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);border-radius:.5rem;
  cursor:pointer;text-decoration:none;transition:color .15s,border-color .15s}
.share-btn:hover{color:var(--rt-orange);border-color:var(--rt-orange)}
.share-btn:focus-visible{outline:2px solid var(--rt-orange);outline-offset:2px}
.share-btn svg{flex:none}
.share-native{display:none;order:1}
.share--native .share-native{display:inline-flex}
.share-label{display:none}
.share-ico-done{display:none}
.share-btn.is-copied{color:var(--rt-orange);border-color:var(--rt-orange)}
.share-native.is-copied svg{color:var(--rt-orange)}
.share-btn.is-copied .share-ico-link{display:none}
.share-btn.is-copied .share-ico-done{display:block}
.share{position:relative}
.share-status:empty{position:absolute;inline-size:1px;block-size:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
.share-status:not(:empty){position:absolute;inset-block-end:calc(100% + .4rem);inset-inline-end:0;z-index:5;padding:.3rem .65rem;
  font-size:.8rem;font-weight:800;line-height:1.3;white-space:nowrap;color:var(--rt-ink);background:#fff;border-radius:.4rem;box-shadow:0 4px 14px rgba(0,0,0,.35)}
/* Desktop: the block under the video is one two-sided grid (Alex 20 Oct: "lopsided"). Left edge =
   the video's left: title, then state + date, then "Starting at ...". Right edge = the video's right:
   the share icons on the title's line, the channel select on the state line, the routine actions on
   the last. .watch-bar steps out of the way (display:contents) so its items join .watch-head's rows;
   ::before is the line break after the title row. Phones and tablets keep their own layout (below). */
@media (min-width:64rem){
  .watch-head{display:flex;flex-wrap:wrap;align-items:center;column-gap:1rem}
  .watch-head>.watch-title{flex:1 1 0;min-inline-size:0}
  .watch-head::before{content:"";order:2;flex-basis:100%}
  .watch-head .watch-bar{display:contents}
  .watch-bar>*{order:3;margin-block-start:.5rem}
  .watch-bar>.badge,.watch-bar>.watch-ch{margin-inline-end:-.2rem}
  .watch-bar>.share{order:1;margin-block:0;margin-inline-start:auto}
  .watch-bar>.channel-pick{margin-inline-start:auto}
  /* "Starting at ..." left, its two actions right, one line from about 1100px up (it wraps below
     that, the actions staying on the right edge). Desktop pointer: 32px targets, not 44px rows. */
  .watch-head>.player-routine{order:5;flex-basis:100%;margin-block-start:.5rem;column-gap:1rem;font-size:.9rem}
  .watch-head .player-routine .pr-actions{gap:.25rem 1.1rem;font-size:.875rem}
  .watch-head .player-routine .pr-actions a,.watch-head .player-routine .routine-full{min-block-size:2rem}
  .watch-head .watch-when{font-size:.9rem;color:var(--rt-mute)}
  .watch-head .watch-ch{font-size:.9rem}
  .share-btn{inline-size:2.5rem;block-size:2.5rem}
}
@media (max-width:63.99rem){
  .share-net{display:none}
  .share-native,.share--native .share-native{display:inline-flex;inline-size:auto;block-size:auto;min-block-size:2.25rem;padding:.3rem .85rem;
    font-size:.82rem;background:rgba(255,255,255,.1);border-color:transparent;border-radius:.6rem}
  .share:not(.share--js) .share-native{visibility:hidden}
  .share-label{display:inline}
}
/* The championship + discipline, one quiet line under that. */
.watch-sub{margin:0}
.watch-sub p{display:inline;margin:0}
.watch-sub .watch-edition{font-size:.78rem}
.watch-sub .meta{font-size:.85rem;color:var(--rt-mute)}
.watch-sub .meta:empty{display:none}
@media (max-width:40rem){.watch-sub p{display:block}
  /* The discipline link keeps its 44px target as invisible padding (pulled back with a negative
     margin), so its row is not a 44px block with a gap above "Artistic". The championship link
     above stays on top where the two targets meet. */
  .watch-sub .meta{margin-block-start:.15rem}
  .watch-sub .meta a{display:inline-block;min-height:0;padding-block:.75rem;margin-block:-.75rem}
  .watch-sub .watch-edition a{position:relative;z-index:1}}
@media (min-width:40.01rem){.watch-sub .watch-edition+.meta::before{content:"\00b7";margin-inline:.5rem}}
/* Rail content. Court/feed switchers only when they have something (gymnastics: never). */
.watch-side__scroll{display:flex;flex-direction:column;gap:1.25rem}
.watch-side .watch-rail{margin:0}
.watch-side .watch-rail:not(:has(.court-card,.picker)){display:none}
.watch-side .rr{margin:0}
.watch-side #live-scores>:first-child,.watch-side #live-scores>.floor:first-child .rail-h,.watch-side .side-more>.rail-h{margin-block-start:0}
.side-channels{list-style:none;margin:0 0 .75rem;padding:0;display:flex;flex-direction:column;gap:.35rem}
.side-channels a{display:flex;align-items:center;min-block-size:44px;padding:.35rem .9rem;border:1px solid rgba(255,255,255,.18);border-radius:.6rem;color:#fff;font-weight:700;text-decoration:none}
.side-channels a:hover{border-color:var(--rt-orange)}
.side-channels a[aria-current]{border-color:var(--rt-orange);color:var(--rt-orange)}
.side-links{margin:.5rem 0 0}
.side-links a{display:inline-flex;align-items:center;min-block-size:44px;font-weight:800;color:#fff;text-decoration:underline;text-underline-offset:.2em}
.side-links a:hover{color:var(--rt-orange)}
/* Rows of "Routines in this replay" carry a real frame (Routine.thumb); phones and tablets only. */
.rr-thumb{display:none}
/* Phones and tablets: the picture is edge to edge (YouTube mobile): the frame and the cards that
   stand in for it (gated, geo-blocked, upcoming) break out of the page padding to the window's edges,
   square, right under the header. html clips horizontal overflow, so 100vw cannot add a scrollbar.
   Desktop keeps the player in its column beside the rail (below). */
.watch .player-frame{background:#000}
.watch .player-frame>mux-player{display:block;margin-inline:auto}
@media (max-width:63.99rem){
  body.page-watch main{padding-block-start:0}
  .watch .player-frame,.watch>#player>.player{margin-inline:calc(50% - 50vw)}
  .watch .player-frame>mux-player{border-radius:0}
  .watch>#player>.player{inline-size:auto;border-radius:0;border-inline:0;border-block-start:0}
}

/* ---- Phones and tablets: YouTube mobile (Alex 18 Oct ~22:10; Codex mockup var/codex-mockup.txt) --- */
/* The header scrolls away and the playing video sticks to the very top while the routines, running
   order and standings scroll under it. Only a real player sticks; a gated / geo / upcoming card
   scrolls with the page. #player gets no box of its own (display:contents) so the frame is a grid
   item of the whole .watch and stays pinned to its end, not just to the title under it (pip-nav.js
   strips the .watch class when it keeps the frame, which drops all of this). The title block follows,
   then the championship line, a "Live now elsewhere" link (below the title, never above the video),
   then the rail and the rest. */
@media (max-width:63.99rem){
  body.page-watch .site-header{position:relative}
  body.page-watch .site-header.scrolled{margin-block-end:0}
  .watch{grid-template-areas:"player" "head" "score" "sub" "banner" "side" "more"}
  .watch>#player{display:contents}
  .watch>#player>.player-frame,.watch>#player>.player{grid-area:player}
  .watch>#player>.watch-head{grid-area:head}
  .watch>.live-elsewhere{margin:.75rem 0 0}
  .watch .player-frame{position:sticky;inset-block-start:0;z-index:15}
  .watch .player-frame>mux-player{inline-size:100%;max-inline-size:max(16rem,calc((100dvh - 1.5rem) * 16 / 9))}
  /* Gated / geo / upcoming cards: as tall as the picture would be, growing with their content. */
  .watch>#player>.player{aspect-ratio:auto;min-block-size:56.25vw}
  /* Title: two lines at most, then the one state line; the championship line under it is quiet. */
  .watch-head{margin-block-start:.6rem}
  .watch-title{font-size:1.1rem;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .watch-head .watch-bar{margin-block-start:.3rem;font-size:.82rem;gap:.3rem .6rem}
  .watch-sub{margin-block-start:.15rem}
  /* Channels: one row of chips instead of the select (one tap, not two). It scrolls sideways under
     the finger only, never by itself; the row runs to the window edges like YouTube's. */
  .watch-bar .channel-pick{display:none}
  .channel-chips{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
    margin:.6rem calc(50% - 50vw) 0;padding:.1rem max(1.25rem,calc(50vw - 50%)) .2rem;scroll-padding-inline:1.25rem}
  .channel-chips::-webkit-scrollbar{display:none}
  .channel-chips .chip{flex:none;display:inline-flex;align-items:center;min-block-size:44px;padding-inline:.95rem;white-space:nowrap;
    background:rgba(255,255,255,.1);color:#fff;border:1px solid transparent;border-radius:.6rem;font-weight:700;font-size:.85rem;text-decoration:none}
  .channel-chips .chip:hover{border-color:var(--rt-orange)}
  .channel-chips .chip:focus-visible{outline:3px solid var(--rt-orange);outline-offset:-3px}
  .channel-chips .chip-on,.channel-chips .chip-on:hover{background:#fff;color:var(--rt-ink);border-color:#fff}
  .watch-head .player-routine{font-size:.85rem}
  /* The routine's two actions side by side as buttons, not two full-width lines of links. */
  .watch-head .player-routine .pr-actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;inline-size:100%;margin:.15rem 0 0}
  .watch-head .player-routine .pr-actions a{justify-content:center;padding:.35rem .7rem;border:1px solid rgba(255,255,255,.28);border-radius:.6rem;
    text-align:center;text-decoration:none;line-height:1.2}
  .watch-head .player-routine .pr-actions .routine-next{border-color:var(--rt-orange)}
  /* The rail: the routine list fills what is left under the pinned video and hands the scroll back
     to the page at its ends, so a thumb never gets stuck in it. */
  .watch>.watch-side{margin-block-start:1rem}
  .watch-side .rr-chips{margin-inline:calc(50% - 50vw);padding-inline:max(1.25rem,calc(50vw - 50%))}
  .watch-side .rr-list{max-block-size:max(18rem,calc(100dvh - 56.25vw - 8rem));overscroll-behavior:auto}
  /* A row, YouTube's way: the frame on the left with the time on it, the gymnast and the apparatus
     beside it, the score at the end. */
  .watch-side .rr-row a{grid-template-columns:7rem minmax(0,1fr) auto;grid-template-areas:"thumb who score" "thumb app score";
    gap:.15rem .75rem;padding:.45rem .7rem .45rem .45rem}
  .watch-side .rr-thumb{grid-area:thumb;display:block;inline-size:7rem;aspect-ratio:16/9;border-radius:.4rem;overflow:hidden;
    background:linear-gradient(135deg,#0b1450,#000735)}
  .watch-side .rr-thumb img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
  .watch-side .rr-at{grid-area:thumb;align-self:end;justify-self:end;z-index:1;margin:.25rem;padding:.05rem .3rem;border-radius:.25rem;
    background:rgba(0,0,0,.8);color:#fff;font-size:.72rem;line-height:1.3}
  .watch-side .rr-row.is-now .rr-at{color:#fff}
  .watch-side .rr-who{grid-area:who;align-self:end;font-size:.92rem;line-height:1.25}
  .watch-side .rr-app{grid-area:app;align-self:start}
  .watch-side .rr-score{grid-area:score}
  .watch-side .rr-go{display:none}
}
/* A phone on its side (short window): nothing pinned, and the picture never taller than the window. */
@media (max-width:63.99rem) and (max-height:31.99rem){
  .watch .player-frame{position:relative}
}

/* ---- Desktop: YouTube's two columns, the only desktop layout (Alex 19 Oct 08:2x, with a screenshot
   of the centred full-width player: "the menu on the right is missing ... this isnt theatre mode").
   The look he approved on 18 Oct: the player on the left, capped by the window HEIGHT so the player,
   its title and the line under it fit the first view (--watch-chrome: app.js measures it, a CSS
   estimate until then), and the rail on the right (routines in this replay / running order + live
   standings / channels) as tall as the rows beside it, scrolling inside itself. When the height cap
   leaves the player narrower than its share, the rail takes the rest (1fr), so the grid always fills
   the page width and its edges match the header's. Results, rankings and the rest run full width
   under both. No toggle. ------------------------------------------------------------------------ */
@media (min-width:64rem){
  .watch{--rail-w:clamp(19rem,24vw,25rem);--watch-chrome:15rem;column-gap:1.5rem;justify-content:center;
    grid-template-columns:minmax(0,max(30rem,calc((100vh - var(--watch-chrome)) * 16 / 9))) minmax(var(--rail-w),1fr);
    grid-template-columns:minmax(0,max(30rem,calc((100dvh - var(--watch-chrome)) * 16 / 9))) minmax(var(--rail-w),1fr);
    grid-template-areas:"banner banner" "player side" "score side" "sub side" "more more"}
  .watch>.live-elsewhere{margin-block:.75rem}
  .channel-chips{display:none}
  /* The rail is exactly as tall as the rows beside it: its content scrolls in an absolutely placed
     box, so a long list can never stretch the rows. The box is outside #live-scores (which swaps
     itself every 15s), so polling keeps the scroll position. */
  .watch>.watch-side{position:relative;margin:0;min-block-size:16rem}
  .watch-side__scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent;padding-inline-end:.25rem}
  .watch>.watch-more{margin-block-start:1.75rem}
  /* Replay (Alex 20 Oct 23:4x: "too wide, could be more compact like a lot"): the routines rail is a
     fixed narrow column (16-20rem) and the video takes the rest of the width, still capped by the
     window height: the player, its title and the state + channel line fit the first view; the quiet
     lines after them (the championship line, and "Starting at ..." when the replay opened at a
     routine) may sit just under it (--fold-slack). When the cap leaves room over, the two columns are
     centred as a pair instead of the rail soaking it up. Live and upcoming pages keep the wider rail
     above (standings table). */
  .watch:has(>.watch-side .rr){--rail-w:clamp(16rem,20vw,20rem);--fold-slack:2.5rem;
    grid-template-columns:minmax(0,max(30rem,calc((100vh - var(--watch-chrome) + var(--fold-slack)) * 16 / 9))) var(--rail-w);
    grid-template-columns:minmax(0,max(30rem,calc((100dvh - var(--watch-chrome) + var(--fold-slack)) * 16 / 9))) var(--rail-w)}
  .watch:has(>.watch-side .rr):has(.watch-head>.player-routine){--fold-slack:5rem}
  /* The routine list fills the rail under its header and chips and scrolls by itself. */
  .watch-side .rr{flex:1 1 auto;min-block-size:0;display:flex;flex-direction:column}
  .watch-side .rr-head,.watch-side .rr-chips{flex:none}
  .watch-side .rr-list{flex:1 1 auto;min-block-size:8rem;max-block-size:none}
  /* Header: the heading wraps beside a small "Hide scores" switch rather than pushing it to a row of
     its own; only when its longest word and the switch cannot share the width (a long translation)
     does the switch drop under it. */
  .watch-side .rr-head{align-items:center;gap:.4rem .5rem}
  .watch-side .rr-head .rail-h{flex:1 1 0;line-height:1.15}
  .watch-side .hide-scores{flex:none;min-block-size:2rem;padding:.2rem .55rem;gap:.3rem;font-size:.7rem;border-width:1px}
  .watch-side .hide-scores .hs-ico{inline-size:1.35rem;block-size:.8rem}
  .watch-side .hide-scores .hs-ico::after{inline-size:calc(.8rem - 4px)}
  .watch-side .hide-scores[aria-pressed=true] .hs-ico::after{transform:translateX(.55rem)}
  html[dir=rtl] .watch-side .hide-scores[aria-pressed=true] .hs-ico::after{transform:translateX(-.55rem)}
  /* Apparatus chips: ONE row that scrolls sideways (snap, no scrollbar); the far edge fades so a chip
     running off it reads as "more this way", never as a label cut in half. The end padding is the
     fade's width, so the last chip scrolls fully clear of it. */
  .watch-side .rr-chips{gap:.3rem;padding-block:.5rem .45rem;padding-inline-end:1.75rem;scroll-snap-type:x proximity;scroll-padding-inline:2px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1.75rem),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 1.75rem),transparent)}
  html[dir=rtl] .watch-side .rr-chips{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 1.75rem),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 1.75rem),transparent)}
  .watch-side .rr-chips .chip{min-block-size:2rem;padding-inline:.7rem;font-size:.78rem;border-width:1px;scroll-snap-align:start}
  /* A row: the gymnast (name, flag, NOC) across the full width, time + apparatus under it with the
     score at the end of that line. A long name gives way (ellipsis), the NOC never does. */
  .watch-side .rr-row a{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"who who who" "at app score";gap:.05rem .5rem;
    padding:.35rem .65rem;min-block-size:44px;font-size:.85rem;line-height:1.25}
  .watch-side .rr-at{grid-area:at;font-size:.72rem}
  .watch-side .rr-who{grid-area:who;display:flex;align-items:center;gap:.35rem;white-space:nowrap}
  .watch-side .rr-who b{min-inline-size:0;overflow:hidden;text-overflow:ellipsis}
  .watch-side .rr-nat{flex:none;font-size:.7rem}
  .watch-side .rr-app{grid-area:app;font-size:.68rem}
  .watch-side .rr-score{grid-area:score;font-size:.85rem}
  .watch-side .rr-score small{font-size:.65rem}
  .watch-side .rr-go{display:none}
  /* Live: the standings table, narrowed for the rail. */
  .watch-side .results{font-size:.88rem}
  /* Section headings under the player read as real headings (Alex 18 Oct); the rail's own heading
     stays compact so the list keeps its room. */
  .watch-more .rail-h{font-size:clamp(1.35rem,.9rem + .8vw,1.8rem);color:#fff;margin-block:2rem 1rem;gap:.75rem}
  .watch-side .rr-head .rail-h{font-size:.82rem;color:#fff;margin:0}
  .watch .rr-count{display:inline-flex;align-items:center;justify-content:center;min-inline-size:2.2em;padding:.2em .6em;border-radius:999px;
    background:rgba(255,255,255,.14);color:#fff;font-size:.75em;letter-spacing:0;line-height:1}
}
/* Fullscreen: the whole screen, whatever the caps above say (they would win on source order). */
.watch .player-frame:fullscreen>mux-player{inline-size:100%;max-inline-size:none}
.watch .player-frame:-webkit-full-screen>mux-player{inline-size:100%;max-inline-size:none}

/* ---- Finals (engine/viewer/finals.py): "How this final works", the official PDFs, the LA 2028
   line in a team final's standings, "Add all finals to my calendar". White ink: both pages it sits
   on (the dark watch page, the navy results canvas) are dark. Orange is a fill, navy ink on it. ---- */
.final-info{margin:1.6rem 0;padding:1rem 1.1rem 1.1rem;border:1px solid rgba(255,255,255,.22);border-radius:12px;color:#fff;max-inline-size:44rem}
.final-info__h{margin:0 0 .6rem;font-family:var(--display);font-weight:800;font-size:1.1rem;text-transform:uppercase;letter-spacing:.04em;color:#fff}
.watch-more .final-info__h{font-size:1.1rem;margin:0 0 .6rem}
.final-info__list{margin:0;padding:0;list-style:none;display:grid;gap:.45rem}
.final-info__list li{position:relative;padding-inline-start:1.1rem;line-height:1.45;font-weight:600}
.final-info__list li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;inline-size:.45rem;block-size:.45rem;border-radius:50%;background:var(--rt-orange)}
.final-info__src{margin:.7rem 0 0;font-size:.75rem;color:rgba(255,255,255,.72)}
.final-info__docs{margin:.9rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.final-info__docs a{display:inline-flex;align-items:center;min-block-size:44px;padding:0 1rem;border-radius:999px;background:var(--rt-orange);color:var(--rt-ink) !important;
  font-weight:800;font-size:.82rem;text-decoration:none}
.final-info__docs a:hover{background:#fff}
.results-cut td{position:relative;padding:0;block-size:0;border:0;border-block-start:3px dashed var(--rt-orange)}
.results-cut span{position:absolute;inset-inline-end:.6rem;top:-.75rem;background:var(--rt-orange);color:var(--rt-ink);font-size:.75rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:.05rem .55rem;white-space:nowrap}
.sched-cal{margin:.4rem 0 1rem}
.sched-cal .btn-outline{color:#fff;border-color:rgba(255,255,255,.55);min-block-size:44px;display:inline-flex;align-items:center}
.sched-cal .btn-outline:hover{color:var(--rt-orange);border-color:var(--rt-orange)}
.l-cal{margin:20px 0 0}
.medal-list .ml-ev{font-weight:800;margin-inline-end:.5rem}

/* ---- Live page between sessions (20 Oct): the next session and the latest day's replays side by
   side, the same height; stacked on phones. ---- */
.live-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:14px;margin-block-end:1.75rem}
.live-duo>.live-feature{margin-block-end:0;min-block-size:clamp(15rem,26vw,19rem)}
.lf-catchup .lf-body{display:flex;flex-direction:column;align-items:flex-start}
.lf-catchup .lf-eyebrow{color:#fff}
.lf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;margin:0}
.lf-best{display:inline-flex;align-items:center;min-height:44px;color:var(--rt-orange);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem}
.lf-best:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- Apparatus days: each final's planned start (finals.planned_starts, World Feed running order).
   Schedule: a strip continuing the session's card, one equal column per final on desktop (one row,
   no orphan cell), one line per final below that. Watch page: inside "How this final works", white
   ink on the dark box, one line per final. The time column is a fixed width so the names line up. */
.final-starts__h{margin:0 0 .5rem;font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.final-starts__list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.final-starts__list li{display:grid;grid-template-columns:3.4rem 1fr;align-items:baseline;gap:.5rem;min-block-size:2.4rem;padding:.4rem .7rem;border-radius:10px;line-height:1.25}
.final-starts__list time{font-weight:800;font-variant-numeric:tabular-nums}
.final-starts__name{font-weight:700;overflow-wrap:break-word;min-inline-size:0}
.final-starts__note{margin:.6rem 0 0;font-size:.75rem}
.row-finals{padding:.2rem .9rem .8rem;background:var(--surface);border:1px solid var(--border);border-block-start:0;border-radius:0 0 .6rem .6rem}
.sd .row:has(.row-finals)>.row-link{border-end-start-radius:0;border-end-end-radius:0;border-block-end:0}
.sd .row:has(.row-cal) .row-finals,.sd .row:has(.row-chs) .row-finals{border-radius:0}
.row-finals .final-starts__h{color:var(--rt-navy)}
.row-finals .final-starts__list li{background:var(--rt-cream);color:var(--rt-navy);border-inline-start:4px solid var(--rt-orange)}
.row-finals .final-starts__note{color:var(--text-muted)}
@media (min-width:64rem){
  .row-finals .final-starts__list{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .row-finals .final-starts__list li{grid-template-columns:1fr;align-content:start;gap:.15rem}
}
.final-info .final-starts{margin-block-start:1.1rem;padding-block-start:1rem;border-block-start:1px solid rgba(255,255,255,.22)}
.final-info .final-starts__h{color:#fff}
.final-info .final-starts__list li{background:rgba(255,255,255,.08);color:#fff;border-inline-start:4px solid var(--rt-orange)}
.final-info .final-starts__note{color:rgba(255,255,255,.72)}