/* Classic theme: editorial "series" card treatment for cup groups */
[data-theme="classic"] .cup-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: rgb(247, 246, 242);
  box-shadow: none;
}
[data-theme="classic"] .cup-card-head {
  padding: 26px 28px;
  border-bottom: 1px solid var(--color-border);
}
[data-theme="classic"] .cup-icon { border-radius: var(--radius-md) !important; }
[data-theme="classic"] .cup-register-btn {
  background: var(--color-text-primary) !important;
  border-color: var(--color-text-primary) !important;
  color: var(--color-background) !important;
  border-radius: var(--radius-pill) !important;
}
[data-theme="classic"] .cup-register-btn:hover {
  background: #000000 !important;
  border-color: #000000 !important;
}
[data-theme="classic"] .cup-race-day { font-size: 1.5rem !important; }
[data-theme="classic"] .cup-race-title { font-size: 1.05rem; }
[data-theme="classic"] .cup-reg-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
[data-theme="classic"] .cup-race-row:hover .cup-reg-link { color: var(--color-primary); }
[data-theme="classic"] .cup-race-row:has(.cup-reg-link) .cup-race-chevron { color: var(--color-text-secondary); }
[data-theme="classic"] .cup-race-row:hover:has(.cup-reg-link) .cup-race-chevron { color: var(--color-primary); }
.cup-race-chevron { transition: transform 120ms, color 120ms; }
.cup-race-row:hover .cup-race-chevron { transform: translateX(2px); }

/* Cup group race timeline */
/* Dots sit at 39px: the header's 16px padding + half of the 46px cup icon square.
   --cup-gutter/--cup-gutter-gap keep the line, the dots, the row padding and the
   divider inset in sync, so the phone layout only has to retune the two numbers. */
.cup-race-list { --cup-gutter: 39px; --cup-gutter-gap: 21px; }
.cup-race-row { position: relative; padding-left: calc(var(--cup-gutter) + var(--cup-gutter-gap)); }
.cup-race-row + .cup-race-row {
  border-top: 1px solid var(--color-divider);
  /* Divider starts at the date column, clear of the timeline gutter */
  border-image: linear-gradient(to right, transparent calc(var(--cup-gutter) + var(--cup-gutter-gap)), var(--color-divider) 0) 1;
}
.cup-race-row:hover { background: rgba(0,0,0,0.02); }
.cup-race-row::before {
  /* top: -1px bridges the 1px row separator so the line stays unbroken */
  content: ""; position: absolute; left: calc(var(--cup-gutter) - 1px); top: -1px; bottom: 0;
  width: 2px; background: var(--color-surface-muted);
}
.cup-race-row:first-child::before { top: 50%; }
.cup-race-row:last-child::before { bottom: 50%; }
.cup-race-row::after {
  content: ""; position: absolute; left: var(--cup-gutter); top: 50%; transform: translate(-50%,-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cup-dot, var(--color-success));
  box-shadow: 0 0 0 2px var(--color-white);
}

/* Calendar switcher tabs */
.race-tabs-pill {
  background: var(--color-glass-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-radius: 22px;
  border: 1px solid var(--color-glass-border);
  box-shadow: 0 2px 16px var(--color-shadow-soft);
  padding: 6px 4px;
  display: flex;
}
.race-tabs-pill .nav {
  gap: 2px;
  flex-wrap: nowrap;
  width: 100%;
}
.race-tabs-pill .nav-item { flex: 1; }
.race-tab-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 5px;
  border: none;
  border-radius: 16px;
  background: none;
  color: var(--color-text-faint);
  transition: color .15s, background .15s;
}
.race-tab-btn:hover { color: var(--color-text-secondary); }
.race-tab-btn.active {
  color: var(--color-text-primary);
  background: var(--color-white);
  box-shadow: 0 2px 8px var(--color-shadow-medium), 0 1px 2px var(--color-shadow-light);
}
.race-tab-icon-wrap { position: relative; display: inline-flex; }
.race-tab-icon-bg {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  transition: background .18s, color .18s, transform .15s;
}
.race-tab-btn:hover .race-tab-icon-bg { transform: scale(1.06); }
.race-tab--cal .race-tab-icon-bg { background: var(--color-cup-tint); color: var(--color-cup); }
.race-tab--cal.active .race-tab-icon-bg,
.race-tab--cal:hover  .race-tab-icon-bg { background: var(--color-cup); color: var(--color-white); }
.race-tab-label {
  font-size: 11px; font-weight: 500; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 80px;
  transition: font-weight .15s;
}
.race-tab-btn.active .race-tab-label { font-weight: 700; }
.race-tab-badge {
  position: absolute; top: -5px; right: -6px;
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--color-badge-dot); color: var(--color-white);
  font-size: 10px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--color-surface-light);
  box-shadow: 0 1px 3px var(--color-shadow-strong);
}

/* ===== Phones =====
   Selectors are scoped tightly enough (.cup-card …, .calendars-page …) to outweigh
   the [data-theme="classic"] rules above, which they must override on narrow screens. */
@media (max-width: 575.98px) {

  /* Cup header: the name gets the full width, the register button its own row */
  .cup-card .cup-card-head { flex-wrap: wrap; row-gap: 12px; column-gap: 12px; }
  [data-theme="classic"] .cup-card .cup-card-head { padding: 16px; }
  .cup-card .cup-icon {
    width: 40px !important; height: 40px !important; font-size: 1.1rem !important;
  }
  /* flex-basis 0 keeps a long cup name beside the icon instead of wrapping under it */
  .cup-card .cup-head-info { flex: 1 1 0; min-width: 0; }
  .cup-card .cup-head-name { font-size: 1.1rem !important; }
  .cup-card .cup-head-actions { width: 100%; }
  .cup-card .cup-head-actions .btn,
  .cup-card .cup-head-actions .badge {
    display: block; width: 100%; text-align: center; padding: 9px 16px;
  }

  /* Race rows: title on its own line, date and state as a meta line underneath,
     chevron pinned to the right edge so long names never push it off-card.
     The gutter puts the dots on the cup icon's centre line and the text on the
     cup name's left edge, so the card has just two columns: 16px and 72px. */
  .cup-card .cup-race-list { --cup-gutter: 36px; --cup-gutter-gap: 36px; }
  /* !important throughout: the row carries Bootstrap's py-3/gap-3 utilities */
  .cup-card .cup-race-row {
    flex-wrap: wrap; align-items: baseline !important;
    column-gap: 8px !important; row-gap: 6px !important;
    padding-top: 13px !important; padding-bottom: 13px !important;
    padding-right: 40px !important;
  }
  .cup-card .cup-race-title { order: 1; flex: 0 0 100%; line-height: 1.3; }
  [data-theme="classic"] .cup-card .cup-race-title { font-size: 1rem; }
  .cup-card .cup-race-date {
    order: 2; width: auto !important; line-height: 1.25;
    display: flex; align-items: baseline; gap: 4px; text-align: left !important;
  }
  .cup-card .cup-race-date > div { margin-top: 0 !important; font-size: 0.8rem !important; }
  .cup-card .cup-race-day { font-size: 0.95rem !important; }
  .cup-card .cup-race-state { order: 3; }
  /* Separator belongs to the date, so a wrap can never orphan it onto its own line.
     Flex gap already supplies 4px, hence the extra 4px here. */
  .cup-card .cup-race-date:has(~ .cup-race-state .cup-reg-link)::after {
    content: "·"; margin-left: 4px; font-size: 0.8rem; color: var(--color-text-faint);
  }
  /* Regular weight on the meta line, matching the date */
  .cup-card .cup-race-state .cup-reg-link { font-weight: 400; }
  /* right: 16px lines the chevron up with the header icon's and button's inset */
  .cup-card .cup-race-chevron {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  }
  .cup-card .cup-race-row:hover .cup-race-chevron { transform: translateY(-50%) translateX(2px); }

  /* Standalone (non-cup) race cards get the same title / meta-line treatment */
  .calendars-page-races .race-card-row { flex-wrap: wrap; column-gap: 8px !important; row-gap: 6px !important; }
  .calendars-page-races .race-card-info { order: 1; flex: 0 0 100%; }
  .calendars-page-races .race-card-date {
    order: 2; width: auto !important;
    display: flex; align-items: baseline; gap: 4px; text-align: left !important;
  }
  .calendars-page-races .race-card-date > div { margin-top: 0 !important; font-size: 0.8rem !important; }
  .calendars-page-races .race-card-day { font-size: 0.95rem !important; }
  .calendars-page-races .race-card-state { order: 3; }

  /* Calendar switcher: scrolls sideways instead of squeezing the labels.
     The classic theme stacks this pill vertically below 760px (layout.leaf), so it
     keeps its own treatment and is left out here. */
  html:not([data-theme="classic"]) .race-tabs-pill { padding: 5px 4px; }
  html:not([data-theme="classic"]) .race-tabs-pill .nav {
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  }
  html:not([data-theme="classic"]) .race-tabs-pill .nav::-webkit-scrollbar { display: none; }
  html:not([data-theme="classic"]) .race-tabs-pill .nav-item { flex: 1 0 auto; }
  html:not([data-theme="classic"]) .race-tab-btn { padding: 5px 10px 4px; }
  html:not([data-theme="classic"]) .race-tab-icon-bg {
    width: 38px; height: 38px; border-radius: 12px; font-size: 18px;
  }
  html:not([data-theme="classic"]) .race-tab-label { max-width: 72px; }

  .cal-empty-icon { font-size: 2.75rem !important; }
}

/* Below ~375px the date and the state only share a line without the separator
   (selector mirrors the one above so it wins on specificity, not just order) */
@media (max-width: 374.98px) {
  .cup-card .cup-race-date:has(~ .cup-race-state .cup-reg-link)::after { content: none; }
}

/* The classic theme stacks the switcher pill vertically below 760px (layout.leaf).
   Calendar tabs read better there as compact rows than as tall centred cards, and
   the label needs the whole row width instead of the 80px desktop cap. */
@media (max-width: 760px) {
  [data-theme="classic"] .race-tabs-pill .nav { gap: 8px; }
  [data-theme="classic"] .race-tabs-pill .race-tab--cal {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 12px 46px 12px 16px;
  }
  [data-theme="classic"] .race-tabs-pill .race-tab--cal .race-tab-label {
    max-width: none;
    text-align: left;
  }
  [data-theme="classic"] .race-tabs-pill .race-tab--cal .race-tab-badge {
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
  }
}