/* ==========================================================================
   Base: reset, typography, focus handling, generic utilities
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-family-base);
  background-color: var(--neutral-100);
  color: var(--neutral-900);
  line-height: var(--line-height-normal);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
img, svg, iframe { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
h1, h2, h3, h4 { font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }

/* --- Focus: one visible style for keyboard users --- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
.header :focus-visible { outline-color: var(--accent-300); } /* dark background */

/* --- Typography helpers --- */
.section-title { font-size: var(--font-size-xl); margin-bottom: var(--space-5); color: var(--neutral-900); }
.subsection-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--neutral-700); margin-bottom: var(--space-3); }
.text-muted { color: var(--neutral-500); }
.text-center { text-align: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }

/* --- Links --- */
.link { color: var(--accent-600); text-decoration: none; cursor: pointer; }
.link:hover { color: var(--accent-700); text-decoration: underline; }
.link-icon { display: inline-flex; align-items: center; gap: var(--space-2); }
.link-icon .material-icons-outlined { font-size: var(--font-size-lg); }

/* --- Accessibility utilities --- */
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--accent-600); color: var(--neutral-50);
  padding: var(--space-2) var(--space-4); z-index: var(--z-skip-link);
  transition: top var(--transition-normal);
}
.skip-link:focus { top: 0; }
.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;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Icon font unavailable (offline, blocked CDN): hide ligature words instead of
   leaking them into the layout. Icon-only controls keep their title/aria-label. */
.no-icon-font .material-icons,
.no-icon-font .material-icons-outlined { font-size: 0 !important; width: 0; overflow: hidden; }
.no-icon-font .view-btn:not(.active)::after { content: attr(title); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }