/* Bib2Bib UI v2, race template (FINAL_CONCEPT §6, §10.3).
   Loaded ONLY by the v2 race and event pages (components/v2/*), never by v1 pages,
   so the old CSS in app/globals.css is untouched and the flag-off HTML is unchanged.
   Namespace: every class starts with `v2-` and every rule sits under `.v2-page`.
   Tokens are the FINAL_CONCEPT §6.1 names; light theme first, dark theme = remap. */

.v2-page {
  --ink: #0F1A2B; --ink2: #38455A; --mute: #5A677C; --paper: #F4F5F1; --card: #fff; --line: #DADDD3; --line2: #E9EBE4;
  --blue: #1E45D6; --blue-d: #1736A8; --blue-t: #E7ECFD; --lime: #C8F23A; --lime-t: #F1FAD0;
  --ok: #17784A; --ok-t: #E3F2EA; --warn: #93570A; --warn-t: #FBEFD9; --bad: #B3261E; --bad-t: #FBE6E3; --past: #6B7280; --past-t: #ECEDEF;
  --road: #2456E5; --trail: #8A4B12; --cycle: #6740D6; --tri: #B0246F; --water: #08789B;
  --r: 12px; --rs: 8px; --sh: 0 1px 0 rgba(15,26,43,.04), 0 10px 28px -14px rgba(15,26,43,.22);
  /* Sticky offsets, one set of numbers for the header, the section tabs and the side card.
     --v2-hb  = bottom edge of the (v1) site header while it is pinned (desktop: top 14 + height 68; phone: top 8 + height 54).
     --v2-gap = the strip above the pinned header that a solid paper bar covers, so text never shows above or through it.
     Between 641 and 1000 px the header is two rows tall (124 px), so it scrolls away and only the tabs stay pinned. */
  --v2-hb: 82px; --v2-gap: 14px; --v2-tabs-h: 49px; --stick: var(--v2-hb);
  background: var(--paper); color: var(--ink);
  font-weight: 400; font-size: 16px; line-height: 24px; font-variant-numeric: tabular-nums;
  padding-bottom: 88px;
  letter-spacing: 0;
}
.v2-page *, .v2-page *::before, .v2-page *::after { box-sizing: border-box; }
.v2-page [hidden] { display: none !important; }
.v2-page a { color: inherit; text-decoration: none; }
.v2-page a:hover { text-decoration: underline; text-underline-offset: 3px; }
.v2-page :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.v2-page h1, .v2-page h2, .v2-page h3, .v2-page h4 { margin: 0; font-weight: 750; letter-spacing: -.02em; }
.v2-page ol, .v2-page ul { margin: 0; padding: 0; }
.v2-page p { margin: 0; }
.v2-page dl, .v2-page dd { margin: 0; }
.v2-page .shell { width: min(1200px, calc(100% - 32px)); }
.v2-wrap { width: min(1200px, 100% - 32px); margin: 0 auto; }
@media (min-width: 960px) { .v2-wrap { width: min(1200px, 100% - 48px); } .v2-page { padding-bottom: 0; } }

.v2-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.v2-ic-s { width: 16px; height: 16px; } .v2-ic-l { width: 24px; height: 24px; }

/* type */
.v2-kick { font-weight: 650; font-size: 12.5px; line-height: 16px; color: var(--mute); }
.v2-h1 { font-size: 30px; line-height: 1.1; letter-spacing: -.03em; font-weight: 800; overflow-wrap: break-word; text-wrap: balance; hyphens: manual; }
.v2-h2 { font-size: 22px; line-height: 28px; letter-spacing: -.02em; }
.v2-sm { font-size: 14px; line-height: 20px; }
.v2-mute { color: var(--mute); }
.v2-strong { font-weight: 650; }
.v2-page .v2-lead { margin: 0 0 12px; }   /* an intro sits 12 px above what it introduces */
.v2-page .v2-after { margin-top: 12px; } /* a note or link after a block sits 12 px below it */
.v2-page .v2-link { color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(30,69,214,.35); text-underline-offset: 3px; }
.v2-page .v2-link:hover { text-decoration-color: currentColor; }
.v2-page .v2-link .v2-ic { vertical-align: -2px; }
.v2-page .v2-stmt { font-weight: 700; color: inherit; }
.v2-break { overflow-wrap: break-word; word-break: normal; }
@media (min-width: 960px) { .v2-h1 { font-size: 44px; line-height: 48px; } .v2-h2 { font-size: 28px; line-height: 34px; } }

