/* Page layout only; model-card.css owns the shared card component. */
* { box-sizing: border-box; }
html { scroll-padding-top: 28px; }
body { min-height: 100vh; min-height: 100svh; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }

.category-page { --category-accent: var(--blue); }
.category-page.violet { --category-accent: var(--violet); }
.category-page.teal { --category-accent: var(--teal); }
.category-page.orange { --category-accent: var(--orange); }
.category-page.sky { --category-accent: var(--sky); }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 20; padding: 12px 18px; border-radius: var(--radius-control); background: var(--ink); color: var(--on-accent); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.category-main { width: min(1260px, calc(100% - 80px)); margin: 0 auto; padding: 72px 0 64px; }
.back-to-home { position: fixed; top: 22px; left: max(30px, env(safe-area-inset-left)); z-index: 15; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; color: var(--muted); }
.back-to-home:hover { color: var(--category-accent); }
.back-to-home svg { display: block; width: 24px; height: 24px; }
/* Fewer models leave empty columns rather than stretching their cards. */
.report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 8px; }

@media (max-width: 960px) {
  .category-main { width: calc(100% - 48px); }
  .report-grid { gap: 16px; }
}

@media (max-width: 720px) {
  .category-main { width: min(560px, calc(100% - 36px)); padding: 65px 0 42px; }
  .back-to-home { top: 20px; left: max(14px, env(safe-area-inset-left)); }
  .report-grid { grid-template-columns: 1fr; gap: 20px; }
}