/* Schedule rebuild (2026-10-03): real-date public schedule and Owner Desk
   season rail. Desktop public schedule renders graphic tiles; the phone view
   is the same markup restyled as clean list rows. Light and dark both use the
   neutral token base. */

/* ---------------------------------------------------------------- */
/* Public schedule: cockpit + smart control                          */
/* ---------------------------------------------------------------- */

.sr-cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "identity week" "clock clock";
  gap: var(--pd-space-5);
  align-items: end;
  padding: var(--pd-space-6);
  margin-bottom: var(--pd-space-5);
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  background:
    radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--pd-accent) 10%, transparent), transparent 58%),
    var(--pd-surface-base);
}

.sr-cockpit-identity { grid-area: identity; }
.sr-cockpit-identity h2 { margin: 0.15rem 0 0.45rem; font: 800 var(--pd-text-2xl) / var(--pd-leading-tight) var(--pd-font-display); letter-spacing: -0.015em; }
.sr-cockpit-identity p { margin: 0; max-width: 54ch; color: var(--pd-text-secondary); font-size: var(--pd-text-sm); }

.sr-cockpit-week {
  grid-area: week;
  display: grid;
  gap: 0.1rem;
  justify-items: end;
  text-align: right;
  padding: var(--pd-space-4) var(--pd-space-5);
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  background: var(--pd-surface-elevated);
  min-width: 10.5rem;
}
.sr-cockpit-week small { color: var(--pd-text-secondary); font-size: var(--pd-text-xs); font-weight: 700; letter-spacing: var(--pd-tracking-label); text-transform: uppercase; }
.sr-cockpit-week strong { font: 800 var(--pd-text-lg) / 1.15 var(--pd-font-display); }
.sr-cockpit-week em { color: var(--pd-text-secondary); font-size: var(--pd-text-sm); font-style: normal; font-weight: 600; }
.sr-cockpit .lg-advance-clock { grid-area: clock; margin: 0; }

.sr-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pd-space-4);
  margin-bottom: var(--pd-space-5);
}

.sr-weeknav { display: inline-flex; align-items: stretch; gap: var(--pd-space-2); }
.sr-weekstep {
  appearance: none;
  min-height: var(--pd-touch-target);
  padding: 0.5rem 1rem;
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-pill);
  background: var(--pd-surface-base);
  color: var(--pd-text-primary);
  font: inherit;
  font-size: var(--pd-text-sm);
  font-weight: 700;
  cursor: pointer;
}
.sr-weekstep:hover:not(:disabled) { border-color: var(--pd-border-strong); }
.sr-weekstep.is-active { background: var(--pd-gray-900); border-color: var(--pd-gray-900); color: var(--pd-gray-50); }
.sr-weekstep:disabled { opacity: 0.4; cursor: not-allowed; }

.sr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pd-space-2); }
.sr-chip {
  appearance: none;
  min-height: 2.25rem;
  padding: 0.4rem 0.9rem;
  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: inherit;
  font-size: var(--pd-text-sm);
  font-weight: 700;
  cursor: pointer;
}
.sr-chip.is-active { background: var(--pd-accent); border-color: var(--pd-accent); color: #fff; }
.sr-season { display: inline-flex; align-items: center; gap: var(--pd-space-2); color: var(--pd-text-secondary); font-size: var(--pd-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--pd-tracking-label); }

/* ---------------------------------------------------------------- */
/* Week groups + games                                               */
/* ---------------------------------------------------------------- */

.sr-weeks { display: grid; gap: var(--pd-space-6); }

.sr-week-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--pd-space-3);
  padding-bottom: var(--pd-space-3);
  margin-bottom: var(--pd-space-4);
  border-bottom: var(--pd-border-width) solid var(--pd-border);
}
.sr-week-chip { padding: 0.22rem 0.6rem; border-radius: var(--pd-radius-sm); background: var(--pd-gray-900); color: var(--pd-gray-50); font: 800 var(--pd-text-xs) / 1.6 var(--pd-font-display); letter-spacing: 0.06em; }
.sr-week-date { font: 800 var(--pd-text-lg) / 1.2 var(--pd-font-display); }
.sr-week-date em { color: var(--pd-accent); font-size: var(--pd-text-xs); font-style: normal; text-transform: uppercase; letter-spacing: 0.06em; }
.sr-week-head > em { margin-left: auto; color: var(--pd-text-secondary); font-size: var(--pd-text-sm); font-style: normal; font-weight: 600; }

.sr-games { display: grid; gap: var(--pd-space-3); }

.sr-game {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--pd-space-4);
  padding: var(--pd-space-4) var(--pd-space-5);
  min-height: 4.4rem;
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  background: var(--pd-surface-base);
  color: var(--pd-text-primary);
  text-decoration: none;
  transition: border-color var(--pd-motion-fast) var(--pd-ease), transform var(--pd-motion-fast) var(--pd-ease);
}
.sr-game:hover { border-color: var(--pd-border-strong); transform: translateY(-1px); }

.sr-side { display: flex; align-items: center; gap: var(--pd-space-3); min-width: 0; }
.sr-side.is-home { justify-content: flex-end; text-align: right; }
.sr-side-copy { display: grid; min-width: 0; }
.sr-side-copy strong { font: 800 var(--pd-text-lg) / 1.1 var(--pd-font-display); }
.sr-side-copy small { color: var(--pd-text-secondary); font-size: var(--pd-text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-venue { color: var(--pd-text-secondary); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.1em; }
.sr-side.is-winner strong, .sr-score.is-winner { color: var(--pd-accent-strong); }

.sr-score { min-width: 2.2rem; padding: 0.15rem 0.5rem; border-radius: var(--pd-radius-sm); background: var(--pd-surface-interactive); font: 800 var(--pd-text-lg) / 1.4 var(--pd-font-display); text-align: center; }
.sr-side.is-home .sr-score { order: -1; }

.sr-mid { display: grid; justify-items: center; gap: 0.1rem; min-width: 9.5rem; text-align: center; }
.sr-mid b { font: 800 var(--pd-text-xs) / 1.4 var(--pd-font-display); letter-spacing: 0.05em; text-transform: uppercase; }
.sr-mid small { color: var(--pd-text-secondary); font-size: var(--pd-text-xs); }
.sr-final { color: var(--pd-text-secondary); }
.sr-live { color: var(--pd-status-live-text); }
.sr-date { color: var(--pd-text-primary); }
.sr-mid-date { color: var(--pd-text-primary); font-weight: 700; }
.sr-owner-tag { padding: 0.22rem 0.55rem; border-radius: var(--pd-radius-pill); background: var(--pd-gray-900); color: var(--pd-gray-50); }

/* Owner games: team-color treatment across the whole tile. */
.sr-game.is-owner-game { overflow: hidden; border-color: color-mix(in srgb, var(--away-primary) 45%, var(--pd-border)); }
.sr-game.is-owner-game::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--away-primary) 0 50%, var(--home-primary) 50% 100%);
}
.sr-game.is-owner-game {
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--away-primary) 12%, var(--pd-surface-base)), var(--pd-surface-base) 45%, var(--pd-surface-base) 55%, color-mix(in srgb, var(--home-primary) 12%, var(--pd-surface-base)));
}
.sr-game.is-owner-game .sr-owner-tag { background: linear-gradient(100deg, var(--away-primary), var(--home-primary)); }

/* CPU games stay compact. */
.sr-game.is-cpu-game { padding: 0.65rem var(--pd-space-5); min-height: 3.4rem; }
.sr-game.is-cpu-game .sr-side-copy strong { font-size: var(--pd-text-md); }
.sr-game.is-cpu-game .sr-score { font-size: var(--pd-text-md); }

/* ---------------------------------------------------------------- */
/* Phone: clean list rows                                            */
/* ---------------------------------------------------------------- */

@media (max-width: 40rem) {
  .sr-cockpit { grid-template-columns: 1fr; grid-template-areas: "identity" "week" "clock"; padding: var(--pd-space-5); }
  .sr-cockpit-week { justify-items: start; text-align: left; min-width: 0; }
  .sr-controls { flex-direction: column; align-items: stretch; }
  .sr-weeknav { display: grid; grid-template-columns: 1fr auto 1fr; }
  .sr-weekstep { padding: 0.5rem 0.6rem; font-size: var(--pd-text-xs); text-align: center; }

  .sr-game,
  .sr-game.is-owner-game,
  .sr-game.is-cpu-game {
    grid-template-columns: 1fr;
    gap: var(--pd-space-2);
    padding: var(--pd-space-4);
  }
  .sr-side, .sr-side.is-home { justify-content: flex-start; text-align: left; }
  .sr-side.is-home .sr-score { order: 0; }
  .sr-side.is-home { flex-direction: row; }
  .sr-mid {
    order: 3;
    justify-items: start;
    min-width: 0;
    padding-top: var(--pd-space-2);
    border-top: var(--pd-border-width) solid var(--pd-border);
    text-align: left;
  }
  .sr-mid.sr-mid-owner { align-items: flex-start; }
  .sr-week-head > em { margin-left: 0; }
}

/* ---------------------------------------------------------------- */
/* Owner Desk season rail                                            */
/* ---------------------------------------------------------------- */

.owner-schedule-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22.5rem; gap: var(--pd-space-6); align-items: start; }
.owner-schedule-main { min-width: 0; }

.owner-schedule-rail {
  position: sticky;
  top: 5.5rem;
  display: grid;
  gap: var(--pd-space-3);
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  background: var(--pd-surface-base);
  padding: var(--pd-space-4);
  max-height: calc(100vh - 7rem);
}
.owner-schedule-rail > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pd-space-3); }
.owner-schedule-rail > header span { display: grid; }
.owner-schedule-rail > header small { color: var(--pd-text-secondary); font-size: var(--pd-text-xs); font-weight: 800; letter-spacing: var(--pd-tracking-label); }
.owner-schedule-rail > header strong { font: 800 var(--pd-text-md) / 1.2 var(--pd-font-display); }
.owner-schedule-rail > header b { padding: 0.2rem 0.55rem; border-radius: var(--pd-radius-pill); background: var(--pd-surface-interactive); color: var(--pd-text-secondary); font-size: var(--pd-text-xs); }

.owner-strip-legend { display: flex; flex-wrap: wrap; gap: var(--pd-space-3); color: var(--pd-text-secondary); font-size: var(--pd-text-xs); font-weight: 600; }
.owner-strip-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.owner-strip-legend i { width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--pd-gray-300); }
.owner-strip-legend i.is-user { background: var(--pd-accent); }
.owner-strip-legend i.is-cpu { background: var(--pd-gray-500); }

