/* Team GB Wake — TrickDex.Api glue layer.
   Loaded after tailwind.min.css, tokens.css, concept-c.css and team-gb-header-tone.css, for the
   organisations that have the Light design switched on (see _Layout.cshtml). Three jobs:
   1. the header (brand band + menu bar) and footer as built in Razor;
   2. page components the reference pages draw with inline styles (hero split, stat tiles, key facts,
      aside panels, media grid);
   3. mapping the old Tailwind palette/shape on pages that have not been restyled yet, so they pick up
      the font, colours and square corners (Docs/Branding/design-system/README.md §5). */

/* ---- 1. Header ---------------------------------------------------------- */
.tgb-top { position: relative; }
.tgb-band {
  position: relative; z-index: 100; min-height: 136px;
  background: var(--band-bg); color: var(--band-ink);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; padding: 18px var(--gutter);
}
.tgb-band__logo { position: relative; display: flex; align-items: center; }
.tgb-band__logo img { height: 72px; width: auto; display: block; }
.tgb-band__right { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.tgb-family { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; font-size: 13.5px; }
.tgb-family a, .tgb-family button { color: var(--band-ink); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.tgb-family a:hover, .tgb-family button:hover { color: var(--accent); text-decoration: underline; }
.tgb-family .is-strong { font-weight: 700; }
.tgb-chip {
  display: inline-block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 14px; background: var(--c-ink); color: var(--c-white); padding: 6px 12px;
}
.tgb-dd { position: relative; }
.tgb-dd summary { list-style: none; cursor: pointer; color: var(--band-ink); font-size: 13.5px; }
.tgb-dd summary::-webkit-details-marker { display: none; }
.tgb-dd summary::after { content: ' ▾'; font-size: 11px; }
.tgb-dd[open] summary { color: var(--accent); }
.tgb-dd__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; min-width: 220px;
  background: var(--c-white); border: 2px solid var(--c-ink); padding: 6px 0; margin: 0; list-style: none;
}
.tgb-dd__menu li a, .tgb-dd__menu li button { display: block; width: 100%; text-align: left; padding: 8px 14px; color: var(--c-ink); font-size: 14px; background: none; border: 0; font: inherit; cursor: pointer; }
.tgb-dd__menu li a:hover, .tgb-dd__menu li button:hover { background: var(--c-surface); text-decoration: none; }
.tgb-dd__menu hr { border: 0; border-top: 1px solid var(--c-line); margin: 6px 0; }

.tgb-menu {
  background: var(--menu-bg); border-top: 1px solid var(--menu-rule); border-bottom: 2px solid var(--menu-rule);
  display: flex; flex-wrap: wrap; align-items: stretch; min-height: 64px; padding-left: calc(var(--gutter) - 18px);
}
.tgb-menu__toggle {
  display: none; align-items: center; gap: 10px; margin-left: 18px; padding: 0 4px; min-height: 64px;
  background: none; border: 0; cursor: pointer; color: var(--menu-ink);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 16px;
}
.tgb-menu__toggle svg { width: 26px; height: 26px; }
.tgb-menu__nav { display: flex; flex-wrap: wrap; align-items: stretch; flex: 1 1 auto; }
.tgb-menu__nav > a {
  display: flex; align-items: center; padding: 0 18px; min-height: 64px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 18px;
  color: var(--menu-ink); text-decoration: none;
}
.tgb-menu__nav > a:hover { color: var(--accent); text-decoration: none; }
.tgb-menu__nav > a.is-current {
  padding: 0 22px; font-weight: 800; color: var(--menu-active-ink); background: var(--menu-active-bg);
  box-shadow: inset 0 -4px 0 var(--menu-active-bar);
}
.tgb-menu__cta {
  display: flex; align-items: center; margin-left: auto; padding: 0 30px; min-height: 64px;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 16px;
  color: #ffffff !important; background: var(--cta-bg); text-decoration: none;
}
.tgb-menu__cta:hover { background: var(--accent-dark); text-decoration: none; }
@media (max-width: 1000px) {
  .tgb-band { min-height: 0; padding-block: 14px; }
  .tgb-band__logo img { height: 56px; }
  .tgb-menu__toggle { display: flex; }
  .tgb-menu__nav { display: none; flex-basis: 100%; flex-direction: column; border-top: 1px solid var(--c-line); }
  .tgb-menu.is-open .tgb-menu__nav { display: flex; }
  .tgb-menu__nav > a { min-height: 52px; border-bottom: 1px solid var(--c-line); }
  .tgb-menu__cta { margin-left: 0; width: 100%; justify-content: center; }
}

/* ---- One content edge ---------------------------------------------------------------------------------------
   Content runs 1360px inside the gutters (the prototype's footer rule). The header band and menu run to the
   window edge, so they pad to the same edge; tailwind.css keeps its 1400px .container for legacy pages only. */
.tone-root .container { max-width: calc(var(--container) + 2 * var(--gutter)); }
.tone-root .hero-copy, .tone-root .tgb-hero-split__grid { max-width: calc(var(--container) + 2 * var(--gutter)); }
.tone-root .tgb-band { padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); }
@media (min-width: 1001px) {
  .tone-root .tgb-menu { padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); }
}

/* ---- Footer -------------------------------------------------------------- */
.tgb-partners { background: var(--c-white); padding-block: 40px; border-top: 1px solid var(--c-line); }
.tgb-partners h3 { font-size: var(--fs-h3); margin-bottom: 18px; }
.tgb-partners .rounded-lg, .tgb-partners .shadow-sm { border-radius: 0 !important; box-shadow: none !important; }
.tgb-partners .text-blue-600 { color: var(--c-red); }
.footer .footer__logo { height: 48px; width: auto; filter: none; opacity: 1; }
.footer .tgb-orgswitch { margin-top: 18px; font-size: 13px; }
.footer .tgb-orgswitch form { display: inline; }
.footer .tgb-orgswitch button { background: none; border: 1px solid var(--c-on-dark-border); color: inherit; padding: 4px 10px; margin: 2px; cursor: pointer; font: inherit; font-size: 13px; }

/* ---- Main area ------------------------------------------------------------ */
.tgb-main { background: var(--c-white); }
.tgb-main--boxed { padding-block: 32px 72px; }
.skip { position: absolute; }

/* ---- 2. Page components --------------------------------------------------- */
.tgb-crumbs { font-size: var(--fs-meta); letter-spacing: 0.04em; color: var(--c-muted); margin: 0 0 14px; }
.tgb-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tgb-crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--c-line-strong); }
.tgb-crumbs a { color: inherit; }
.tone-invert .tgb-crumbs { color: var(--c-on-dark-2); }

