/* When do the Majors run? A year track (choose one race) + one detail row.
   Phones and no-JS: every row, no track. */
.ssn { margin-top: 8px; }
.ssn-years { display: none; gap: 4px 20px; margin-bottom: 18px; }
.is-interactive .ssn-years { display: flex; }
.ssn-years button, .ssn-dot { font: inherit; }
.ssn-years button { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: var(--muted); }
.ssn-years button::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #8d979c; transition: background var(--feedback), border-color var(--feedback); }
.ssn-years button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.ssn-years button[aria-pressed="true"]::before { background: var(--accent); border-color: var(--accent); }

.ssn-track { display: none; position: relative; height: 150px; margin: 8px 0 28px; }
.ssn-months { position: absolute; left: 0; right: 0; top: 118px; font-size: 12px; color: var(--muted); }
.ssn-months span { position: absolute; top: 0; padding-left: 6px; border-left: 1px solid var(--line); line-height: 1; }
.ssn-line { position: absolute; left: 0; right: 0; top: 69px; height: 2px; background: var(--line); overflow: hidden; }
.ssn-done { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p));
  transition: transform 1100ms cubic-bezier(.32, .72, 0, 1); }
.ssn.is-waiting .ssn-done { transform: scaleX(0); }
.ssn-today { position: absolute; top: 58px; height: 24px; border-left: 1.5px solid var(--accent); }
.ssn-today b { position: absolute; top: 60px; left: -1px; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.ssn-dot { position: absolute; top: 70px; width: 24px; height: 44px; margin-left: -12px; margin-top: -22px; padding: 0; background: none; border: 0; cursor: pointer;
  transition: transform 520ms cubic-bezier(.32, .72, 0, 1), opacity 420ms cubic-bezier(.23, 1, .32, 1); transition-delay: calc(var(--i) * 70ms + 300ms); }
.ssn.is-waiting .ssn-dot { opacity: 0; transform: translateY(-10px) scale(.6); }
.ssn-dot i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink);
  transition: transform 200ms cubic-bezier(.23, 1, .32, 1), background 200ms, border-color 200ms; }
.ssn-dot.is-done i { background: var(--ink); }
.ssn-dot.is-current i { background: var(--accent); border-color: var(--accent); transform: scale(1.35); }
.ssn-dot:hover i { transform: scale(1.35); }
.ssn-dot span { position: absolute; left: 50%; transform: translateX(-50%); font-size: 13px; white-space: nowrap; color: var(--muted); }
.ssn-dot.is-above span { bottom: 32px; }
.ssn-dot.is-below span { top: 32px; }
.ssn-dot.is-current span { color: var(--ink); font-weight: 600; }
.ssn-dot:focus-visible { outline: none; }
.ssn-dot:focus-visible i { outline: 3px solid var(--accent); outline-offset: 4px; }

.ssn-list { border-top: 1px solid var(--line); }
.ssn-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 32px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ssn-when { font-family: var(--display); font-size: 24px; letter-spacing: -.02em; line-height: 1.2; }
.ssn-what h3 { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.15; letter-spacing: -.03em; }
.ssn-state { margin-left: 8px; font-family: var(--reading); font-size: 13px; letter-spacing: 0; font-weight: 600; color: var(--muted); vertical-align: 3px; }
.ssn-row.is-next .ssn-state { color: var(--accent); }
.ssn-what p { margin-top: 8px; max-width: 64ch; font-size: 16px; line-height: 1.6; }
.ssn-what a { color: var(--muted); text-decoration-color: var(--line); }
.ssn-links { font-size: 14px !important; }
.ssn-ics { min-height: 44px; padding: 0; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* Wide screens with JS: the track, and only the chosen race's row. */
@media (min-width: 900px) {
  .is-interactive .ssn-track { display: block; }
  .is-interactive .ssn-list { border-top: 0; }
  .is-interactive .ssn-row { display: none; border-bottom: 0; border-top: 1px solid var(--line); }
  .is-interactive .ssn-row.is-current { display: grid; animation: ssn-in 420ms cubic-bezier(.32, .72, 0, 1); }
}
@keyframes ssn-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 560px) {
  .ssn-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .ssn-when { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ssn-done, .ssn-dot, .ssn-dot i { transition: none !important; }
  .is-interactive .ssn-row.is-current { animation: none; }
}