/* ============================================================
   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: break-word; }
.podium-lap { padding: 8px 14px 8px 0; text-align: right; }
.podium-lap .tower-time { font-size: 1.2rem; }
/* Three across needs about 320px a block, or the lap column squeezes the
   name to a word a line. Below that the podium stacks into full-width bars,
   which read like the tower under them. */
@media (max-width: 1099px) {
  .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; }
}

/* ============================================================
   Phase 3: the member profile, plus the small pieces the home page
   and the activity feed share with it. Built on the pieces above.
   ============================================================ */

/* A track on one line and the car under it, in place of one long
   "Track · Layout · Car" string. Used in plain tables too. */
.cell-main { display: block; color: var(--ink); font-weight: 500; }
.cell-sub { display: block; margin-top: 1px; font-size: 0.82rem; color: var(--ink-faint); }
a.cell-main:hover, a.cell-sub:hover { color: var(--accent); }

/* ---------- member hero ---------- */
.member-hero-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.member-hero-photo { width: 56px; height: 56px; object-fit: cover; border-radius: 2px; }
.member-hero-note { margin-top: 6px; font-size: 0.85rem; color: #c3c8cf; }

/* Section jumps on the left, the member's own links on the right. */
.member-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding-block: 10px;
  border-bottom: 1px solid var(--edge);
}
.member-bar .profile-jumps { margin: 0; padding: 0; border: 0; }
.member-bar-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.member-series { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 12px; font-size: 0.92rem; color: var(--ink-muted); }
.member-series a { margin-right: 6px; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: #fff; }
.member-series a:hover { color: var(--accent); }

.member-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin: 30px 0 10px; }
.member-head-note { font-size: 0.95rem; color: var(--ink-faint); }
.member-head > a { font-size: 0.9rem; }

/* Personal bests on the left, the two charts on the right. */
.member-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.member-split.is-single { grid-template-columns: minmax(0, 1fr); }
.member-charts { display: grid; gap: 4px; margin-top: 30px; }
@media (max-width: 1023px) {
  .member-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* The filter row: compact, square, normal-case labels. */
.profile-filter { padding-block: 12px; }
.profile-filter .field-sm { background: var(--surface); }
.profile-filter .date-range-label { font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
.profile-filter .date-chip { min-height: 2rem; padding: 2px 8px; border-radius: 2px; background: var(--surface); }
.profile-filter-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ink-muted); }
.profile-filter-clear { font-size: 0.85rem; }

/* The profile's tables: dark bars without the card frame, tighter rows. */
.member-body .timing-table { border: 0; border-radius: 0; box-shadow: none; background: #101216; }
.member-body .timing-table thead th { padding: 8px 12px; background: transparent; font-family: var(--font-text); font-weight: 500; font-size: 0.8rem; }
.member-body .timing-table tbody td { padding: 8px 12px; }
.member-body .profile-disclosure { border-radius: 0; background: transparent; }
.member-body .profile-disclosure > summary h2 { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.5rem; }
.member-body .profile-disclosure .tower { padding: 8px; }

/* ---------- personal bests as a tower ---------- */
.tower-bests tbody td { height: 56px; }
.tower-bests .tower-pos { font-size: 1.15rem; }
.tower-bests .tower-pos .rank { font-size: inherit; font-weight: inherit; color: inherit; }
.tower-combo { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.1; color: #fff; }
.tower-bests .tower-time { font-size: 1.25rem; }
.tower-chips { display: block; margin-top: 2px; text-align: right; white-space: nowrap; }
.tower-chips .chip { margin-left: 4px; }
.tower-quiet { font-family: var(--font-text); font-size: 0.85rem; color: var(--ink-faint); cursor: help; }
.tower-bests td[data-cell="gap"] .tower-sub { margin-top: 0; text-align: right; }
.tower-bests td[data-cell="meta"] { display: none; }
.tower-bests td[data-cell="actions"] > * + * { margin-left: 10px; }
/* The setup status is on the board and the lap itself; here it only
   crowded the track name. */
.tower-bests td[data-cell="actions"] .chip-setup { display: none; }
@media (max-width: 640px) {
  .tower-bests .tower-pos { font-size: 1rem; }
  .tower-bests tbody td[data-cell="actions"] { min-width: 0; white-space: normal; line-height: 1.6; }
  .tower-bests td[data-cell="actions"] > * + * { margin-left: 8px; }
  .tower-chips { text-align: left; }

  /* Stacked tables on the profile: quiet normal-case labels, tight rows. */
  .member-body .timing-stack tbody tr { padding: 10px 12px; }
  .member-body .timing-stack tbody td { padding: 1px 0; }
  .member-body .timing-stack td[data-th]::before {
    min-width: 4.75rem;
    font-family: var(--font-text);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: top;
  }
  /* The track and car need no label: they lead the stacked row. */
  .member-body .timing-stack td[data-th="Combo"]::before, .member-body .timing-stack td[data-th="Race"]::before { display: none; }
  .member-body .timing-stack td[data-th="Combo"], .member-body .timing-stack td[data-th="Race"] { padding-block: 4px; }
  .tower-bests tbody td { height: auto; }
  .tower-bests td[data-cell="head"] { padding-bottom: 4px; }
}

/* ---------- the two profile and passport charts ---------- */
.chart-panel { min-width: 0; padding: 16px 18px; background: #101216; }
.chart-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.1;
  color: #fff;
}
/* theme.css loads after this file, so these carry the panel's class. */
.chart-panel .chart-tip { border-radius: 2px; }
.chart-panel .chart-tip-title { font-family: var(--font-text); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; text-transform: none; }