.tgb-hero-split { background: var(--c-ink); color: var(--c-white); }
.tgb-hero-split__grid { display: flex; flex-wrap: wrap; align-items: stretch; max-width: var(--container); margin-inline: auto; }
.tgb-hero-split__copy { flex: 1 1 460px; min-width: 0; padding: 48px var(--gutter) 56px; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; }
.tgb-hero-split__copy h1 { color: var(--c-white); font-size: clamp(48px, 7vw, 104px); line-height: 0.9; }
.tgb-hero-split__meta { color: var(--c-on-dark-2); font-size: 18px; max-width: 44ch; margin: 0; }
.tgb-hero-split__photo { flex: 1 1 520px; min-width: 0; min-height: 420px; position: relative; overflow: hidden; background: var(--c-ink-2); }
.tgb-hero-split__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tgb-hero-split__credit { position: absolute; right: 12px; bottom: 10px; margin: 0; font-size: 12.5px; color: #fff; background: rgba(16,29,51,0.7); padding: 3px 8px; }
.tgb-hero-split__initials { position: absolute; left: var(--gutter); bottom: 24px; font-family: var(--font-display); font-weight: 800; font-size: clamp(96px, 16vw, 200px); line-height: 0.8; color: var(--c-white); opacity: 0.9; }
.tgb-eyebrow-chip {
  margin: 0; align-self: flex-start; background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; font-size: 14px; padding: 6px 10px;
}
.tgb-stats { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--c-on-dark-hairline); margin-top: 8px; }
.tgb-stats > div { flex: 1 1 120px; padding: 18px 20px 0 0; }
.tgb-stats > div + div { border-left: 1px solid var(--c-on-dark-hairline); padding-left: 20px; }
.tgb-stats__n { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 0.9; color: var(--c-white); }
.tgb-stats__l { margin: 6px 0 0; font-size: 13.5px; color: var(--c-on-dark-3); letter-spacing: 0.06em; text-transform: uppercase; }
.tgb-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.tgb-kf { background: var(--c-white); border-bottom: 2px solid var(--c-ink); }
.tgb-kf__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; }
.tgb-kf__cell { padding: 24px 28px; border-right: 1px solid var(--c-line); min-width: 0; }
.tgb-kf__cell:first-child { padding-left: 0; }
.tgb-kf__cell:last-child { border-right: 0; }
.tgb-kf__k { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; font-size: 13px; color: var(--accent); }
.tgb-kf__v { margin: 6px 0 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 1.05; color: var(--c-ink); overflow-wrap: anywhere; }
.tgb-kf__s { margin: 4px 0 0; font-size: 14px; color: var(--c-muted); }

.tgb-split { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.tgb-split__main { flex: 999 1 560px; min-width: 0; }
.tgb-split__aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.tgb-panel { border: 1px solid var(--c-card-border); border-top: 4px solid var(--accent); padding: 24px; background: var(--c-white); }
.tgb-panel--ink { border: 2px solid var(--c-ink); }
.tgb-panel .eyebrow { margin: 0 0 14px; }
.tgb-panel ul { list-style: none; margin: 0; padding: 0; }
.tgb-panel__row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.tgb-panel__row:last-child { border-bottom: 0; }
.tgb-panel__row a { font-weight: 600; color: var(--c-ink); }
.tgb-panel__row span { color: var(--c-muted); font-size: 14px; white-space: nowrap; }
.tgb-panel__price { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--c-ink) !important; }
.tgb-panel p { color: var(--c-body); }
.tgb-notice { background: var(--c-notice-bg); border: 1px solid var(--c-notice-border); color: var(--c-notice-text); padding: 18px 20px; }
.tgb-notice p { margin: 0; }
.tgb-notice p + p { margin-top: 6px; font-size: 15px; }
.tgb-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tgb-logos a, .tgb-logos div { aspect-ratio: 3 / 2; background: var(--c-surface); display: flex; align-items: center; justify-content: center; padding: 10px; font-size: 13px; color: var(--c-muted); text-align: center; }
.tgb-logos img { max-height: 100%; width: auto; object-fit: contain; }
.tgb-follow { display: flex; flex-direction: column; gap: 10px; }
.tgb-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tgb-tags .tag { padding: 9px 14px; font-size: 14px; text-decoration: none; }
.tgb-tags .tag:hover { background: var(--c-ink); color: var(--c-white); }
.tgb-tags .tag--invert:hover { background: var(--accent); }
.tgb-tags .tag--sport { padding: 10px 14px; font-size: 15px; }
.tgb-tags button.tag { border: 0; cursor: pointer; font-family: inherit; }
.tgb-note { margin: 12px 0 0; font-size: 13.5px; color: var(--c-muted); }
.tgb-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tgb-media-grid a, .tgb-media-grid > div { display: block; position: relative; aspect-ratio: 4 / 3; background: var(--c-ink-2); overflow: hidden; }
.tgb-media-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgb-media-grid .tgb-media-grid__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px; font-size: 13px; color: #fff; background: linear-gradient(0deg, rgba(16,29,51,0.8), transparent); }
.tgb-media-grid iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.tgb-media-grid a.is-video::after { content: "▶"; position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: grid; place-items: center; border-radius: 50%; background: rgba(16,29,51,0.78); color: #fff; font-size: 22px; padding-left: 3px; box-sizing: border-box; pointer-events: none; }
/* Never more than three rows: 4, 3 or 2 columns by width, with the overflow items hidden */
.tgb-media-grid--rows3 { grid-template-columns: repeat(4, 1fr); }
.tgb-media-grid--rows3 > :nth-child(n+13) { display: none; }
@media (max-width: 1000px) { .tgb-media-grid--rows3 { grid-template-columns: repeat(3, 1fr); } .tgb-media-grid--rows3 > :nth-child(n+10) { display: none; } }
@media (max-width: 640px) { .tgb-media-grid--rows3 { grid-template-columns: repeat(2, 1fr); } .tgb-media-grid--rows3 > :nth-child(n+7) { display: none; } }
.tgb-riders { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 20px; }
@media (max-width: 480px) { .tgb-riders { grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 12px; } }
.tgb-rider__tile { aspect-ratio: 1 / 1; background: var(--c-ink); display: flex; align-items: flex-end; justify-content: flex-start; padding: 16px; position: relative; overflow: hidden; }
.tgb-rider__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tgb-rider__initials { font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: 0.8; color: var(--c-white); letter-spacing: -0.01em; }
@media (max-width: 480px) { .tgb-rider__initials { font-size: 44px; } }
.rider .rider__body { gap: 6px; }
.rider h3 { font-size: 24px; line-height: 1.02; margin: 0; }
.rider .link-arrow { font-size: 13px; }
.tgb-season { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.tgb-season__label { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; font-size: 14px; color: var(--c-muted); margin-right: 8px; }
.tgb-season__count { margin: 0; font-size: 13.5px; color: var(--c-muted); letter-spacing: 0.04em; }
/* Hero band with a filter (e.g. News years) on the right of the title; stacks under it on narrow screens. */
.tgb-hero-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; }
.tgb-hero-head h1 { margin-bottom: 0; }
.tgb-hero-head__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; }
.tgb-hero-head__aside .tgb-tags { justify-content: flex-end; }
.tgb-hero-head__aside .tgb-season__count { color: var(--c-on-dark-2); }
.tone-root .hero .tgb-hero-head a.tag:not([class*="bg-"]) { background: var(--c-ink-2); color: var(--c-white); }
.tone-root .hero .tgb-hero-head a.tag--invert:not([class*="bg-"]), .tone-root .hero .tgb-hero-head a.tag:not([class*="bg-"]):hover { background: var(--accent); color: #fff; text-decoration: none; }
@media (max-width: 640px) { .tgb-hero-head__aside { align-items: flex-start; margin-left: 0; } .tgb-hero-head__aside .tgb-tags { justify-content: flex-start; } }
.tgb-admin-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.tgb-admin-bar .button { font-size: 13.5px; padding: 10px 16px; }

/* results tables: variants */
.results--plain td:first-child { font-family: var(--font-body); font-weight: 600; font-size: 15px; width: auto; color: var(--c-ink); }
.results td.tgb-sub { font-size: 13px; color: var(--c-muted); }
.results .tgb-sub { display: block; font-size: 13px; color: var(--c-muted); }
.results tr.is-dns td { opacity: 0.6; }
.results .tgb-q { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--c-surface); color: var(--c-ink-2); }
.results .tgb-q--q { background: var(--accent-tint); color: var(--accent-dark); }
.results td img { width: 32px; height: 32px; object-fit: cover; display: inline-block; vertical-align: middle; margin-right: 10px; }
.results .results__athlete { display: inline-flex; align-items: center; gap: 0; }
.tgb-heatnav { display: flex; flex-wrap: wrap; gap: 8px; }
.tgb-video { aspect-ratio: 16 / 9; width: 100%; background: var(--c-ink); }
.tgb-video iframe { width: 100%; height: 100%; display: block; border: 0; }

