/* ============================================================
   Broadcast pieces: the restyle's shared components (tags, the filter
   bar and its menus, the segmented control, the photo hero, the timing
   tower). Started on the boards, reused by the pages that follow.
   Square corners throughout: no slants, no skew, no chrome type.
   Tokens (--accent, --fastest, --font-display ...) live in theme.css.
   ============================================================ */

/* A square tag: "Shop record", "12 cars". Green with dark ink, or dark. */
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 2px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  white-space: nowrap;
}
.tag-dark { background: #1d2128; color: #fff; }

/* Big page title. */
.page-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 0.95;
  color: #fff;
}

/* ---------- filter bar and its menus ---------- */
/* One row of compact controls: a search box, dropdown menus, and a
   segmented control pushed to the right. Wraps on a phone. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 14px;
  border-bottom: 1px solid var(--edge);
}
.filter-bar > .seg { margin-left: auto; }

/* A menu is a details element whose summary shows the current choice and
   whose panel holds plain links, so it works with JavaScript off. The
   filter-menu controller closes it on Escape, on an outside click, and
   when another menu opens. */
.menu { position: relative; }
.menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 2.25rem;
  padding: 6px 12px;
  border: 1px solid var(--edge-strong);
  border-radius: 3px;
  background: var(--surface);
  color: #d6dae0;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after {
  content: "";
  border: 4px solid transparent;
  border-top-color: var(--ink-muted);
  transform: translateY(2px);
}
.menu > summary:hover, .menu[open] > summary { border-color: var(--ink-faint); color: #fff; }
.menu > summary.is-set { border-color: var(--accent-edge); color: #fff; }
.menu-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 30;
  display: grid;
  gap: 2px;
  min-width: 13rem;
  max-width: min(20rem, calc(100vw - 2.5rem));
  padding: 6px;
  border: 1px solid var(--edge-strong);
  border-radius: 3px;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.menu-group + .menu-group { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--edge); }
.menu-heading { padding: 2px 8px 4px; font-size: 0.8rem; color: var(--ink-faint); }
.menu-note { padding: 4px 8px 2px; font-size: 0.8rem; line-height: 1.4; color: var(--ink-faint); white-space: normal; }
.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 4px 8px 4px 22px;
  border-radius: 2px;
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.menu-item:hover { background: var(--surface-2); color: var(--ink); }
.menu-item:focus-visible { outline-offset: -2px; }
.menu-item[aria-current] { color: #fff; }
.menu-item[aria-current]::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: var(--accent);
}
/* In place of a menu when there is only one choice. */
.menu-static {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 6px 12px;
  border: 1px solid var(--edge);
  border-radius: 3px;
  font-size: 0.9rem;
  color: var(--ink-muted);
}
@media (max-width: 640px) {
  /* A phone has no room for a panel hanging off a button near the right
     edge: the open panel spans the screen under its row instead. */
  .menu { position: static; }
  .filter-bar { position: relative; }
  .menu-panel { left: 0; right: 0; max-width: none; }
  .filter-search { flex: 1 1 100%; }
  .filter-search .field { width: 100%; }
}

.filter-search { display: flex; align-items: center; gap: 6px; min-width: 0; }
.filter-search .field { width: 14rem; max-width: 100%; min-height: 2.25rem; padding-block: 6px; background: var(--surface); }

/* Segmented control: two to four plain links, the current one filled. */
.seg {
  display: inline-flex;
  max-width: 100%;
  border: 1px solid var(--edge-strong);
  border-radius: 3px;
  overflow: hidden;
  font-size: 0.875rem;
}
.seg a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 6px 12px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.seg a + a { border-left: 1px solid var(--edge-strong); }
.seg a:hover { color: var(--ink); }
.seg a[aria-current] { background: #1d2128; color: #fff; }
.seg a:focus-visible { outline-offset: -2px; }

/* ---------- photo hero ---------- */
/* A track photo across the page: title on the left, a record on the
   right, dark gradient at both edges. Stacks on a phone. */
.photo-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 290px;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: 3px;
}
.photo-hero-img, .photo-hero-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 9, 11, .96) 0%, rgba(8, 9, 11, .72) 42%, rgba(8, 9, 11, .5) 68%, rgba(8, 9, 11, .92) 100%);
}
.photo-hero-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px 32px;
  width: 100%;
  padding: 28px 32px 24px;
}
.photo-hero-title { flex: 1 1 22rem; min-width: 0; }
.photo-hero-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  line-height: 0.92;
  color: #fff;
  overflow-wrap: anywhere;
}
.photo-hero-name a:hover { color: var(--accent); }
.photo-hero-sub { margin-top: 10px; font-size: 1.05rem; line-height: 1.5; color: #c3c8cf; }
.photo-hero-sub b, .photo-hero-sub strong { color: #fff; font-weight: 600; }
.photo-hero-sub .chip { margin-left: 6px; vertical-align: 2px; }
.photo-hero-record { margin-left: auto; text-align: right; }
.record-time {
  margin-top: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 4.6rem);
  line-height: 0.88;
  font-variant-numeric: tabular-nums lining-nums;
  color: #fff;
}
.record-who { margin-top: 6px; font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.15; color: #fff; }
.record-who a:hover { color: var(--accent); }
.record-note { margin-top: 2px; font-size: 0.92rem; color: #c3c8cf; }
@media (max-width: 640px) {
  .photo-hero { min-height: 0; border-radius: 0; margin-inline: -1.25rem; }
  .photo-hero::after { background: linear-gradient(0deg, rgba(8, 9, 11, .97) 0%, rgba(8, 9, 11, .85) 55%, rgba(8, 9, 11, .3) 100%); }
  .photo-hero-in { padding: 110px 20px 20px; }
  .photo-hero-record { margin-left: 0; text-align: left; }
  .record-time { margin-top: 8px; }
}

/* ---------- timing tower ---------- */
/* A ranked board as separate dark bars: square position block (green for
   P1), driver, time (purple for the fastest), gap, then the lap's links.
   Still a table underneath, so screen readers get rows and headers. */
.tower { position: relative; }
.tower table { width: 100%; border-collapse: separate; border-spacing: 0 4px; margin-block: -4px; }
.tower thead th {
  padding: 0 12px 2px;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-faint);
}
.tower thead th.tower-num { text-align: right; }
.tower tbody td {
  height: 52px;
  padding: 4px 12px;
  background: #101216;
  vertical-align: middle;
}
.tower tbody tr:hover td { background: #14171c; }
.tower tbody td[data-cell="lead"] { width: 54px; padding: 0; }
.tower tbody td[data-cell="actions"] { padding-right: 16px; text-align: right; white-space: nowrap; font-size: 0.85rem; }
.tower-pos {
  display: grid;
  place-items: center;
  width: 54px;
  min-height: 52px;
  height: 100%;
  background: #1b1f26;
  border-right: 1px solid var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.tower tr.row-p1 .tower-pos { background: var(--accent); color: var(--accent-ink); border-right-color: transparent; }
.tower-driver { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.1; color: #fff; }
.tower-driver:hover { color: var(--accent); }
.tower td[data-cell="head"] { overflow-wrap: anywhere; }
.tower td[data-cell="head"] .chip { vertical-align: 3px; margin-left: 4px; }
.tower-time {
  display: block;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  color: #fff;
}
.tower-time.is-fastest { color: var(--fastest); }
.tower td[data-cell="gap"] {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  white-space: nowrap;
}
.tower td[data-cell="meta"] { font-size: 0.85rem; }
/* Row links stay quiet: the bar is the content, the links are on the side. */
.tower td[data-cell="actions"] .btn {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.tower td[data-cell="actions"] .btn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.tower .board-lap-details summary { padding: 0; font-size: 0.85rem; }
.tower tbody tr.tower-empty td { height: auto; padding: 16px; color: var(--ink-faint); }
.tower tr.row-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Colour key under a board. */
.board-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 0.82rem; color: var(--ink-faint); }
.board-key i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }

/* The line under a board: who is chasing, and the way onto a rig. */
.board-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 22px;
  color: var(--ink-muted);
  font-size: 0.95rem;
}
.board-foot b { color: #fff; font-weight: 600; }
.board-foot .btn { margin-left: auto; padding: 9px 16px; }

@media (max-width: 640px) {
  /* Phones: position, driver and time on the first line, the lap's link and
     the gap under them. Lap details drop out; the row opens the lap. */
  .tower thead { display: none; }
  .tower table, .tower tbody { display: block; margin: 0; }
  .tower tbody tr {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "pos name time" "pos act gap";
    align-items: center;
    margin-bottom: 4px;
    background: #101216;
  }
  .tower tbody td { display: block; height: auto; padding: 2px 10px; background: transparent; }
  .tower tbody tr:hover td { background: transparent; }
  .tower tbody td[data-cell="lead"] { grid-area: pos; width: 44px; padding: 0; align-self: stretch; }
  .tower-pos { width: 44px; min-height: 58px; font-size: 1.3rem; }
  .tower td[data-cell="head"] { grid-area: name; padding-top: 8px; }
  .tower td[data-cell="time"] { grid-area: time; padding-top: 8px; }
  .tower td[data-cell="gap"] { grid-area: gap; padding-bottom: 8px; font-size: 0.95rem; }
  .tower tbody td[data-cell="actions"] { grid-area: act; text-align: left; padding: 0 10px 8px; }
  .tower td[data-cell="meta"] { display: none; }
  .tower-driver { font-size: 1.2rem; }
  .tower-time { font-size: 1.3rem; }
  .tower tbody tr.tower-empty { display: block; }
  .board-foot .btn { margin-left: 0; }
}

/* ============================================================
   Phase 2: the challenge page, the race result, and the track heroes.
   Built from the pieces above; only what they did not already cover.
   ============================================================ */

/* A tag that is a link (a series round, a heat). */
a.tag:hover { background: var(--accent-hover); }
a.tag-dark:hover { background: #2a3039; color: #fff; }
a.tag:focus-visible { outline-offset: 2px; }

/* A section heading on the restyled pages: condensed italic, solid ink. */
.section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.1;
  color: #fff;
}

/* A quiet underlined link in running text ("Full rules"). */
.link-underline {
  color: #c3c8cf;
  text-decoration: underline;
  text-decoration-color: #3a414c;
  text-underline-offset: 3px;
}
.link-underline:hover { color: #fff; text-decoration-color: var(--ink-faint); }

/* ---------- hero variants ---------- */
/* A competition's own name is longer than a track's: a size down. */
.photo-hero-name-m { font-size: clamp(2.2rem, 5.5vw, 3.4rem); }
.photo-hero-sub a:hover { color: var(--accent); }
.record-time.is-fastest { color: var(--fastest); }
/* A name where the time would be (a race winner). */
.record-time.is-name {
  font-size: clamp(2.3rem, 6vw, 3.6rem);
  line-height: 0.95;
  font-variant-numeric: normal;
  overflow-wrap: anywhere;
}
.record-time a:hover { color: var(--accent); }

/* ---------- a menu that holds text, not links (a challenge's rules) ---------- */
.menu-wrap > summary { white-space: normal; text-align: left; }
.menu-panel-wide { width: min(34rem, calc(100vw - 2.5rem)); max-width: none; }
.rules-list { display: grid; gap: 6px; padding: 6px 10px 8px; font-size: 0.9rem; line-height: 1.45; color: var(--ink-muted); }
.rules-list li { position: relative; padding-left: 14px; }
.rules-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; background: var(--ink-faint); }

/* ---------- tower additions ---------- */
/* Small second line under a driver: "12 laps", "#7, from pole". */
.tower-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--font-text);
  font-style: normal;
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--ink-faint);
}
.tower td.tower-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-muted); white-space: nowrap; }
.tower td[data-cell="points"] {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: #fff;
  white-space: nowrap;
}
.tower td[data-cell="points"].is-zero { color: var(--ink-faint); }
.tower-unit { display: none; }
/* The setup chip beside a row's telemetry link: a word, not a badge. */
.tower td[data-cell="actions"] .chip-setup {
  padding: 0;
  margin-right: 10px;
  border: 0;
  background: none;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.tower td[data-cell="actions"] .chip-setup:hover { color: var(--ink); }
.tower td[data-cell="num"] {
  width: 60px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink-faint);
  white-space: nowrap;
}
.tower td[data-cell="delta"] { width: 64px; text-align: center; }
.race-delta { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink-faint); white-space: nowrap; }
.race-delta.is-up { color: var(--pb); }
.race-delta.is-down { color: var(--danger); }
.tower-race .tower-time { font-size: 1.2rem; }
.recounted { margin-left: 3px; color: var(--ink-muted); cursor: help; }

