/*
 * Home surface. Consumes the shared foundation tokens from style.css, so this file declares no
 * palette, radius, shadow, or duration of its own and the home page cannot drift from the system.
 */
body[data-page="home"] [data-shell] {
  max-width: 1120px;
}

/*
 * One explicit, compressible column. Home's sections stack, but the shared `[data-card]` rule
 * asks for a twelve-column span, so without a template here main auto-creates twelve implicit
 * columns: the card lands in row 1 and the hero and footer fall into column 1, which collapses
 * to a sliver beside the code's intrinsic width at narrow viewports.
 */
body[data-page="home"] main {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 24px;
}

/*
 * One entrance for the whole hero, starting immediately: the headline, lead, and actions rise
 * together on the first paint instead of each waiting behind a decorative delay.
 */
body[data-page="home"] [data-hero] {
  animation: rise var(--duration-med) var(--ease-out) both;
}

/*
 * The quickstart code line is wider than a 320px screen. The card nests auto-sized grids, so
 * without an explicit minimum the code's intrinsic width becomes the card's minimum, then main's,
 * then the shell's, and the page overflows instead of letting the code scroll inside the card.
 * The card takes the single column directly instead of the shared twelve-column span, so that
 * column, not the code, sets the width and the code scrolls inside the card.
 */
body[data-page="home"] main > [data-card] {
  grid-column: 1;
}

body[data-page="home"] [data-card-body],
body[data-page="home"] [data-card],
body[data-page="home"] [data-card] pre[data-code] {
  min-width: 0;
}

body[data-page="home"] [data-card] pre[data-code] {
  max-width: 100%;
}

body[data-page="home"] [data-home-footer],
body[data-page="home"] [data-home-footer] nav,
body[data-page="home"] [data-home-status] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}

body[data-page="home"] [data-home-footer] {
  justify-content: space-between;
  padding-top: 4px;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* The health target is a control-sized link so the badge keeps a comfortable press area. */
body[data-page="home"] [data-home-status] {
  min-height: var(--control-height);
  border-radius: var(--radius-sm);
  color: var(--muted);
}

/* The dot repeats the badge state color, so health reads as one semantic unit, not color alone. */
body[data-page="home"] [data-home-status] [data-badge]::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentcolor;
}

body[data-page="home"] a[data-button] svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

@media (max-width: 560px) {
  body[data-page="home"] [data-home-footer] {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] [data-hero] {
    animation: none;
  }
}