/* Heat page with a livestream: video above the results on narrow screens; on wide ones it
   heads the side column and stays pinned while the results table scrolls */
.tgb-heat { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "video" "main" "aside"; gap: 36px; }
.tgb-heat__side { display: contents; }
.tgb-heat__video { grid-area: video; }
.tgb-heat__main { grid-area: main; min-width: 0; }
.tgb-heat__aside { grid-area: aside; display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 1100px) {
  .tgb-heat { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "main side"; gap: 48px; }
  .tgb-heat__side { display: flex; flex-direction: column; gap: 28px; grid-area: side; }
  .tgb-heat__video { position: sticky; top: var(--tgb-sticky-top, 0px); z-index: 2; background: var(--private-bg); padding-block: 16px 12px; margin-top: -16px; }
}

/* Trick-by-trick row under each rider in the heat results */
.results tr.has-tricks td { border-bottom: 0; padding-bottom: 6px; }
.results.hide-tricks tr.has-tricks td { border-bottom: var(--rule-hair); padding-bottom: 14px; }
.results.hide-tricks tr.tgb-tricks-row { display: none; }
.results tr.tgb-tricks-row td,
.results tr.tgb-tricks-row td:first-child { padding: 0 14px 16px 100px; width: auto; font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.4; color: var(--c-body); }
.tgb-tricks { display: flex; flex-direction: column; gap: 8px; }
.tgb-tricks__pass { display: flex; align-items: baseline; gap: 10px; }
.tgb-tricks__label { flex: none; min-width: 84px; font-size: 13px; font-weight: 700; color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.tone-root a.tgb-tricks__label:not([class*="bg-"]) { color: var(--c-ink); }
.tone-root a.tgb-tricks__label:not([class*="bg-"]):hover { color: var(--accent); }
.tgb-tricks__none { font-size: 13px; color: var(--c-muted); }
.tgb-tricks__num { color: var(--c-muted); margin-right: 5px; }
.tgb-tags--compact { list-style: none; padding: 0; margin: 0; gap: 6px; }
.tgb-tags--compact .tag { padding: 4px 9px; font-size: 13px; border: 1px solid transparent; }
.tone-root .tgb-tags--compact .tag a:not([class*="bg-"]) { color: inherit; text-decoration: none; }
.tgb-tags--compact .tag.is-unverified { border: 1px dashed var(--c-muted); background: transparent; color: var(--c-muted); }
/* A light hover rather than the site-wide dark fill, which flashed black as the pointer crossed the chips */
.tgb-tags--compact .tag:hover { background: var(--c-white); border-color: var(--c-ink); color: var(--c-ink); }
.tgb-tags--compact .tag.is-playing,
.tgb-tags--compact .tag.is-playing:hover { background: var(--accent); border-color: var(--accent); color: var(--c-white); }
.tgb-tags--compact .tag.is-playing .tgb-tricks__num { color: inherit; }
@media (max-width: 700px) {
  /* The table scrolls sideways on phones; keep the tricks on screen and stack each pass label over its tricks */
  .results tr.tgb-tricks-row td, .results tr.tgb-tricks-row td:first-child { padding-left: 14px; }
  .tgb-tricks { position: sticky; left: 14px; max-width: calc(100vw - 64px); }
  .tgb-tricks__pass { flex-direction: column; gap: 6px; }
}
button.tag { border: 0; cursor: pointer; font-family: inherit; }
.tgb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tgb-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--c-surface); color: var(--c-ink-2); font-size: 13px; text-decoration: none; }
.tgb-chips a:hover { background: var(--c-ink); color: var(--c-white); }
.tgb-chips a strong { color: var(--c-ink); }
.tgb-chips a:hover strong { color: var(--c-white); }
.tgb-chips .tgb-q { padding: 1px 6px; font-size: 11px; }
.tgb-history { display: flex; flex-direction: column; gap: 0; }
.tgb-history__comp { padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.tgb-history__comp:last-child { border-bottom: 0; }
.tgb-history__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.tgb-history__head a { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--c-ink); }
.tgb-history__head span { font-size: 13px; color: var(--c-muted); }
.tgb-history__div { margin-top: 10px; }
.tgb-history__div > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; }
.tgb-history__div > div a { color: var(--c-ink-2); }
.tgb-history__div .tgb-place { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1; color: var(--accent); }
.tgb-prose { color: var(--c-body); max-width: 70ch; }
.tgb-prose h1, .tgb-prose h2, .tgb-prose h3 { margin: 1.2em 0 0.5em; font-size: var(--fs-h3); }
.tgb-prose ul { padding-left: 1.2em; }
.tgb-prose a { color: var(--c-red); }
.tgb-prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.tgb-prose th, .tgb-prose td { border-bottom: 1px solid var(--c-line); padding: 8px 10px; text-align: left; }
.tgb-steps .step h3 { font-size: 22px; }
.tgb-steps .step .tgb-free { color: var(--accent); font-weight: 700; }
.tgb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- 3. Legacy pages under the new identity ------------------------------- */
.tone-root [class*="rounded"] { border-radius: 0 !important; }
.tone-root .shadow, .tone-root .shadow-sm, .tone-root .shadow-md, .tone-root .shadow-lg { box-shadow: none !important; }
.tone-root .text-wkb-primary, .tone-root .hover\:text-wkb-primary:hover { color: var(--c-red) !important; }
.tone-root .bg-wkb-primary, .tone-root .bg-blue-600, .tone-root .hover\:bg-blue-700:hover { background-color: var(--c-ink) !important; }
.tone-root .bg-wkb-primary-dark, .tone-root .hover\:bg-wkb-primary-dark:hover { background-color: var(--c-ink-2) !important; }
.tone-root .bg-gray-800 { background-color: var(--c-ink) !important; }
.tone-root .bg-slate-50, .tone-root .bg-gray-50, .tone-root .bg-light { background-color: var(--c-surface) !important; }
.tone-root .text-gray-900 { color: var(--c-ink) !important; }
.tone-root .text-gray-600, .tone-root .text-gray-700 { color: var(--c-body) !important; }
.tone-root .text-gray-500, .tone-root .text-gray-400 { color: var(--c-muted) !important; }
.tone-root .border-gray-200, .tone-root .border-gray-300 { border-color: var(--c-line) !important; }
.tone-root .btn, .tone-root .btn-primary, .tone-root .btn-info, .tone-root .btn-secondary {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; border-radius: 0;
}
.tone-root h1.text-4xl, .tone-root h1.text-3xl { font-size: var(--fs-h2); }
.tone-root .card { border-radius: 0; }

/* ---- Link colours: site.css styles a:not([class*="bg-"]):not([class*="btn"]) at (0,2,1); these win. ---- */
.tone-root a:not([class*="bg-"]):not([class*="btn"]) { color: var(--c-red); }
.tone-root a:not([class*="bg-"]):not([class*="btn"]):hover { color: var(--c-ink); text-decoration: underline; }
.tone-root .tgb-family a:not([class*="bg-"]), .tone-root .tgb-dd__menu a:not([class*="bg-"]), .tone-root .tgb-crumbs a:not([class*="bg-"]),
.tone-root .tgb-panel__row a:not([class*="bg-"]), .tone-root .results .results__athlete:not([class*="bg-"]), .tone-root .tgb-history__head a:not([class*="bg-"]),
.tone-root .tgb-history__div a:not([class*="bg-"]), .tone-root .tgb-chips a:not([class*="bg-"]), .tone-root a.rider:not([class*="bg-"]), .tone-root a.tag:not([class*="bg-"]) { color: var(--c-ink); }
.tone-root .tgb-menu__nav > a:not([class*="bg-"]) { color: var(--menu-ink); }
.tone-root .tgb-menu__nav > a.is-current:not([class*="bg-"]) { color: var(--menu-active-ink); }
.tone-root .tgb-menu__nav > a:not([class*="bg-"]):hover { color: var(--accent); text-decoration: none; }
.tone-root .tgb-family a:not([class*="bg-"]):hover, .tone-root .tgb-crumbs a:not([class*="bg-"]):hover { color: var(--accent); }
.tone-root a.tag--invert:not([class*="bg-"]) { color: var(--c-white); }
.tone-root .footer a:not([class*="bg-"]) { color: var(--c-on-dark-2); }
.tone-root[data-tone="light"] .footer.tone-invert a:not([class*="bg-"]) { color: #46586f; }
.tone-root[data-tone="light"] .footer.tone-invert a:not([class*="bg-"]):hover { color: #c62b38; }
.tone-root a.button:not([class*="bg-"]), .tone-root a.tgb-menu__cta:not([class*="bg-"]) { color: #ffffff; text-decoration: none; }
.tone-root a.button--ghost:not([class*="bg-"]) { color: var(--c-ink); }
.tone-root .tone-invert a.button--ghost:not([class*="bg-"]) { color: var(--c-white); border-color: var(--c-white); }
.tone-root .hero a.button--ghost:not([class*="bg-"]) { color: var(--c-white); border-color: var(--c-white); }
.tone-root a.link-arrow:not([class*="bg-"]) { color: var(--c-red); }
.tone-root .tone-invert .tgb-crumbs a:not([class*="bg-"]) { color: var(--c-on-dark-2); }
.tone-root .hero--photo .crumbs a:not([class*="bg-"]) { color: rgba(255,255,255,0.75); }
.tone-root .hero--band.tone-invert .crumbs, .tone-root .hero--band.tone-invert .crumbs a:not([class*="bg-"]) { color: #5d6e85; }
.tone-root .hero--band.tone-invert .crumbs a:not([class*="bg-"]):hover { color: var(--accent); }
.tone-root .tgb-hero-split a.button:not([class*="bg-"]) { color: #fff; }

/* ---- Home page (Light) --------------------------------------------------- */
.tgb-home-events { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(20px, 2.6vw, 36px); align-items: start; }
.tgb-home-events__featured h3 { color: var(--c-ink); }
.tgb-home-events__list .tgb-panel__row { align-items: baseline; }
.tgb-home-events__list .tgb-panel__row span { white-space: normal; text-align: right; }
.tgb-home-tricks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); column-gap: clamp(24px, 3vw, 48px); row-gap: 0; }
.tgb-home-tricks .tgb-panel__row:last-child { border-bottom: 1px solid var(--c-line); }
.news-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; margin-bottom: 16px; }
.news-item h3 a { color: var(--c-ink); }
.news-item h3 a:hover { color: var(--accent); text-decoration: none; }
.tgb-media-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* ---- Organisation-managed pages (Light): About, Contact, Membership, Sponsorship via _CmsPageLight ---- */
.tgb-cms .max-w-7xl { max-width: none; padding-inline: 0; }
.tgb-cms .bg-white { background: var(--c-white); border: 1px solid var(--c-card-border); border-top: 4px solid var(--accent); padding: 24px !important; }
.tgb-cms .bg-white:not(:has(h2, h3, .grid)) { border: 0; padding: 0 0 8px !important; font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: 64ch; }
.tgb-cms .grid { gap: clamp(20px, 2.6vw, 32px); }
.tone-root .tgb-cms h2, .tone-root .tgb-cms h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); line-height: 1.05; margin: 0 0 14px; }
.tgb-cms .space-y-3 > p { margin: 0 0 0.75em; }
.tone-root .tgb-cms a[class*="bg-blue"] { background: var(--accent) !important; color: #ffffff; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; margin-top: 8px; }
.tone-root .tgb-cms a[class*="bg-blue"]:hover { background: var(--c-ink) !important; color: #ffffff; }
.tgb-cms .bg-white:not(:has(h2, h3)):has(.grid) { border: 0; padding: 0 !important; }

/* ---- Identity pages (Light): _AuthLight layout; restyles the pages' own Bootstrap-style form markup ---- */
.tgb-auth > h1:first-child, .tgb-auth > header > h1, .tgb-auth .card-header, .tgb-manage__body > h3:first-child { display: none; }
.tone-root .tgb-auth h2, .tone-root .tgb-auth h3, .tone-root .tgb-auth h4 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); line-height: 1.05; margin: 0 0 14px; color: var(--c-ink); }
.tgb-auth hr { border: 0; border-top: 1px solid var(--c-line); margin: 0 0 20px; }
.tgb-auth .row { display: flex; flex-wrap: wrap; gap: 32px 48px; }
.tgb-auth [class*="col-md-"] { flex: 1 1 360px; min-width: 0; max-width: 480px; }
.tgb-auth .max-w-sm { max-width: 480px; margin-inline: 0; }
.tgb-auth .card { border: 1px solid var(--c-card-border); border-top: 4px solid var(--accent); background: var(--c-white); box-shadow: none; }
.tgb-auth .card-body { padding: 24px; }
.tgb-auth .form-floating, .tgb-auth .mb-3, .tgb-auth .mb-4 { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.tgb-auth .form-floating > label { order: -1; }
.tone-root .tgb-auth .form-label, .tone-root .tgb-auth .form-floating > label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; color: var(--c-ink); margin: 0; }
.tone-root .tgb-auth .form-control { width: 100%; border: 1px solid var(--c-line-strong, var(--c-line)); border-radius: 0; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--c-ink); background: var(--c-white); box-shadow: none; }
.tone-root .tgb-auth .form-control:focus { outline: var(--focus); outline-offset: 0; border-color: var(--c-ink); }
.tone-root .tgb-auth .form-control:disabled { background: var(--c-surface); color: var(--c-muted); }
.tone-root .tgb-auth .btn, .tone-root .tgb-auth a.btn:not([class*="bg-"]) { display: inline-block; background: var(--accent); color: #ffffff; border: 0; border-radius: 0; padding: 13px 22px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 16px; text-decoration: none; cursor: pointer; margin: 0 8px 8px 0; }
.tone-root .tgb-auth .btn:hover, .tone-root .tgb-auth a.btn:not([class*="bg-"]):hover { background: var(--c-ink); color: #ffffff; text-decoration: none; }
.tgb-auth .w-100, .tgb-auth .w-full { width: 100%; margin-right: 0; }
.tone-root .tgb-auth .text-danger { color: var(--c-red) !important; font-size: 14px; }
.tgb-auth .alert { border: 0; border-left: 4px solid var(--c-ink); border-radius: 0; background: var(--c-surface); color: var(--c-ink); padding: 14px 16px; margin: 0 0 20px; }
.tgb-auth .alert-danger { border-left-color: var(--c-red); }
.tgb-auth .alert:empty, .tgb-auth .validation-summary-valid { display: none; }
.tgb-auth .btn-close { float: right; background: none; border: 0; font-size: 18px; cursor: pointer; }
.tgb-auth .btn-close::before { content: "\00d7"; }
.tgb-manage__nav { flex: 0 1 260px; }
.tgb-manage__nav .nav { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--c-ink); }
.tgb-manage__nav .nav-item { border-bottom: 1px solid var(--c-line); }
.tone-root .tgb-manage__nav .nav-link:not([class*="bg-"]) { display: block; padding: 12px 0 12px 12px; border-left: 4px solid transparent; color: var(--c-ink); font-weight: 600; text-decoration: none; }
.tone-root .tgb-manage__nav .nav-link.active:not([class*="bg-"]) { border-left-color: var(--accent); color: var(--accent); }
.tone-root .tgb-manage__nav .nav-link:not([class*="bg-"]):hover { color: var(--accent); }
.tgb-auth > .container { max-width: none; margin: 0; padding: 0; }
.tgb-auth > hr, .tgb-auth > h2 { max-width: 480px; }
.tone-root .tgb-auth > header > p.text-danger { color: var(--c-ink) !important; font-size: var(--fs-lead); }

/* ---- Sentence-case headings (2026-10-28) ------------------------------------
   The pack sets h1–h4 in uppercase; Wakeboard UK drops that so it reads apart from the BWSW site.
   Eyebrows, buttons, labels and the menu keep their caps. */
.tone-root h1, .tone-root h2, .tone-root h3, .tone-root h4 { text-transform: none; letter-spacing: -0.01em; }
.tone-root h1 { line-height: 0.98; }
.tone-root .tgb-kf__v { text-transform: none; }

/* ---- Home hero: riders first ---------------------------------------------- */
.tgb-team-hero { background: var(--c-white); padding-block: clamp(36px, 5vw, 64px) clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--c-line); }
.tgb-team-hero__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; margin-bottom: clamp(24px, 3vw, 36px); }
.tgb-team-hero__head > div:first-child { flex: 1 1 520px; min-width: 0; }
.tgb-team-hero h1 { font-size: clamp(40px, 5.6vw, 80px); max-width: 15ch; color: var(--c-ink); }
.tgb-team-hero__intro { flex: 1 1 340px; min-width: 0; max-width: 460px; }
.tgb-team-hero__intro .lead { font-size: 17px; margin-bottom: 18px; }
.tgb-team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
/* Column counts divide the 12 home-page riders evenly so no row is left half full. */
@media (max-width: 1000px) { .tgb-team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .tgb-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tgb-team-grid a { display: block; text-decoration: none; color: var(--c-ink); }
.tone-root .tgb-team-grid a:not([class*="bg-"]) { color: var(--c-ink); text-decoration: none; }
.tgb-team-grid__photo { display: block; aspect-ratio: 9 / 11; max-width: 100%; overflow: hidden; background: var(--c-ink); position: relative; border-bottom: 4px solid var(--accent); }
.tgb-team-grid__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.tgb-team-grid a:hover .tgb-team-grid__photo img { transform: scale(1.04); }
.tgb-team-grid__initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 44px; color: var(--c-white); opacity: 0.85; }
.tgb-team-grid__name { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.25; }
.tgb-team-grid__name strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 19px; }
.tgb-team-grid a:hover .tgb-team-grid__name strong { color: var(--accent); }
.tgb-team-hero__more { margin: 20px 0 0; }
@media (prefers-reduced-motion: reduce) { .tgb-team-grid__photo img { transition: none; } }