/* breadcrumb: geographic trail from 720 px up; on a phone only "‹ last parent" (the current title would repeat the H1) */
.v2-crumbs { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: center; font-size: 14px; line-height: 20px; color: var(--mute); padding: 14px 0 0; }
.v2-crumbs a:hover { color: var(--ink); }
.v2-crumbs .v2-ic { width: 14px; height: 14px; opacity: .6; transform: rotate(-90deg); }
.v2-crumb-now { color: var(--ink); font-weight: 600; }
.v2-crumbs a { display: inline-block; padding: 12px 2px; margin: -12px 0; } /* 44 px hit area, the row keeps its 20 px height */
@media (max-width: 719px) {
  .v2-crumbs { padding-top: 0; }
  .v2-crumbs .v2-ic, .v2-crumbs span { display: none; }
  .v2-crumbs a { display: none; }
  .v2-crumbs a:nth-last-of-type(1) { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 8px 0 0; }
  .v2-crumbs a:nth-last-of-type(1)::before { content: '‹\00a0'; font-size: 18px; line-height: 1; }
}

/* hero */
.v2-hero { display: grid; gap: 18px; padding: 12px 0 8px; }
.v2-hero > * { min-width: 0; }
.v2-hero .v2-kick { margin-bottom: 8px; }
.v2-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.v2-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 10px; border-radius: 14px; font-weight: 650; font-size: 12.5px; line-height: 1.2; background: var(--ok-t); color: var(--ok); }
.v2-tag-warn { background: var(--warn-t); color: var(--warn); }
.v2-tag-bad { background: var(--bad-t); color: var(--bad); }
.v2-tag-ink { background: var(--ink); color: #fff; }
.v2-tag-past { background: var(--past-t); color: #4B5563; }
.v2-tag-blue { background: var(--blue-t); color: var(--blue-d); }
.v2-tag-lime { background: var(--lime); color: var(--ink); }
.v2-facts { display: grid; gap: 8px; }
@media (min-width: 720px) { .v2-facts { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } } /* one row of cards: each takes an equal share, so no card is a long empty bar */
.v2-frow { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.v2-frow .v2-ic { margin-top: 2px; color: var(--ink2); }
.v2-frow b { display: block; font-size: 15px; line-height: 21px; overflow-wrap: anywhere; }
.v2-s2 { display: block; font-size: 14px; line-height: 20px; color: var(--mute); }
/* one shared footnote under the hero cards: the source and the check date of the place and the distances */
.v2-page .v2-facts-src { margin-top: 14px; font-size: 13px; line-height: 18px; color: var(--mute); }
.v2-facts-src .v2-stale { display: inline; padding: 1px 4px; }
.v2-facts-src a { color: var(--ink2); text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: 13px 2px; margin: -13px 0; }
.v2-plate { display: none; gap: 16px; align-items: center; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.v2-cdn { font-weight: 800; font-size: 44px; line-height: .9; letter-spacing: -.05em; }
.v2-cdl { font-size: 13px; line-height: 17px; color: var(--mute); }
.v2-cdt { font-weight: 800; font-size: 20px; line-height: 24px; letter-spacing: -.02em; color: var(--ink2); margin-bottom: 2px; }
@media (min-width: 960px) {
  /* the hero uses the column grid of the body (main column + 340 px aside, 40 px gap), so the title, the cards and the countdown line up with the sections below */
  .v2-hero { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; padding: 20px 0 12px; }
  .v2-plate { display: flex; height: 129px; margin-top: 24px; } /* one height on every page; its top edge sits on the top of the H1 (the eyebrow above is 16 + 8 px) */
}

/* bib: the date drawn as a race number */
.v2-bib { display: block; position: relative; flex: none; width: 58px; border: 1.5px solid var(--ink); border-radius: 9px; background: #fff; text-align: center; padding: 11px 0 7px; line-height: 1; overflow: hidden; --c: var(--road); }
.v2-bib::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c); }
.v2-bib::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, #D2D6CB 0 1.6px, transparent 2.2px) 4px 8px/5px 5px no-repeat, radial-gradient(circle, #D2D6CB 0 1.6px, transparent 2.2px) right 4px top 8px/5px 5px no-repeat; }
.v2-bib-m { display: block; font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: .04em; color: var(--mute); }
.v2-bib-d { display: block; font-weight: 800; font-size: 25px; line-height: 1; letter-spacing: -.03em; margin: 4px 0 3px; }
.v2-bib-d.v2-rng { font-size: 17px; letter-spacing: -.04em; margin: 7px 0 6px; white-space: nowrap; }
.v2-bib-w { display: block; font-weight: 650; font-size: 11px; line-height: 1; color: var(--ink2); }
.v2-bib-lg { width: 76px; padding: 14px 0 9px; }
.v2-bib-lg .v2-bib-d { font-size: 36px; margin: 6px 0 4px; }
.v2-bib-lg .v2-bib-m, .v2-bib-lg .v2-bib-w { font-size: 12px; }
.v2-bib-lg::before { height: 7px; }
.v2-bib-lg .v2-bib-d.v2-rng { font-size: 22px; }
.v2-bib-past { border-color: var(--past); --c: var(--past); }
.v2-page [data-c='road'] { --c: var(--road); } .v2-page [data-c='trail'] { --c: var(--trail); } .v2-page [data-c='cycle'] { --c: var(--cycle); }
.v2-page [data-c='tri'] { --c: var(--tri); } .v2-page [data-c='water'] { --c: var(--water); }

/* section bar */
.v2-tabs { position: sticky; top: var(--v2-hb); z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); margin: 0 -16px; transition: top .22s ease; }
.v2-tabs-in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 0 16px; }
.v2-tabs-in::-webkit-scrollbar { display: none; }
.v2-tabs a { flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; font-weight: 650; font-size: 15px; color: var(--mute); border-bottom: 3px solid transparent; }
.v2-tabs a[aria-current='true'] { color: var(--ink); border-color: var(--ink); }
.v2-tabs a:hover { color: var(--ink); text-decoration: none; }
@media (min-width: 960px) { .v2-tabs { margin: 0; } .v2-tabs-in { padding: 0; } }

/* columns */
.v2-cols { display: grid; gap: 24px; padding-top: 8px; }
.v2-cols > * { min-width: 0; }
.v2-side { display: grid; gap: 16px; align-content: start; }
@media (min-width: 960px) {
  .v2-cols { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
  .v2-side { position: sticky; top: calc(var(--v2-hb) + var(--v2-tabs-h) + 16px); align-self: start; }
}
.v2-sec { padding: 40px 0 0; scroll-margin-top: calc(var(--v2-hb) + var(--v2-tabs-h) + 16px); }
.v2-sec > .v2-h2, .v2-shead > .v2-h2 { margin-bottom: 12px; }
.v2-shead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.v2-shead a { font-weight: 650; font-size: 14px; color: var(--blue); }
@media (max-width: 719px) { .v2-shead { flex-wrap: wrap; row-gap: 0; } .v2-shead > a { flex: 0 0 100%; margin-top: -6px; } }
@media (max-width: 640px) { .v2-sec { scroll-margin-top: calc(62px + var(--v2-tabs-h) + 16px); } } /* an anchor jump upwards brings the header back, so leave room for both bars */

/* buttons */
.v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 20px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--ink); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; text-align: center; text-decoration: none !important; }
.v2-btn-lime { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.v2-btn-ghost { background: transparent; color: var(--ink); }
.v2-btn-sm { min-height: 44px; padding: 6px 14px; font-size: 14px; }
.v2-iconbtn { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.v2-iconbtn[aria-pressed='true'] { background: var(--ink); color: #fff; border-color: var(--ink); }
.v2-iconbtn[aria-pressed='true'] .v2-ic { fill: currentColor; }

/* action card */
.v2-cta { padding: 18px; background: #fff; border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: var(--sh); display: grid; gap: 12px; }
.v2-cta h2 { font-size: 20px; line-height: 26px; }
.v2-cta .v2-btn { width: 100%; }
.v2-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v2-tools > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 64px; padding: 8px 4px; border: 1px solid var(--line); background: #fff; border-radius: 12px; font-weight: 650; font-size: 12px; line-height: 14px; color: var(--ink); cursor: pointer; text-align: center; font-family: inherit; }
.v2-tools > * > span { display: block; max-width: 100%; }
.v2-tools button[aria-pressed='true'] { background: var(--ink); color: #fff; border-color: var(--ink); }
.v2-tools button[aria-pressed='true'] .v2-ic { fill: currentColor; }
.v2-tools .v2-tool-off { color: var(--mute); border-style: dashed; cursor: default; }
.v2-msg { display: block; min-height: 0; font-size: 13px; line-height: 18px; color: var(--ink2); }
.v2-msg:empty { display: none; }
.v2-page .v2-privacy-note { font-size: 12.5px; line-height: 17px; color: var(--mute); margin-top: 12px; }
.v2-verif { display: flex; gap: 8px; font-size: 12.5px; line-height: 18px; color: var(--mute); border-top: 1px solid var(--line2); padding-top: 12px; }
.v2-verif .v2-ic { margin-top: 1px; }
.v2-vline { display: block; }
.v2-verif a { color: var(--blue); font-weight: 650; }
.v2-stale { color: var(--warn) !important; background: var(--warn-t); border-radius: 6px; padding: 1px 6px; font-weight: 650; display: inline-block; white-space: nowrap; }

/* mobile sticky action bar */
.v2-stick { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--line); backdrop-filter: blur(10px); }
.v2-stick .v2-btn { flex: 1 1 0; min-height: 46px; font-size: 15px; padding: 0 12px; white-space: nowrap; }
.v2-stick .v2-btn-ghost { flex: 0 0 auto; }
.v2-msg-bar { flex: 0 0 100%; text-align: center; }
@media (min-width: 960px) { .v2-stick { display: none; } }

/* distance tabs */
.v2-tabset[data-enhanced='true'] .v2-pane-title { display: none; }
.v2-pane + .v2-pane { margin-top: 20px; }
.v2-pane-title { font-size: 17px; line-height: 22px; margin: 0 0 8px; }
.v2-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--line2); border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: 4px; }
.v2-seg::-webkit-scrollbar { display: none; }
.v2-tabset:not([data-enhanced='true']) .v2-seg { display: none; }
.v2-seg button { border: 0; background: transparent; min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 650; font-size: 14px; cursor: pointer; white-space: nowrap; color: var(--ink2); font-family: inherit; }
.v2-seg button[aria-selected='true'] { background: var(--ink); color: #fff; }

/* value rows */
.v2-dgrid { display: grid; margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.v2-row { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; border-top: 1px solid var(--line2); font-size: 15px; line-height: 22px; }
.v2-row:first-child { border-top: 0; }
.v2-row > * { min-width: 0; }
.v2-k { color: var(--mute); font-size: 13.5px; line-height: 22px; }
.v2-row dd { display: grid; gap: 4px; justify-items: start; overflow-wrap: anywhere; }
.v2-unk { color: var(--mute); font-style: italic; }
@media (min-width: 720px) { .v2-row { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; } }
/* source chip: one line (check mark, domain, date). The date never breaks; if the row is too narrow the whole date drops as one piece. */
.v2-src { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 0; font-size: 12.5px; line-height: 18px; color: var(--mute); background: var(--line2); border-radius: 12px; padding: 3px 10px; max-width: 100%; }
.v2-src .v2-ic { color: var(--ok); width: 14px; height: 14px; margin-right: -4px; }
.v2-src-d { white-space: nowrap; }
.v2-src-verb-s { display: none; }
@media (max-width: 560px) {
  .v2-src { font-size: 12px; column-gap: 6px; }
  .v2-src-verb { display: none; }
  .v2-src-verb-s { display: inline; }
}
.v2-src-main { min-width: 0; overflow-wrap: anywhere; }
.v2-src-wrap a { white-space: normal; overflow-wrap: anywhere; }
.v2-src a { color: var(--ink2); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.v2-src.v2-stale { background: var(--warn-t); }
.v2-conflict { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--warn-t); color: #5F3906; width: 100%; }
.v2-conflict b { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; }
.v2-conflict ol { list-style: decimal; padding-left: 20px; display: grid; gap: 8px; }
.v2-conflict li { font-size: 14.5px; line-height: 21px; padding-left: 2px; }
.v2-conflict li .v2-src { display: flex; width: fit-content; margin-top: 4px; }
.v2-conflict .v2-src { background: rgba(255,255,255,.7); }

/* before you go */
.v2-tiles { display: grid; gap: 12px; }
@media (min-width: 720px) { .v2-tiles { grid-template-columns: 1fr; } }
.v2-tile { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 4px 0 8px; }
.v2-tile:not([open]) { padding-bottom: 4px; }
.v2-tile summary { padding: 0 14px; } /* a closed accordion is centred: 4 px above and below its 48 px title row */
.v2-tile summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 48px; cursor: pointer; }
.v2-tile summary::-webkit-details-marker { display: none; }
.v2-tile summary h3 { display: flex; gap: 8px; align-items: center; font-size: 17px; line-height: 22px; }
.v2-tile[open] summary > .v2-ic { transform: rotate(180deg); }
.v2-tile .v2-dgrid { margin-top: 0; border: 0; border-radius: 0; }
.v2-tile .v2-row:first-child { border-top: 1px solid var(--line2); }
@media (min-width: 960px) { .v2-tile summary { cursor: default; } .v2-tile summary > .v2-ic { display: none; } }

/* guides (the triangle race <-> story) */
.v2-guides { display: grid; gap: 8px; list-style: none; margin-top: 4px; }
.v2-more { margin-top: 12px; }
.v2-more summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 650; font-size: 14px; cursor: pointer; list-style: none; }
.v2-more summary::-webkit-details-marker { display: none; }
.v2-more .v2-guides { margin-top: 12px; }
@media (min-width: 720px) { .v2-guides { grid-template-columns: 1fr 1fr; } }
.v2-g { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; min-height: 56px; height: 100%; }
.v2-g b { display: block; font-size: 15px; line-height: 21px; }
.v2-gmeta { display: block; font-size: 13px; line-height: 18px; color: var(--mute); }
.v2-no { font-weight: 800; font-size: 13px; line-height: 22px; color: var(--mute); min-width: 22px; }
.v2-qs { display: grid; gap: 8px; }
.v2-qs a { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 48px; padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-weight: 600; font-size: 15px; }

/* cards and rails */
.v2-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.v2-rc { display: flex; flex-direction: column; gap: 10px; padding: 14px; min-height: 0; position: relative; }
.v2-ctop { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.v2-rc h3 { font-size: 17px; line-height: 22px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v2-rc h3 a { display: block; padding: 11px 0; margin: -11px 0; }
.v2-rc h3 a::after { content: ''; position: absolute; inset: 0; }
.v2-gl { font-weight: 650; font-size: 12.5px; line-height: 1.3; color: var(--c, var(--ink2)); }
.v2-pl { display: flex; align-items: flex-start; gap: 6px; color: var(--mute); font-size: 14px; line-height: 20px; }
.v2-pl .v2-ic { margin-top: 2px; }
.v2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v2-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--line2); font-weight: 650; font-size: 12.5px; line-height: 1; color: var(--ink2); }
.v2-chip-txt { background: transparent; padding: 0; font-weight: 500; color: var(--mute); height: auto; white-space: normal; line-height: 16px; font-size: 13px; }
.v2-foot { margin-top: auto; }
.v2-st { display: flex; align-items: flex-start; gap: 6px; font-weight: 600; font-size: 12.5px; line-height: 17px; color: var(--mute); padding-top: 10px; border-top: 1px solid var(--line2); }
.v2-st .v2-ic { color: var(--ok); margin-top: 1px; width: 14px; height: 14px; }
.v2-st-old { color: var(--warn); }
.v2-st-old .v2-ic { color: var(--warn); }
.v2-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; padding: 2px 16px 12px; margin: 0 -16px; }
.v2-rail::-webkit-scrollbar { display: none; }
.v2-rail > * { flex: 0 0 74%; max-width: 290px; scroll-snap-align: start; }
@media (min-width: 640px) { .v2-rail > * { flex-basis: 44%; } }
@media (min-width: 960px) { .v2-rail { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; padding: 0; margin: 0; } .v2-rail > * { max-width: none; } }

/* missing block, notes, tables */
.v2-missing { padding: 16px; background: #fff; border: 1px dashed #B4B8AC; border-radius: 14px; display: grid; }
.v2-missing > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 16px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line2); font-size: 15px; line-height: 21px; }
.v2-missing > div:first-of-type { border-top: 0; }
.v2-missing .v2-k { color: var(--mute); font-size: 13.5px; }
.v2-missing .v2-v { color: var(--mute); font-style: italic; display: grid; gap: 4px; justify-items: start; min-width: 0; }
.v2-missing .v2-v .v2-src { font-style: normal; }
/* a phone stacks the row: label, value with its source, then the link, each on the full width of the card */
@media (max-width: 720px) {
  .v2-missing > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0 4px; }
  .v2-missing .v2-k { font-weight: 650; color: var(--ink2); }
}
.v2-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--warn-t); color: #5F3906; font-size: 14px; line-height: 20px; margin-top: 16px; }
.v2-note-past { background: var(--past-t); color: #3F4652; }
.v2-dr { background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.v2-dr summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; font-weight: 700; }
.v2-dr summary::-webkit-details-marker { display: none; }
.v2-dr-n { margin-left: auto; font-weight: 500; font-size: 14px; color: var(--mute); }
.v2-dr[open] summary > .v2-ic { transform: rotate(180deg); }
.v2-drbody { padding: 0 16px 16px; display: grid; gap: 10px; }
.v2-scroll { overflow-x: auto; border-radius: 12px; container: v2tb / inline-size; }
/* the audit table: four fixed columns that always fit the column; the source is one line with an ellipsis (its full name is in the title), values are shown in full */
.v2-tb { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14.5px; line-height: 20px; background: #fff; border: 1px solid var(--line); }
.v2-tb th, .v2-tb td { padding: 10px 12px; text-align: left; border-top: 1px solid var(--line2); vertical-align: top; overflow-wrap: break-word; word-break: normal; }
.v2-tb th { font-weight: 650; font-size: 12.5px; line-height: 16px; color: var(--mute); background: #FAFAF7; border-top: 0; white-space: nowrap; }
.v2-tb .v2-tb-item { width: 22%; }
.v2-tb .v2-th-val { width: 38%; }
.v2-tb-3 .v2-tb-item { width: 52%; }
.v2-tb .v2-tb-src { width: 25%; white-space: normal; overflow-wrap: anywhere; }
.v2-tb .v2-tb-src a { display: inline-block; max-width: 100%; }
.v2-tb .v2-tb-date { width: 15%; white-space: nowrap; }
.v2-tb .v2-date { display: block; }
.v2-tb .v2-age { display: block; font-size: 12px; line-height: 16px; font-weight: 650; color: var(--warn); white-space: normal; }
/* below 640 px of table width (a phone, or a narrow column) every row becomes a small card */
@container v2tb (max-width: 639px) {
  .v2-tb { border: 0; table-layout: auto; }
  .v2-tb thead { display: none; }
  .v2-tb, .v2-tb tbody, .v2-tb tr, .v2-tb td { display: block; }
  .v2-tb tr { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: #fff; }
  .v2-tb td { border: 0; padding: 2px 0; width: auto !important; min-width: 0; white-space: normal; }
  .v2-tb td.v2-tb-item { font-weight: 650; }
  .v2-tb td.v2-tb-src, .v2-tb td.v2-tb-date { display: inline-block; max-width: 100%; margin-right: 10px; font-size: 13px; line-height: 20px; color: var(--mute); vertical-align: top; }
  .v2-tb td.v2-tb-src { display: block; margin-right: 0; }
  .v2-tb td.v2-tb-src::before { content: attr(data-label) ': '; }
  .v2-tb td.v2-tb-src a { display: inline-block; max-width: 100%; vertical-align: top; }
  .v2-tb .v2-date, .v2-tb .v2-age { display: inline; }
  .v2-tb .v2-age { margin-left: 6px; }
}
.v2-rowlinks { display: flex; gap: 4px 16px; flex-wrap: wrap; font-size: 14px; }
.v2-rowlinks a { color: var(--blue); font-weight: 650; display: inline-flex; align-items: center; min-height: 44px; }
.v2-claim { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }

/* festival programme */
.v2-day { margin-top: 16px; }
.v2-day h3 { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 17px; line-height: 24px; margin-bottom: 8px; }
.v2-prog { display: grid; gap: 8px; }
.v2-prog-row { display: grid; gap: 6px; padding: 12px 14px; column-gap: 24px; }
.v2-prog-row h4 { font-size: 16px; line-height: 22px; }
.v2-prog-links { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: 14px; }
.v2-prog-links a { color: var(--blue); font-weight: 650; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
@media (min-width: 720px) { .v2-prog-row { grid-template-columns: 190px minmax(0, 1fr) auto; align-items: center; } }
.v2-prog-row .v2-gl { line-height: 1.35; }

@media (prefers-reduced-motion: reduce) { .v2-page * { scroll-behavior: auto !important; transition: none !important; } }


/* 44 px touch targets: links that are shorter than their text line get a padded hit area without moving the layout */
.v2-shead a { display: inline-flex; align-items: center; min-height: 44px; }
.v2-src a { display: inline-block; padding: 13px 2px; margin: -13px 0; }
.v2-verif a, .v2-vline a { display: inline-block; padding: 12px 2px; margin: -12px 0; }
.v2-link.v2-strong.v2-sm { display: inline-flex; align-items: center; min-height: 44px; }
.v2-prog-row h4 a { display: block; padding: 12px 0; margin: -12px 0; }
.v2-tb a { display: inline-block; padding: 12px 2px; margin: -12px 0; }

/* inline links inside value rows and notes: the padded hit area of a real 44 px target, the line does not grow */
.v2-row dd a.v2-link, .v2-page p a.v2-link:not(.v2-strong) { display: inline-block; padding: 11px 0; margin: -11px 0; }
.v2-page p.v2-after > a.v2-link { padding: 11px 0; }

/* ---- site header inside the v2 pages (the header itself is the shared v1 component) ---------------------------------- */
/* Opaque, so no text shows through it; the strip above it (the 14 px / 8 px it floats below the top edge) is covered by a paper-coloured bar. */
.v2-page .site-header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.v2-page::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: var(--v2-gap); background: var(--paper); z-index: 99; pointer-events: none; }
@media (max-width: 1000px) {
  .v2-page { --v2-hb: 0px; --v2-gap: 0px; }
  .v2-page .site-header { position: relative; top: auto; }
}
@media (max-width: 640px) {
  .v2-page { --v2-hb: 62px; --v2-gap: 8px; }
  .v2-page .site-header { position: sticky; top: 8px; will-change: auto; }
  /* the v1 controller hides the header on scroll-down (phones): the tabs then take its place at the top */
  body[data-chrome-hidden='true'] .v2-page { --v2-hb: 0px; --v2-gap: 0px; }
}
/* Search: a real magnifier (inline SVG), centred by the grid, shown on every width (v1 hides the glyph on phones). */
.v2-page .search-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; font-size: 0; line-height: 0; color: var(--ink); }
.v2-page .search-icon .v2-ic { width: 20px; height: 20px; }
.v2-page .search-overlay-field span { display: inline-grid; place-items: center; }
.v2-page .search-overlay-field .v2-ic { width: 20px; height: 20px; }
.v2-page .language-switch { width: 44px; height: 44px; padding: 0; min-width: 44px; }
.v2-page .site-header .brand { min-height: 44px; }
.v2-page .site-header nav a small { font-size: 10px; }

/* ---- scrollers: a fade on the edge that has more to see (data-fade is set by components/v2/v2-chrome.tsx) --------------- */
.v2-tabs-in[data-fade='end'], .v2-seg[data-fade='end'], .v2-rail[data-fade='end'] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.v2-tabs-in[data-fade='start'], .v2-seg[data-fade='start'], .v2-rail[data-fade='start'] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.v2-tabs-in[data-fade='both'], .v2-seg[data-fade='both'], .v2-rail[data-fade='both'] { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }

/* phones: the value rows and the conflict box give their padding to the text, so a source chip fits on one line inside them */
@media (max-width: 560px) {
  .v2-tile summary { padding: 0 12px; }
  .v2-row { padding: 12px; }
  .v2-conflict { padding: 10px; }
  .v2-conflict ol { padding-left: 18px; }
}

/* ---- round 2 ------------------------------------------------------------------------------------------------------- */
/* the "opens elsewhere" mark stays glued to the last word of a link */
.v2-nb { white-space: nowrap; }
.v2-nb .v2-ic, .v2-page .v2-link .v2-ic { display: inline-block; vertical-align: -2px; }
.v2-nb .v2-ic { margin-left: 4px; }

/* 44 px hit areas: the padded area grows the target, the negative margin keeps the line where it was */
.v2-row dd a.v2-link, .v2-page p a.v2-link:not(.v2-strong) { padding: 12px 0; margin: -12px 0; }
.v2-page p.v2-after > a.v2-link { padding: 12px 0; }
.v2-verif a, .v2-vline a { padding: 13px 2px; margin: -13px 0; }
.v2-page a.v2-link.v2-strong { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: -8px 0; }
.v2-page .site-header nav a { min-height: 44px; display: inline-flex; align-items: center; }

.v2-tb a { text-decoration: underline; text-decoration-color: rgba(15,26,43,.3); text-underline-offset: 3px; }

/* ---- round 3 --------------------------------------------------------------------------------------------------------------- */
/* the countdown chip is for phones: from 960 px the countdown card next to the title says the same */
@media (min-width: 960px) { .v2-tag-cd { display: none; } }

/* phones: the Menu button takes the width of its label and sits next to the language switch, instead of stretching over the free grid track */
@media (max-width: 640px) { .v2-page .site-header .mobile-nav-toggle { justify-self: end; width: auto; padding: 6px 14px; } }
@media (max-width: 719px) { .v2-kick-dup { display: none; } } /* the phone breadcrumb already says it */


/* ---- round 4 ---------------------------------------------------------------------------------------------------------------- */
/* date tile: one size for a single day and for a range; the numerals of a range never touch the border */
.v2-bib { height: 76px; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; }
.v2-bib > span { white-space: nowrap; }
.v2-bib-m { margin-top: 3px; }
.v2-bib-d { margin: 4px 0 4px; }
.v2-bib-d.v2-rng { font-size: 15px; letter-spacing: -.02em; margin: 6px 0 6px; }
.v2-bib-lg { height: 104px; padding: 0; }
.v2-bib-lg .v2-bib-d { margin: 6px 0 5px; }
.v2-bib-lg .v2-bib-d.v2-rng { font-size: 19px; margin: 9px 0 8px; }
.v2-bib-w { font-size: 10.5px; letter-spacing: 0; }
.v2-bib-lg .v2-bib-m, .v2-bib-lg .v2-bib-w { font-size: 11.5px; }
.v2-bib-lg { width: 84px; }

/* named links and one-item-per-line values */
.v2-page .v2-links, .v2-page .v2-lines, .v2-page .v2-others { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.v2-page .v2-links { gap: 0; }
.v2-page .v2-lines li { position: relative; padding-left: 12px; }
.v2-page .v2-lines li::before { content: ''; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.v2-passed { font-weight: 650; color: var(--warn); white-space: nowrap; }
.v2-others { gap: 8px; margin: 6px 0; }
.v2-others li { display: grid; gap: 2px; justify-items: start; }
.v2-page .v2-other { display: grid; gap: 4px; }
.v2-page .v2-facts-src-2 { margin-top: 2px; }
.v2-page .v2-missing-1 { display: grid; gap: 8px; justify-items: start; }
.v2-page .v2-missing-1 p { color: var(--ink2); }

/* related races: the footer of every card of a row sits on one line (rows are shared through subgrid) */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 960px) {
    .v2-rail { row-gap: 0; }
    .v2-rail > .v2-rc { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 10px; margin-bottom: 12px; align-content: start; }
    .v2-rail > .v2-rc .v2-foot { margin-top: 0; align-self: end; }
  }
}

/* phones: the fixed action bar steps aside while the action card or the footer is on screen */
.v2-stick { transition: transform .2s ease, visibility 0s; }
.v2-stick[data-hidden='true'] { transform: translateY(105%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }