/* Team + player timeline surfaces (2026-09-28).
 * Shared scrubber and lineup styles for the Team page Timeline tab and the
 * Player page Timeline tab. Neutral theme: only tokens.css variables, so light
 * and dark both derive from the same rules. Mobile-first. */

.pd-timeline {
  display: grid;
  gap: var(--pd-space-5);
  min-width: 0;
}

.pd-timeline__summary {
  display: grid;
  gap: var(--pd-space-3);
  padding: var(--pd-space-4) var(--pd-space-5);
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--pd-team-accent-primary, var(--pd-accent)) 7%, transparent), transparent 58%),
    var(--pd-surface-base);
  box-shadow: var(--pd-shadow-sm);
}

.pd-timeline__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pd-space-2) var(--pd-space-4);
}

.pd-timeline__eyebrow {
  margin: 0;
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-xs);
  font-weight: 700;
  letter-spacing: var(--pd-tracking-label);
  text-transform: uppercase;
}

.pd-timeline__week {
  margin: 0;
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-lg);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.pd-timeline__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pd-space-3);
}

.pd-timeline__metric {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  padding: var(--pd-space-2) var(--pd-space-3);
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  background: var(--pd-surface-elevated);
}

.pd-timeline__metric small {
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-xs);
  font-weight: 700;
  letter-spacing: var(--pd-tracking-label);
  text-transform: uppercase;
}

.pd-timeline__metric b {
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-xl);
  line-height: var(--pd-leading-tight);
}

.pd-timeline__metric em {
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-xs);
  font-style: normal;
}

.pd-timeline__metric--ovr b {
  color: var(--pd-accent);
}

.pd-timeline__note {
  margin: 0;
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-sm);
  line-height: var(--pd-leading-body);
}

.pd-timeline__scrub {
  display: grid;
  gap: var(--pd-space-2);
}

.pd-timeline__scrub-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pd-space-3);
}

.pd-timeline__step {
  display: inline-grid;
  place-items: center;
  width: var(--pd-touch-target);
  height: var(--pd-touch-target);
  border: var(--pd-border-width) solid var(--pd-border-strong);
  border-radius: var(--pd-radius-md);
  background: var(--pd-surface-base);
  color: var(--pd-text-primary);
  font-size: var(--pd-text-lg);
  font-weight: 800;
  cursor: pointer;
}

.pd-timeline__step:disabled {
  border-color: var(--pd-border);
  color: var(--pd-disabled-text);
  cursor: not-allowed;
}

.pd-timeline__step:focus-visible,
.pd-timeline__tick:focus-visible,
.pd-timeline__range:focus-visible {
  outline: none;
  box-shadow: var(--pd-focus-ring);
}

.pd-timeline__range {
  width: 100%;
  min-height: var(--pd-touch-target);
  margin: 0;
  accent-color: var(--pd-accent);
  cursor: pointer;
}

.pd-timeline__ticks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pd-space-2);
}

.pd-timeline__season {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-pill);
  background: var(--pd-surface-elevated);
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-xs);
  font-weight: 700;
  letter-spacing: var(--pd-tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.pd-timeline__tick {
  min-width: var(--pd-touch-target);
  min-height: 2rem;
  padding: 0 var(--pd-space-2);
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-pill);
  background: var(--pd-surface-base);
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-xs);
  font-weight: 700;
  cursor: pointer;
}

.pd-timeline__tick[aria-pressed="true"] {
  border-color: var(--pd-accent);
  background: color-mix(in srgb, var(--pd-accent) 12%, var(--pd-surface-base));
  color: var(--pd-text-primary);
}

.pd-timeline__tick.is-gap {
  border-style: dashed;
}

.pd-timeline__tick.is-live::after {
  content: " ·";
  color: var(--pd-status-live-text);
}

.pd-timeline__scoreboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pd-space-3);
}

.pd-timeline__score {
  display: grid;
  gap: 0.1rem;
  padding: var(--pd-space-3);
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  background: var(--pd-surface-elevated);
}

.pd-timeline__score small {
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-xs);
  font-weight: 700;
  letter-spacing: var(--pd-tracking-label);
  text-transform: uppercase;
}

.pd-timeline__score b {
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-xl);
  line-height: var(--pd-leading-tight);
}

.pd-timeline__score em {
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-xs);
  font-style: normal;
}

.pd-timeline__units {
  display: grid;
  gap: var(--pd-space-4);
}

.pd-timeline__unit {
  min-width: 0;
  overflow: hidden;
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  background: var(--pd-surface-base);
  box-shadow: var(--pd-shadow-sm);
}

.pd-timeline__unit-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pd-space-3);
  padding: var(--pd-space-3) var(--pd-space-4);
  border-bottom: var(--pd-border-width) solid var(--pd-border);
  background: var(--pd-surface-elevated);
}

.pd-timeline__unit-head h3 {
  margin: 0;
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-md);
  letter-spacing: var(--pd-tracking-label);
  text-transform: uppercase;
}

.pd-timeline__unit-head span {
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-xs);
  font-weight: 700;
}