.tgb-next { background: var(--c-ink); color: var(--c-white); }
.tgb-next__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-block: 18px; }
.tgb-next__label { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; font-size: 13px; color: var(--c-white); background: var(--accent); padding: 5px 10px; }
.tgb-next__event { margin: 0; flex: 1 1 320px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.tone-root .tgb-next__event a:not([class*="bg-"]) { color: var(--c-white); font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.2vw, 28px); }
.tgb-next__event span { color: var(--c-on-dark-2); font-size: 15px; }
@media (max-width: 700px) { .tgb-team-grid li:nth-child(n+9) { display: none; } }

/* ---- Home events: cards with a 16:9 image, sized like the news items ------ */
.tgb-event-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.tone-root a.tgb-event-card:not([class*="bg-"]) { display: flex; flex-direction: column; gap: 8px; color: var(--c-ink); text-decoration: none; }
.tgb-event-card__media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: var(--c-ink); border-bottom: 4px solid var(--accent); margin-bottom: 8px; }
/* Absolute so the image fills the 16:9 box: height: 100% doesn't resolve inside the grid track */
.tgb-event-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .25s ease; }
.tgb-event-card:hover .tgb-event-card__media img { transform: scale(1.03); }
.tgb-event-card__date { color: var(--c-white); text-align: center; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 15px; line-height: 1; }
.tgb-event-card__date strong { display: block; font-size: 64px; letter-spacing: 0; margin-bottom: 4px; }
.tgb-event-card__when { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; color: var(--c-muted); }
.tgb-event-card__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2vw, 28px); line-height: 1.08; }
.tone-root a.tgb-event-card:not([class*="bg-"]):hover .tgb-event-card__title { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .tgb-event-card__media img { transition: none; } }

/* ---- Home news: every story has an image (placeholder when the article has none) ---- */
.news-item__media { display: block; margin-bottom: 16px; }
.news-item__media img { margin-bottom: 0; }
.news-item__placeholder { display: grid; place-items: center; aspect-ratio: 16 / 9; max-width: 100%; background: var(--c-ink); }
.news-item .news-item__placeholder img { width: 46%; aspect-ratio: auto; object-fit: contain; }

/* ---- News index (Light): three-up grid of stories, same item style as the home page ---- */
.tgb-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 3vw, 44px) clamp(20px, 2.6vw, 36px); }
.tgb-news-grid .news-item { border-left: 0; padding-left: 0; display: flex; flex-direction: column; }
.tgb-news-grid .news-item > p:not(.news-item__cat) { flex: 1 0 auto; }
.tgb-news-grid__edit { margin-top: 10px; }
.tgb-pager { justify-content: center; margin-top: clamp(36px, 4vw, 56px); }

/* ---- Article page (Light) --------------------------------------------------- */
.tgb-article__title { max-width: 22ch; font-size: clamp(36px, 5vw, 72px); }
.tgb-article__lead { max-width: 62ch; margin-top: 18px; }
.tgb-article__lead p { margin: 0; }
.tgb-article__photo { width: 100%; max-width: 100%; height: auto; display: block; border-bottom: 4px solid var(--accent); margin-bottom: clamp(28px, 3vw, 40px); }
.tgb-article__body { max-width: 72ch; font-size: 17px; line-height: 1.65; }
.tgb-article__body .bg-white { border: 0 !important; padding: 0 !important; max-width: none; font-size: inherit; }
.tone-root .tgb-article__body h2, .tone-root .tgb-article__body h3 { margin: 1.6em 0 0.5em; }
.tgb-article__body iframe { max-width: 100%; }
.tgb-article__body div[style*="padding"][style*="position: relative"], .tgb-article__body div[style*="padding-top"] { max-width: 100%; }
.tone-root .tgb-article__body a.btn:not([class*="bg-"]), .tone-root .tgb-article__body .btn { display: inline-block; background: var(--accent); color: #ffffff; border: 0; border-radius: 0; padding: 12px 20px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 15px; text-decoration: none; margin: 4px 0 8px; }
.tone-root .tgb-article__body a.btn:not([class*="bg-"]):hover { background: var(--c-ink); color: #ffffff; }
.tgb-article__back { margin-top: clamp(32px, 4vw, 48px); }
.tgb-article__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tgb-article__media a { display: block; aspect-ratio: 1; max-width: 100%; overflow: hidden; background: var(--c-surface); }
.tgb-article__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Events index (Light): home-page event cards plus place, summary and actions ---- */
.tgb-event-cards--index { row-gap: clamp(36px, 4vw, 56px); }
.tgb-event-cards--index > li { display: flex; flex-direction: column; }
.tgb-event-card__place { font-size: 15px; color: var(--c-ink); font-weight: 600; }
.tgb-event-card__summary { font-size: 15px; line-height: 1.55; color: var(--c-body); }
.tgb-event-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px; }

/* ---- Event page hero (Light): split, poster shown whole on ink --------------- */
.tgb-event-hero__title { font-size: clamp(40px, 5.2vw, 76px); max-width: 16ch; }
.tgb-hero-split__photo--poster { display: grid; place-items: center; padding: clamp(20px, 3vw, 40px); }
.tgb-hero-split__photo--poster img { position: static; width: auto; height: auto; max-width: 100%; max-height: 520px; object-fit: contain; box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
.tone-root .tgb-hero-split a.button--ghost:not([class*="bg-"]) { color: var(--c-white); border-color: var(--c-white); }
.tone-root .tgb-hero-split a.button--ghost:not([class*="bg-"]):hover { background: var(--c-white); color: var(--c-ink); }

/* ---- Squad index (Light): one card per squad, riders on the squad page ------ */
.tgb-squad-cards { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.tone-root a.tgb-squad-card:not([class*="bg-"]) { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px; border: 1px solid var(--c-card-border); border-top: 4px solid var(--accent); background: var(--c-white); color: var(--c-ink); text-decoration: none; }
.tone-root a.tgb-squad-card:not([class*="bg-"]):hover { border-color: var(--c-ink); border-top-color: var(--accent); }
.tgb-squad-card__meta { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; color: var(--accent); }
.tgb-squad-card__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; }
.tgb-squad-card__desc { font-size: 15px; line-height: 1.55; color: var(--c-body); }
.tgb-squad-card__faces { display: flex; align-items: center; margin-top: auto; padding-top: 8px; }
.tgb-squad-card__faces > * { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--c-white); margin-left: -10px; flex: 0 0 auto; object-fit: cover; }
.tgb-squad-card__faces > :first-child { margin-left: 0; }
.tgb-squad-card__initials, .tgb-squad-card__more { display: grid; place-items: center; background: var(--c-ink); color: var(--c-white); font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.tgb-squad-card__more { background: var(--accent); }

/* ---- Media index (Light): filter row + square tiles ------------------------- */
.tgb-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; }
.tgb-filters__field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 180px; min-width: 0; }
.tgb-filters__field--wide { flex: 2 1 280px; }
.tgb-filters__field--narrow { flex: 0 0 110px; }
.tgb-filters__field > span { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; color: var(--c-ink); }
/* appearance: none so Safari drops its rounded native control; the chevron is drawn in navy (#101d33 = --c-ink). */
.tgb-filters select { -webkit-appearance: none; appearance: none; width: 100%; border: 1px solid var(--c-line-strong, var(--c-line)); border-radius: 0; color: var(--c-ink); font: inherit; font-size: 15px; padding: 10px 40px 10px 12px; cursor: pointer;
  background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23101d33' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; }
.tgb-filters select:hover { border-color: var(--c-ink); }
.tgb-filters select:focus { outline: var(--focus); outline-offset: 0; }
.tgb-filters__clear { padding-bottom: 12px; }
.tgb-media-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.tone-root a.tgb-media-tile:not([class*="bg-"]) { display: flex; flex-direction: column; gap: 10px; color: var(--c-ink); text-decoration: none; }
.tgb-media-tile__img { position: relative; display: block; aspect-ratio: 1; max-width: 100%; overflow: hidden; background: var(--c-ink); border-bottom: 4px solid var(--accent); }
.tgb-media-tile__img::before { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.35); font-size: 40px; }
.tgb-media-tile__img img { position: relative; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.tgb-media-tile:hover .tgb-media-tile__img img { transform: scale(1.04); }
.tgb-media-tile__badge { position: absolute; left: 10px; bottom: 10px; background: var(--c-ink); color: var(--c-white); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; padding: 4px 8px; }
.tgb-media-tile__title { font-size: 14.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tone-root a.tgb-media-tile:not([class*="bg-"]):hover .tgb-media-tile__title { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .tgb-media-tile__img img { transition: none; } }

/* ---- Media item (Light): ink stage + aside ----------------------------------- */
.tgb-media-detail__title { font-size: clamp(34px, 4.4vw, 64px); max-width: 24ch; }
.tgb-media-stage { background: var(--c-ink); display: flex; justify-content: center; align-items: center; border-bottom: 4px solid var(--accent); }
.tgb-media-stage video { display: block; width: auto !important; max-width: 100%; max-height: 78vh; }
.tgb-media-stage--photo { background: transparent; }
.tgb-media-stage--photo img { display: block; width: 100%; height: auto; }
.tgb-media-stage__embed { display: block; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; border: 0; }
.tgb-media-stage__embed--doc { aspect-ratio: auto; height: 75vh; background: var(--c-white); }
.tgb-media-riders { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.tgb-media-rider { display: inline-flex; align-items: center; gap: 6px; }
.tgb-media-rider > a, .tgb-media-rider > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.tgb-media-rider img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.tgb-media-rider form { margin: 0; }
.tgb-media-rider__remove { border: 0; background: var(--c-surface); color: var(--c-red); width: 24px; height: 24px; cursor: pointer; font-size: 16px; line-height: 1; }
.tgb-media-admin { display: flex; flex-wrap: wrap; gap: 10px; }
.tgb-media-admin form { margin: 0; }
.tone-root .tgb-media-admin__delete { color: var(--c-red); border-color: var(--c-red); background: transparent; cursor: pointer; }

/* ---- Place page (Light) ------------------------------------------------------- */
.tgb-place-map { display: block; margin-top: 18px; }
.tgb-place-map img { display: block; width: 100%; height: auto; border-bottom: 4px solid var(--accent); }

/* ---- Rider registrations (Light): one expandable card per entry ---------------- */
.tgb-count { margin: 0 0 16px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; color: var(--c-muted); }
.tgb-regs { display: flex; flex-direction: column; gap: 18px; }
.tgb-reg { background: var(--c-white); border: 1px solid var(--c-card-border); border-left: 6px solid var(--c-ink); }
.tgb-reg--due { border-left-color: var(--c-red); }
.tgb-reg__summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; padding: 22px 24px; }
.tgb-reg__summary::-webkit-details-marker { display: none; }
.tgb-reg__summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.tgb-reg__event .eyebrow { margin: 0 0 6px; }
.tgb-reg__title { margin: 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; }
.tgb-reg__summary:hover .tgb-reg__title { color: var(--accent); }
.tgb-reg__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; color: var(--c-muted); font-size: 15px; }
.tgb-reg__money { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 26px; margin: 0; align-self: center; text-align: right; }
.tgb-reg__money dt { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; color: var(--c-muted); }
.tgb-reg__money dd { margin: 2px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--c-ink); }
.tgb-reg--due .tgb-reg__owed dd { color: var(--c-red); }
.tgb-reg__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--c-line); }
.tag.tgb-reg__tag--due { background: var(--c-red); color: var(--c-white); }
.tgb-reg__toggle { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; color: var(--c-ink); }
.tgb-reg__toggle::after { content: " ▾"; }
.tgb-reg details[open] .tgb-reg__toggle::after { content: " ▴"; }
.tgb-reg__body { padding: 22px 24px 24px; background: var(--c-surface); border-top: 1px solid var(--c-line); }
.tgb-reg__panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 20px; align-items: start; }
.tgb-reg__panels .tgb-panel__row span { color: var(--c-muted); }
.tgb-reg__value { text-align: right; white-space: pre-line; overflow-wrap: anywhere; }
.tgb-reg__total { border-top: 2px solid var(--c-ink); }
.tgb-reg__total--due strong { color: var(--c-red); }
.tgb-reg__pay { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 14px 24px; background: var(--c-notice-bg); border-top: 1px solid var(--c-notice-border); color: var(--c-notice-text); font-weight: 700; }
@media (max-width: 860px) {
  .tgb-reg__summary { grid-template-columns: 1fr; }
  .tgb-reg__money { grid-template-columns: repeat(2, auto); justify-content: start; text-align: left; }
}

/* ---- Team-manager-only content (ResultsAccess): light blue so it's obvious what the public can't see ---------- */
:root { --private-bg: #e7f1fb; --private-edge: #9cc3e8; --private-ink: #1d4f80; }
.tgb-private { margin-top: 56px; padding: 20px 24px 24px; background: var(--private-bg); border: 1px solid var(--private-edge); border-left: 6px solid var(--private-ink); }
.tgb-private > .section-head { margin-top: 0; }
.tone-root .section.tgb-private-section { background: var(--private-bg); border-top: 4px solid var(--private-ink); }
.tgb-private__label {
  display: inline-block; margin: 0 0 16px; padding: 4px 10px; background: var(--private-ink); color: var(--c-white);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px;
}
.tone-root a.tgb-private-link:not([class*="bg-"]) { background: var(--private-bg); color: var(--private-ink); padding: 4px 10px; border: 1px solid var(--private-edge); }
.tgb-private-section .tile--surface, .tgb-private .tgb-table-wrap { background: var(--c-white); }

/* ---- Admin-only controls: light green, the counterpart to the team-manager blue above ----------------------- */
:root { --admin-bg: #e8f5ea; --admin-edge: #9fd3a8; --admin-ink: #1f6b33; }
.tgb-admin-strip { background: var(--admin-bg); border-top: 4px solid var(--admin-ink); border-bottom: 1px solid var(--admin-edge); }
.tgb-admin-strip__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-block: 16px; }
.tgb-admin-strip__inner .tgb-admin__label { margin: 0; }
.tgb-admin-strip__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tgb-admin { margin-top: 32px; padding: 20px 24px 24px; background: var(--admin-bg); border: 1px solid var(--admin-edge); border-left: 6px solid var(--admin-ink); }
.tgb-admin__label {
  display: inline-block; margin: 0 0 16px; padding: 4px 10px; background: var(--admin-ink); color: #ffffff;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px;
}
.tgb-split__aside .tgb-admin { margin-top: 0; }
.tone-root .section.tgb-admin-section { background: var(--admin-bg); border-top: 4px solid var(--admin-ink); }
.tgb-admin-section .tgb-admin__label + .section-head { margin-top: 0; }
.tgb-admin-section .results { background: #ffffff; }
/* Admin links on cards (Edit, Delete): a small green chip so they read apart from the public links. */
.tgb-admin-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 4px 10px; background: var(--admin-bg); border: 1px solid var(--admin-edge); font-size: 14px; }
.tgb-admin-inline__label { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: var(--admin-ink); }
.tone-root .tgb-admin-inline a:not([class*="bg-"]) { color: var(--admin-ink); font-weight: 600; }
.footer .tgb-orgswitch { padding: 12px 14px; background: var(--admin-bg); border: 1px solid var(--admin-edge); color: var(--admin-ink); }
.footer .tgb-orgswitch .tgb-admin__label { margin: 0 10px 0 0; }
.footer .tgb-orgswitch button { border-color: var(--admin-edge); color: var(--admin-ink); background: #ffffff; }

/* ---- Light forms (rider profile and later editors): stacked fields, square inputs ------------------------------ */
.tgb-form { display: flex; flex-direction: column; gap: 24px; }
.tgb-form__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.tgb-form__field:last-child { margin-bottom: 0; }
.tone-root .tgb-form label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; color: var(--c-ink); margin: 0; }
.tone-root .tgb-form input:not([type="hidden"]), .tone-root .tgb-form select {
  width: 100%; border: 1px solid var(--c-line-strong); border-radius: 0; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--c-ink); background: var(--c-white); box-shadow: none;
}
.tone-root .tgb-form select[multiple] { padding: 6px; min-height: 220px; }
.tone-root .tgb-form select[multiple] option { padding: 6px 8px; }
.tone-root .tgb-form input:focus, .tone-root .tgb-form select:focus { outline: var(--focus); outline-offset: 0; border-color: var(--c-ink); }
.tgb-form__prefixed { display: flex; }
.tgb-form__prefixed span { display: grid; place-items: center; padding: 0 14px; background: var(--c-surface); border: 1px solid var(--c-line-strong); border-right: 0; color: var(--c-muted); font-weight: 700; }
.tgb-form__hint { margin: 10px 0 0; font-size: 14px; color: var(--c-muted); }
.tone-root .tgb-form__error { color: var(--c-red); font-size: 14px; }
.tgb-form__error ul { margin: 0; padding-left: 18px; }
.tgb-form__readonly { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; margin: 0; }
.tgb-form__readonly dt { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; color: var(--c-muted); }
.tgb-form__readonly dd { margin: 4px 0 0; font-size: 17px; color: var(--c-ink); overflow-wrap: anywhere; }
/* Rider profile editor: Public and Private groups. Private uses the amber notice tokens so it reads apart at a glance. */
.tgb-vis-head { margin: 8px 0 -4px; padding-left: 14px; border-left: 4px solid var(--c-ink); }
.tgb-vis-head h2 { margin: 0; font-size: 26px; color: var(--c-ink); }
.tgb-vis-head p { margin: 4px 0 0; font-size: 15px; color: var(--c-body); }
.tgb-vis-head--private { margin-top: 24px; border-left-color: var(--c-notice-border); }
.tgb-vis-head--private h2 { color: var(--c-notice-text); }
.tgb-panel--private { background: var(--c-notice-bg); border-color: var(--c-notice-border); border-top-color: var(--c-notice-border); }
.tgb-panel--private .eyebrow, .tgb-panel--private .tgb-form__readonly dt, .tgb-panel--private .tgb-form__hint, .tgb-panel--private label { color: var(--c-notice-text); }
.tgb-vis { display: inline-block; margin-left: 8px; padding: 2px 8px; font-size: 11px; letter-spacing: 0.08em; vertical-align: 2px; border: 1px solid currentColor; }
.tgb-vis--public { color: var(--c-ink); }
.tgb-vis--private { color: var(--c-notice-text); background: #ffe9a8; border-color: var(--c-notice-border); }
.tgb-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.tgb-picker .tgb-form__field { margin: 0; }
.tgb-picker__moves { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 640px) { .tgb-picker { grid-template-columns: 1fr; } .tgb-picker__moves { flex-direction: row; } }
.tgb-profile-photo { display: block; width: 100%; height: auto; border-bottom: 4px solid var(--accent); }

/* Tricks (external, wakeboard.com) sits at the far right of the menu, against the "Enter an event" button */
.tgb-menu__nav > a.tgb-menu__end { margin-left: auto; }
.tgb-menu__end ~ .tgb-menu__cta { margin-left: 0; }
@media (max-width: 1000px) { .tgb-menu__nav > a.tgb-menu__end { margin-left: 0; } }

/* ---- Coach dashboard (Light) --------------------------------------------- */
.tgb-coach-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.tgb-coach-card { display: flex; flex-direction: column; gap: 18px; }
.tgb-coach-card__head { display: flex; align-items: center; gap: 16px; }
.tgb-coach-card__initials { flex: none; width: 56px; height: 56px; display: grid; place-items: center; background: var(--c-ink); color: var(--c-white); font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.tgb-coach-card__name { margin: 0 0 6px; font-size: 24px; line-height: 1.05; }
.tone-root .tgb-coach-card__name a:not([class*="bg-"]) { color: var(--c-ink); text-decoration: none; }
.tone-root .tgb-coach-card__name a:not([class*="bg-"]):hover { color: var(--accent); }
.tgb-coach-card__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.tgb-coach-card__stats > div { padding: 12px 0 12px 12px; }
.tgb-coach-card__stats > div:first-child { padding-left: 0; }
.tgb-coach-card__stats > div + div { border-left: 1px solid var(--c-line); }
.tgb-coach-card__stats dt { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; color: var(--c-muted); }
.tgb-coach-card__stats dd { margin: 4px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; color: var(--c-ink); }
.tgb-coach-card .tgb-form__hint { margin: -6px 0 0; }
.tgb-coach-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: auto; }