/* ─────────────────────────────────────────────────────────────
   desk.css — components for the Favorite teams and Settings pages.

   Loaded AFTER briefing.css, which already provides the design tokens
   (--ink/--paper/--green/--accent/--line/--muted), the masthead, the
   edition bar, the serif h1, .section-head, .tools, .desk, footer and
   the dark-mode token overrides. This file only adds the controls and
   cards those two pages need, in the same visual language, so the
   schedule's 94KB styles.css is no longer pulled in here.

   Class names under "Favorites" are the ones favorite-teams.js injects
   at runtime — they are a contract, do not rename them.
   ───────────────────────────────────────────────────────────── */

/* ── Toolbar: search + actions ─────────────────────────────── */

.page-search {
  flex: 1 1 320px;
  max-width: 420px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  color: var(--ink);
}
.page-search::placeholder { color: var(--muted); }

.page-actions { display: flex; gap: 10px; align-items: center; }

.ghost-button {
  background: white;
  border: 1px solid var(--line);
  padding: 10px 17px;
  border-radius: 6px;
  color: var(--ink);
  font-weight: 650;
  font-size: 14px;
}
.ghost-button:hover { border-color: var(--green); }

.accent-button {
  background: var(--accent);
  border: 1px solid transparent;
  padding: 10px 17px;
  border-radius: 6px;
  color: var(--ink);
  font-weight: 750;
  font-size: 14px;
}
.accent-button:hover { text-decoration: none; filter: brightness(.97); }

/* ── Cards (matches the homepage .game card treatment) ─────── */

.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 22px;
  margin-bottom: 14px;
}
.card-head { margin-bottom: 16px; }
.card-head h2 { font-size: 19px; line-height: 1.3; margin: 0 0 6px; letter-spacing: -.3px; }
.card-head p { margin: 0; font-size: 14px; color: var(--muted); }

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 10px;
}

/* ── Settings controls ─────────────────────────────────────── */

.toggle-list { display: grid; gap: 12px; }

.toggle {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.toggle input { accent-color: var(--green); width: 17px; height: 17px; flex: none; }

.field-label { display: block; font-size: 13px; font-weight: 700; margin: 0 0 8px; }

.select {
  width: 100%;
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 13px;
  color: var(--ink);
}

.chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: transparent;
  padding: 7px 13px;
  font-size: 14px;
}
.chip input { accent-color: var(--green); }

.help { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.help code {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}

/* ── Favorites (class names injected by favorite-teams.js) ─── */

.favorites-league-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.favorite-league-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 19px;
}
.favorite-league-head h2 {
  font-size: 17px;
  margin: 0 0 4px;
  letter-spacing: -.3px;
  line-height: 1.25;
}
.favorite-league-head p { margin: 0 0 14px; font-size: 13px; color: var(--muted); }

.favorite-team-chip-list,
.favorites-chip-list { display: flex; flex-wrap: wrap; gap: 7px; }

.favorite-team-chip {
  border: 1px solid var(--line);
  border-radius: 30px;
  background: transparent;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
}
.favorite-team-chip:hover { border-color: var(--green); }
.favorite-team-chip.is-selected {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
  font-weight: 650;
}

.favorites-selected { margin: 0 0 4px; }

/* JS injects an <h2> + <p> inside this head, so style the children. */
.favorites-selected-head { margin-bottom: 12px; }
.favorites-selected-head h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 4px;
}
.favorites-selected-head p { margin: 0; font-size: 13px; color: var(--muted); }

.favorites-empty {
  background: white;
  border: 1px dashed var(--line);
  padding: 24px;
  color: var(--muted);
  border-radius: 8px;
}
.favorites-empty h2 { font-size: 16px; margin: 0 0 6px; color: var(--ink); letter-spacing: -.2px; }
.favorites-empty p { margin: 0; font-size: 14px; }

/* ── Sticky aside rail (the Option B signature) ─────────────── */

.desk aside .card { position: sticky; top: 24px; }

.summary-list { display: grid; gap: 10px; font-size: 14px; }
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.summary-row:last-child { border-bottom: 0; padding-bottom: 0; }
.summary-row > span:last-child { font-weight: 700; text-align: right; }

.aside-link {
  display: block;
  text-align: center;
  background: var(--accent);
  padding: 13px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 750;
  margin-top: 16px;
  color: var(--ink);
}
.aside-link:hover { text-decoration: none; filter: brightness(.97); }

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 900px) {
  .desk aside .card { position: static; }
  .page-search { max-width: 100%; }
}

@media (max-width: 650px) {
  .favorites-league-grid { grid-template-columns: 1fr; }
  .page-actions { flex-wrap: wrap; }
}

/* ── Dark mode (tokens already flipped by briefing.css) ─────── */

@media (prefers-color-scheme: dark) {
  .card,
  .favorite-league-card,
  .favorites-empty,
  .ghost-button,
  .page-search,
  .select { background: #1a2824; }
  .toggle { background: #16221f; }
  .favorite-team-chip.is-selected {
    background: var(--accent);
    color: #172c2b;
    border-color: var(--accent);
  }
  .accent-button,
  .aside-link { color: #172c2b; }
  .help code { background: #16221f; }
}