/* Rally49 components. Requires tokens.css; page composition lives in velocity.css. */

/* Base */
body { margin: 0; background: var(--color-page); }
.velocity { --focus-color: var(--color-focus); background: var(--color-page); color: var(--color-ink); font-family: var(--font-sans); }
.velocity *, .velocity *::before, .velocity *::after { box-sizing: border-box; }
.velocity a { color: inherit; }
.velocity img { max-width: 100%; }
.velocity :focus-visible { outline: var(--focus-ring) solid var(--focus-color); outline-offset: 5px; }
.velocity ::selection { background: var(--color-selection); color: var(--color-ink); }
.velocity input { caret-color: var(--color-primary); }
.velocity input::placeholder { color: var(--color-ink-muted); opacity: 1; }

/* Text wordmark shared by the header and footer. */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-size: var(--brand-logo-height, 28px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* Button: neutral outline with a violet tint on hover.
   --lg matches the 50px filter row; --primary is violet and fills solid on hover. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--control-height);
  padding: 13px var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
  font: 700 var(--text-body) var(--font-sans);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.button:not(:disabled):hover { background: var(--color-primary-tint); border-color: var(--color-focus); }
.button:disabled { opacity: .5; cursor: default; }
.button svg { flex: none; }
.button--lg { height: var(--control-height-lg); padding-block: 0; }
.button--primary { gap: var(--space-sm); border-color: var(--color-primary); color: var(--color-primary); }
.button--primary:not(:disabled):hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

/* Filter chip: a button that stays filled while its league is selected. */
.filter { white-space: nowrap; }
.filter.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.filter.active:not(:disabled):hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.filter .sport-icon { color: currentColor; }

/* Icon toggle: a bare 50px icon. Faded when unavailable, ink when ready, violet when on. */
.icon-toggle {
  display: block;
  flex: 0 0 var(--control-height-lg);
  width: var(--control-height-lg);
  height: var(--control-height-lg);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink-disabled);
  cursor: pointer;
  transition: color var(--duration-fast) ease;
}
.icon-toggle svg { display: block; width: 100%; height: 100%; }
.icon-toggle:disabled { cursor: default; }
.icon-toggle.has-selection { color: var(--color-ink); }
.icon-toggle.active { color: var(--color-primary); }
.icon-toggle:not(:disabled):hover { color: color-mix(in oklch, var(--color-primary) 70%, transparent); }
.icon-toggle.active:not(:disabled):hover { color: var(--color-primary-hover); }

/* Search field */
.search-field { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--color-surface); }
.search-field:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.search-field > svg { flex: 0 0 24px; width: 24px; height: 24px; }
.search-field input { width: 100%; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--text-body); }
.search-field input:focus-visible { outline: none; }

/* League tooltip: shown on hover or keyboard focus of its chip. */
.league-filter-wrap { position: relative; }
.league-tooltip {
  display: none;
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  width: max-content;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-inverse);
  color: var(--color-on-dark);
  font-size: var(--text-label);
  white-space: nowrap;
}
.filter:focus-visible + .league-tooltip { display: block; }
@media (hover: hover) {
  .filter-group:has(.league-filter-wrap:hover) .league-tooltip { display: none; }
  .filter-group .league-filter-wrap:hover .league-tooltip { display: block; }
}
.league-flags { display: inline; margin-right: 6px; font-size: 20px; vertical-align: middle; }
@media (max-width: 700px) {
  .filter-group { position: relative; }
  .league-filter-wrap { position: static; }
  .league-filter-wrap .league-tooltip { left: 0; right: auto; max-width: 100%; overflow-x: auto; }
}
@media (max-width: 560px) {
  .league-filter-wrap:nth-child(even) .league-tooltip { left: auto; right: 0; }
}

/* Sport icon */
.sport-icon { flex: none; color: var(--color-ink); }
.sport-name { font-size: var(--text-label); overflow-wrap: anywhere; }

/* Schedule row: a selectable match. Hover previews in faded violet; selection commits in solid violet. */
.schedule-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) max-content;
  grid-template-rows: auto 24px;
  align-items: center;
  gap: var(--space-xs) var(--space-lg);
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
  cursor: pointer;
}
.schedule-row:focus-visible { outline-width: 2px; outline-offset: 2px; }
.schedule-row :is(.date-block, .schedule-match, .schedule-time) { display: contents; }
.schedule-row .date-block { color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.schedule-row .date-block strong { grid-area: 1 / 1; font-size: var(--text-numeral); line-height: 1; text-align: center; }
.schedule-row .date-block > span { grid-area: 2 / 1; font-size: var(--text-label); text-align: center; text-transform: uppercase; }
.schedule-row :is(h3, .schedule-time time) { margin: 0; font-size: var(--text-title); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.35; }
.schedule-row h3 { grid-area: 1 / 2; overflow-wrap: anywhere; }
.schedule-row .match-versus { color: var(--color-ink-muted); }
.schedule-row .schedule-league { grid-area: 2 / 2; display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-label); }
.schedule-row .schedule-time time { grid-area: 1 / 3; text-align: right; }
.schedule-row .schedule-weekday { grid-area: 2 / 3; color: var(--color-ink-muted); font-size: var(--text-label); text-align: right; white-space: nowrap; }
.schedule-row :is(.date-block strong, .date-block > span, .schedule-time time) { transition: color var(--duration-fast) ease; }
.schedule-row :is(h3, .schedule-league) { transition: opacity var(--duration-fast) ease; }
@media (hover: hover) {
  .schedule-row:hover :is(.date-block strong, .date-block > span, .schedule-time time) { color: var(--color-primary-hint); }
  .schedule-row:hover :is(h3, .schedule-league) { opacity: .4; }
}
.schedule-row.is-selected :is(.date-block strong, .date-block > span, h3, .match-versus, .schedule-time time) { color: var(--color-primary); }
.schedule-row.is-selected:hover :is(h3, .schedule-league) { opacity: 1; }
@media (max-width: 700px) {
  .schedule-row { grid-template-columns: 38px minmax(0, 1fr) max-content; grid-template-rows: auto 24px auto; gap: var(--space-xs) var(--space-sm); }
  .schedule-row .schedule-weekday { grid-area: 3 / 2 / 4 / 4; max-width: 100%; overflow-x: auto; }
}
@media (max-width: 600px) {
  .schedule-row { padding: var(--space-md) 0; }
  .schedule-row :is(h3, .schedule-time time) { font-size: var(--text-body); }
}

