/* Ace Timing — RR-parity public results page (G2-4).
   Anatomy mirrors my.raceresult.com/<id> (REVIEW §4.1–4.3) and
   design/mockups/results-list.html. Tokens come from css/tokens.css only;
   no literal colours except RR's own #303099 back-link ink (REVIEW §4.3).
   Icons are inline SVG — no emoji (programme rule). */

[hidden] { display: none !important; }

.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--s-4); box-sizing: border-box; }

/* R5-table / finding #8 — the results table is exactly --table-max (1127px)
   wide at 1280. Its scroll container sits inside `.wrap`, whose border-box max
   is 1150px: 1150 - 2×16 padding = 1118px of content, so the table could never
   reach 1127 and the old `<= 1127` assertion could not see it. The container is
   therefore widened so that, once `.wrap`'s own padding is subtracted, the
   content column is exactly --table-max. `max-width: none` releases the
   1127px cap `.table-wrap` used to carry (it is the SCROLL container, not the
   table — capping it would clip the pagination/print width at 390 too).

   DESKTOP ONLY (min-width: 1150px): below --content-max the container must stay
   width:auto, because a fixed 1159px width at 390 forces the whole document to
   1159px (R6 regression — the page scrolled sideways). At <1150 the table
   already fits the content column, so no widening is needed. */
.table-wrap { overflow-x: auto; max-width: none; }

@media (min-width: 1150px) {
  .table-wrap {
    width: calc(var(--table-max) + 2 * var(--s-4));
    margin-inline: calc(-1 * var(--s-4));
  }
}
table.rr { width: 100%; max-width: var(--table-max); border-collapse: collapse; font-size: 14.5px; background: var(--surface); }

/* top bar 50px: Ace wordmark left, language right */
.top { background: var(--dark); color: #fff; height: 50px; display: flex; align-items: center; }
.top .wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; font-weight: 700; letter-spacing: .04em; }
.top .brand { color: #fff; text-decoration: none; }
.top .lang { font-weight: 400; font-size: 13px; color: rgba(255,255,255,.85); }

/* banner ≈220px; R1: with no banner image the slab is removed entirely
   (the element is [hidden]) and .ehead loses its negative overlap so the
   compact header sits at the top of the page. */
.banner { height: 220px; background: var(--dark-2); position: relative; overflow: hidden; }
.banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner[hidden] { display: none; }

/* event header: 150x150 logo card overlapping the banner bottom-left */
.ehead { display: grid; grid-template-columns: 150px 1fr; gap: var(--s-6); align-items: end; margin-top: -60px; padding-bottom: var(--s-4); }
/* no banner → no overlap (R1 compact header) */
.ehead.no-banner { margin-top: var(--s-6); }
.elogo { width: 150px; height: 150px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card); display: grid; place-items: center; color: var(--muted); font-size: 12px; overflow: hidden; }
.elogo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.elogo .monogram { font-family: var(--font-num); font-weight: 700; font-size: 40px; color: var(--ink); }
.emeta { color: var(--ink-soft); font-size: var(--fs-table); margin-bottom: var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.emeta .mi { display: inline-flex; align-items: center; gap: 4px; }
.emeta svg { width: 14px; height: 14px; fill: currentColor; }
.ehead h1 { font-size: 1.6rem; font-weight: 400; margin: 0; overflow-wrap: anywhere; }

/* tab bar: 2px #eee bottom border; selected = bold + 2px rr-tab underline.
   Tab TEXT uses --link (AA) while --rr-tab stays the RR blue underline —
   #01A3EE as 16.5px text on white fails WCAG AA (contrast 2.6:1). */
.tabs { display: flex; border-bottom: 2px solid var(--line); background: var(--surface); overflow-x: auto; }
.tabs a, .tabs span.tab { flex: 1 0 auto; text-align: center; padding: 10px 16px; color: var(--link); text-decoration: none; font-size: 16.5px; margin-bottom: -2px; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.on, .tabs span.tab.on { font-weight: 700; color: var(--ink); border-bottom-color: var(--rr-tab); }

/* control bar */
.ctl { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0 var(--s-2); font-size: 15px; flex-wrap: wrap; }
.ctl .back { color: #303099; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.ctl .back svg { width: 12px; height: 12px; fill: currentColor; }
.ctl .pdf { color: var(--ink-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ctl .pdf svg { width: 14px; height: 14px; fill: currentColor; }
.ctl .search { display: flex; align-items: center; }
.ctl input { border: 1px solid var(--line); border-radius: 4px 0 0 4px; padding: 6px 10px; width: 220px; font: inherit; }
.ctl .search button { border: 0; background: var(--muted); color: #fff; padding: 6px 16px; font: inherit; cursor: pointer; }
.ctl .search button.icon-btn { background: var(--page); color: var(--ink-soft); border: 1px solid var(--line); border-left: 0; border-radius: 0 4px 4px 0; display: inline-flex; align-items: center; }
.ctl .search button.icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
.ctl .search button.icon-btn.fav { color: var(--brand-ink); background: var(--brand); border-color: var(--brand); }
.live-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--danger); font-weight: 600; font-size: var(--fs-table); }
.live-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* contest boxes (ListSelector: boxes) — 3 per row desktop, 1 per row mobile */
.boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); padding: var(--s-6) 0; }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.box h3 { margin: 0; background: #3c3c3b; color: #fff; font-weight: 400; font-size: 16px; padding: 10px 12px; }
.box a { display: flex; align-items: center; gap: 6px; padding: 8px 12px; color: var(--ink-soft); text-decoration: none; border-top: 1px solid var(--line); font-size: 15px; }
.box a:hover, .box a:focus-visible { background: var(--highlight); }
.box a svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
.box .empty { padding: 8px 12px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }

/* RR-parity table */
table.rr { width: 100%; max-width: var(--table-max); border-collapse: collapse; font-size: 14.5px; background: var(--surface); }
table.rr caption { text-align: left; padding: 0 0 var(--s-2); color: var(--muted); font-size: var(--fs-meta); }
table.rr th { background: var(--rr-th-bg); color: var(--rr-th-ink); font-weight: 700; text-align: left; padding: 5px 2px; height: 30px; white-space: nowrap; }
table.rr td { padding: 5px 2px; height: var(--rr-row-h); border-bottom: 1px solid var(--rr-td-line); white-space: nowrap; box-sizing: border-box; }
table.rr td.group { font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--rr-group-line); background: var(--surface); }
table.rr tr.m td { color: var(--male); }
table.rr tr.f td { color: var(--female); }
table.rr tr.m:hover td, table.rr tr.f:hover td { background: var(--highlight); }
table.rr td.t { font-weight: 700; text-decoration: underline; }
table.rr .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
table.rr th.align-right, table.rr td.align-right { text-align: right; }
table.rr th.align-center, table.rr td.align-center { text-align: center; }
.cell-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit; }
.cell-link:hover { text-decoration: underline; }
table.rr th.more-col { width: 1%; }
table.rr td.more { display: none; }

/* R6 — under-row detail block revealed by the ··· cell at ≤700px.
   Label/value pairs inside one cell that spans the table, so revealing 14
   hidden values never widens the table (no inline cells, tokens only). */
table.rr tr.detail > td { background: var(--page); border-bottom: 1px solid var(--rr-td-line); padding: var(--s-3) var(--s-2); white-space: normal; }
.detail-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-1) var(--s-4); }
.dv { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-meta); }
.dl { color: var(--muted); }
.dval { color: var(--ink-soft); font-weight: 600; }
.dval.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
/* detail is a mobile affordance only; on desktop the columns are all visible */
@media (min-width: 701px) { table.rr tr.detail { display: none; } }

