/* === Index Pages === */

.index-breadcrumb {
  padding: 12px 24px;
  font-size: 12px;
  color: var(--color-text-faint);
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 50%, var(--color-bg));
}

.index-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.index-breadcrumb a:hover {
  color: var(--color-text);
}

.index-breadcrumb__separator {
  color: var(--color-text-faint);
  margin: 0 6px;
}

.index-header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--color-border);
}

.index-header__logo {
  width: 36px;
  height: 36px;
  border-radius: 6px;
}

.index-header__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
}

.index-header__subtitle {
  font-size: 12px;
  color: var(--color-text-muted);
}

.index-stats {
  padding: 16px 24px;
  display: flex;
  gap: 24px;
  font-size: 12px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

.index-stats__value {
  color: var(--color-text);
  font-weight: 600;
  font-size: 16px;
}

.index-section {
  padding: 20px 24px;
}

.index-section__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.index-section__label-link {
  color: inherit;
  text-decoration: none;
}

.index-section__label-link:hover {
  color: var(--color-text);
}

.index-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (width <= 900px) {
  .index-card-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (width <= 600px) {
  .index-card-grid { grid-template-columns: repeat(2, 1fr); }
}

.index-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}

.index-card:hover {
  border-color: var(--color-text-faint);
}

.index-card__logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.index-card__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
}

.index-card__meta {
  font-size: 10px;
  color: var(--color-text-muted);
}

.index-viz-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.index-viz-link {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: 6px;
  padding: 10px 16px;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.15s;
}

.index-viz-link:hover {
  color: var(--color-text);
}

/* --- Content container --- */
.index-content {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

/* --- Site home hero --- */
.index-hero {
  padding: 40px 24px 20px;
  text-align: center;
}

.index-hero__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.5px;
}

.index-hero__subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 8px;
}

/* --- League/season card (larger, for site home and comp home) --- */
.index-feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}

.index-feature-card:hover {
  border-color: var(--color-text-faint);
}

.index-feature-card__logo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.index-feature-card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
}

.index-feature-card__meta {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.index-feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

/* Standings table */
.index-standings__matchweek {
  font-weight: normal;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  margin-left: 0.5rem;
}

.index-standings__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  color: var(--color-text);
}

.index-standings__table thead tr {
  border-bottom: 2px solid var(--color-border);
  text-align: left;
}

.index-standings__table th {
  padding: 0.5rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.index-standings__table tbody tr {
  border-bottom: 1px solid var(--color-border);
}

.index-standings__table tbody tr:hover {
  background: color-mix(in srgb, var(--color-border) 30%, transparent);
}

.index-standings__pos {
  width: 2rem;
  text-align: center !important;
  color: var(--color-text-secondary);
}

.index-standings__team {
  min-width: 10rem;
}

.index-standings__team-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}

.index-standings__team-link:hover {
  color: var(--color-text);
}

.index-standings__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.index-standings__logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.index-standings__abbr {
  display: none;
}

.index-standings__num {
  text-align: center !important;
  padding: 0.5rem;
}

.index-standings__pts {
  font-weight: 700;
}

.index-standings__gd--positive {
  color: #4caf50;
}

.index-standings__gd--negative {
  color: #ef5350;
}

.index-standings__gd--zero {
  color: var(--color-text-secondary);
}

@media (width <= 600px) {
  .index-standings__name {
    display: none;
  }

  .index-standings__abbr {
    display: inline;
  }

  .index-standings__logo {
    width: 16px;
    height: 16px;
  }
}

/* Race for the Shield summary */
.index-race-summary {
  border: 1px solid var(--color-border, #1a1a2e);
  border-radius: 8px;
  padding: 1.25rem;
  background: rgb(255 255 255 / 1.5%);
}

.index-race-summary__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.index-race-summary__stat { text-align: center; }

.index-race-summary__stat-label {
  font-size: 0.7rem;
  color: var(--color-text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.index-race-summary__stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text, #e0e0e0);
  font-variant-numeric: tabular-nums;
}

.index-race-summary__stat-unit {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-muted, #888);
}

.index-race-summary__stat-team {
  font-size: 0.75rem;
  color: var(--color-text-muted, #aaa);
  margin-top: 0.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.index-race-summary__stat-logo {
  width: 16px;
  height: 16px;
}

.index-race-summary__stat-detail {
  font-size: 0.7rem;
  color: var(--color-text-muted, #666);
  margin-top: 0.125rem;
}

.index-race-summary__events {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.index-race-summary__event {
  font-size: 0.75rem;
  padding: 0.375rem 0.625rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.index-race-summary__event--shield {
  background: rgb(255 215 0 / 8%);
  color: #ffd700;
}

.index-race-summary__event--home {
  background: rgb(100 200 100 / 8%);
  color: #7ddf7d;
}

.index-race-summary__event--playoff {
  background: rgb(100 160 255 / 8%);
  color: #7db4ff;
}

.index-race-summary__event--eliminated {
  background: rgb(255 80 80 / 6%);
  color: #ff6b6b;
}

.index-race-summary__event-badge {
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 0.125rem 0.3125rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.index-race-summary__event-badge--shield {
  background: rgb(255 215 0 / 20%);
  color: #ffd700;
}

.index-race-summary__event-badge--home {
  background: rgb(100 200 100 / 20%);
  color: #7ddf7d;
}

.index-race-summary__event-badge--playoff {
  background: rgb(100 160 255 / 20%);
  color: #7db4ff;
}

.index-race-summary__event-badge--eliminated {
  background: rgb(255 80 80 / 15%);
  color: #ff6b6b;
}

.index-race-summary__event-logo {
  width: 16px;
  height: 16px;
}

.index-race-summary__contenders {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
}

.index-race-summary__matchweek {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--color-text-muted, #666);
  text-align: center;
}

.index-race-summary__link {
  display: block;
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-link, #7db4ff);
  text-decoration: none;
}

.index-race-summary__link:hover { text-decoration: underline; }

@media (width <= 768px) {
  .index-race-summary__stats {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* Standings table badges */
.index-standings__status {
  width: 1.5rem;
  text-align: center;
  padding: 0 0.25rem;
}

.index-standings__badge {
  font-size: 0.5625rem;
  font-weight: 700;
  width: 1.125rem;
  height: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  text-transform: uppercase;
}

.index-standings__badge--shield {
  background: rgb(255 215 0 / 15%);
  color: #ffd700;
}

.index-standings__badge--home {
  background: rgb(100 200 100 / 15%);
  color: #7ddf7d;
}

.index-standings__badge--playoff {
  background: rgb(100 160 255 / 15%);
  color: #7db4ff;
}

.index-standings__badge--eliminated {
  background: rgb(255 80 80 / 12%);
  color: #ff6b6b;
}