/* ==========================================================================
   Moto Now — Shared Components
   One stylesheet, reused by every template via templates/components/*.html.
   Section banners mirror sample_designs/*.html so the mapping stays obvious.
   ========================================================================== */

/* ---------- UTILITY BAR ---------- */
.utility-bar{background:var(--ink); color:#fff;}
.utility-bar .wrap{display:flex; align-items:center; justify-content:space-between; padding:8px 28px;}
.utility-bar .left{font-family:var(--mono); font-size:0.68rem; letter-spacing:1px; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,0.75);}
.utility-bar .left a{color:rgba(255,255,255,0.9);}
.utility-bar .left a:hover{color:var(--green);}
.live-dot{width:6px; height:6px; border-radius:50%; background:var(--green); display:inline-block; animation:pulse 1.8s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.35;}}
.utility-bar .right a{font-family:var(--mono); font-size:0.68rem; letter-spacing:1px; color:rgba(255,255,255,0.75); margin-left:18px;}
.utility-bar .right a:hover{color:var(--green);}

/* ---------- LIVE BANNER ---------- */
/* Shown in place of the utility bar while an event is live (see base.html).
   Sticky so it stays visible while scrolling; the site header sticks just
   below it via body.has-live-banner. The whole row is one large tap target
   so it stays easy to hit on mobile. */
