/**
 * Noribel race overview — card grid (2026-09-05).
 *
 * The races table is rendered by JS as a <table>. This restyles those rows into
 * cards without touching the markup the bundle produces: the table and tbody go
 * `display: contents`, so the rows — and the create tile that follows the table
 * in index.html — become items of one grid on .table-wrap.
 *
 * Cards are the default; the toggle in the panel head switches back to the
 * classic row list using :has() on a radio pair — no JS involved.
 *
 * Only #races is targeted, so other .data-table instances keep the table look.
 */

/* ── Panel head: title left, toggle + sort right ── */
#races .panel__head-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.view-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--bg-subtle, #f0f5fb);
  border: 1px solid var(--border-solid, #e2e8f0);
  border-radius: 999px;
}
.view-toggle__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted, #5c6178);
  cursor: pointer;
  user-select: none;
  transition: background 0.16s, color 0.16s, box-shadow 0.16s;
}
.view-toggle__btn:hover {
  color: var(--noribel-marine, #1c6c9e);
}
.view-toggle__input:checked + .view-toggle__btn {
  background: #ffffff;
  color: var(--noribel-marine, #1c6c9e);
  box-shadow: 0 1px 2px rgba(11, 34, 51, 0.06), 0 2px 8px rgba(11, 34, 51, 0.08);
}
.view-toggle__input:focus-visible + .view-toggle__btn {
  outline: 2px solid var(--noribel-blue, #42abe0);
  outline-offset: 2px;
}
.view-toggle__btn svg {
  flex: none;
}

@media (max-width: 560px) {
  .view-toggle__text { display: none; }
  .view-toggle__btn { padding: 6px 10px; }
}

/* ══ CARD VIEW (default) ══════════════════════════════════════════════ */

#races:has(#race-view-box:checked) .table-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 6px 26px 28px;
  overflow: visible;
  border: 0;
  background: none;
}
#races:has(#race-view-box:checked) .data-table,
#races:has(#race-view-box:checked) .data-table tbody {
  display: contents;
}
#races:has(#race-view-box:checked) .data-table thead {
  display: none;
}

/* The row becomes the card */
#races:has(#race-view-box:checked) .data-table tbody tr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 12px 16px;
  position: relative;
  padding: 18px 18px 16px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-solid, #e2e8f0);
  border-radius: var(--radius-md, 16px);
  box-shadow: 0 1px 2px rgba(11, 34, 51, 0.05), 0 10px 26px rgba(11, 34, 51, 0.05);
  /* No translateY on hover — lifting the card under the cursor causes hover flicker/vibration. */
  transition: box-shadow 0.16s, border-color 0.16s;
}
#races:has(#race-view-box:checked) .data-table tbody tr:hover,
#races:has(#race-view-box:checked) .data-table tbody tr:focus-visible {
  border-color: var(--noribel-sky, #8ec7ed);
  box-shadow: 0 2px 4px rgba(11, 34, 51, 0.06), 0 16px 36px rgba(28, 108, 158, 0.16);
  outline: none;
}

#races:has(#race-view-box:checked) .data-table td {
  display: block;
  padding: 0;
  border: 0;
  background: none;
}

/* 1 — title, full width, room kept clear for the actions button */
#races:has(#race-view-box:checked) .data-table td:nth-child(1) {
  grid-column: 1 / -1;
  padding-right: 44px;
  min-height: 30px;
}
#races:has(#race-view-box:checked) .race-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text, #0f1222);
}
#races:has(#race-view-box:checked) .race-title__logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: contain;
  flex: none;
}
#races:has(#race-view-box:checked) .race-title__icon {
  flex: none;
}

/* 2 + 3 — date and sport side by side, each with a small caps label */
#races:has(#race-view-box:checked) .data-table td:nth-child(2),
#races:has(#race-view-box:checked) .data-table td:nth-child(3) {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text, #0f1222);
}
#races:has(#race-view-box:checked) .data-table td:nth-child(2)::before,
#races:has(#race-view-box:checked) .data-table td:nth-child(3)::before {
  display: block;
  margin-bottom: 3px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle, #85899e);
}
#races:has(#race-view-box:checked) .data-table td:nth-child(2)::before {
  content: "Date";
}
#races:has(#race-view-box:checked) .data-table td:nth-child(3)::before {
  content: "Sport / format";
}
#races:has(#race-view-box:checked) .cell-sport,
#races:has(#race-view-box:checked) .cell-sport__name {
  display: block;
}
#races:has(#race-view-box:checked) .cell-sport__fmt {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted, #5c6178);
}

