/* ── 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; }
}

/* ── @navigator-chrome: SSR chrome geometry before island CSS injects ─────────
   Issue: /tutorial-navigator SSR'd only the card grid; TutorialNavigator.vue
   rendered the hero + search + open filter panel + toolbar ABOVE it on mount,
   shoving the first card down 672px (desktop) / 1434px (mobile) — a visible
   "flash of content". list.html now SSRs that same chrome, but its layout CSS
   lived in the component's <style scoped> block (injected only when the island
   JS runs, AFTER first paint). These rules are RELOCATED here (render-blocking,
   loaded on this page and kept loaded post-mount) so the SSR chrome lays out at
   its final size from first paint and the mounted Vue tree — same class names,
   same rules — renders identically. Single source of truth: this block. The
   corresponding rules were removed from TutorialNavigator.vue's scoped block.
   Prefixed with .tutorial-navigator so nothing leaks onto the homepage, which
   also loads home.css. Card grid + result-area/skeleton/pagination stay scoped
   (post-mount only). See docs — option 1a-relocate. */
.tutorial-navigator {
  font-family: var(--sapFontFamily, '72', '72full', Arial, Helvetica, sans-serif);
  color: var(--sapTextColor, #32363a);
  background: var(--sapBackgroundColor, #f5f6f7);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─── Hero ─── */
.tutorial-navigator .navigator-hero {
  background: var(--sapShellColor, #354a5f);
  color: var(--sapShell_TextColor, #fff);
  padding: 2.5rem 2rem 3rem;
}
.tutorial-navigator .hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 3rem;
}
.tutorial-navigator .hero-text { flex: 1; }
.tutorial-navigator .hero-text h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: inherit;
  letter-spacing: -0.01em;
}
.tutorial-navigator .hero-text p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  opacity: 0.88;
  max-width: 560px;
}
.tutorial-navigator .hero-promo {
  flex-shrink: 0;
  background: var(--sapBaseColor, #fff);
  color: var(--sapTextColor, #32363a);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  max-width: 340px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.tutorial-navigator .hero-promo-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--sapInformationBackground, #e1f4ff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tutorial-navigator .hero-promo-text strong {
  display: block;
  color: var(--sapBrandColor, #0070f2);
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}
.tutorial-navigator .hero-promo-text span {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--sapContent_LabelColor, #556b82);
}

/* ─── Body ─── */
.tutorial-navigator .navigator-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem 3rem;
}

/* ─── Search ─── */
.tutorial-navigator .navigator-search {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin-bottom: 1.5rem;
}
.tutorial-navigator .navigator-search .fd-input-group {
  flex: 1;
  background: var(--sapField_Background, #fff);
  border: 1px solid var(--sapField_BorderColor, #89919a);
  border-radius: var(--sapField_BorderCornerRadius, 0.5rem) 0 0 var(--sapField_BorderCornerRadius, 0.5rem);
}
.tutorial-navigator .navigator-search .fd-input-group:focus-within {
  border-color: var(--sapField_Focus_BorderColor, #0064d9);
  outline: var(--sapContent_FocusWidth, 1px) dotted var(--sapContent_FocusColor, #0064d9);
  outline-offset: 1px;
}
.tutorial-navigator .navigator-search .fd-input {
  height: 2.75rem;
  font-size: 0.9375rem;
  background: transparent;
  border: none;
  color: var(--sapField_TextColor, #32363a);
}
.tutorial-navigator .navigator-search .fd-input::placeholder {
  color: var(--sapField_PlaceholderTextColor, #a9b4be);
}
.tutorial-navigator .navigator-search .fd-button--emphasized {
  height: 2.75rem;
  padding: 0 1.5rem;
  border-radius: 0 var(--sapField_BorderCornerRadius, 0.5rem) var(--sapField_BorderCornerRadius, 0.5rem) 0;
}
.tutorial-navigator .filter-toggle-btn {
  height: 2.75rem;
  width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.tutorial-navigator .fd-button--toggled {
  background: var(--sapButton_Selected_Background, rgba(0, 100, 217, 0.08));
  border: 1px solid var(--sapButton_Selected_BorderColor, #0064d9);
  color: var(--sapButton_Selected_TextColor, #0064d9);
  border-radius: var(--sapButton_BorderCornerRadius, 0.5rem);
  cursor: pointer;
}

/* ─── Filters ─── */
.tutorial-navigator .navigator-filters {
  background: var(--sapBaseColor, #fff);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.tutorial-navigator .filters-heading {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  color: var(--sapTextColor, #32363a);
}
.tutorial-navigator .filters-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1.5rem;
}
.tutorial-navigator .filter-title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sapContent_LabelColor, #556b82);
  margin: 0 0 0.75rem;
}
.tutorial-navigator .filter-tag-search { margin-bottom: 0.75rem; }
.tutorial-navigator .filter-tag-search .fd-input {
  height: 2rem;
  font-size: 0.8125rem;
}
.tutorial-navigator .filter-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-height: 7.5rem;
  /* Reserve the capped height so an EMPTY SSR list (Topic/Software Product are
     populated at runtime from /build/navigator, absent at Hugo build) holds the
     same footprint as the full, scroll-capped list Vue renders on mount — the
     load-bearing bit that keeps first-card top identical pre/post mount. In
     production these lists overflow the cap, so min == max is a no-op there. */
  min-height: 7.5rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}
.tutorial-navigator .filter-list--static {
  /* Fixed-length lists (Type, Experience) render fully and must NOT be padded
     to the dynamic-list cap, or they'd inflate the stacked mobile panel. */
  max-height: none;
  min-height: 0;
  overflow-y: visible;
}
.tutorial-navigator .filter-list::-webkit-scrollbar { width: 4px; }
.tutorial-navigator .filter-list::-webkit-scrollbar-track { background: transparent; }
.tutorial-navigator .filter-list::-webkit-scrollbar-thumb {
  background: var(--sapScrollBar_FaceColor, #94a2b3);
  border-radius: 2px;
}
.tutorial-navigator .filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--sapTextColor, #32363a);
}
.tutorial-navigator .filter-option .filter-checkbox {
  accent-color: var(--sapBrandColor, #0070f2);
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}
.tutorial-navigator .filter-option .filter-label { cursor: pointer; }
.tutorial-navigator .filter-divider {
  border: none;
  border-top: 1px solid var(--sapList_BorderColor, #d9d9d9);
  margin: 0.5rem 0;
}

/* ─── Toolbar / Result Bar ─── */
.tutorial-navigator .navigator-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
}
.tutorial-navigator .toolbar-counts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--sapContent_LabelColor, #556b82);
}
.tutorial-navigator .toolbar-count {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  background: none;
  border: 1.5px solid transparent;
  border-radius: 1rem;
  padding: 0.25rem 0.625rem;
  cursor: pointer;
  transition: all 0.15s ease;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}
.tutorial-navigator .toolbar-count:hover {
  background: var(--sapList_Hover_Background, #eaeff5);
}
.tutorial-navigator .toolbar-count.active {
  border-color: var(--sapButton_Selected_BorderColor, #0064d9);
  background: var(--sapButton_Selected_Background, rgba(0, 100, 217, 0.08));
  color: var(--sapButton_Selected_TextColor, #0064d9);
}
.tutorial-navigator .toolbar-count-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.375rem;
  border-radius: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
}
.tutorial-navigator .count-mission { background: var(--sapInformativeBorderColor, #046c7a); }
.tutorial-navigator .count-group { background: var(--sapPositiveColor, #6c32a9); }
.tutorial-navigator .count-tutorial { background: var(--sapNeutralTextColor, #5b738b); }
.tutorial-navigator .toolbar-sep {
  color: var(--sapNeutralBorderColor, #d9d9d9);
  font-size: 1rem;
}
.tutorial-navigator .navigator-sort {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--sapContent_LabelColor, #556b82);
}
.tutorial-navigator .navigator-sort .browse-sort__select {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--sapNeutralBorderColor, #d9d9d9);
  border-radius: 4px;
  background: var(--sapField_Background, #fff);
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ─── Card Grid (SSR preview + mounted result grid share this) ─── */
.tutorial-navigator .navigator-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* ─── Responsive (chrome + grid) ─── */
@media (max-width: 1024px) {
  .tutorial-navigator .navigator-grid { grid-template-columns: repeat(2, 1fr); }
  .tutorial-navigator .filters-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
@media (max-width: 768px) {
  .tutorial-navigator .hero-inner { flex-direction: column; text-align: center; }
  .tutorial-navigator .hero-promo { max-width: 100%; }
  .tutorial-navigator .hero-text h1 { font-size: 1.375rem; }
  .tutorial-navigator .filters-grid { grid-template-columns: 1fr; }
  .tutorial-navigator .navigator-toolbar { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}
@media (max-width: 640px) {
  .tutorial-navigator .navigator-hero { padding: 1.5rem 1rem 2rem; }
  .tutorial-navigator .navigator-body { padding: 1rem 1rem 2rem; }
  .tutorial-navigator .navigator-search { flex-direction: column; }
  .tutorial-navigator .filter-toggle-btn { align-self: flex-end; }
  .tutorial-navigator .navigator-grid { grid-template-columns: 1fr; }
}