.live-banner{
  display:block;
  position:sticky; top:0; z-index:51;
  background:var(--green); color:var(--ink);
  font-family:var(--mono); font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  transition:background .18s ease, color .18s ease;
}
.live-banner:hover, .live-banner:focus-visible{background:var(--green-dark); color:#fff; outline:none;}
/* Inner track matches the navbar's 1200px column so the dot lines up with the logo. */
.live-banner__inner{
  display:flex; align-items:center; gap:14px;
  max-width:1200px; margin:0 auto; min-height:52px; padding:12px 28px;
}
.live-banner__pulse{
  flex:none; position:relative;
  width:11px; height:11px; border-radius:50%; background:currentColor;
}
.live-banner__pulse::after{
  content:''; position:absolute; inset:-7px; border-radius:50%;
  border:2px solid currentColor; animation:live-ping 1.8s ease-out infinite;
}
@keyframes live-ping{
  0%{transform:scale(0.4); opacity:0.7;}
  100%{transform:scale(1.3); opacity:0;}
}
.live-banner__tag{
  flex:none; font-size:0.72rem; letter-spacing:2px;
  padding-right:14px; border-right:2px solid currentColor;
}
.live-banner__name{
  flex:1 1 auto; min-width:0;
  font-family:var(--body); font-size:0.92rem; letter-spacing:0.2px; text-transform:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.live-banner__cta{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  font-size:0.68rem; letter-spacing:1.5px;
}
.live-banner__arrow{transition:transform .18s ease;}
.live-banner:hover .live-banner__arrow, .live-banner:focus-visible .live-banner__arrow{transform:translateX(3px);}
@media (prefers-reduced-motion:reduce){
  .live-banner__pulse::after{animation:none; opacity:0;}
}
@media (max-width:560px){
  /* Keep it one line: the name shrinks and ellipsis-truncates. Drop the
     "View timing" words but keep the arrow as the tap-affordance. */
  .live-banner__inner{gap:10px; padding:12px 18px;}
  .live-banner__cta-label{display:none;}
  .live-banner__cta{gap:0; font-size:1.05rem;}
}

/* ---------- NAV ---------- */
header.site-header{position:sticky; top:0; z-index:50; background:rgba(251,251,249,0.94); backdrop-filter:blur(8px); border-bottom:2px solid var(--ink);}
body.has-live-banner header.site-header{top:52px;}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:18px 28px; max-width:1200px; margin:0 auto;}
.logo-row{display:flex; align-items:center; gap:9px; flex-shrink:0;}
.logo-row img{height:48px; width:auto;}
nav.links{display:flex; align-items:center; gap:clamp(14px, 2.2vw, 28px);}
nav.links > a, nav.links .drop > a{white-space:nowrap;}
nav.links a{font-family:var(--mono); font-size:clamp(0.85rem, 1.6vw, 1.05rem); letter-spacing:1.3px; text-transform:uppercase; color:var(--ink-dim); position:relative; padding:4px 0; transition:color .2s ease;}
nav.links a:hover, nav.links a:focus-visible{color:var(--ink); outline:none;}
nav.links a::after{content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--green); transition:width .25s ease;}
nav.links a:hover::after{width:100%;}
/* "● Live" — our live event article, only on event days (see base.html). */
nav.links a.nav-live{display:inline-flex; align-items:center; gap:8px; color:var(--green-dark); font-weight:700;}
nav.links a.nav-live:hover, nav.links a.nav-live:focus-visible{color:var(--ink);}
nav.links a.nav-live .live-dot{width:8px; height:8px;}
.drop{position:relative;}
.drop-menu{display:none; position:absolute; top:26px; left:0; background:#fff; border:1px solid var(--line-strong); min-width:160px; padding:8px 0; box-shadow:0 12px 24px rgba(28,32,36,0.10); z-index:60;}
.drop:hover .drop-menu, .drop:focus-within .drop-menu{display:block;}
.drop-menu a{display:block; padding:10px 16px; font-size:0.68rem;}
.drop-menu a:hover{background:var(--green-tint); color:var(--green-dark);}
/* Hamburger: three bars that fold into an X while the menu is open. 44px square to tap. */
.nav-toggle{display:none; width:44px; height:44px; margin-right:-10px; padding:13px 10px; background:none; border:none; cursor:pointer; flex-direction:column; justify-content:space-between;}
.nav-toggle__bar{display:block; height:3px; background:var(--ink); transition:transform .2s ease, opacity .2s ease;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.nav-toggle:focus-visible{outline:2px solid var(--green-dark); outline-offset:2px;}

/* ---------- TAG BLOCK ---------- */
.tag-block{display:inline-flex; align-items:center; font-family:var(--mono); font-weight:700; font-size:0.68rem; letter-spacing:1.5px; text-transform:uppercase; background:var(--green); color:var(--ink); padding:5px 10px;}
.tag-block.outline{background:transparent; color:var(--green-dark); border:1px solid var(--green-dark); padding:4px 9px;}

/* ---------- BYLINE ---------- */
.byline{font-family:var(--mono); font-size:0.76rem; color:var(--ink-dim); display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.byline .sep{opacity:0.4;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:#fff;
  font-family:var(--mono); font-weight:700; font-size:0.76rem;
  letter-spacing:1px; text-transform:uppercase;
  padding:13px 20px; border:none; cursor:pointer;
  transition:transform .18s ease, background .18s ease;
}
.btn:hover{background:var(--green-dark); transform:translateY(-2px); color:#fff;}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line-strong);}
.btn.ghost:hover{background:var(--green-tint); color:var(--green-dark); border-color:var(--green-dark); transform:none;}
.btn[disabled], .btn.disabled{opacity:0.4; pointer-events:none;}

/* ---------- SECTION HEAD ---------- */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:24px; flex-wrap:wrap; gap:12px;
  border-bottom:3px solid var(--ink); padding-bottom:14px;
}
.section-head h2{font-family:var(--display); font-weight:800; font-size:1.5rem; text-transform:uppercase; letter-spacing:0.3px;}
.section-head .count{font-family:var(--mono); font-size:0.72rem; color:var(--ink-dim); letter-spacing:1px; text-transform:uppercase;}
.section-head .see-all{font-family:var(--mono); font-size:0.74rem; letter-spacing:1px; color:var(--green-dark); text-transform:uppercase; border-bottom:1px solid transparent;}
.section-head .see-all:hover{border-color:var(--green-dark);}
.section-head__right{display:flex; align-items:baseline; gap:18px;}
.section{padding:56px 0;}
.section + .section{border-top:1px solid var(--line);}

/* ---------- CARDS ---------- */
.feature-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;}
.card{
  background:#fff; border:1px solid var(--line); overflow:hidden;
  display:block;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{transform:translateY(-6px); border-color:var(--line-strong); box-shadow:0 16px 30px rgba(28,32,36,0.08);}
.card .thumb{aspect-ratio:16/10; overflow:hidden; position:relative; background:var(--bg-panel);}
.card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.card:hover .thumb img{transform:scale(1.06);}
.card .body{padding:18px 20px 22px;}
.card .tag-block.outline{margin-bottom:12px;}
.card h4{font-family:var(--display); font-weight:700; font-size:1.12rem; text-transform:uppercase; letter-spacing:0.2px; line-height:1.25; margin-bottom:10px;}
.card .meta{font-family:var(--mono); font-size:0.7rem; color:var(--ink-dim);}

/* Lightweight outlook/callout card (team outlooks etc.) */
.outlook-card{border-left:4px solid var(--green); background:var(--bg-panel); padding:20px 22px; margin-bottom:24px;}
.outlook-card h4{font-family:var(--display); font-weight:700; font-size:1.1rem; text-transform:uppercase; margin-bottom:10px;}
.outlook-card img{margin:14px 0; border:1px solid var(--line-strong);}
.outlook-card .rating{font-family:var(--mono); font-size:0.74rem; text-transform:uppercase; letter-spacing:1px; font-weight:700; display:inline-block; margin-bottom:10px;}
.outlook-card .rating.forward{color:var(--green-dark);}
.outlook-card .rating.backward{color:#B3453A;}
.outlook-card .rating.steady{color:var(--ink-dim);}

/* ---------- BOARD (scoreboard list) ---------- */
.board{border:1px solid var(--line-strong); background:#fff;}
.board-row{
  display:grid; grid-template-columns:64px 1fr auto auto;
  align-items:center; gap:20px; padding:16px 22px;
  border-bottom:1px solid var(--line); transition:background .18s ease;
}
.board-row:last-child{border-bottom:none;}
.board-row:hover{background:var(--green-tint);}
.board-row .idx{font-family:var(--mono); font-size:0.85rem; color:var(--ink-dim);}
.board-row h5{font-family:var(--display); font-weight:600; font-size:0.95rem; text-transform:uppercase;}
.board-row .date{font-family:var(--mono); font-size:0.74rem; color:var(--ink-dim); white-space:nowrap;}
.board-row .arrow{font-family:var(--mono); color:var(--green-dark); font-size:1rem; transition:transform .2s ease;}
.board-row:hover .arrow{transform:translateX(4px);}

/* ---------- EVENTS PAGE (results/templates/events.html) ---------- */
.events-head{
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
  gap:20px 32px; margin:40px 0 28px;
}
.events-head__eyebrow{font-family:var(--mono); font-size:0.72rem; letter-spacing:2.5px; color:var(--green-dark); text-transform:uppercase; margin-bottom:10px;}
.events-head h1{font-family:var(--display); font-weight:800; font-size:2.6rem; line-height:1.05; text-transform:uppercase;}
.events-head__summary{font-family:var(--mono); font-size:0.78rem; color:var(--ink-dim); margin-top:10px;}
.events-head__actions{display:flex; flex-direction:column; align-items:flex-end; gap:14px;}
.year-nav{display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start;}
.year-nav a{
  font-family:var(--mono); font-size:0.78rem; color:var(--ink-dim);
  border:1px solid var(--line-strong); padding:7px 12px; background:#fff;
  transition:color .18s ease, background .18s ease, border-color .18s ease;
}
.year-nav a:hover{color:var(--green-dark); border-color:var(--green-dark); background:var(--green-tint);}
.year-nav a.active{background:var(--ink); border-color:var(--ink); color:#fff;}
.season-step{display:flex; gap:18px; margin-top:12px;}
.season-step a{font-family:var(--mono); font-size:0.78rem; letter-spacing:1px; color:var(--green-dark); border-bottom:1px solid transparent;}
.season-step a:hover{border-bottom-color:var(--green-dark);}
.season-step__standings{padding-left:18px; border-left:1px solid var(--line-strong);}

/* Season archive (results/templates/event_seasons.html) */
.season-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px;}
.season-tile{
  display:flex; flex-direction:column; gap:6px; padding:16px 18px;
  background:#fff; border:1px solid var(--line-strong);
  transition:background .18s ease, border-color .18s ease;
}
.season-tile:hover{background:var(--green-tint); border-color:var(--green-dark);}
.season-tile__year{font-family:var(--display); font-weight:800; font-size:1.6rem; line-height:1;}
.season-tile__meta{font-family:var(--mono); font-size:0.7rem; color:var(--ink-dim);}
.season-tile__champions{display:flex; flex-direction:column; gap:3px; margin-top:6px; padding-top:8px; border-top:1px solid var(--line);}
.season-tile .champion{font-family:var(--body); font-weight:600; font-size:0.84rem;}
.season-tile .champion .cls{font-family:var(--mono); font-weight:400; font-size:0.64rem; color:var(--ink-dim); margin-right:8px;}

.next-up{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px 32px;
  border:1px solid var(--ink); border-left:6px solid var(--green); background:#fff;
  padding:20px 24px; margin-bottom:36px; transition:background .18s ease;
}
.next-up:hover{background:var(--green-tint);}
.next-up h3{font-family:var(--display); font-weight:800; font-size:1.5rem; text-transform:uppercase; margin:10px 0 4px;}
.next-up__meta{font-family:var(--mono); font-size:0.74rem; color:var(--ink-dim); margin-top:4px;}
.next-up__countdown{font-family:var(--mono); font-weight:700; font-size:0.95rem; letter-spacing:1px; text-transform:uppercase; color:var(--green-dark); white-space:nowrap;}

.events-series{margin-bottom:48px; scroll-margin-top:90px;}

/* Season timeline (components/season_timeline.html): one dot per round, styled by
   series type to match the share card (results/og_images.py). */
.series-marker{display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--ink); flex-shrink:0;}
.series-marker--mx{background:var(--green-dark);}
.series-marker--smx{background:#fff; box-shadow:inset 0 0 0 2px var(--ink);}
.season-timeline{margin:0 0 28px; padding:4px 8px 0;}
.season-timeline__track{position:relative; height:64px; border-top:3px solid var(--line); margin-top:16px;}
.season-timeline__month{
  position:absolute; top:-12px; height:24px; border-left:2px solid var(--line);
  padding-top:30px; text-align:center; font-family:var(--mono); font-size:0.68rem;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-dim);
}
.season-timeline__today{position:absolute; top:-26px; bottom:22px; width:2px; margin-left:-1px; background:var(--green);}
.season-timeline__today span{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-weight:700; font-size:0.6rem; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--green-dark); white-space:nowrap;
}
.season-timeline__round{position:absolute; top:-1.5px; transform:translate(-50%, -50%); display:block; line-height:0;}
.season-timeline__round .series-marker{width:14px; height:14px; transition:transform .15s ease;}
.season-timeline__round:hover, .season-timeline__round:focus-visible{z-index:3;}
.season-timeline__round:hover .series-marker, .season-timeline__round:focus-visible .series-marker{transform:scale(1.5);}
.season-timeline__round.is-next .series-marker{box-shadow:0 0 0 4px var(--bg), 0 0 0 7px var(--green);}
.season-timeline__round.is-next .series-marker--smx{box-shadow:inset 0 0 0 2px var(--ink), 0 0 0 4px var(--bg), 0 0 0 7px var(--green);}
/* Hover tooltip: above the dot, flush to its side near the timeline's edges. */
.season-timeline__tip{
  display:none; position:absolute; bottom:calc(100% + 14px); left:50%; transform:translateX(-50%);
  width:max-content; max-width:320px; padding:10px 12px; line-height:1.35;
  background:var(--ink); color:#fff; text-align:left; pointer-events:none;
}
.season-timeline__tip--start{left:-6px; transform:none;}
.season-timeline__tip--end{left:auto; right:-6px; transform:none;}
.season-timeline__tip strong{display:block; font-family:var(--display); font-weight:700; font-size:0.86rem; text-transform:uppercase; margin-bottom:3px;}
.season-timeline__tip > span{display:block; font-family:var(--mono); font-size:0.66rem; color:rgba(255,255,255,0.72);}
.season-timeline__tip .winner{margin-top:5px; font-family:var(--body); font-weight:600; font-size:0.78rem; color:#fff;}
.season-timeline__tip .winner + .winner{margin-top:1px;}
.season-timeline__tip .winner .cls{font-family:var(--mono); font-weight:400; font-size:0.62rem; color:var(--green); margin-right:6px;}
@media (hover:hover){
  .season-timeline__round:hover .season-timeline__tip{display:block;}
}
.season-timeline__round:focus-visible .season-timeline__tip{display:block;}
.section-nav .series-marker{width:9px; height:9px; margin-right:8px; vertical-align:0;}

.schedule-board{border:1px solid var(--line-strong); background:#fff;}
.schedule-row{
  display:grid; grid-template-columns:56px minmax(0, 1fr) minmax(0, 260px);
  align-items:center; gap:22px; padding:16px 22px;
  border-bottom:1px solid var(--line); transition:background .18s ease;
}
.schedule-row:last-child{border-bottom:none;}
a.schedule-row:hover{background:var(--green-tint);}
.schedule-row--next{background:var(--green-tint); box-shadow:inset 4px 0 0 var(--green);}
.schedule-row__date{display:flex; flex-direction:column; align-items:center; font-family:var(--mono); line-height:1.1;}
.schedule-row__date .mon{font-size:0.68rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-dim);}
.schedule-row__date .day{font-size:1.45rem; font-weight:700;}
.schedule-row--done .schedule-row__date .day{color:var(--ink-dim);}
.schedule-row__main h5{font-family:var(--display); font-weight:600; font-size:1rem; text-transform:uppercase; line-height:1.25;}
.schedule-row__main h5 .round{font-family:var(--mono); font-weight:400; font-size:0.7rem; color:var(--ink-dim); margin-left:6px;}
.schedule-row__main .sub{display:block; font-family:var(--mono); font-size:0.72rem; color:var(--ink-dim); margin-top:4px;}
.schedule-row__tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.schedule-row__tags .tag-block.outline{font-size:0.6rem; padding:2px 7px;}
.schedule-row__status{display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right;}
.schedule-row__status .winners{display:flex; flex-direction:column; gap:3px;}
.schedule-row__status .winner{font-family:var(--body); font-weight:600; font-size:0.86rem;}
.schedule-row__status .winner .cls{font-family:var(--mono); font-weight:400; font-size:0.66rem; color:var(--ink-dim); margin-right:8px;}
.schedule-row__status .cta{font-family:var(--mono); font-size:0.7rem; letter-spacing:1px; text-transform:uppercase; color:var(--green-dark); transition:transform .2s ease;}
a.schedule-row:hover .cta{transform:translateX(3px);}
.schedule-row .empty{font-family:var(--body); font-weight:400; text-transform:none; color:var(--ink-dim);}

/* ---------- RAIL ITEMS (used inside aside-block and homepage rail) ---------- */
.rail-item{display:block; padding:14px 0; border-bottom:1px solid var(--line);}
.rail-item:first-child{padding-top:0;}
.rail-item:last-child{border-bottom:none;}
.rail-item .tag-block.outline{margin-bottom:8px;}
.rail-item h4{font-family:var(--display); font-weight:600; font-size:0.92rem; line-height:1.3; text-transform:uppercase; margin-bottom:6px;}
.rail-item .meta{font-family:var(--mono); font-size:0.66rem; color:var(--ink-dim);}
.rail-item:hover h4{color:var(--green-dark);}

/* ---------- LINK ROW (condensed one-line list item, e.g. All Races) ---------- */
.link-row{
  display:flex; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.link-row:first-child{padding-top:0;}
.link-row:last-child{border-bottom:none;}
.link-row .tag-block.outline{flex-shrink:0;}
.link-row .title{
  font-family:var(--display); font-weight:600; font-size:0.86rem;
  text-transform:uppercase; line-height:1.2;
}
.link-row:hover .title{color:var(--green-dark);}

/* ---------- HOMEPAGE HERO ---------- */
.hero{padding:36px 0 0; border-bottom:1px solid var(--line);}
.front-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:36px; padding-bottom:36px;}
.lead-media{position:relative; overflow:hidden; border:1px solid var(--line-strong); aspect-ratio:16/10; margin-bottom:20px; background:var(--bg-panel); display:block;}
.lead-media img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.lead-media:hover img{transform:scale(1.04);}
.lead-media .tag-block{position:absolute; top:14px; left:14px;}
.lead h1{font-family:var(--display); font-weight:800; font-size:clamp(1.9rem, 3.6vw, 2.9rem); line-height:1.05; text-transform:uppercase; letter-spacing:0.2px; margin-bottom:14px;}
.lead h1 a:hover{color:var(--green-dark);}
.lead p.dek{color:var(--ink-dim); font-size:1.02rem; max-width:56ch; margin-bottom:18px;}
.lead .byline{margin-bottom:22px;}
.rail{border-left:3px solid var(--ink); padding-left:22px;}
.rail .event-info, .rail .aside-block + .aside-block{margin-bottom:28px;}

/* ---------- ASIDE MODULES (article/event sidebars) ---------- */
.article-aside{position:sticky; top:88px; display:flex; flex-direction:column; gap:36px;}
.aside-block{border-top:3px solid var(--ink); padding-top:18px;}
.aside-head, .rail-head{
  font-family:var(--display); font-weight:700; font-size:0.9rem; letter-spacing:1px;
  text-transform:uppercase; margin-bottom:16px; display:flex; align-items:center; gap:8px;
}
.aside-head .dot, .rail-head .dot{width:8px; height:8px; background:var(--green); display:inline-block;}

.aside-opinion{border-left:4px solid var(--green); background:var(--bg-panel); padding:18px 20px;}
.aside-opinion + .aside-opinion{margin-top:14px;}
.aside-opinion .who{font-family:var(--mono); font-weight:700; font-size:0.7rem; letter-spacing:1px; text-transform:uppercase; color:var(--green-dark); margin-bottom:8px; display:block;}
.aside-opinion p{font-size:0.92rem; color:var(--ink); font-style:italic; line-height:1.55;}
.aside-opinion:empty, .aside-opinion .empty{font-style:italic; color:var(--ink-dim); font-size:0.9rem;}

/* Admin-only "add opinion" control — hidden entirely for signed-out/non-staff
   visitors (the toggle/form markup isn't even rendered for them, see
   aside_opinion.html). */
.opinion-add-wrap{margin-top:14px;}
.opinion-add-toggle, .live-composer-toggle{
  font-family:var(--mono); font-size:0.68rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  color:var(--green-dark); background:none; border:1px solid var(--line-strong); border-radius:3px;
  padding:5px 10px; cursor:pointer; width:100%;
}
.opinion-add-toggle:hover, .live-composer-toggle:hover{background:var(--green-tint); color:var(--ink);}
.opinion-add-form textarea, .live-composer-form textarea{
  width:100%; box-sizing:border-box; font-family:var(--body); font-size:0.9rem; color:var(--ink);
  border:1px solid var(--line-strong); border-radius:3px; padding:8px 10px; resize:vertical;
}
.opinion-add-actions, .live-composer-actions{display:flex; gap:8px; margin-top:6px;}
.opinion-save, .opinion-cancel, .live-composer-save, .live-composer-cancel{
  font-family:var(--mono); font-size:0.7rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  border-radius:3px; padding:5px 12px; cursor:pointer;
}
.opinion-save, .live-composer-save{background:var(--green-dark); color:#fff; border:1px solid var(--green-dark);}
.opinion-save:disabled, .live-composer-save:disabled{opacity:0.6; cursor:default;}
.opinion-cancel, .live-composer-cancel{background:none; color:var(--ink-dim); border:1px solid var(--line-strong);}
.opinion-cancel:hover, .live-composer-cancel:hover{color:var(--ink);}

/* ---------- LIVE EVENT FEED (article_live_event.html — newest-first race results + commentary) ---------- */
.live-feed-badge{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:0.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--green-dark);}
.live-composer{margin-bottom:28px;}
.live-composer.compact{margin-bottom:0;}
.live-composer.compact .live-composer-toggle{width:auto;}
/* Timeline rail: a hairline down the left with a marker per entry — an ink
   square for race results, a green dot for commentary. */
.live-feed{position:relative; padding-left:30px; border-left:2px solid var(--line-strong); margin-left:6px;}
.live-entry{position:relative; margin-bottom:36px;}
.live-entry:last-child{margin-bottom:0;}
.live-entry::before{content:''; position:absolute; left:-38px; top:4px; width:10px; height:10px; background:var(--bg); border:2px solid var(--ink);}
.live-entry.live-update::before{background:var(--green); border-color:var(--green); border-radius:50%;}
.live-race-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px;}
.live-race-head h3{font-family:var(--display); font-weight:800; font-size:1.15rem; text-transform:uppercase; letter-spacing:0.3px;}
.live-race-head .see-all{margin-left:auto; font-family:var(--mono); font-size:0.72rem; letter-spacing:1px; color:var(--green-dark); text-transform:uppercase; border-bottom:1px solid transparent;}
.live-race-head .see-all:hover{border-color:var(--green-dark);}
details.live-more{border:1px solid var(--line-strong); border-top:none; background:#fff;}
details.live-more summary{
  list-style:none; cursor:pointer; padding:11px 20px; display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:0.72rem; letter-spacing:1px; text-transform:uppercase; color:var(--ink-dim);
}
details.live-more summary::-webkit-details-marker{display:none;}
details.live-more summary::after{content:'+'; font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--green-dark);}
details.live-more[open] summary::after{content:'\2013';}
details.live-more summary:hover{color:var(--ink); background:var(--green-tint);}
details.live-more .rank-list{border:none; border-top:1px solid var(--line);}
.live-update, .live-race-update{border-left:4px solid var(--green); background:var(--bg-panel); padding:14px 18px;}
.live-race-updates{display:grid; gap:10px; margin-top:12px;}
.live-update-meta{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:0.7rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--green-dark); margin-bottom:6px;}
.live-update-meta .sep{opacity:0.4; color:var(--ink-dim);}
.live-update-body{font-size:0.98rem; color:var(--ink); line-height:1.6;}
.live-update-body p + p{margin-top:0.7em;}
.live-update-body a{color:var(--green-dark); text-decoration:underline;}
.live-update-delete{
  margin-left:auto; font-family:var(--mono); font-size:0.64rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  color:var(--ink-dim); background:none; border:1px solid var(--line-strong); border-radius:3px; padding:2px 8px; cursor:pointer;
}
.live-update-delete:hover{color:var(--ink); background:#fff;}
.live-empty{font-style:italic; color:var(--ink-dim);}
/* "On track now" card (live_session_card.html) — pinned above the feed only
   while bikes are on track; a pulsing green marker on the rail. */
.live-entry.live-session{margin-bottom:36px;}
.live-entry.live-session::before{background:var(--green); border-color:var(--green); animation:pulse 1.8s infinite;}
.live-tag{gap:7px;}
.live-tag .live-dot{background:var(--ink);}
.live-session-state{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:-4px 0 12px; font-family:var(--mono); font-size:0.74rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ink-dim);}
.live-session-state .sep{opacity:0.4;}
.live-session-state [data-countdown]{color:var(--ink); font-variant-numeric:tabular-nums;}
.live-session-flag{color:var(--green-dark);}
.live-session-flag.white{color:var(--ink); background:#fff; border:1px solid var(--line-strong); padding:2px 7px;}
.live-session-flag.checkered{color:#fff; background:var(--ink); padding:3px 8px;}
/* One-line "Up next" strip shown while the next session waits for the gate. */
.live-entry.live-up-next{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:28px;
  padding:10px 16px; border:1px dashed var(--line-strong); background:#fff;
}
.live-entry.live-up-next::before{border-color:var(--green-dark); border-radius:50%; top:14px;}
.live-up-next__label{font-family:var(--mono); font-size:0.7rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--green-dark);}
.live-up-next__name{font-family:var(--display); font-weight:700; font-size:0.95rem; text-transform:uppercase; letter-spacing:0.3px;}

/* ---------- EVENT INFO CARD (this/next event — used on homepage rail and event aside) ---------- */
.event-info{border:1px solid var(--line-strong); background:#fff;}
.event-info-row{padding:16px 18px; border-bottom:1px solid var(--line);}
.event-info-row:last-child{border-bottom:none;}
.event-info-row.next{border-left:3px solid var(--green);}
.event-info-label{font-family:var(--mono); font-size:0.64rem; letter-spacing:1.5px; color:var(--ink-dim); text-transform:uppercase; margin-bottom:6px; display:flex; align-items:center; gap:6px;}
.event-info-row.next .event-info-label{color:var(--green-dark);}
.event-info-row .dot{width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block;}
.event-info-row h5, .event-info-row h3{font-family:var(--display); font-weight:700; font-size:1rem; text-transform:uppercase; margin-bottom:3px;}
.event-info-row .sub{font-size:0.84rem; color:var(--ink-dim);}
.event-info-row .sub span{font-family:var(--mono); font-size:0.72rem; opacity:0.85;}

/* ---------- ARTICLE / EVENT HEADER ---------- */
.article-header{padding-top:40px;}
.article-header .eyebrow{font-family:var(--mono); font-size:0.72rem; letter-spacing:2.5px; color:var(--green-dark); text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.article-header .eyebrow::before{content:''; width:22px; height:2px; background:var(--green); display:inline-block;}
.article-header h1{font-family:var(--display); font-weight:800; font-size:clamp(2rem, 5vw, 3.3rem); line-height:1.04; text-transform:uppercase; letter-spacing:0.2px; max-width:20ch; margin-bottom:16px;}
.article-header .byline{padding-bottom:26px; border-bottom:1px solid var(--line); margin-bottom:28px;}
.article-header .byline .share-button{margin-left:auto;}

.cover{border:1px solid var(--line-strong); overflow:hidden; margin-bottom:36px; background:var(--bg-panel);}
.cover img{width:100%; height:auto; display:block;}
.cover iframe{width:100%; aspect-ratio:16/9; border:0; display:block;}

/* Destination hero photos are uncontrolled full-resolution uploads with no
   consistent aspect ratio, so they get cropped to a fixed ratio instead of
   the article cover's natural height. */
.cover.cover-crop{aspect-ratio:21/9;}
.cover.cover-crop img{height:100%; object-fit:cover;}

.intro{font-size:1.08rem; color:var(--ink); max-width:70ch; margin-bottom:36px;}
.intro strong{color:var(--ink);}
.intro.intro-wide{max-width:none;}

/* ---------- ARTICLE / EVENT GRID ---------- */
.article-grid{display:grid; grid-template-columns:2fr 1fr; gap:56px; align-items:start;}
.article-main{min-width:0;}

/* ---------- MOBILE JUMP NAV / EVENT TABS ---------- */
.jump-nav{display:none;}
/* Same look as .jump-nav, but visible at every width — for pages with enough
   in-page sections (e.g. individual race results) to warrant a persistent
   "jump to" bar even on desktop. */
.section-nav{
  display:flex; gap:0; border-top:3px solid var(--ink); border-bottom:1px solid var(--line-strong);
  margin-bottom:36px; overflow-x:auto;
}
.section-nav a{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink-dim); padding:14px 20px; white-space:nowrap; border-right:1px solid var(--line);
  transition:color .18s ease, background .18s ease;
}
.section-nav a:hover{color:var(--ink); background:var(--green-tint);}
.event-tabs{
  display:flex; gap:0; border-top:3px solid var(--ink); border-bottom:1px solid var(--line-strong);
  margin-bottom:40px; overflow-x:auto; overflow-y:hidden;
}
.event-tabs a{
  font-family:var(--mono); font-size:0.74rem; letter-spacing:1.3px; text-transform:uppercase;
  color:var(--ink-dim); padding:14px 22px; white-space:nowrap; border-right:1px solid var(--line);
  transition:color .18s ease, background .18s ease; position:relative;
}
.event-tabs a:hover{color:var(--ink); background:var(--green-tint);}
.event-tabs a.active{color:var(--ink); font-weight:700;}
.event-tabs a.active::after{content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--green);}

/* ---------- GENERIC PROSE (written article bodies) ---------- */
.prose h2{font-family:var(--display); font-weight:800; font-size:1.4rem; text-transform:uppercase; letter-spacing:0.3px; margin:36px 0 16px; padding-bottom:12px; border-bottom:3px solid var(--ink);}
.prose h2:first-child{margin-top:0;}
.prose h3{font-family:var(--display); font-weight:700; font-size:1.1rem; text-transform:uppercase; letter-spacing:0.2px; margin:26px 0 12px;}
.prose p{font-size:1.02rem; color:var(--ink); margin-bottom:1.1em; max-width:70ch;}
.prose ul, .prose ol{margin:0 0 1.1em 1.3em; max-width:70ch;}
.prose li{margin-bottom:0.4em; font-size:1.02rem;}
.prose blockquote{border-left:4px solid var(--green); background:var(--bg-panel); padding:16px 20px; font-style:italic; color:var(--ink); margin:1.4em 0; max-width:70ch;}
.prose figure{margin:1.6em 0;}
.prose figcaption{font-family:var(--mono); font-size:0.74rem; color:var(--ink-dim); margin-top:8px;}
.prose a{color:var(--green-dark); text-decoration:underline; text-decoration-color:var(--line-strong);}
.prose hr{border:none; border-top:1px solid var(--line); margin:1.6em 0;}
.prose img{border:1px solid var(--line-strong); margin:1em 0;}

/* Legacy CMS review content is hand-authored HTML using old Bootstrap grid
   classes (row, col-md-N, order-md-N, img-fluid, rounded) to sit images
   beside text. Bootstrap itself was removed in the redesign, so these need
   minimal styling here to keep rendering the way they were originally
   authored. */
.prose .row{display:flex; flex-wrap:wrap; gap:24px; margin:1.4em 0;}
.prose .row .col-md-8, .prose .row .col-md-4{flex:1 1 100%; min-width:0;}
.prose .row .img-fluid{max-width:100%; height:auto; display:block; margin:0;}
.prose .row .rounded{border-radius:8px;}
@media (min-width:768px){
    .prose .row .col-md-8{flex:1 1 60%;}
    .prose .row .col-md-4{flex:1 1 32%;}
    .prose .row .order-md-1{order:1;}
    .prose .row .order-md-2{order:2;}
}

/* ---------- SECTIONS WITHIN ARTICLE/EVENT MAIN COLUMN ---------- */
.article-section{padding-bottom:56px;}

/* ---------- RANK LIST ---------- */
.rank-list{border:1px solid var(--line-strong); background:#fff;}
.rank-row{
  display:grid; grid-template-columns:48px 64px 1fr; align-items:center; gap:18px;
  padding:13px 20px; border-bottom:1px solid var(--line); transition:background .15s ease;
}
.rank-row:last-child{border-bottom:none;}
.rank-row:hover{background:var(--green-tint);}
.rank-row.with-extra{grid-template-columns:48px 64px 1fr auto;}
.rank-row.with-note{grid-template-columns:48px 64px 1fr; row-gap:6px;}
.rank-row.with-note .motos{
  grid-column:1 / -1; white-space:normal; text-align:left; line-height:1.5;
  font-family:var(--body); font-size:0.88rem; color:var(--ink-dim);
  padding-left:0; margin-top:0;
}
/* Admin note editor: always spans the full row (a row with no existing note
   yet, so no .with-note class, still needs this to avoid landing in the
   narrow #pos column via grid auto-placement). */
.rank-row .breakdown-note-wrap{grid-column:1 / -1; margin-top:4px;}
.rank-row .pos{font-family:var(--mono); font-weight:700; font-size:0.95rem; color:var(--ink-dim);}
.rank-row .plate{
  font-family:var(--mono); font-size:0.78rem; font-weight:700; color:var(--ink);
  background:var(--bg-panel); border:1px solid var(--line-strong); padding:3px 8px;
  text-align:center; border-radius:3px; width:fit-content;
}
.rank-row .name{font-family:var(--body); font-weight:600; font-size:0.98rem;}
.rank-row .name:hover{color:var(--green-dark);}
.rank-row .motos{font-family:var(--mono); font-size:0.78rem; color:var(--ink-dim); white-space:nowrap; text-align:right;}

/* ---------- STANDINGS BOARDS (components/standings_board.html) ---------- */
/* One board per championship of a series, side by side (max three: SX's 450 /
   250 West / 250 East); a lone board keeps a readable width instead of
   stretching across the page. Stacks to one column under 980px. */
.standings-toolbar{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px;}
.standings-year-form{margin-bottom:24px;}
.standings-toolbar .standings-year-form{margin-bottom:0;}
.standings-boards{display:grid; gap:32px; align-items:start;}
.standings-boards--1{grid-template-columns:minmax(0, 560px);}
.standings-boards--2{grid-template-columns:repeat(2, minmax(0, 1fr));}
.standings-boards--3{grid-template-columns:repeat(3, minmax(0, 1fr));}
.standings-board{border-top:3px solid var(--ink); padding-top:14px; scroll-margin-top:90px;}
.standings-board__head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px;}
.standings-board__head h3{font-family:var(--display); font-weight:800; font-size:1.3rem; text-transform:uppercase; letter-spacing:0.3px;}
.standings-board__progress{font-family:var(--mono); font-size:0.7rem; letter-spacing:1px; text-transform:uppercase; color:var(--ink-dim); white-space:nowrap;}
.standings-board .plate, .standings-table .plate{
  font-family:var(--mono); font-size:0.72rem; font-weight:700; color:var(--ink);
  background:var(--bg-panel); border:1px solid var(--line-strong); padding:2px 6px;
  text-align:center; border-radius:3px; width:fit-content;
}

.standings-leader{background:var(--bg-panel); border:1px solid var(--line-strong); padding:14px 16px; margin-bottom:4px;}
.standings-leader__label{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  font-family:var(--mono); font-size:0.66rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-dim);
}
.standings-leader__row{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:baseline; gap:10px;}
.standings-leader__name{font-family:var(--display); font-weight:700; font-size:1.1rem; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
a.standings-leader__name:hover{color:var(--green-dark);}
.standings-leader__points{font-family:var(--mono); font-weight:700; font-size:1.5rem;}

.standings-board__rows{list-style:none;}
.standings-row{
  display:grid; grid-template-columns:44px 50px minmax(0, 1fr) auto 40px; align-items:center; gap:8px;
  padding:9px 4px; border-bottom:1px solid var(--line); transition:background .15s ease;
}
.standings-row:hover{background:var(--green-tint);}
.standings-row__pos{display:flex; align-items:baseline; gap:5px; font-family:var(--mono); font-weight:700; font-size:0.85rem; color:var(--ink-dim);}
.standings-row__name{font-weight:600; font-size:0.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
a.standings-row__name:hover{color:var(--green-dark);}
.standings-row__points{font-family:var(--mono); font-weight:700; font-size:0.85rem; text-align:right;}
.standings-row__gap{font-family:var(--mono); font-size:0.75rem; color:var(--ink-dim); text-align:right;}

/* Three boards need ~340px each to show full names; below that, stack them. */
@media (max-width:1100px){
  .standings-boards--3{grid-template-columns:minmax(0, 1fr);}
}
.standings-move{font-family:var(--mono); font-size:0.66rem; font-weight:700; letter-spacing:0; white-space:nowrap;}
.standings-move.up{color:var(--green-dark);}
.standings-move.down{color:var(--ink-dim);}

.standings-board__more{
  display:inline-block; margin-top:14px; font-family:var(--mono); font-size:0.74rem; letter-spacing:1px;
  color:var(--green-dark); text-transform:uppercase; border-bottom:1px solid transparent;
}
.standings-board__more:hover{border-color:var(--green-dark);}

/* ---------- FULL STANDINGS TABLE (standings_championship_detail.html) ---------- */
/* Pos and Rider stay pinned while the round columns scroll sideways. Sticky
   cells need their own background, so the row hover is repeated on them. */
/* Separate borders so each sticky cell paints its own border instead of the
   scrolled cells' collapsed borders showing through under it. */
table.data-grid.standings-table{border-collapse:separate; border-spacing:0;}
table.standings-table .sticky-pos, table.standings-table .sticky-rider{
  position:sticky; background:#fff; z-index:1;
}
table.standings-table .sticky-pos{left:0; width:68px; min-width:68px; max-width:68px; padding-left:14px; padding-right:8px;}
table.standings-table .sticky-rider{left:68px; border-right:1px solid var(--line-strong);}
table.standings-table tbody tr:hover .sticky-pos, table.standings-table tbody tr:hover .sticky-rider{background:var(--green-tint);}
.standings-table__pos{display:flex; align-items:baseline; gap:5px;}
table.standings-table .sticky-rider .plate{display:inline-block; margin-right:8px; vertical-align:1px;}
table.standings-table .sticky-rider .name{font-weight:600;}
table.standings-table .sticky-rider a.name:hover{color:var(--green-dark);}
table.standings-table .sticky-rider .name-short{display:none;}
table.standings-table .round-cell{min-width:44px;}
table.standings-table .round-cell.muted{color:var(--line-strong);}
table.standings-table th.upcoming{color:var(--line-strong);}
table.standings-table td.upcoming{background:var(--bg-panel);}
/* Sticky header row. The wrap scrolls sideways, which traps position:sticky,
   so the page script puts a copy of the header row just outside it (overlaid on
   the real one) where it sticks to the page natively under the site header
   (86px, +52px live banner). The copy slides sideways with the table via a
   scroll-driven animation: its track moves by exactly the wrap's scroll range
   (track width minus viewport width). Borders mirror the wrap so columns line up. */
.standings-table-area{timeline-scope:--standings-x;}
.standings-table-wrap{scroll-timeline:--standings-x inline;}
.standings-sticky-head{
  position:sticky; top:86px; z-index:3; display:flex; overflow:hidden;
  margin-bottom:calc(-1 * var(--standings-head-h, 0px));
  background:#fff; border:1px solid var(--line-strong); border-bottom:none;
}
body.has-live-banner .standings-sticky-head{top:138px;}
.standings-sticky-head[hidden]{display:none;}
.standings-sticky-head table.data-grid{width:auto; min-width:0; table-layout:fixed;}
.standings-sticky-head table.standings-table th{position:static; box-sizing:border-box;}
.standings-sticky-head__viewport{flex:1; min-width:0; overflow:hidden; container-type:inline-size;}
/* Without scroll-timeline support the animation would run as a plain 0s one
   and jump to its end, so only attach it where supported (script covers the rest). */
@supports (animation-timeline: scroll()){
  .standings-sticky-head__track{animation:standings-head-x linear both; animation-timeline:--standings-x;}
}
@keyframes standings-head-x{to{transform:translateX(calc(-100% + 100cqw));}}

/* Qualified / not-qualified break: one band across the whole table. The wrap
   is a size container so the label can be exactly one visible width wide and
   pinned left — it stays centred on screen while the rounds scroll sideways. */
.standings-table-wrap{container-type:inline-size;}
table.standings-table tr.standings-divider:hover{background:none;}
table.standings-table tr.standings-divider td{
  padding:0; background:var(--bg-panel); border-top:2px solid var(--ink); border-bottom:1px solid var(--line-strong);
}
.standings-divider__label{
  position:sticky; left:0; box-sizing:border-box; width:100cqw; padding:12px 16px;
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:var(--mono); font-weight:700; font-size:0.68rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-dim);
}
.standings-divider__label::before, .standings-divider__label::after{content:''; flex:0 1 40px; height:1px; background:var(--line-strong);}
.table-note{font-family:var(--mono); font-size:0.68rem; color:var(--ink-dim); margin-top:14px; line-height:1.6;}

/* ---------- UNRANKED / OVERFLOW (details + chips) ---------- */
details.unranked{border:1px solid var(--line-strong); background:#fff; margin-top:22px;}
details.unranked summary{
  list-style:none; cursor:pointer; padding:16px 20px; display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:0.76rem; letter-spacing:1px; text-transform:uppercase; color:var(--ink-dim);
}
details.unranked summary::-webkit-details-marker{display:none;}
details.unranked summary::after{content:'+'; font-family:var(--display); font-weight:700; font-size:1.1rem; color:var(--green-dark);}
details.unranked[open] summary::after{content:'\2013';}
details.unranked summary:hover{color:var(--ink); background:var(--green-tint);}
.chip-grid{display:flex; flex-wrap:wrap; gap:8px; padding:18px 20px 22px; border-top:1px solid var(--line);}
.chip{font-family:var(--mono); font-size:0.72rem; color:var(--ink-dim); background:var(--bg-panel); border:1px solid var(--line); padding:5px 10px; border-radius:3px; white-space:nowrap;}
.chip:hover{color:var(--ink); border-color:var(--line-strong);}
.chip b{color:var(--ink); font-weight:700;}

/* ---------- BREAKDOWN (per-rider stat tables — lap/sector heatmaps keep dynamic inline colors) ---------- */
.breakdown-class-head{font-family:var(--display); font-weight:800; font-size:1.3rem; text-transform:uppercase; letter-spacing:0.3px; margin:8px 0 20px; padding-bottom:12px; border-bottom:3px solid var(--ink);}
.breakdown-result-head{font-family:var(--display); font-weight:700; font-size:1rem; text-transform:uppercase; margin:28px 0 10px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.breakdown-result-head .plate{font-family:var(--mono); font-size:0.78rem; font-weight:700; background:var(--bg-panel); border:1px solid var(--line-strong); padding:3px 8px; border-radius:3px;}
.breakdown-result-head .note{font-family:var(--mono); font-size:0.76rem; font-weight:400; color:var(--ink-dim); text-transform:none;}
.stat-label{font-family:var(--mono); font-weight:700; font-size:0.72rem; letter-spacing:1px; text-transform:uppercase; color:var(--ink-dim); margin:16px 0 6px;}
.breakdown-note{font-size:0.95rem; color:var(--ink); margin:10px 0;}

/* Admin-only inline editor for a rider's breakdown note — hidden entirely
   for signed-out/non-staff visitors (the toggle/form markup isn't even
   rendered for them, see article_results_breakdown*.html). */
.breakdown-edit-toggle{
  font-family:var(--mono); font-size:0.68rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  color:var(--green-dark); background:none; border:1px solid var(--line-strong); border-radius:3px;
  padding:3px 9px; margin:6px 0; cursor:pointer;
}
.breakdown-edit-toggle:hover{background:var(--green-tint); color:var(--ink);}
.breakdown-edit-form{margin:8px 0;}
.breakdown-edit-form textarea{
  width:100%; box-sizing:border-box; font-family:var(--body); font-size:0.9rem; color:var(--ink);
  border:1px solid var(--line-strong); border-radius:3px; padding:8px 10px; resize:vertical;
}
.breakdown-edit-actions{display:flex; gap:8px; margin-top:6px;}
.breakdown-save, .breakdown-cancel{
  font-family:var(--mono); font-size:0.7rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  border-radius:3px; padding:5px 12px; cursor:pointer;
}
.breakdown-save{background:var(--green-dark); color:#fff; border:1px solid var(--green-dark);}
.breakdown-save:disabled{opacity:0.6; cursor:default;}
.breakdown-cancel{background:none; color:var(--ink-dim); border:1px solid var(--line-strong);}
.breakdown-cancel:hover{color:var(--ink);}

/* ---------- RACE SELECTOR ---------- */
.race-select-wrap{margin-bottom:32px;}
.race-select-label{font-family:var(--mono); font-size:0.66rem; letter-spacing:1.5px; color:var(--ink-dim); text-transform:uppercase; margin-bottom:8px; display:block;}
select.race-select, .race-select-wrap select{
  font-family:var(--mono); font-size:0.82rem; font-weight:600; color:var(--ink);
  background-color:#fff; border:1px solid var(--line-strong); padding:10px 14px;
  text-transform:uppercase; letter-spacing:0.5px; width:100%; max-width:360px;
  appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position:calc(100% - 18px) center, calc(100% - 13px) center; background-size:5px 5px; background-repeat:no-repeat;
}

/* ---------- GRAPH CARD ---------- */
.graph-card{border:1px solid var(--line-strong); background:#fff; padding:24px 22px 20px;}
.graph-canvas-wrap{position:relative; height:640px;}
.graph-note{font-family:var(--mono); font-size:0.68rem; color:var(--ink-dim); margin-top:14px;}

/* ---------- LAP-BY-LAP POSITION TABLE ---------- */
/* Same row density as .sector-table (rider lap breakdown) — many rows/columns
   at once, so thinner rows matter more here than in a typical data-grid. */
table.data-grid.lap-table th, table.data-grid.lap-table td{padding:6px 8px; font-size:0.82rem;}
.lap-table td.rider-name, .lap-table th.rider-name{
  text-align:left; position:sticky; left:0; border-right:1px solid var(--line-strong);
}
.lap-table td.rider-name{background:#fff; font-family:var(--body); font-weight:600; font-size:0.82rem; color:var(--ink);}
.lap-table th.rider-name{background:var(--bg-panel); z-index:2;}
table.data-grid.lap-table tbody tr:hover td.rider-name{background:var(--green-tint);}

/* ---------- RIDER BREAKDOWN ACCORDION (per-rider lap/sector detail) ---------- */
details.rider-breakdown{border:1px solid var(--line-strong); border-top:none; background:#fff;}
details.rider-breakdown:first-of-type{border-top:1px solid var(--line-strong);}
details.rider-breakdown summary{
  list-style:none; cursor:pointer; padding:14px 18px; display:flex; align-items:center; gap:14px;
  font-family:var(--body); font-weight:600; font-size:0.92rem;
}
details.rider-breakdown summary::-webkit-details-marker{display:none;}
details.rider-breakdown summary .pos{font-family:var(--mono); font-weight:700; color:var(--ink-dim); width:24px;}
details.rider-breakdown summary .plate{
  font-family:var(--mono); font-size:0.72rem; font-weight:700; background:var(--bg-panel);
  border:1px solid var(--line-strong); padding:2px 7px; border-radius:3px;
}
details.rider-breakdown summary .summary-meta{margin-left:auto; font-family:var(--mono); font-size:0.72rem; color:var(--ink-dim); text-align:right;}
details.rider-breakdown summary:hover{background:var(--green-tint);}

/* Nested one level inside .breakdown-body: nothing to reach for as a
   sibling since the field can be dozens of laps, so it's a lightweight text
   toggle rather than another bordered box. */
details.lap-detail{margin-top:14px;}
details.lap-detail summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-weight:700; font-size:0.72rem; letter-spacing:0.5px;
  text-transform:uppercase; color:var(--green-dark);
}
details.lap-detail summary::-webkit-details-marker{display:none;}
details.lap-detail summary::before{content:'+'; font-family:var(--display); font-size:0.95rem; line-height:1;}
details.lap-detail[open] summary::before{content:'\2013';}
details.lap-detail summary:hover{color:var(--ink);}
details.lap-detail .sector-table{margin-top:10px;}

/* Per-rider list row on the results-breakdown article. Reading order is
   header (rider, finishes, headline stat tiles from `breakdown_summary`), then
   the editor's note, then the expandable lap tables — so the note sits with
   its rider rather than under the tables. The only real toggle is the
   "Breakdown +" summary, pinned to the row's top-right corner; a small inline
   script makes the rest of the header open it too. */
.breakdown-row{position:relative; border:1px solid var(--line-strong); border-top:none; background:#fff;}
.breakdown-row:first-of-type{border-top:1px solid var(--line-strong);}
.breakdown-row .breakdown-result-head{margin:0; padding:16px 18px;}
.breakdown-head{display:flex; flex-wrap:wrap; gap:12px 18px; padding:14px 18px 16px; cursor:pointer;}
.breakdown-head:hover{background:var(--green-tint);}
.breakdown-rider{display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 0; margin-right:128px; min-height:32px;}
.breakdown-rider .pos{font-family:var(--mono); font-weight:700; color:var(--ink-dim); min-width:34px;}
.breakdown-rider .plate{
  font-family:var(--mono); font-size:0.72rem; font-weight:700; background:var(--bg-panel);
  border:1px solid var(--line-strong); padding:2px 7px; border-radius:3px;
}
.breakdown-rider .name{font-family:var(--display); font-weight:700; font-size:0.95rem; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.breakdown-stats{flex:1 0 100%; display:flex; padding-left:44px;}
.breakdown-stat{display:flex; flex-direction:column; gap:3px; padding:0 18px; border-left:1px solid var(--line);}
.breakdown-stat:first-child{border-left:none; padding-left:0;}
.breakdown-stat .label{font-family:var(--mono); font-weight:700; font-size:0.6rem; letter-spacing:0.8px; text-transform:uppercase; color:var(--ink-dim); white-space:nowrap;}
.breakdown-stat .value{display:flex; align-items:center; gap:5px; font-family:var(--mono); font-weight:700; font-size:0.86rem; color:var(--ink); white-space:nowrap;}
.breakdown-stat .rank{font-size:0.62rem; font-weight:700; padding:1px 4px; border-radius:2px; color:var(--ink);}
.breakdown-finishes{display:inline-flex; align-items:center; flex:0 0 auto; margin-left:4px;}
.breakdown-finishes .chips{display:inline-flex; align-items:center; gap:3px;}
.breakdown-finishes .sep{font-family:var(--mono); font-weight:700; font-size:0.72rem; color:var(--ink-dim);}
.breakdown-finishes .finish{font-family:var(--mono); font-weight:700; font-size:0.72rem; min-width:22px; padding:2px 4px; text-align:center; border-radius:2px; color:var(--ink);}
.breakdown-finishes .points{font-family:var(--mono); font-weight:700; font-size:0.7rem; color:var(--ink-dim); margin-left:6px; white-space:nowrap;}

/* Editor's note: an editorial callout (see DESIGN.md) — green bar on the
   panel background, like .aside-opinion / .live-update — minus the label and
   italics, since it repeats per row and can run long. Always shown in full,
   never clamped, and aligned with the stat columns. */
.breakdown-row .breakdown-note-wrap{padding:0 18px 18px 62px;}
.breakdown-row .breakdown-result-head + .breakdown-note-wrap{padding-left:18px;}
.breakdown-row .breakdown-note{
  margin:0; padding:12px 16px; border-left:4px solid var(--green); background:var(--bg-panel);
  font-family:var(--body); font-size:0.92rem; line-height:1.55; color:var(--ink);
}
.breakdown-row .breakdown-note + .breakdown-edit-toggle{margin-top:8px;}

.breakdown-detail > summary.breakdown-toggle{
  position:absolute; top:14px; right:18px; list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; padding:7px 10px 7px 12px;
  border:1px solid var(--line-strong); font-family:var(--mono); font-weight:700; font-size:0.68rem;
  letter-spacing:0.8px; text-transform:uppercase; color:var(--green-dark); background:#fff;
}
.breakdown-detail > summary.breakdown-toggle::-webkit-details-marker{display:none;}
.breakdown-toggle::after{content:'+'; font-family:var(--display); font-size:1rem; line-height:1;}
.breakdown-toggle .when-open{display:none;}
.breakdown-detail[open] .breakdown-toggle .when-open{display:inline;}
.breakdown-detail[open] .breakdown-toggle .when-closed{display:none;}
.breakdown-detail[open] .breakdown-toggle::after{content:'\2013';}
.breakdown-toggle:hover,
.breakdown-row:has(> .breakdown-head:hover) .breakdown-toggle,
.breakdown-detail[open] .breakdown-toggle{border-color:var(--green-dark); background:var(--green-dark); color:#fff;}
.breakdown-toggle:focus-visible{outline:2px solid var(--green-dark); outline-offset:2px;}
.breakdown-detail .breakdown-body{padding:16px 18px 20px; overflow-x:auto; border-top:1px solid var(--line);}

@media (max-width:560px){
  .breakdown-head{padding:14px 14px 16px; column-gap:10px;}
  .breakdown-rider{gap:8px; margin-right:44px;}
  .breakdown-rider .pos{min-width:26px;}
  .breakdown-rider .name{white-space:normal; overflow-wrap:anywhere; font-size:0.85rem; line-height:1.15;}
  .breakdown-finishes{flex-direction:column; align-items:flex-end; gap:3px; margin-left:auto;}
  .breakdown-finishes .chips{gap:1px;}
  .breakdown-finishes .sep{font-size:0.62rem;}
  .breakdown-finishes .finish{min-width:18px; font-size:0.66rem; padding:2px 3px;}
  .breakdown-finishes .points{margin-left:0; font-size:0.6rem;}
  .breakdown-stats{padding-left:0;}
  .breakdown-stat{flex:1 1 auto; padding:0 7px;}
  .breakdown-stat .label{font-size:0.56rem; letter-spacing:0.4px;}
  .breakdown-stat .value{font-size:0.78rem; gap:4px;}
  .breakdown-stat .rank{font-size:0.56rem; padding:1px 3px;}
  .breakdown-row .breakdown-note-wrap{padding:0 14px 16px;}
  .breakdown-row .breakdown-note{font-size:0.88rem;}
  .breakdown-toggle .when-closed, .breakdown-toggle .when-open{display:none !important;}
  .breakdown-detail > summary.breakdown-toggle{right:14px; padding:7px 10px;}
  .breakdown-detail .breakdown-body{padding:14px 14px 18px;}
}
@media (max-width:360px){
  .breakdown-head{padding-left:12px; padding-right:12px; column-gap:8px;}
  .breakdown-rider{gap:6px; margin-right:38px;}
  .breakdown-rider .pos{min-width:22px;}
  .breakdown-rider .name{font-size:0.8rem;}
  .breakdown-finishes .finish{min-width:16px;}
  .breakdown-row .breakdown-note-wrap{padding-left:12px; padding-right:12px;}
  .breakdown-detail > summary.breakdown-toggle{right:12px; padding:6px 8px;}
}

details.rider-breakdown[open] summary{border-bottom:1px solid var(--line);}
details.rider-breakdown .breakdown-body{padding:16px 18px 20px; overflow-x:auto;}

/* ---------- SECTOR TABLE (dense per-rider lap/sector breakdown) ---------- */
table.sector-table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:0.74rem; min-width:640px;}
table.sector-table th, table.sector-table td{padding:6px 8px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap;}
table.sector-table th{color:var(--ink-dim); font-size:0.64rem; letter-spacing:0.5px; text-transform:uppercase; border-bottom:2px solid var(--ink);}
table.sector-table td:first-child, table.sector-table th:first-child{text-align:left;}
table.sector-table tbody tr:last-child td{border-bottom:none;}
table.sector-table tr.summary-row td{background:var(--bg-panel);}
table.sector-table tr.summary-row:last-of-type td{border-bottom:3px double var(--ink);}
table.sector-table sup{font-size:0.6em;}

/* ---------- DATA GRID (generic wide/numeric tables) ---------- */
.data-grid-wrap{border:1px solid var(--line-strong); background:#fff; overflow-x:auto;}
table.data-grid{width:100%; border-collapse:collapse; min-width:480px;}
table.data-grid caption{
  text-align:left; font-family:var(--mono); font-weight:700; font-size:0.7rem; letter-spacing:1.5px;
  text-transform:uppercase; color:#fff; background:var(--ink); padding:10px 16px;
}
table.data-grid thead th{
  font-family:var(--mono); font-weight:700; font-size:0.68rem; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink-dim); text-align:left; padding:12px 16px; border-bottom:2px solid var(--ink); white-space:nowrap;
}
table.data-grid tbody td{
  font-family:var(--body); font-size:0.92rem; padding:11px 16px; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.data-grid tbody td.wrap-cell{white-space:normal;}
table.data-grid tbody tr:last-child td{border-bottom:none;}
table.data-grid tbody tr:hover{background:var(--green-tint);}
table.data-grid .mono{font-family:var(--mono); font-size:0.85rem; color:var(--ink-dim);}
table.data-grid .strong{font-weight:700; color:var(--ink);}
table.data-grid .center, table.data-grid .text-center{text-align:center;}
.text-xs{font-size:0.7em;}
.text-sm{font-size:0.85em;}
table.data-grid sup{font-size:0.6em;}
table.data-grid .col-divider{border-right:3px double var(--ink);}
table.data-grid .col-divider-left{border-left:2px solid var(--ink);}
table.data-grid .stat-label{padding-top:18px;}
table.data-grid .lap-cell, table.sector-table .lap-cell{min-width:23px; text-align:center;}
table.data-grid .row-divider td{border-top:2px solid var(--ink);}
table.data-grid .session-header td, table.data-grid .session-header th{
  font-size:0.9em; background:var(--bg-panel);
}

/* ---------- GENERIC FORM CONTROLS ---------- */
form input[type="text"], form input[type="number"], form input[type="search"],
form select, form textarea{
  font-family:var(--mono); font-size:0.82rem; color:var(--ink);
  background:#fff; border:1px solid var(--line-strong); padding:10px 12px;
}
form input:focus, form select:focus, form textarea:focus{outline:2px solid var(--green); outline-offset:1px;}
form label{font-family:var(--mono); font-size:0.7rem; letter-spacing:1px; text-transform:uppercase; color:var(--ink-dim); display:block; margin-bottom:6px;}
form p{margin-bottom:14px;}
form button, form input[type="submit"]{
  font-family:var(--mono); font-weight:700; font-size:0.76rem; letter-spacing:1px; text-transform:uppercase;
  background:var(--ink); color:#fff; border:none; padding:11px 18px; cursor:pointer;
}
form button:hover, form input[type="submit"]:hover{background:var(--green-dark);}

/* ---------- PAGINATION ---------- */
.pagination-row{display:flex; align-items:center; justify-content:center; gap:20px; margin-top:32px; font-family:var(--mono); font-size:0.8rem; color:var(--ink-dim);}

/* ---------- LIVE TIMING PAGE ---------- */
/* The page's own status bar is the sticky anchor here, so the site header
   (and the top-level live banner, which would otherwise fight the status
   bar for the sticky top spot) scroll away with the rest of the chrome. */
body.live-timing-page header.site-header{position:static; backdrop-filter:none;}
body.live-timing-page .live-banner{position:static;}

/* Live status bar — sticky anchor for the whole page. */
.live-status{
  position:sticky; top:0; z-index:45;
  display:flex; align-items:center; gap:16px 22px; flex-wrap:wrap;
  background:var(--ink); color:#fff;
  padding:16px 24px; margin-bottom:24px;
}
.live-status__ident{flex:1 1 220px; min-width:0;}
.live-status__event{
  display:block; font-family:var(--mono); font-size:0.66rem; letter-spacing:2px;
  text-transform:uppercase; color:rgba(255,255,255,0.55); margin-bottom:2px;
}
.live-status__session{
  font-family:var(--display); font-weight:800; font-size:1.35rem; line-height:1.1;
  text-transform:uppercase; letter-spacing:0.3px; color:#fff; margin:0;
}
.live-status__state{flex:none;}
.live-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-weight:700; font-size:0.68rem; letter-spacing:1.5px;
  text-transform:uppercase; padding:7px 12px; white-space:nowrap;
}
.live-pill--live{background:var(--green); color:var(--ink);}
.live-pill--wait{background:#F2C94C; color:var(--ink);}
.live-pill--white{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink);}
.live-pill--checkered{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink);}
.live-pill--done{background:#e2e5e8; color:var(--ink-dim);}
.live-pill__dot{
  width:8px; height:8px; border-radius:50%; background:var(--ink);
  animation:pulse 1.4s infinite;
}
.live-pill__flag{
  width:12px; height:12px; flex:none;
  background-image:
    linear-gradient(45deg, var(--ink) 25%, transparent 25%),
    linear-gradient(-45deg, var(--ink) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--ink) 75%),
    linear-gradient(-45deg, transparent 75%, var(--ink) 75%);
  background-size:6px 6px;
  background-position:0 0, 0 3px, 3px -3px, -3px 0;
}
.live-status__clock{flex:none; display:flex; flex-direction:column; align-items:flex-end; line-height:1.1;}
.live-status__clock-label{
  font-family:var(--mono); font-size:0.6rem; letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,0.5);
}
.live-status__clock-value{font-family:var(--mono); font-weight:700; font-size:1.5rem; color:#fff;}
.live-status__updated{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:0.66rem; letter-spacing:0.5px; color:rgba(255,255,255,0.55);
}
.live-status__pulse{
  width:6px; height:6px; border-radius:50%; background:var(--green);
  animation:pulse 1.8s infinite;
}

/* Settings control — a compact disclosure inside the status bar, collapsed by default. */
.settings-popover{position:relative; flex:none; font-family:var(--mono);}
.settings-popover > summary{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  padding:7px 12px; border:1px solid rgba(255,255,255,0.28); background:transparent;
  font-size:0.66rem; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.75);
}
.settings-popover > summary::-webkit-details-marker{display:none;}
.settings-popover > summary:hover{color:#fff; border-color:rgba(255,255,255,0.6);}
.settings-popover[open] > summary{color:#fff; border-color:#fff;}
.settings-popover.is-active > summary{border-color:var(--green); color:#fff;}
.settings-popover__icon{font-size:0.9rem; line-height:1;}
.settings-popover__badge{
  width:7px; height:7px; border-radius:50%; background:var(--green); flex:none;
}
.settings-popover__panel{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60; width:300px;
  background:#fff; color:var(--ink); border:1px solid var(--ink); padding:18px;
  box-shadow:0 14px 30px rgba(0,0,0,0.32); text-transform:none; letter-spacing:normal;
}
.settings-popover__heading{
  font-family:var(--display); font-weight:800; font-size:0.9rem; letter-spacing:0.5px;
  text-transform:uppercase; margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--ink);
}
.settings-popover__panel label{
  display:block; font-family:var(--mono); font-size:0.66rem; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--ink); margin-bottom:6px;
}
.settings-popover__note{font-size:0.72rem; line-height:1.55; color:var(--ink-dim); margin-bottom:12px;}
.settings-popover__row{display:flex; align-items:center; gap:10px;}
.settings-popover__row input[type="number"]{width:72px;}
.settings-popover__unit{font-size:0.72rem; color:var(--ink-dim);}
.settings-popover__actions{display:flex; align-items:center; gap:10px; margin-top:18px;}
.settings-popover__actions .btn{padding:10px 16px; font-size:0.72rem;}
.settings-popover__actions .btn.ghost{margin-right:auto;}
#debug-info{display:block; font-family:var(--mono); font-size:0.66rem; color:var(--ink-dim); margin-top:8px;}

/* Position cell with movement arrow */
.pos-cell{white-space:nowrap;}
.pos-cell__num{font-weight:700;}
.move{font-family:var(--mono); font-size:0.62rem; font-weight:700; margin-left:5px;}
.move--up{color:var(--green-dark);}
.move--down{color:#c0392b;}

/* Out / pitting status tag next to the rider name */
.rider-status{
  font-family:var(--mono); font-weight:700; font-size:0.58rem; letter-spacing:0.5px;
  text-transform:uppercase; padding:2px 5px; margin-left:6px; border:1px solid currentColor;
  white-space:nowrap;
}
.rider-status--out{color:#c0392b;}
.rider-status--pit{color:#8a6d00;}

/* "OUT" shown in the Gap column for a broken / stopped rider */
.gap-out{font-family:var(--mono); font-weight:700; font-size:0.68rem; letter-spacing:1px; color:#c0392b;}

/* One-line teaser for our live event article, under the live timing status bar
   (partials/live_timing.html) — the newest update, cut off with an ellipsis. */
.live-coverage{
  display:flex; align-items:center; gap:14px; padding:10px 18px; margin:10px 0 18px;
  background:var(--green-tint); border-left:4px solid var(--green); color:var(--ink);
  transition:background .15s ease;
}
.live-coverage:hover{background:#fff;}
.live-coverage__label{display:inline-flex; align-items:center; gap:7px; flex-shrink:0; font-family:var(--mono); font-size:0.7rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--green-dark);}
.live-coverage__quote{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:0.92rem;}
.live-coverage__meta{font-family:var(--mono); font-size:0.72rem; color:var(--ink-dim); margin-right:4px;}
.live-coverage__cta{flex-shrink:0; font-family:var(--mono); font-size:0.72rem; letter-spacing:1px; text-transform:uppercase; color:var(--green-dark);}
.live-coverage:hover .live-coverage__cta{text-decoration:underline;}

@media (prefers-reduced-motion:reduce){
  .live-pill__dot, .live-status__pulse{animation:none;}
}
@media (max-width:640px){
  .live-status{gap:12px 16px; padding:14px 18px;}
  /* Float the settings button into the empty space at the top-right. The bar
     is position:sticky, which is a valid containing block for this. */
  .live-status__ident{flex-basis:100%; padding-right:120px;}
  .live-status__state{order:1;}
  .live-status__clock{order:2; align-items:flex-start;}
  .live-status__updated{order:3;}
  .settings-popover{position:absolute; top:14px; right:18px; margin-left:0;}
  .settings-popover__panel{width:min(300px, calc(100vw - 48px));}
  /* Teaser: label + CTA on one row, the quote on its own full-width line. */
  .live-coverage{flex-wrap:wrap; gap:6px 12px; margin-top:0;}
  .live-coverage__label{order:1;}
  .live-coverage__cta{order:2; margin-left:auto;}
  .live-coverage__quote{order:3; flex-basis:100%;}

  /* Full-bleed the live timing page: drop the .wrap gutter so the dark status
     bar and the timing grid reach both screen edges. Headings and other
     non-table content stay inset with their own gutter. */
  body.live-timing-page .wrap{padding-left:0; padding-right:0;}
  body.live-timing-page .data-grid-wrap{border-left:none; border-right:none;}
  body.live-timing-page .section-head,
  body.live-timing-page .breakdown-class-head{margin-left:18px; margin-right:18px;}
  body.live-timing-page .intro,
  body.live-timing-page .byline{padding-left:18px; padding-right:18px;}

  /* Full-bleed bordered content panels on mobile: pull them out of the .wrap
     gutter so more columns/rows are visible before scrolling kicks in.
     (Skip live-timing-page, which already zeroes the .wrap gutter above.)
     .data-grid-wrap is the <table> wrapper, used directly in markup across
     many templates. .bleed-mobile is the same treatment for any other panel
     (table-shaped or not — see .rank-list, details.rider-breakdown) applied
     via a shared partial; add it to a new component instead of a new rule here. */
  body:not(.live-timing-page) .data-grid-wrap,
  body:not(.live-timing-page) .bleed-mobile{
    width:calc(100% + 56px); margin-left:-28px; margin-right:-28px;
    border-left:none; border-right:none;
  }
  /* Drop the live feed's timeline rail so its rank lists can bleed edge-to-edge too. */
  .live-feed{padding-left:0; margin-left:0; border-left:none;}
  .live-entry::before{display:none;}
  details.live-more{width:calc(100% + 56px); margin-left:-28px; border-left:none; border-right:none;}
  body:not(.live-timing-page) details.live-more .bleed-mobile{width:auto; margin-left:0; margin-right:0;}
}

/* ---------- SMALL LAYOUT UTILITIES ---------- */
.mb-20{margin-bottom:20px;}
.prose-narrow{max-width:70ch;}
.badge-inline{font-size:0.6em; vertical-align:middle;}
.text-italic{font-style:italic;}
.prose p.text-italic{max-width:none;}
/* ---------- US MAP (destinations) ---------- */
/* Custom-drawn continental US (components/us_map_outline.html) — no map
   library, no tile requests, no zoom/pan. Pins are appended into the SVG
   at runtime by travel.html's script; the popup is one shared floating
   element repositioned on hover/focus. */
.us-map{position:relative; margin-bottom:40px;}
.us-map svg{width:100%; height:auto; display:block;}
.us-map .state{fill:var(--bg-panel); stroke:var(--line-strong); stroke-width:1;}
.us-map__pin-dot{fill:var(--green); stroke:var(--ink); stroke-width:2; cursor:pointer; transition:fill .15s ease, r .15s ease;}
.us-map__pin:hover .us-map__pin-dot, .us-map__pin:focus .us-map__pin-dot{fill:var(--green-dark); r:9;}
.us-map__pin-hit{fill:transparent; cursor:pointer;}
.us-map__popup{
  position:absolute; transform:translate(-50%, -135%); pointer-events:none;
  white-space:nowrap; background:#fff; border:1px solid var(--line-strong);
  box-shadow:0 12px 26px rgba(28,32,36,0.14); padding:10px 14px;
}
.us-map__popup strong{display:block; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:0.2px; font-size:0.85rem; color:var(--ink); margin-bottom:4px;}
.us-map__popup a{font-family:var(--mono); font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--green-dark); text-decoration:none; pointer-events:none;}
.search-form{margin-bottom:28px; display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;}
.search-form .field{flex:1; min-width:220px;}
.search-form input[type="text"]{width:100%;}

/* ---------- MAIN CONTENT WRAPPER ---------- */
/* No horizontal .wrap here — individual page sections apply .wrap themselves
   (matching the mockups, where .hero/.section/.article-header each wrap independently). */
.site-main{display:block; padding:40px 0 64px;}

/* ---------- FOOTER ---------- */
footer.site-footer{border-top:3px solid var(--ink); padding:30px 0;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.footer-row p{font-family:var(--mono); font-size:0.7rem; color:var(--ink-dim); letter-spacing:0.5px;}
.footer-row a{font-family:var(--mono); font-size:0.7rem; color:var(--ink-dim); letter-spacing:0.5px;}
.footer-row a:hover{color:var(--green-dark);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .article-grid{grid-template-columns:1fr;}
  .article-aside{position:static; border-top:3px solid var(--ink); padding-top:32px; margin-top:8px;}
  .jump-nav{
    display:flex; gap:0; border-top:3px solid var(--ink); border-bottom:1px solid var(--line-strong);
    margin-bottom:36px; overflow-x:auto;
  }
  .jump-nav a{
    font-family:var(--mono); font-size:0.72rem; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--ink-dim); padding:14px 20px; white-space:nowrap; border-right:1px solid var(--line);
    transition:color .18s ease, background .18s ease;
  }
  .jump-nav a:hover{color:var(--ink); background:var(--green-tint);}
  .front-grid{grid-template-columns:1fr;}
  .rail{border-left:none; padding-left:0; border-top:3px solid var(--ink); padding-top:20px;}
  .feature-grid{grid-template-columns:1fr 1fr;}
  .standings-boards--2{grid-template-columns:minmax(0, 1fr);}
}
/* On phones the pinned Pos + Rider columns must leave most of the screen for
   the scrolling stats: movement stacks under the position, and linked riders
   show "G. Marchbanks" — the full surname, never ellipsised. */
@media (max-width:560px){
  table.standings-table .sticky-pos{width:44px; min-width:44px; max-width:44px; padding-left:10px; padding-right:4px;}
  table.standings-table .sticky-rider{left:44px; padding-left:8px; padding-right:10px;}
  .standings-table__pos{flex-direction:column; gap:0; line-height:1.15;}
  table.standings-table .sticky-rider .plate{display:none;}
  table.standings-table .sticky-rider .name-long{display:none;}
  table.standings-table .sticky-rider .name-short{display:inline;}
}
@media (max-width:880px){
  nav.links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:#fff; flex-direction:column; align-items:flex-start;
    padding:18px 28px; border-bottom:1px solid var(--line-strong); gap:16px;
  }
  nav.links.open{display:flex;}
  nav.links a{font-size:1.05rem;}
  .nav-toggle{display:flex;}
  .drop-menu{position:static; border:none; background:none; padding:6px 0 0 10px; box-shadow:none;}
}
@media (max-width:560px){
  .feature-grid{grid-template-columns:1fr;}
  .board-row{grid-template-columns:32px 1fr; row-gap:6px;}
  .board-row .date, .board-row .arrow{grid-column:2; justify-self:start;}
  .events-head{margin-top:28px; margin-bottom:20px; position:relative; row-gap:16px;}
  .events-head h1{font-size:2rem;}
  /* Share moves up beside the eyebrow instead of taking a row of its own. */
  .events-head__actions{width:100%; align-items:stretch;}
  .events-head__actions .share-button{position:absolute; top:-8px; right:0; padding:8px 12px; font-size:0.66rem;}
  /* One swipeable row of years, edge to edge, instead of wrapping onto two. */
  .year-nav{flex-wrap:nowrap; overflow-x:auto; margin:0 -28px; padding:0 28px; scrollbar-width:none;}
  .year-nav::-webkit-scrollbar{display:none;}
  .year-nav a{flex-shrink:0; white-space:nowrap;}
  .season-timeline{padding:4px 0 0; margin-bottom:8px;}
  .season-timeline__track{height:52px;}
  .events-series .section-head{margin-bottom:16px;}
  .season-timeline ~ .section-nav{margin-bottom:24px;}
  /* Weekly rounds sit ~8px apart at phone width: small dots keep them apart. */
  .season-timeline__round .series-marker{width:6px; height:6px;}
  .season-timeline__round .series-marker--smx{box-shadow:inset 0 0 0 1.5px var(--ink);}
  .season-timeline__round.is-next .series-marker{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--green);}
  .season-timeline__round.is-next .series-marker--smx{box-shadow:inset 0 0 0 1.5px var(--ink), 0 0 0 2px var(--bg), 0 0 0 4px var(--green);}
  .season-timeline__month{font-size:0.58rem; letter-spacing:0.5px;}
  /* Countdown beside the Next Up tag instead of on its own line. */
  .next-up{position:relative; padding:14px 16px; margin-bottom:24px; gap:0;}
  .next-up h3{font-size:1.25rem; margin:8px 0 2px;}
  .next-up__countdown{position:absolute; top:14px; right:16px; font-size:0.74rem; line-height:2;}
  .schedule-row{grid-template-columns:44px minmax(0, 1fr); align-items:start; gap:6px 14px; padding:14px 16px;}
  .schedule-row__status{grid-column:2; align-items:flex-start; text-align:left;}
  .year-nav a{padding:11px 14px;}
  .season-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px;}
  .season-tile{padding:12px 14px;}
  .utility-bar .right a:first-child{display:none;}
  .rank-row, .rank-row.with-extra, .rank-row.with-note{grid-template-columns:32px 52px 1fr; gap:12px; padding:12px 16px;}
  .rank-row .motos{grid-column:1 / -1; text-align:left; padding-left:100px; margin-top:-8px;}
  .live-race-head .see-all{margin-left:0;}
}