.owner-strip-rows { display: grid; gap: 0.15rem; overflow-y: auto; }
.owner-strip-row {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  grid-template-areas: "week matchup tag" "week matchup result";
  align-items: center;
  gap: 0.15rem var(--pd-space-3);
  padding: 0.42rem 0.5rem;
  border-radius: var(--pd-radius-sm);
  color: var(--pd-text-primary);
  text-decoration: none;
}
.owner-strip-row:hover { background: var(--pd-surface-interactive); }
.owner-strip-row.is-user { background: color-mix(in srgb, var(--pd-accent) 7%, transparent); }
.owner-strip-week { grid-area: week; display: grid; justify-items: center; }
.owner-strip-week small { color: var(--pd-text-secondary); font-size: 0.625rem; font-weight: 800; }
.owner-strip-week strong { font: 800 var(--pd-text-md) / 1 var(--pd-font-display); }
.owner-strip-matchup { grid-area: matchup; display: flex; align-items: center; gap: var(--pd-space-2); min-width: 0; }
.owner-strip-matchup > span { display: grid; min-width: 0; }
.owner-strip-matchup strong { font-size: var(--pd-text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.owner-strip-matchup small { color: var(--pd-text-secondary); font-size: var(--pd-text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.owner-strip-tag { grid-area: tag; align-self: end; padding: 0.1rem 0.4rem; border-radius: var(--pd-radius-sm); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.05em; }
.owner-strip-tag.is-user { background: var(--pd-accent); color: #fff; }
.owner-strip-tag.is-cpu { background: var(--pd-gray-200); color: var(--pd-gray-700); }
.owner-strip-tag.is-open { background: transparent; color: var(--pd-text-secondary); border: var(--pd-border-width) dashed var(--pd-border); }
.owner-strip-result { grid-area: result; align-self: start; font: 800 var(--pd-text-xs) / 1.3 var(--pd-font-mono); color: var(--pd-text-secondary); }
.owner-strip-note { margin: 0; color: var(--pd-text-secondary); font-size: var(--pd-text-xs); }

@media (max-width: 74rem) {
  .owner-schedule-layout { grid-template-columns: 1fr; }
  .owner-schedule-rail { position: static; max-height: none; }
  .owner-strip-rows { max-height: 24rem; }
}

/* ---------------------------------------------------------------- */
/* Commissioner schedule calendar controls                           */
/* ---------------------------------------------------------------- */

.commissioner-schedule-lead { margin: 0 0 var(--pd-space-4); color: var(--pd-text-secondary); font-size: var(--pd-text-sm); }
.commissioner-schedule-week1 { display: grid; gap: 0.25rem; max-width: 16rem; margin-bottom: var(--pd-space-4); }
.commissioner-schedule-week1 span { font-size: var(--pd-text-xs); font-weight: 800; letter-spacing: var(--pd-tracking-label); text-transform: uppercase; color: var(--pd-text-secondary); }
.schedule-calendar-weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--pd-space-3); margin-bottom: var(--pd-space-4); }
.schedule-calendar-weeks label { display: grid; gap: 0.2rem; padding: var(--pd-space-3); border: var(--pd-border-width) solid var(--pd-border); border-radius: var(--pd-radius-sm); background: var(--pd-surface-elevated); }
.schedule-calendar-weeks label.is-adjusted { border-color: var(--pd-accent); background: color-mix(in srgb, var(--pd-accent) 6%, var(--pd-surface-elevated)); }
.schedule-calendar-weeks span { font-size: var(--pd-text-xs); font-weight: 700; }
.schedule-calendar-weeks small { color: var(--pd-text-secondary); font-size: var(--pd-text-xs); }
.commissioner-schedule-hint { display: block; color: var(--pd-text-secondary); font-size: var(--pd-text-xs); margin-top: var(--pd-space-3); }

/* ---------------------------------------------------------------- */
/* Dark theme adjustments                                            */
/* ---------------------------------------------------------------- */

:root[data-theme="dark"] .sr-cockpit { background: radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--pd-accent) 22%, transparent), transparent 60%), var(--pd-surface-base); }
:root[data-theme="dark"] .sr-weekstep.is-active { background: var(--pd-gray-100); border-color: var(--pd-gray-100); color: var(--pd-gray-900); }
:root[data-theme="dark"] .sr-week-chip { background: var(--pd-gray-100); color: var(--pd-gray-900); }
:root[data-theme="dark"] .sr-game.is-owner-game {
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--away-primary) 26%, var(--pd-surface-base)), var(--pd-surface-base) 48%, var(--pd-surface-base) 52%, color-mix(in srgb, var(--home-primary) 26%, var(--pd-surface-base)));
}
:root[data-theme="dark"] .owner-strip-tag.is-cpu { background: var(--pd-gray-700); color: var(--pd-gray-100); }
:root[data-theme="dark"] .sr-score { background: var(--pd-gray-800); }
:root[data-theme="dark"] .owner-schedule-rail > header b { background: var(--pd-gray-800); }