/* === Team Focus panel ===
   Shared between Race-for-the-Trophy team pages (rendered inline inside
   a colspan'd detail row) and Standings team pages (rendered above the
   bump chart). Uses --team-* color variables set by the page chrome. */

.team-focus {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: color-mix(in srgb, var(--team-primary) 6%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--team-primary) 25%, var(--color-border));
  border-radius: var(--radius-lg);
}

.team-focus__scenario {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.team-focus__scenario-text {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  letter-spacing: var(--ls-tight);
}

.team-focus__position {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  color: var(--team-primary);
}

.team-focus__position-value {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.team-focus__position-label {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}

.team-focus__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.team-focus__section-label {
  color: var(--color-text-faint);
}

/* --- Form list --- */
.team-focus__form,
.team-focus__fixtures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.team-focus__form-item,
.team-focus__fixture-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-caption);
}

.team-focus__form-result {
  flex-shrink: 0;
}

.team-focus__form-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
}

.team-focus__form-loc,
.team-focus__fixture-loc {
  color: var(--color-text-faint);
  text-transform: lowercase;
}

.team-focus__form-logo,
.team-focus__fixture-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.team-focus__form-opp,
.team-focus__fixture-opp {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.team-focus__form-score {
  color: var(--color-text);
  font-size: var(--fs-caption);
}

.team-focus__fixture-date {
  color: var(--color-text-faint);
  font-size: var(--fs-caption);
}