/* The member's own line on a challenge: a plain dark bar. */
.status-strip { display: block; padding: 14px 18px; background: #101216; }
.status-strip-label { font-family: var(--font-text); font-style: normal; font-weight: 500; font-size: 0.85rem; color: var(--ink-faint); }
.status-strip-line { margin-top: 4px; font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; line-height: 1.15; color: #fff; }

/* ---------- race result ---------- */
.race-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 16px 0 18px;
  padding-block: 14px;
  border-bottom: 1px solid var(--edge);
}
.race-heats { display: flex; flex-wrap: wrap; gap: 6px; }
.race-bar-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: auto; font-size: 0.92rem; }

/* The first three as blocks across the page, P1's block green. */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 18px; }
.podium-step { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; min-height: 66px; background: #101216; }
.podium-step .tower-pos { min-height: 66px; }
.podium-step.row-p1 .tower-pos { background: var(--accent); color: var(--accent-ink); border-right-color: transparent; }
.podium-who { min-width: 0; padding: 8px 12px; overflow-wrap: anywhere; }
.podium-lap { padding: 8px 14px 8px 0; text-align: right; }
.podium-lap .tower-time { font-size: 1.2rem; }
@media (max-width: 900px) {
  .podium { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

.race-reel { margin-top: 32px; }

/* Staff-only controls: set apart by a dashed edge, quiet type. */
.staff-strip {
  display: grid;
  gap: 10px;
  margin-top: 28px;
  padding: 12px 16px;
  border: 1px dashed var(--edge-strong);
  border-radius: 3px;
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.staff-strip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.staff-strip-label { color: var(--ink-faint); }

@media (max-width: 640px) {
  /* A challenge row: points take the gap's place on the second line. */
  .tower-points tbody tr { grid-template-areas: "pos name time" "pos act points"; }
  .tower-points td[data-cell="gap"] { display: none; }
  .tower-points td[data-cell="points"] { grid-area: points; padding-bottom: 8px; font-size: 1rem; }
  .tower-unit { display: inline; font-family: var(--font-text); font-size: 0.8rem; font-weight: 500; color: var(--ink-faint); }

  /* A race row: number under the name, places gained beside the lap. */
  .tower-race tbody tr {
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    grid-template-areas: "pos name delta time" "pos num num gap";
  }
  .tower-race td[data-cell="num"] { grid-area: num; width: auto; padding: 0 10px 8px; text-align: left; font-size: 0.95rem; }
  .tower-race td[data-cell="delta"] { grid-area: delta; width: auto; padding-top: 8px; }

  .race-bar-links { margin-left: 0; }
  .podium-step { grid-template-columns: 44px minmax(0, 1fr) auto; min-height: 58px; }
  .podium-step .tower-pos { width: 44px; min-height: 58px; font-size: 1.3rem; }
}