/* Road To Kickoff — trip wizard styles
   Reference for PR 1. Drop into redesign/wizard.css.
   Depends on brand-book/tokens.css. */

/* =========================================================
   TRIP WIZARD — modal that demos the product
   ========================================================= */
.wiz-backdrop[hidden] { display: none; }

.wiz-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 33, 56, 0.72); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: var(--space-4);
  animation: wiz-fade 220ms var(--ease-out);
}
@keyframes wiz-fade { from { opacity: 0; } to { opacity: 1; } }

.wiz {
  width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius-md); position: relative;
  display: grid; grid-template-columns: 200px 1fr;
  animation: wiz-rise 280ms var(--ease-out);
}
@keyframes wiz-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.wiz__close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(15,20,34,0.06); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer; z-index: 2;
  transition: background var(--dur-fast) var(--ease-out);
}
.wiz__close:hover { background: rgba(15,20,34,0.12); }

.wiz__rail {
  background: var(--pitch); color: var(--chalk);
  padding: var(--space-7) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.wiz__step {
  font-family: var(--font-mono); font-size: var(--fs-75);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: rgba(244,239,229,0.4);
  padding: 8px 0; border-left: 2px solid rgba(244,239,229,0.15);
  padding-left: var(--space-3);
  transition: color var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out);
}
.wiz__step.is-on { color: var(--cream); border-left-color: var(--cream); }

.wiz__body { padding: var(--space-7) var(--space-6); }
.wiz__eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-75);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--pitch-deep); margin-bottom: var(--space-3);
}
.wiz__hed {
  font-family: var(--font-serif); font-size: var(--fs-fluid-h2);
  font-weight: 600; line-height: 1.05; letter-spacing: var(--ls-snug);
  color: var(--ink); margin: 0 0 var(--space-3); text-wrap: balance;
}
.wiz__dek {
  font-family: var(--font-sans); font-size: var(--fs-100);
  line-height: 1.55; color: var(--muted); margin: 0 0 var(--space-6);
  max-width: 50ch;
}
.wiz__teams {
  margin-bottom: var(--space-6);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--chalk);
}
.wiz__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); }
.wiz__choices { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }

.wiz-choice {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: var(--space-4) var(--space-5); width: 100%;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--chalk); color: var(--ink); cursor: pointer; text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.wiz-choice:hover { border-color: var(--pitch); }
.wiz-choice.is-on { border-color: var(--pitch-deep); background: rgba(47,107,44,0.08); box-shadow: inset 4px 0 0 var(--pitch-deep); }
.wiz-choice__label { font-family: var(--font-serif); font-size: var(--fs-300); font-weight: 500; }
.wiz-choice__note  { font-family: var(--font-mono);  font-size: var(--fs-75);  color: var(--muted); letter-spacing: var(--ls-wide); }

.wiz-trip { background: var(--chalk); border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--space-5); margin-bottom: var(--space-5); }
.wiz-trip__leg  { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-3); padding: var(--space-3) 0; }
.wiz-trip__rail { display: flex; flex-direction: column; align-items: center; }
.wiz-trip__dot  { width: 12px; height: 12px; border-radius: 50%; background: var(--pitch-deep); margin-top: 6px; }
.wiz-trip__line { flex: 1; width: 2px; background: linear-gradient(var(--pitch-deep), var(--hairline)); margin: 4px 0 -4px; }
.wiz-trip__date { font-family: var(--font-mono);  font-size: var(--fs-50);  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--muted); }
.wiz-trip__fix  { font-family: var(--font-serif); font-size: var(--fs-300); font-weight: 500; color: var(--ink); margin: 4px 0 2px; }
.wiz-trip__fix .vs { color: var(--muted); font-style: italic; margin: 0 4px; }
.wiz-trip__meta { font-family: var(--font-mono);  font-size: var(--fs-75); color: var(--muted); }

@media (max-width: 640px) {
  .wiz { grid-template-columns: 1fr; }
  .wiz__rail { flex-direction: row; padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .wiz__step { padding: 4px 0; border-left: none; border-bottom: 2px solid rgba(244,239,229,0.15); padding-left: 0; padding-bottom: 8px; }
  .wiz__step.is-on { border-left: none; border-bottom-color: var(--cream); }
  .wiz { overflow: hidden; }
  .wiz__body { padding: var(--space-5) var(--space-4); overflow: hidden; }
  .wiz__hed { font-size: clamp(20px, 6vw, 28px); }
  .wiz__dek { max-width: 100%; font-size: var(--fs-87); }
  .wiz__teams { max-height: 220px; }
  .wiz__teams.team-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   TEAM CHIPS — used inside .wiz__teams on step 0.
   Mirrors the legacy .wiz-chip styles in index.html that
   will be removed in the cleanup task. Self-sufficient
   so the wizard can stand on its own.
   ========================================================= */
.wiz-chip { font-family: var(--sans); font-size: 13px; padding: 8px 14px; border: 1px solid var(--hairline); border-radius: 4px; background: var(--paper-warm); color: var(--ink-deep); cursor: pointer; transition: all 0.1s; }
.wiz-chip:hover { border-color: var(--pitch); }
.wiz-chip.on { background: var(--pitch-deep); color: var(--chalk); border-color: var(--pitch-deep); }

.submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* =========================================================
   BRACKET TEASER — lightweight R32 forecast in Step 2
   ========================================================= */
.bracket-teaser {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.bracket-teaser__hed {
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.bracket-teaser__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: 6px 0;
  font-size: var(--fs-100);
}
.bracket-teaser__cond {
  font-family: var(--font-sans);
  color: var(--ink);
}
.bracket-teaser__arrow {
  color: var(--muted);
  font-family: var(--font-mono);
}
.bracket-teaser__matchup {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--pitch-deep);
}
.bracket-teaser__odds {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  background: var(--paper-warm, var(--paper));
  color: var(--pitch-deep);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  vertical-align: 1px;
  cursor: help;
}
.bracket-teaser__odds--est {
  color: var(--muted);
}