/* The start hero — the landing before a guide exists (ch. 16 E-09): the
   connect chips, ONE primary action, the two described destinations, the
   quiet links row and the sign-in card — and, once a guide is on screen
   and the hero has gone, the pills row that keeps its two standing
   screens reachable (E-10). Linked by src/assets.js as `dashboard-hero.css`,
   AFTER dashboard.css: several rules here share a specificity with
   `.auth-section` / `.button` there and win by source order alone. Its
   own file for the reason `player-impact.js` and `field.css` are: the
   dashboard stylesheet sat exactly on its ratchet (ch. 13 §11) and the
   landing needed room. Nothing outside the hero uses these classes. */

/* Start hero — the pre-generate launch screen: connection state up
   top, ONE obvious primary action, everything else quiet. Once a
   guide is on screen it hides (all widths — the deck is the show) and
   the pills row below stands in for it. */
.start-hero {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px 4px 28px;
}

.hero-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-chips .conn-chip {
  cursor: pointer;
}
.hero-cta {
  font-size: 1.05rem;
  padding: 15px 22px;
  width: 100%;
  max-width: 430px;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 8px 28px rgba(102, 126, 234, 0.35);
}
/* The auto-build's busy primary (E-29, liveHeroLoading): it must recede,
   never draw at the same strength as an actionable primary — a game live
   at 320 otherwise stacks two identical full-strength indigo primaries, the
   dead "Building your guide…" above the one action, Final Drive, that
   #hero-line actually points to (review finding on PR #259). */
#topControls > .hero-cta[aria-busy='true'] {
  opacity: 0.72;
  cursor: progress;
}
/* The two standing screens. On a phone they stay the single stacked
   column they have always been; the wrapper only earns its keep at
   1024, where it becomes the hero card's second column. */
.hero-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.hero-secondary {
  width: 100%;
  max-width: 430px;
}
/* A destination button is a title plus what it is for — the names on
   their own ("Final Drive") never said. Left-aligned inside the button
   at every width, because two ragged centred lines read as a poster. */
#topControls .button:has(.hero-btn-sub) {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
}
/* Only the quiet variant gets the tighter box. On Monday the Final
   Drive button swaps `secondary` for `hero-cta`, and a primary keeps
   the primary's 15/22 — the two-line layout must not quietly demote
   it. */
#topControls .button.secondary:has(.hero-btn-sub) {
  padding: 11px 16px;
}
.hero-btn-title {
  font-weight: 700;
  font-size: 0.95rem;
}
.hero-btn-sub {
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.35;
  opacity: 0.72;
}
.hero-hint {
  color: var(--muted);
  font-size: 0.85rem;
  max-width: 430px;
}
/* #hero-line (ch. 16 E-29): reserved at one line so the clock's answer
   never shifts anything under the button once it fills in. */
#hero-line {
  min-height: 1.35em;
  margin: 0;
}
/* The guide-on-screen Yahoo notice (ch. 16 F-NEW-onboarding-designer-2,
   reconnect.js's yahooReconnectNotice): above the verdict strip when Yahoo
   is expired or unavailable. Reuses --warn — already this app's degraded /
   conflict token (live-mode.css) — rather than a new colour. Lives here,
   not styles.css, because that file sits exactly on its own ratchet. */
.yahoo-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: var(--warn);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  font-size: 13px;
}
.yahoo-notice .button {
  min-height: 44px;
}
.linklike {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.82rem;
  padding: 4px;
}
.linklike:hover {
  color: var(--text);
}
.signin-card {
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  width: 100%;
  max-width: 400px;
  text-align: left;
}
body.guide-active #topControls {
  display: none;
}

/* --- The two standing screens, as pills (E-10) --------------------------
   body.guide-active hides #topControls at EVERY width, and the hero is
   where Final Drive and Leagues & Invites live. This row, directly under
   the header, is the way to them whenever a guide is on screen — Monday's
   entry point in sight on a phone, not behind a toggle (F-22). --- */