/* 4 — status pills on their own line, above a hairline divider */
#races:has(#race-view-box:checked) .data-table td:nth-child(4) {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding-top: 13px;
  border-top: 1px solid var(--border, rgba(11, 34, 51, 0.09));
}

/* Empty state / "no races" rows span the full grid instead of becoming a card */
#races:has(#race-view-box:checked) .data-table tbody tr:has(td[colspan]) {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  text-align: center;
  color: var(--text-muted, #5c6178);
}
#races:has(#race-view-box:checked) .data-table tbody tr:has(td[colspan]) td {
  grid-column: 1 / -1;
  padding: 8px 0;
}

/* ══ Row actions: one ⋮ button with the options underneath ════════════ */

#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border-solid, #e2e8f0);
  border-radius: 9px;
  background: #ffffff;
  color: var(--text-muted, #5c6178);
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions:hover,
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions:focus-within {
  background: var(--bg-subtle, #f0f5fb);
  border-color: var(--noribel-sky, #8ec7ed);
  color: var(--noribel-marine, #1c6c9e);
}
/* the three dots */
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions::after {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
/* hide the trigger entirely when both actions are unavailable */
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions:not(:has(.btn-icon:not([hidden]))) {
  display: none;
}

/* the two real buttons become the menu rows — handlers stay untouched */
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions .btn-icon {
  position: absolute;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: max-content;
  min-width: 9.5rem;
  height: 34px;
  padding: 0 14px 0 11px;
  border: 1px solid var(--border-solid, #e2e8f0);
  border-radius: 10px;
  background: #ffffff;
  color: var(--text, #0f1222);
  font-size: 0.83rem;
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(11, 34, 51, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions .btn-icon::after {
  content: attr(title);
}
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions .btn-icon--share { top: calc(100% + 6px); }
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions .btn-icon--edit { top: calc(100% + 44px); }

#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions.nor-actions-open .btn-icon {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions .btn-icon:hover {
  background: var(--bg-subtle, #f0f5fb);
  border-color: var(--noribel-sky, #8ec7ed);
}
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions .btn-icon:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* JS hides the share button on races shared with you — keep it hidden */
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions .btn-icon[hidden] {
  display: none !important;
}
/* when share is gone, edit moves up into the first slot */
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions:has(.btn-icon--share[hidden]) .btn-icon--edit {
  top: calc(100% + 6px);
}

/* ══ Create tile — last item in the grid ══════════════════════════════ */

.btn--create-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 190px;
  padding: 24px 20px;
  border: 2px dashed var(--border-solid, #e2e8f0);
  border-radius: var(--radius-md, 16px);
  background: transparent;
  color: var(--text, #0f1222);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background 0.16s, border-color 0.16s;
}
.btn--create-tile::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong, rgba(11, 34, 51, 0.18));
  color: var(--text-muted, #5c6178);
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
  transition: border-color 0.16s, color 0.16s;
}
.btn--create-tile__title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text, #0f1222);
}
.btn--create-tile__hint {
  max-width: 15rem;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-muted, #5c6178);
}
.btn--create-tile:hover {
  background: rgba(142, 199, 237, 0.08);
  border-color: var(--noribel-sky, #8ec7ed);
}
.btn--create-tile:hover::before {
  border-color: var(--noribel-blue, #42abe0);
  color: var(--noribel-marine, #1c6c9e);
}
.btn--create-tile .btn__shine {
  display: none;
}



/* ══ Shared: rebrand the inline-styled visibility pills ════════════════
   norVisPill() writes indigo hex values inline, so !important is the only
   way to bring them onto the Noribel palette from CSS. */
#races .pill[style*="#eef2ff"] {
  background: #eaf4fb !important;
  color: #1c6c9e !important;
}

/* ══ Breathing room ═══════════════════════════════════════════════════
   More air between the panel head and the first row of cards, and inside
   the cards themselves. */
#races .panel__head {
  padding-top: 26px;
  padding-bottom: 24px;
}
#races:has(#race-view-box:checked) .table-wrap {
  gap: 24px;
  padding: 30px;
}
#races:has(#race-view-box:checked) .data-table tbody tr {
  gap: 14px 18px;
  padding: 22px 22px 20px;
}
#races:has(#race-view-box:checked) .data-table td:nth-child(4) {
  margin-top: 4px;
  padding-top: 16px;
}

/* ══ ⋮ trigger: light blue, dots drawn dead-centre ════════════════════
   Painted as three background circles rather than a pseudo-element, so the
   dots can't be pushed out of the box by the absolutely-placed menu rows. */
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions {
  display: block;
  width: 32px;
  height: 32px;
  border: 1px solid #cfe6f7;
  border-radius: 10px;
  background-color: #eaf4fb;
  background-image:
    radial-gradient(circle at 50% 50%, #1c6c9e 1.7px, transparent 1.8px),
    radial-gradient(circle at 50% 50%, #1c6c9e 1.7px, transparent 1.8px),
    radial-gradient(circle at 50% 50%, #1c6c9e 1.7px, transparent 1.8px);
  background-size: 100% 6px;
  background-repeat: no-repeat;
  background-position: center 6px, center 13px, center 20px;
}
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions::after {
  content: none;
}
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions:hover,
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions:focus-within {
  background-color: #d0e8f8;
  border-color: var(--noribel-blue, #42abe0);
}

/* Open state — the script toggles .nor-actions-open on click */
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions.nor-actions-open {
  background-color: #d0e8f8;
  border-color: var(--noribel-blue, #42abe0);
}

/* ══ Options menu as one connected panel ══════════════════════════════ */
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions .btn-icon {
  min-width: 11.5rem;
  height: 40px;
  padding: 0 16px 0 13px;
  border-radius: 0;
  box-shadow: 0 14px 32px rgba(11, 34, 51, 0.16);
  font-weight: 600;
}
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions .btn-icon--share {
  top: calc(100% + 8px);
  border-radius: 12px 12px 0 0;
}
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions .btn-icon--edit {
  top: calc(100% + 48px);
  border-top: none;
  border-radius: 0 0 12px 12px;
}
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions:has(.btn-icon--share[hidden]) .btn-icon--edit {
  top: calc(100% + 8px);
  border-top: 1px solid var(--border-solid, #e2e8f0);
  border-radius: 12px;
}
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions .btn-icon:hover {
  background: #eaf4fb;
  border-color: var(--border-solid, #e2e8f0);
  color: var(--noribel-marine, #1c6c9e);
}

/* An earlier rule uses the `background` shorthand on :hover, which resets
   background-image and wiped the dots. Redraw them for every state. */
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions:hover,
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions:focus-within,
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions.nor-actions-open {
  background-image:
    radial-gradient(circle at 50% 50%, #1c6c9e 1.7px, transparent 1.8px),
    radial-gradient(circle at 50% 50%, #1c6c9e 1.7px, transparent 1.8px),
    radial-gradient(circle at 50% 50%, #1c6c9e 1.7px, transparent 1.8px);
  background-size: 100% 6px;
  background-repeat: no-repeat;
  background-position: center 6px, center 13px, center 20px;
}

/* ══ Status row: no divider, pinned to the card foot ══════════════════
   The hairline separated nothing — date/sport and the pills are one block.
   Letting the status row absorb the leftover height also stops short cards
   ending in dead space when a neighbour is taller. */
#races:has(#race-view-box:checked) .data-table tbody tr {
  grid-template-rows: auto auto 1fr;
  align-content: stretch;
}
#races:has(#race-view-box:checked) .data-table td:nth-child(4) {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0;
  padding-top: 16px;
  border-top: 0;
}
#races:has(#race-view-box:checked) .data-table td:nth-child(4) .pill {
  margin-left: 0 !important;
}

/* ══ Card footer: divider back, status row tightened ══════════════════
   Two grey blocks side by side read as debris. Now it is a footer: status
   chip with a leading dot on the left, visibility as a quiet outline chip
   pushed to the right. */
#races:has(#race-view-box:checked) .data-table td:nth-child(4) {
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border, rgba(11, 34, 51, 0.09));
}
#races:has(#race-view-box:checked) .data-table td:nth-child(4) .pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  line-height: 1.25;
  min-height: 1.7rem;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* status chip gets a dot instead of a slab of grey */
#races:has(#race-view-box:checked) .data-table td:nth-child(4) .pill:first-child {
  gap: 7px;
  background: #ffffff;
  border: 1px solid var(--border-solid, #e2e8f0);
  color: var(--text-muted, #5c6178);
  padding: 0.4rem 0.85rem 0.4rem 0.75rem;
}
#races:has(#race-view-box:checked) .data-table td:nth-child(4) .pill:first-child::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--noribel-sky, #8ec7ed);
  flex: none;
}
#races:has(#race-view-box:checked) .data-table td:nth-child(4) .pill--live {
  color: #047857;
}
#races:has(#race-view-box:checked) .data-table td:nth-child(4) .pill--live::before {
  background: var(--live, #10b981);
}
/* visibility chip: quiet outline, hard right */
#races:has(#race-view-box:checked) .data-table td:nth-child(4) .pill:last-child:not(:first-child) {
  background: transparent !important;
  border: 1px solid var(--border-solid, #e2e8f0);
  color: var(--text-subtle, #85899e) !important;
  font-weight: 600;
}

/* ══ Third menu row: Delete race ══════════════════════════════════════ */
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions .nor-delete-item {
  top: calc(100% + 88px);
  border-top: none;
  border-radius: 0 0 12px 12px;
  color: #dc2626;
}
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions .btn-icon--edit {
  border-radius: 0;
}
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions:not(:has(.nor-delete-item)) .btn-icon--edit {
  border-radius: 0 0 12px 12px;
}
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions:has(.btn-icon--share[hidden]) .nor-delete-item {
  top: calc(100% + 48px);
}
#races:has(#race-view-box:checked) .data-table td.data-table__cell--actions .nor-delete-item:hover {
  background: #fef2f2;
  color: #b91c1c;
}
/* The live label already carries a bullet in its text — don't add a second */
#races:has(#race-view-box:checked) .data-table td:nth-child(4) .pill--live::before {
  display: none;
}

/* ══ Search box in the panel head ═════════════════════════════════════ */
#races .panel__head {
  flex-wrap: wrap;
  gap: 12px;
}
.nor-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 14rem;
  min-width: 11rem;
  max-width: 24rem;
}
.nor-search__icon {
  position: absolute;
  left: 0.75rem;
  color: var(--text-subtle, #85899e);
  pointer-events: none;
}
.nor-search__input {
  width: 100%;
  padding: 0.55rem 0.85rem 0.55rem 2.35rem;
  border: 1px solid var(--border-solid, #e2e8f0);
  border-radius: 999px;
  background: var(--bg-subtle, #f0f5fb);
  font-family: var(--font, "Work Sans", sans-serif);
  font-size: 0.88rem;
  color: var(--text, #0f1222);
  outline: none;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.nor-search__input::placeholder {
  color: var(--text-subtle, #85899e);
}
.nor-search__input:focus {
  border-color: var(--noribel-blue, #42abe0);
  box-shadow: 0 0 0 3px rgba(66, 171, 224, 0.18);
  background: #ffffff;
}

/* Rows the filter excludes */
#races .data-table tbody tr.nor-filtered-out {
  display: none !important;
}

/* Nothing matched */
#races.nor-search-empty .table-wrap::after {
  content: "No race matches that search.";
  grid-column: 1 / -1;
  padding: 2.25rem 0;
  color: var(--text-muted, #5c6178);
  font-size: 0.95rem;
  text-align: center;
}
#races.nor-search-empty .btn--create-tile {
  display: none;
}

/* ══ Archive rows: completed reads as done ════════════════════════════ */
.archive-list__row .pill--done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.archive-list__row .pill--done::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  flex: none;
}
.archive-list__row.nor-filtered-out {
  display: none !important;
}

/* Create tile leads the grid */
#races:has(#race-view-box:checked) .btn--create-tile {
  order: -1;
}

/* ══ Archive: list or cards, same toggle as the active list ═══════════ */
.archive__tools {
  display: flex;
  justify-content: flex-end;
  padding: 12px 22px 4px;
}
.archive:has(#archive-view-box:checked) .archive-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 14px;
  padding: 8px 22px 22px;
}
.archive:has(#archive-view-box:checked) .archive-list__row {
  display: grid;
  gap: 0.45rem;
  padding: 16px 16px 14px;
  border: 1px solid var(--border-solid, #e2e8f0);
  border-radius: var(--radius-md, 16px);
  background: var(--bg-card, #ffffff);
  box-shadow: 0 1px 2px rgba(11, 34, 51, 0.05), 0 8px 20px rgba(11, 34, 51, 0.05);
  transition: border-color 0.16s, box-shadow 0.16s;
}
.archive:has(#archive-view-box:checked) .archive-list__row:hover {
  border-color: var(--noribel-sky, #8ec7ed);
  box-shadow: 0 2px 4px rgba(11, 34, 51, 0.06), 0 14px 30px rgba(28, 108, 158, 0.14);
}
.archive:has(#archive-view-box:checked) .archive-list__title {
  font-family: var(--font-display, "Archivo", sans-serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}
.archive:has(#archive-view-box:checked) .archive-list__row .pill--done {
  justify-self: start;
  margin-top: 0.3rem;
}

/* ══ List view: the create tile becomes the first row ═════════════════ */
#races:has(#race-view-rows:checked) .table-wrap {
  display: flex;
  flex-direction: column;
}
#races:has(#race-view-rows:checked) .btn--create-tile {
  order: -1;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  min-height: 0;
  margin: 14px 22px 6px;
  padding: 0.7rem 1rem;
  border-width: 1px;
  text-align: left;
}
#races:has(#race-view-rows:checked) .btn--create-tile::before {
  width: 1.85rem;
  height: 1.85rem;
  margin-bottom: 0;
  font-size: 1.15rem;
}
#races:has(#race-view-rows:checked) .btn--create-tile__title {
  font-size: 0.92rem;
}
#races:has(#race-view-rows:checked) .btn--create-tile__hint {
  max-width: none;
  font-size: 0.82rem;
}
#races:has(#race-view-rows:checked) .btn--create-tile__hint::before {
  content: "— ";
}
@media (max-width: 620px) {
  #races:has(#race-view-rows:checked) .btn--create-tile__hint {
    display: none;
  }
}

/* The archive row is a multi-column grid in list view; a card has to stack.
   Without an explicit template it inherited those columns and squeezed the
   title into a sliver. */
.archive:has(#archive-view-box:checked) .archive-list__row {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 0.3rem;
  min-height: 9.5rem;
}
.archive:has(#archive-view-box:checked) .archive-list__title {
  margin-bottom: 0.15rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
.archive:has(#archive-view-box:checked) .archive-list__row .cell-muted {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted, #5c6178);
}
.archive:has(#archive-view-box:checked) .archive-list__sport {
  font-size: 0.85rem;
  color: var(--text-muted, #5c6178);
}
.archive:has(#archive-view-box:checked) .archive-list__row .pill--done {
  align-self: end;
  justify-self: start;
  margin-top: 0.5rem;
}

/* Amber upcoming in card view too. The generic dot rule uses :first-child,
   which outranked the plain .pill--upcoming override in nor-forms.css. */
#races:has(#race-view-box:checked) .data-table td:nth-child(4) .pill--upcoming:first-child {
  color: #c2410c;
  background: #fff7ed;
  border-color: rgba(249, 115, 22, 0.28);
}
#races:has(#race-view-box:checked) .data-table td:nth-child(4) .pill--upcoming:first-child::before {
  background: #f97316;
}

/* ══ List view: the same ⋮ menu as on a card ══════════════════════════
   The row list showed share, edit and delete as three loose icons. Here
   the cell keeps its place in the table — it stays a flex cell, so the
   column still lines up under its header — and the trigger is drawn as an
   ::after box, with the buttons hanging under it as the same panel the
   cards use. The script is view-agnostic: it toggles .nor-actions-open on
   the cell either way, so nothing had to change there. */

#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions {
  position: relative;
  display: table-cell !important; /* override main flex — flex was shifting the ⋮ per row */
  width: 3.5rem !important;
  min-width: 3.5rem !important;
  max-width: 3.5rem !important;
  padding: 0 !important;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  overflow: visible;
}

/* the trigger — pinned dead-centre in the actions column */
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: 0;
  transform: translate(-50%, -50%);
  border: 1px solid #cfe6f7;
  border-radius: 10px;
  background-color: #eaf4fb;
  background-image:
    radial-gradient(circle at 50% 50%, #1c6c9e 1.7px, transparent 1.8px),
    radial-gradient(circle at 50% 50%, #1c6c9e 1.7px, transparent 1.8px),
    radial-gradient(circle at 50% 50%, #1c6c9e 1.7px, transparent 1.8px);
  background-size: 100% 6px;
  background-repeat: no-repeat;
  background-position: center 5px, center 12px, center 19px;
  transition: background-color 0.16s, border-color 0.16s;
  pointer-events: none;
}
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions:hover::after,
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions.nor-actions-open::after {
  background-color: #d0e8f8;
  border-color: var(--noribel-blue, #42abe0);
}
/* no trigger on a row that carries neither action */
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions:not(:has(.btn-icon:not([hidden]))) {
  cursor: default;
}
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions:not(:has(.btn-icon:not([hidden])))::after {
  content: none;
}

/* the buttons become the menu rows — handlers stay untouched */
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions .btn-icon {
  position: absolute;
  right: 50%;
  transform: translate(50%, -4px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: max-content;
  min-width: 11.5rem;
  height: 40px;
  padding: 0 16px 0 13px;
  border: 1px solid var(--border-solid, #e2e8f0);
  border-radius: 0;
  background: #ffffff;
  color: var(--text, #0f1222);
  font-size: 0.83rem;
  font-weight: 600;
  text-align: left;
  box-shadow: 0 14px 32px rgba(11, 34, 51, 0.16);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions .btn-icon::after {
  content: attr(title);
}
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions .btn-icon svg {
  flex: none;
}
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions.nor-actions-open .btn-icon {
  opacity: 1;
  visibility: visible;
  transform: translate(50%, 0);
}
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions .btn-icon[hidden] {
  display: none !important;
}
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions .btn-icon:hover {
  background: #eaf4fb;
  border-color: var(--border-solid, #e2e8f0);
  color: var(--noribel-marine, #1c6c9e);
}
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions .btn-icon:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* stacked from the middle of the row, starting just under the trigger */
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions .btn-icon--share {
  top: calc(50% + 20px);
  border-radius: 12px 12px 0 0;
}
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions .btn-icon--edit {
  top: calc(50% + 60px);
  border-top: none;
}
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions .nor-delete-item {
  top: calc(50% + 100px);
  border-top: none;
  border-radius: 0 0 12px 12px;
  color: #dc2626;
}
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions .nor-delete-item:hover {
  background: #fef2f2;
  color: #b91c1c;
}
/* edit closes the panel when delete is not offered (a race you cannot edit) */
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions:not(:has(.nor-delete-item)) .btn-icon--edit {
  border-radius: 0 0 12px 12px;
}

/* A closed menu holds no offset. The items stay in the document even while
   they are hidden, so the ones parked below the last row would give the
   table its own scrollbar. */
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions:not(.nor-actions-open) .btn-icon {
  top: auto;
  bottom: auto;
}

/* Rows near the foot of the panel open their menu upward, so it stays inside
   the panel instead of being cut off at its edge. The script measures the
   room at the moment the menu opens and sets .nor-actions-up on the cell. */
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions.nor-actions-up .btn-icon {
  top: auto;
  transform: translate(50%, 4px);
}
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions.nor-actions-up.nor-actions-open .btn-icon {
  transform: translate(50%, 0);
}
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions.nor-actions-up .btn-icon--share {
  bottom: calc(50% + 100px);
}
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions.nor-actions-up .btn-icon--edit {
  bottom: calc(50% + 60px);
}
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions.nor-actions-up .nor-delete-item {
  bottom: calc(50% + 20px);
}
/* two rows only, when the race carries no delete */
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions.nor-actions-up:not(:has(.nor-delete-item)) .btn-icon--share {
  bottom: calc(50% + 60px);
}
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions.nor-actions-up:not(:has(.nor-delete-item)) .btn-icon--edit {
  bottom: calc(50% + 20px);
}

/* ══ Polish: Upcoming pill + list actions column ═══════════════════════
   Status pills were vertically cramped; list ⋮ (32px) overflowed the
   2.5rem actions column and jogged the panel’s right edge. */
#races .data-table .pill--upcoming,
#races .data-table .pill--live,
#races .data-table .pill--finished,
#races .data-table .pill--done {
  padding: 0.38rem 0.8rem;
  line-height: 1.25;
  min-height: 1.65rem;
  box-sizing: border-box;
}

#races:has(#race-view-rows:checked) .table-wrap {
  overflow-x: hidden;
}
#races:has(#race-view-rows:checked) .data-table {
  width: 100%;
  table-layout: fixed;
}
#races:has(#race-view-rows:checked) .data-table .data-table__th--actions {
  width: 3.5rem !important;
  min-width: 3.5rem !important;
  max-width: 3.5rem !important;
  padding: 0.75rem 0 !important;
  box-sizing: border-box;
}
/* Closed menu items must not reserve overflow (breaks the right border). */
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions:not(.nor-actions-open) .btn-icon {
  display: none !important;
}
#races:has(#race-view-rows:checked) .data-table td.data-table__cell--actions.nor-actions-open .btn-icon:not([hidden]) {
  display: flex !important;
}