/* ===== Results — year switcher + race accordions + PDF lists ===== */
.wrap{max-width:820px;margin:0 auto;padding:0 22px 220px}

/* year switcher */
/* ── Year picker: the giant year IS the control (v0.9.27) ──────────────────────────────────
   Three ways in, one element: rolodex (wheel/drag, momentum+snap), type-to-jump, decade rail.
   < > kept for single-step + keyboard. 94 years — clicking through them was never viable. */
.yearbar{display:flex;align-items:center;justify-content:center;gap:22px;margin:8px 0 0}
/* Inline SVG chevrons, not "‹" — that glyph is punctuation, drawn small and high in its em box,
   so the BUTTON centred perfectly while the mark still looked high. A shape we own centres exactly. */
.yearbtn{background:none;border:0;cursor:pointer;color:var(--leaf);padding:6px 8px;display:flex;align-items:center;justify-content:center;transform:translateY(calc(var(--yfs) * .136));transition:opacity .2s ease,color .2s ease}
.yearbtn svg{display:block;width:clamp(22px,3.2vw,30px);height:clamp(22px,3.2vw,30px);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.yearbtn:hover:not(:disabled){color:var(--orange)}
.yearbtn:disabled{opacity:.2;cursor:default}
:root{--yh:clamp(52px,10.4vw,92px);--yfs:clamp(48px,10vw,86px)}
/* the wheel: fixed viewport, neighbours ghost above/below */
.ywheel{position:relative;height:calc(var(--yh) * 2.15);font-family:var(--inline);font-size:var(--yfs);min-width:4.5ch;overflow:hidden;cursor:grab;
  touch-action:none;outline:none;-webkit-tap-highlight-color:transparent;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 74%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 74%,transparent 100%)}
.ywheel:active{cursor:grabbing}
.ywheel:focus-visible{outline:2px solid var(--orange);outline-offset:6px;border-radius:12px}
.ytrack{position:absolute;left:0;right:0;top:calc(50% - var(--yh)/2);will-change:transform}
.ytrack.anim{transition:transform .46s cubic-bezier(.22,1,.36,1)}
.yopt{height:var(--yh);display:flex;align-items:center;justify-content:center;font-size:1em;line-height:1;color:var(--cream);white-space:nowrap;
  will-change:transform,opacity;transition:opacity .34s ease,transform .34s cubic-bezier(.22,1,.36,1)}