.mm-quick {
  display: none;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 6px 0;
}
body.guide-active .mm-quick {
  display: flex;
}
.mm-pill {
  display: inline-flex;
  align-items: center;
  /* 44 like every other control in the app — these are the way off the
     deck on a phone, and they are tapped with a thumb. */
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.mm-pill:hover {
  border-color: var(--surface-3);
}

/* --- The header on a phone, with the account control (E-10) ------------
   Header rules, in this file rather than styles.css for the reason this
   file exists (ch. 13 §11: the dashboard stylesheet only shrinks), and
   linked after it, so they win by source order. --- */
@media (max-width: 640px) {
  /* The badge leaves the first row so the avatar can have it. Nothing is
     lost: the band below carries "Week 4 · Oct 1 - Oct 7" on one line,
     which is what the band already cost, so the header holds exactly the
     two rows it held before the control existed. */
  .week-badge {
    display: none;
  }
  .week-inline {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
  }
  /* The avatar's 44px hit box is taller than the title row, so it
     overhangs into the header's own 12px vertical padding rather than
     pushing the row down: the box stays 44, the row stays the height of
     the wordmark. */
  .mm-shell-right {
    margin-top: -6px;
    margin-bottom: -6px;
  }
  /* With a guide on screen the phone gives the band to the pills below it
     (ch. 16 §3.1's one exception): the deck is the show, and two ways off
     it are worth more here than the dates. */
  body.guide-active .week-dates-mobile {
    display: none;
  }
}

/* --- Phone and tablet (<1024): one centred 430px column, at exactly
   today's proportions — 320 and 768 are the same design at two sizes,
   and the primary action sits where it always has. The only change is
   8px off the bottom: the described buttons are a little taller than
   the single-line ones they replace. Padding only ever shrinks here. --- */
@media (max-width: 1023px) {
  .start-hero {
    padding-bottom: 20px;
  }
}

@media (max-width: 767px) {
  /* A link on a 288px row wraps mid-word ("Import from / screenshot")
     once it has company; two columns give every label a whole line to
     itself. One link today (E-10 moved the account rows to the header),
     kept for the next one. */
  .hero-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    width: 100%;
    max-width: 430px;
    justify-items: start;
  }
  .hero-links .linklike {
    padding: 4px 0;
    font-size: 0.78rem;
    text-align: left;
  }
}

/* --- Desktop: the hero stops being a phone column parked in the middle
   of 1400px and becomes the page's one card. The chips sit top right as
   status; the left column carries the action and the quiet links under
   it, the right column the two destinations. Left-aligned — a centred
   430px stripe at 1440 was the tell that this screen had never been
   designed for a desktop.

   Every rule here is keyed on --signed-in, which the template puts on
   #topControls only in that branch. Signed OUT the same element holds
   the sign-in card, which is already a card and centres itself: give it
   this grid and you get a card inside a card, with an empty second
   column and the trailing row's slack hanging under it. --- */
@media (min-width: 1024px) {
  .start-hero--signed-in {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    /* Four rows so the LAST one can take the slack. The right column is
       the taller of the two; without a trailing 1fr the surplus is split
       evenly across the rows the left column sits in and reopens the gap
       under the primary action that this layout exists to close. */
    grid-template-rows: auto auto auto 1fr;
    gap: 20px 32px;
    align-items: start;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px 24px;
  }
  .start-hero--signed-in > .hero-chips {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .start-hero--signed-in > .hero-cta,
  .start-hero--signed-in > .hero-hint {
    grid-column: 1;
    max-width: none;
  }
  /* Spans every row the left column uses, so it sets the card's height
     without setting any single row's. */
  .start-hero--signed-in > .hero-side {
    grid-column: 2;
    grid-row: 2 / -1;
    align-items: stretch;
  }
  .start-hero--signed-in > .hero-side .hero-secondary,
  .start-hero--signed-in > .hero-side .hero-cta {
    max-width: none;
  }
  /* Under the primary action, not across the bottom: the left column
     otherwise ends at the CTA while the right runs two buttons deeper,
     and the hole under "Generate My Rooting Guide" was the first thing
     the eye found. Same rule in both states — with no source the hint
     simply takes the row above. */
  .start-hero--signed-in > .hero-links {
    grid-column: 1;
    margin-top: 0;
  }
}