.showall { text-align: right; font-size: 14px; padding: 6px 0 18px; }
.showall a { color: var(--link); }
.count { color: var(--ink-soft); font-size: 15px; padding: var(--s-4) 0; }
.empty-state { padding: var(--s-8) 0; color: var(--muted); }

/* G4-2 sponsor strip — populated from config.sponsor (same source as the G4-2
   endpoint); empty + hidden when the event has no active in-window slot. */
.sponsor { margin: var(--s-6) auto; max-width: var(--table-max); }
.sponsor small { display: block; color: var(--muted); font-size: var(--fs-meta); margin-bottom: 4px; }
.sponsor img { width: 100%; height: auto; display: block; border-radius: 6px; }

/* participant modal */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15,17,21,.55); }
.modal-panel { position: relative; width: 810px; max-width: calc(100vw - 32px); max-height: 90vh; overflow: auto; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.modal-close { position: absolute; top: 8px; right: 8px; border: 0; background: none; cursor: pointer; padding: 6px; color: var(--ink-soft); }
.modal-close svg { width: 18px; height: 18px; fill: currentColor; }
.modal-namebar { background: #e6e6e6; color: var(--link); font-size: 18px; font-weight: 600; padding: 14px 48px 14px 16px; overflow-wrap: anywhere; }
.modal-body { padding: var(--s-4) var(--s-6) var(--s-6); }
.modal-section { margin-top: var(--s-4); font-size: 13px; color: var(--muted); }
table.splits { width: 100%; border-collapse: collapse; font-size: var(--fs-table); margin-top: var(--s-2); }
table.splits th, table.splits td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rr-td-line); }
table.splits th { background: var(--rr-th-bg); color: var(--rr-th-ink); }
table.splits td.v { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 800px) { .boxes { grid-template-columns: 1fr; } }

@media (max-width: 700px) {
  .ehead { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .emeta { justify-content: center; }
  table.rr th.hide, table.rr td.hide { display: none; }
  table.rr td.more { display: table-cell; width: 22px; color: var(--muted); cursor: pointer; }
  /* R6: hidden cells are NEVER revealed inline — the detail row below carries
     them as label/value pairs, so the table keeps its width at 390. */
  .ctl input { width: 120px; }
  .modal-panel { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
}

@media print {
  .top, .tabs, .ctl, .showall, .sponsor, .modal { display: none !important; }
  .banner { height: 120px; }
  table.rr { font-size: 11px; }
  table.rr th.hide, table.rr td.hide { display: table-cell; }
  table.rr td.more { display: none; }
}