/* Empty state */
.empty { padding: 44px; border-radius: var(--radius-md); background: var(--color-surface); }

/* Mini calendar: the hero's preview of this month's next matches. */
.mini-calendar {
  width: min(480px, 46vw);
  max-height: max(180px, calc(100svh - 370px));
  overflow-y: auto;
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
}
.mini-calendar p { margin: var(--space-sm) 0; font-size: var(--text-body); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.4; }
.mini-event { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: start; gap: var(--space-sm); padding: var(--space-sm) 0; border-top: 1px solid var(--color-line-soft); }
.mini-event:first-child { border-top: 0; }
.mini-date { display: grid; color: var(--color-ink-muted); line-height: 1.35; text-align: center; }
.mini-date strong { font-size: var(--text-body); }
.mini-date span { font-size: var(--text-label); }
.mini-event h3 { min-width: 0; margin: 0; font-size: var(--text-body); line-height: 1.35; }
.mini-event h3 span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mini-event-meta { display: flex; align-items: start; gap: var(--space-xs); font-size: var(--text-body); line-height: 1.35; white-space: nowrap; }
.mini-event-meta time { color: var(--color-ink-muted); text-align: right; }
@media (max-width: 700px) {
  .mini-calendar { width: 100%; max-height: max(140px, calc(50svh - 105px)); }
}

/* Signal CTA: outlined link on the hero photo. Sport icons cycle; chevrons pulse on hover. */
.signal-cta {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--control-height);
  padding: var(--space-md);
  border: 1px solid var(--color-on-dark);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}
.signal-cta-sports { display: grid; place-items: center; }
.signal-cta-sports svg { grid-area: 1 / 1; visibility: hidden; animation: cycle-sport 2s step-end infinite; }
.signal-cta-sports svg:nth-child(2) { animation-delay: .5s; }
.signal-cta-sports svg:nth-child(3) { animation-delay: 1s; }
.signal-cta-sports svg:nth-child(4) { animation-delay: 1.5s; }
.signal-cta-chevrons { display: flex; align-items: center; gap: 2px; }
.signal-cta-chevrons svg { flex: none; opacity: 0; transition: opacity var(--duration-base) ease; }
.signal-cta:is(:hover, :focus-visible) .signal-cta-chevrons svg { opacity: .25; animation: signal-pulse 1.2s ease-in-out infinite backwards; }
.signal-cta:is(:hover, :focus-visible) .signal-cta-chevrons svg:nth-child(2) { animation-delay: .15s; }
.signal-cta:is(:hover, :focus-visible) .signal-cta-chevrons svg:nth-child(3) { animation-delay: .3s; }
.signal-cta:is(:hover, :focus-visible) .signal-cta-chevrons svg:nth-child(4) { animation-delay: .45s; }
.signal-cta:is(:hover, :focus-visible) .signal-cta-chevrons svg:nth-child(5) { animation-delay: .6s; }
@keyframes cycle-sport { 0% { visibility: visible; } 25%, 100% { visibility: hidden; } }
@keyframes signal-pulse { 0%, 60%, 100% { opacity: .25; } 25% { opacity: 1; } }
@media (max-width: 560px) {
  .signal-cta-chevrons svg:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .signal-cta-sports svg { animation: none; }
  .signal-cta-sports svg:first-child { visibility: visible; }
  .signal-cta:is(:hover, :focus-visible) .signal-cta-chevrons svg { animation: none; opacity: .6; }
}

/* League ticker: looping marquee of league links; pauses on hover or focus. */
.league-ticker { position: relative; overflow: hidden; margin: 20px 0; padding: 26px 0; color: var(--color-ink-muted); }
.league-ticker-track { display: flex; width: max-content; animation: league-scroll 24s linear infinite; }
.league-ticker:is(:hover, :focus-within) .league-ticker-track { animation-play-state: paused; }
.league-ticker-group { display: flex; flex-shrink: 0; align-items: center; justify-content: space-around; min-width: calc(100vw - 20px); }
.league-ticker-item { display: flex; align-items: center; gap: 20px; padding-left: 28px; font-size: clamp(32px, 4vw, 60px); font-weight: 900; white-space: nowrap; }
.league-ticker-item svg { flex-shrink: 0; }
.league-ticker-brand { display: grid; gap: var(--space-xs); text-align: center; text-decoration: none; cursor: pointer; }
.league-ticker-brand:is(:hover, :focus-visible) { color: var(--color-primary); }
.league-ticker-mark { display: flex; align-items: center; justify-content: center; gap: 20px; }
.league-ticker-name { font-size: var(--text-label); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.ticker-star { padding: 0 28px; font-size: var(--text-numeral); }
@keyframes league-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .league-ticker-track { width: 100%; animation: none; }
  .league-ticker-group { flex-wrap: wrap; gap: 20px; width: 100%; min-width: 0; }
  .league-ticker-group[aria-hidden="true"] { display: none; }
}