/* live "type a year" overlay */
.ytype{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none;font-size:1em;line-height:1;color:var(--orange);white-space:nowrap}
.ywheel.typing .ytype{display:flex}
.ywheel.typing .ytrack{opacity:.12}
.yhint{text-align:center;font-family:var(--data);letter-spacing:1.4px;text-transform:uppercase;font-size:10.5px;color:#9fb3a8;opacity:0;transition:opacity .25s ease;height:13px}
.yearbar:hover + .yhint,.yearbar:focus-within + .yhint{opacity:.75}
/* decade rail — one click to any decade; doubles as a 100-year timeline */
.decrail{display:flex;flex-direction:column;align-items:center;gap:7px;margin:8px auto 0;padding:0 16px}
.decrow{display:flex;justify-content:center;align-items:center;gap:5px;flex-wrap:wrap}
.dec{background:rgba(0,0,0,.5);border:1px solid rgba(40,152,81,.35);border-radius:999px;color:#9fb3a8;
  font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.3px;padding:5px 12px;cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .12s ease}
.dec:hover{border-color:var(--orange);color:var(--orange)}
.dec:active{transform:translateY(1px)}
.dec.on{background:var(--orange);border-color:var(--orange);color:var(--forest)}
@media(max-width:560px){.dec{font-size:12px;padding:4px 10px;letter-spacing:.2px}.decrail{gap:4px}}
.yearsub{text-align:center;font-family:var(--data);letter-spacing:2px;text-transform:uppercase;font-size:12px;color:var(--leaf);opacity:.85;margin:14px 0 26px}
@media(prefers-reduced-motion:reduce){.ytrack.anim{transition:none}.yopt{transition:none}}

/* accordions */
.acc{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:12px;background:linear-gradient(135deg,#0b0b0b 0%,#11281B 60%,#11281B 100%)}
.acc .head{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer}
.acc .head h3{flex:1;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(16px,2.6vw,20px);color:var(--cream);line-height:1.15}
.acc .head .cnt{font-family:var(--data);font-weight:700;letter-spacing:1px;font-size:11px;text-transform:uppercase;color:var(--forest);background:var(--leaf);padding:4px 9px;border-radius:12px;flex:0 0 auto}
.acc .head .chev{font-size:22px;color:var(--leaf);transition:transform .3s;flex:0 0 auto}
.acc.open .head .chev{transform:rotate(45deg)}
.acc .panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1)}
.acc.open .panel{grid-template-rows:1fr}
.acc .panel>div{overflow:hidden;min-height:0}
.doclist{padding:4px 18px 18px}
.doc{display:flex;align-items:center;gap:12px;padding:11px 4px;border-top:1px dashed rgba(40,152,81,.3);text-decoration:none;transition:color .2s ease}
.doc:first-child{border-top:0}
.doc:hover .dname{color:#289851}
.doc .ic{flex:0 0 auto;width:34px;height:34px;border-radius:7px;background:var(--teal);color:var(--cream);display:flex;align-items:center;justify-content:center;font-family:var(--data);font-weight:700;font-size:10px}
.doc .dname{flex:1;font-family:var(--body);font-size:14.5px;color:var(--cream);opacity:.95}
.doc .dl{flex:0 0 auto;color:var(--leaf);font-size:16px;opacity:.7}

.emptyyear{text-align:center;padding:60px 20px;border:1px dashed var(--line);border-radius:14px;margin-top:12px}
.emptyyear .lead{font-family:var(--disp);font-weight:500;text-transform:uppercase;color:var(--cream);opacity:.6;font-size:18px}
.emptyyear .hint{font-family:var(--data);letter-spacing:2px;text-transform:uppercase;font-size:11px;color:var(--leaf);opacity:.8;margin-top:8px}

/* awaiting-results accordions (a synced year with no PDFs yet, e.g. 2026) */
.acc.awaiting .cnt{color:var(--cream);opacity:.5;background:transparent;border:1px solid rgba(255,255,255,.2)}
.awaiting{font-family:var(--data);text-transform:uppercase;letter-spacing:.5px;font-size:12.5px;color:var(--cream);opacity:.55;padding:12px 2px}

/* RACE REPORTS — pinned panel above the result PDFs (press release + media box + news story) */
.acc.reports .head h3{color:var(--orange,#F39200)}
.acc.reports{border-color:rgba(243,146,0,.4)}
/* rows sit inside the same 18px side gutter as the header + the result-PDF lists, so the labels
   line up under "RACE REPORTS" and the divider lines inset instead of running edge-to-edge */
.reps{display:flex;flex-direction:column;padding:4px 18px 16px}
.rep-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:15px 0;border-bottom:1px solid var(--line,rgba(228,228,216,.12))}
.rep-row:first-child{padding-top:6px}
.rep-row:last-child{border-bottom:0;padding-bottom:2px}
.rep-race{flex:0 0 auto;font-family:var(--inline,sans-serif);font-weight:400;text-transform:uppercase;letter-spacing:.5px;font-size:19px;color:var(--cream,#E4E4D8)}
.rep-links{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.rep-btn{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-family:var(--data,sans-serif);font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-size:12px;color:var(--cream,#E4E4D8);background:rgba(255,255,255,.06);border:1px solid var(--line,rgba(228,228,216,.16));border-radius:999px;padding:8px 14px;transition:background .2s,border-color .2s}
.rep-btn:hover{background:rgba(243,146,0,.16);border-color:rgba(243,146,0,.5)}
.rep-btn.news:hover{background:rgba(40,152,81,.16);border-color:rgba(40,152,81,.5)}
.rep-btn .ic{font-size:10.5px;font-weight:800;letter-spacing:.5px;color:var(--orange,#F39200)}
.rep-btn.news .ic{color:var(--leaf,#289851);font-size:15px}
/* mobile: race name over its three pills, everything stacked one-per-line and centred */
@media(max-width:560px){
  .rep-row{flex-direction:column;align-items:center;text-align:center;gap:13px;padding:20px 0}
  .rep-race{flex-basis:auto;font-size:21px}
  .rep-links{margin-left:0;flex-direction:column;align-items:center;gap:9px}
}

/* ── Century markers on the rail ───────────────────────────────────────────────────────────
   Without these the rail reads "20s … 20s" (1920s vs 2020s) with nothing to tell them apart.
   Gravesend Inline drops its baseline low in the line box, so the same 0.136em ink correction
   used on the year arrows applies here or the numerals sit low against the Inter pills. */
.cent{font-family:var(--inline);font-size:26px;line-height:1;color:var(--cream);letter-spacing:1px;
  padding:0 2px 0 1px;transform:translateY(calc(26px * -.136));user-select:none;display:inline-flex;align-items:baseline;gap:3px}
.cent::after{content:"/";color:var(--leaf);opacity:.5;font-size:.8em}
/* ALL YEARS — a mode switch, so it reads apart from the decade pills */
.dec.allbtn{border-color:rgba(243,146,0,.5);color:var(--orange);margin-left:4px}
.dec.allbtn:hover{background:rgba(243,146,0,.14)}
.dec.allbtn.on{background:var(--orange);color:var(--forest);border-color:var(--orange)}

/* ── ALL YEARS view — every PDF, one page ─────────────────────────────────────────────────── */
#accs{transition:opacity .17s ease}
#accs.fading{opacity:0}
.alltitle{font-family:var(--inline);text-transform:uppercase;font-size:clamp(24px,3.4vw,34px);letter-spacing:1.5px;color:var(--cream);text-align:center;margin:0 0 6px}
.allsub{text-align:center;font-family:var(--data);text-transform:uppercase;letter-spacing:2px;font-size:11.5px;color:var(--leaf);opacity:.85;margin:0 0 22px}
.allyr{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:start;padding:14px 16px;border-radius:14px;transition:background .18s ease}
.allyr:hover{background:rgba(0,28,16,.42)}
.allyr + .allyr{border-top:1px solid rgba(228,228,216,.09)}
.allyr h3{font-family:var(--inline);font-size:clamp(22px,2.6vw,28px);letter-spacing:.5px;color:var(--cream);margin:0;text-align:right;
  transform:translateY(calc(clamp(22px,2.6vw,28px) * -.136))}
.allyr .yn{display:block;font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--leaf);opacity:.8;text-transform:none}
@media(max-width:560px){.allyr{grid-template-columns:1fr;gap:6px}.allyr h3{text-align:left}}
.alllinks{display:flex;flex-wrap:wrap;gap:7px}
.alink{display:inline-block;text-decoration:none;background:rgba(0,0,0,.5);border:1px solid rgba(40,152,81,.35);
  border-radius:10px;padding:7px 11px;font-family:var(--body);font-size:13px;color:var(--cream);
  transition:border-color .18s ease,color .18s ease,background .18s ease}
.alink:hover{border-color:var(--orange);color:var(--orange);background:rgba(243,146,0,.08)}
@media(max-width:560px){.alink{font-size:12.5px;padding:6px 9px}.allyr h3{font-size:18px}}

/* ── A year with no Manx Grand Prix (v0.9.28) ──────────────────────────────────────────────
   The year still loads in the picker and explains itself. Sepia + grain evokes the era. Each era has
   our OWN supplied backdrop image (WWII / foot-and-mouth / Covid), blurred behind the note; a Panel
   noRaceImage still overrides it (shown clearer, as a genuine archive photo). The logo mark (.nr-mark)
   remains only as the fallback for any no-race year with neither. */
.norace{position:relative;overflow:hidden;margin-top:12px;border:1px solid rgba(228,228,216,.14);border-radius:18px;
  background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:340px;padding:44px 26px;isolation:isolate}
/* our own mark, aged: sepia wash + heavy blur, sat behind the words */
.norace .nr-mark{position:absolute;inset:0;z-index:0;
  background:url("/assets/images/logo.svg") no-repeat center/58%;
  filter:sepia(1) saturate(1.6) brightness(.62) contrast(1.15) blur(2px);opacity:.5}
.norace .nr-pic{position:absolute;inset:0;z-index:0}
.norace .nr-pic img{width:100%;height:100%;object-fit:cover;filter:sepia(.92) saturate(1.1) contrast(1.05) brightness(.72)}
/* our own era images as a BLURRED backdrop behind the glass note (replaces the logo mark). scale(1.08)
   hides the soft edges the blur would otherwise leave; object-fit:cover fills the whole box. */
.norace.nr-backdrop .nr-pic img{filter:sepia(.6) saturate(1.15) contrast(1.02) brightness(.58) blur(5px);transform:scale(1.08)}
/* period grain + vignette over whichever backdrop is used */
.norace::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,240,214,.16) 1px,transparent 1px);background-size:3px 3px;mix-blend-mode:overlay}
.norace::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 34%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.9) 100%)}
.norace .nr-body{position:relative;z-index:2;max-width:56ch}
.norace .nr-year{font-family:var(--inline);font-size:clamp(44px,7vw,72px);line-height:1;letter-spacing:2px;
  color:#f0e2c8;text-shadow:0 2px 18px rgba(0,0,0,.75);transform:translateY(calc(clamp(44px,7vw,72px) * -.136))}
.norace .nr-head{font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:3px;
  font-size:14px;color:#e8c98d;margin:2px 0 14px}
.norace .nr-why{font-family:var(--body);font-size:16px;line-height:1.72;color:#efe6d4;opacity:.95;margin:0 auto;
  text-shadow:0 1px 10px rgba(0,0,0,.7)}
@media(max-width:560px){.norace{min-height:280px;padding:34px 20px}.norace .nr-why{font-size:15px}}

/* typed-year overlay: entered digits bright, remaining dim — always readable inside the wheel */
.ytype b{font-weight:400;color:var(--orange)}
.ytype i{font-style:normal;color:var(--orange);opacity:.28;letter-spacing:.06em}
/* a refused digit (one that can't reach a real year) — a nudge, so it's clear it didn't take */
@keyframes yreject{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.ywheel.reject{animation:yreject .22s ease}
@media(prefers-reduced-motion:reduce){.ywheel.reject{animation:none}}

/* ── SEARCH FOR RIDER (20 Jul 2026) ─────────────────────────────────────────────────────────
   Sits beside ALL YEARS on the decade rail and swaps into #accs the same way. Green-outlined so
   it reads as a sibling of the orange ALL YEARS without competing with it. */
.dec.riderbtn{border-color:rgba(40,152,81,.55);color:var(--leaf);margin-left:4px}
.dec.riderbtn:hover{background:rgba(40,152,81,.16);border-color:var(--leaf);color:var(--leaf)}
.dec.riderbtn.on{background:var(--leaf);color:var(--forest);border-color:var(--leaf)}

.rsearch{display:flex;justify-content:center;margin:6px 0 22px}
.rsearch input{width:min(420px,90%);background:rgba(0,0,0,.5);border:1px solid rgba(40,152,81,.35);
  border-radius:999px;padding:12px 20px;color:var(--cream);font-family:var(--body);font-size:16px;outline:none;
  transition:border-color .2s ease}
.rsearch input::placeholder{color:var(--cream);opacity:.5}
.rsearch input:focus{border-color:var(--leaf)}
.rsearch input::-webkit-search-cancel-button{display:none}

.rhint{text-align:center;font-family:var(--body);font-size:15px;opacity:.7;margin:18px 0}

.rlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.rhit{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:rgba(0,0,0,.42);border:1px solid rgba(40,152,81,.28);border-radius:12px;padding:11px 14px;
  transition:border-color .2s ease,background .2s ease}
.rhit:hover{border-color:var(--orange);background:rgba(0,0,0,.6)}
.rhit .rn{flex:1 1 auto;font-family:var(--body);font-weight:700;font-size:15px;color:var(--cream)}
.rhit .ry{flex:0 0 auto;font-family:var(--data);font-size:14px;color:var(--leaf);opacity:.9}
.rhit .rc{flex:0 0 auto;min-width:26px;text-align:center;font-family:var(--data);font-size:14px;
  color:var(--cream);opacity:.6;background:rgba(255,255,255,.07);border-radius:8px;padding:2px 7px}

.rdetail{max-width:640px;margin:0 auto}
.rback{display:inline-block;cursor:pointer;background:transparent;border:0;padding:0;margin-bottom:14px;
  font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:14px;color:var(--leaf)}
.rback:hover{color:var(--orange)}
.rname{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(22px,3.4vw,30px);
  color:var(--cream);line-height:1.05;margin:0 0 4px}
.rmeta{font-family:var(--body);font-size:15px;opacity:.75;margin:0 0 20px}
.ryr{font-family:var(--data);font-weight:700;letter-spacing:2px;font-size:15px;color:var(--leaf);
  margin:20px 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(40,152,81,.28)}
.rapp{display:flex;align-items:center;gap:12px;text-decoration:none;padding:10px 12px;border-radius:10px;
  transition:background .2s ease}
.rapp:hover{background:rgba(40,152,81,.14)}
.rapp .rpos{flex:0 0 auto;min-width:34px;text-align:center;font-family:var(--data);font-weight:700;font-size:15px;
  color:var(--forest);background:var(--leaf);border-radius:8px;padding:3px 6px}
.rapp .rpos-none{background:rgba(255,255,255,.12);color:var(--cream);opacity:.7}
.rapp .rlab{flex:1 1 auto;font-family:var(--body);font-size:15px;color:var(--cream);opacity:.92;line-height:1.35}
@media(max-width:560px){
  .rlist{grid-template-columns:1fr}
  .rhit .rn{font-size:14px}
}

/* practice & qualifying sheets, folded away under each year so results lead */
.rses{margin:6px 0 4px}
.rses summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--data);font-weight:700;letter-spacing:.6px;font-size:14px;color:var(--leaf);opacity:.85;
  padding:7px 12px;border-radius:9px;transition:background .2s ease,opacity .2s ease}
.rses summary::-webkit-details-marker{display:none}
.rses summary::before{content:"+";font-size:15px;line-height:1}
.rses[open] summary::before{content:"–"}
.rses summary:hover{background:rgba(40,152,81,.14);opacity:1}
.rsesin{padding-left:6px;border-left:1px solid rgba(40,152,81,.22);margin:4px 0 10px}