.pd-timeline__slots {
  display: grid;
  gap: var(--pd-space-2);
  margin: 0;
  padding: var(--pd-space-3) var(--pd-space-4) var(--pd-space-4);
  list-style: none;
}

.pd-timeline__slot {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pd-space-3);
  min-height: 2.75rem;
  padding: var(--pd-space-2) var(--pd-space-3);
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  background: var(--pd-surface-base);
}

.pd-timeline__slot:hover {
  background: var(--pd-surface-interactive);
}

.pd-timeline__slot.is-empty {
  border-style: dashed;
  background: var(--pd-surface-elevated);
}

.pd-timeline__slot-pos {
  color: var(--pd-text-secondary);
  font-family: var(--pd-font-mono);
  font-size: var(--pd-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pd-timeline__slot-player {
  min-width: 0;
}

.pd-timeline__slot-player a,
.pd-timeline__slot-player strong {
  display: block;
  overflow: hidden;
  color: var(--pd-text-primary);
  font-size: var(--pd-text-sm);
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-timeline__slot-player a:hover {
  text-decoration: underline;
}

.pd-timeline__slot-player small {
  display: block;
  overflow: hidden;
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-timeline__slot-ovr {
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-lg);
  font-weight: 800;
}

.pd-timeline__slot.is-empty .pd-timeline__slot-ovr {
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-sm);
}

.pd-timeline__gap {
  display: grid;
  gap: var(--pd-space-2);
  padding: var(--pd-space-5);
  border: 1px dashed var(--pd-border-strong);
  border-radius: var(--pd-radius-lg);
  background: var(--pd-surface-elevated);
  color: var(--pd-text-secondary);
}

.pd-timeline__gap strong {
  color: var(--pd-text-primary);
  font-size: var(--pd-text-md);
}

.pd-timeline__changes {
  display: grid;
  gap: var(--pd-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-timeline__change {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pd-space-3);
  padding: var(--pd-space-2) var(--pd-space-3);
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  background: var(--pd-surface-base);
  font-size: var(--pd-text-sm);
}

.pd-timeline__change b {
  font-family: var(--pd-font-mono);
}

.pd-timeline__change .is-up {
  color: #157347;
}

.pd-timeline__change .is-down {
  color: #b02a37;
}

[data-theme="dark"] .pd-timeline__change .is-up {
  color: #4ade80;
}

[data-theme="dark"] .pd-timeline__change .is-down {
  color: #f87171;
}

.pd-timeline__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--pd-space-2);
}

.pd-timeline__stat {
  display: grid;
  gap: 0.1rem;
  padding: var(--pd-space-2) var(--pd-space-3);
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  background: var(--pd-surface-base);
}

.pd-timeline__stat small {
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-xs);
}

.pd-timeline__stat b {
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-md);
}

.pd-timeline__panel {
  display: grid;
  gap: var(--pd-space-3);
  padding: var(--pd-space-4);
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  background: var(--pd-surface-base);
  box-shadow: var(--pd-shadow-sm);
}

.pd-timeline__panel h3 {
  margin: 0;
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-md);
  letter-spacing: var(--pd-tracking-label);
  text-transform: uppercase;
}

.pd-timeline__panel > p {
  margin: 0;
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-sm);
}

.pd-timeline__loading {
  display: flex;
  align-items: center;
  gap: var(--pd-space-3);
  padding: var(--pd-space-5);
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  background: var(--pd-surface-base);
  color: var(--pd-text-secondary);
}

.pd-timeline__spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--pd-border);
  border-top-color: var(--pd-accent);
  border-radius: 50%;
  animation: pd-timeline-spin 0.8s linear infinite;
}

@keyframes pd-timeline-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pd-timeline__spinner { animation: none; }
}

.pd-timeline__error {
  display: grid;
  gap: var(--pd-space-3);
  padding: var(--pd-space-5);
  border: var(--pd-border-width) solid var(--pd-error-border);
  border-radius: var(--pd-radius-lg);
  background: var(--pd-error-bg);
  color: var(--pd-error-text);
}

.pd-timeline__error button {
  justify-self: start;
  min-height: var(--pd-touch-target);
  padding: 0 var(--pd-space-5);
  border: var(--pd-border-width) solid currentColor;
  border-radius: var(--pd-radius-md);
  background: var(--pd-surface-base);
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (min-width: 45rem) {
  .pd-timeline__units {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .pd-timeline__scoreboard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* The legacy team tab bar squeezes ten buttons into phone width and the labels
   overlap. Scope the fix to team pages that carry the Timeline tab so every tab
   keeps a readable, tappable width and the row scrolls horizontally instead. */
@media (max-width: 38.75rem) {
  .team-detail-tabs:has(button[data-team-section="timeline"]) {
    scrollbar-width: none;
  }

  .team-detail-tabs:has(button[data-team-section="timeline"])::-webkit-scrollbar {
    display: none;
  }

  .team-detail-tabs:has(button[data-team-section="timeline"]) button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}