/* ── CLS guard: nav-card geometry before island CSS injects ──────────────
   card.css is loaded by the navigator island via vite-plugin-css-injected-by-js
   (CSS injected into <style> tags when the island JS executes). That means
   .nav-card rules from card.css don't apply until JS runs, AFTER first paint.
   Without these rules, SSR'd cards (first 24 emitted by list.html) render as
   unsized block elements; when the idle-deferred Vue mount fires and injects
   card.css they grow to min-height:200px → CLS (measured 0.411 post-#1843).

   Only the geometry properties that establish the card's footprint are
   duplicated here. Visual polish (colours, shadows, transitions) stays in
   card.css — it's fine for those to load via JS since they don't affect layout.
   When card.css later sets the same values, the cascade is a no-op.
   Mirrors the identical guard in browse.css (PR #1842).
*/
.nav-card {
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.home { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.home-navigator { margin: 0 0 2rem; }
.home-hero { text-align: center; padding: 1.5rem 1rem; border-top: 1px solid var(--sapTile_BorderColor, #e5e5e5); }
.home-hero h2 { font-size: 1.75rem; margin: 0 0 0.75rem; }
.home-hero .lede { font-size: 1.05rem; color: var(--sapTextColor, #333); margin: 0 auto 1.5rem; max-width: 800px; }
.home-hero__ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.home article > section { margin: 2.5rem 0; }
.home article > section h2 { font-size: 1.5rem; margin: 0 0 1.5rem; }
.mission-grid, .tutorial-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.mission-grid li, .tutorial-grid li { background: var(--sapTile_Background, #fff); border: 1px solid var(--sapTile_BorderColor, #e5e5e5); border-radius: 0.5rem; padding: 1rem; }
.mission-grid a, .tutorial-grid a { text-decoration: none; color: inherit; display: block; }
.mission-grid h3, .tutorial-grid h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.tutorial-grid .nav-card__title {
  /* Mirror the navigator card-title typography so the cross-document
     view-transition (data-vt-card="navigator" → hero-title) starts and
     ends at visually equivalent text styling. Source of truth:
     hugo-apps/src/navigator/TutorialNavigator.vue .nav-card__title. */
  font-size: 1rem;
  font-weight: 700;
  color: var(--sapTextColor, #32363a);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}
.mission-grid p, .tutorial-grid p { margin: 0 0 0.5rem; color: var(--sapTextColor, #555); font-size: 0.9rem; }
.tutorial-grid .meta { color: var(--sapNeutralTextColor, #666); font-size: 0.8rem; }
.topic-grid { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.topic-grid li a { padding: 0.4rem 0.8rem; background: var(--sapButton_Background, #f0f0f0); border-radius: 1rem; text-decoration: none; color: inherit; }
.topic-grid__more { margin: 1rem 0 0; }
.topic-grid__more a { color: var(--sapLink_Color, #0070f3); text-decoration: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* /browse/ A/B trial pill (issue #174 PR 2). Subtle, easy to remove post-A/B. */
.browse-pill-wrapper { text-align: center; padding: 0.5rem 0; }
.browse-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  background: var(--sapButton_Lite_Background, #f0f4f7);
  color: var(--sapLink_Color, #0070f0);
  border: 1px solid var(--sapButton_BorderColor, #cdd6e0);
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.875rem;
  transition: background 150ms ease, border-color 150ms ease;
}
.browse-pill:hover {
  background: var(--sapButton_Hover_Background, #e2eaf0);
  border-color: var(--sapButton_Hover_BorderColor, #a0afc0);
}
.browse-pill__icon { font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .browse-pill { transition: none; }
}