/* Element defaults and layout primitives, not tied to any one component. */

* { box-sizing: border-box; }

/* The [hidden] attribute is the correct native mechanism for toggling
   visibility (accessible by default, no extra ARIA needed) -- but the
   browser's own `[hidden] { display: none }` rule lives in the lowest-
   priority (user-agent) stylesheet, so any of our own `display`-setting
   component rules (e.g. .btn's `display: inline-block`, loaded after this
   file) win the cascade at equal specificity by source order alone.
   Confirmed against the real build: the search page's "Load more" button
   (.btn.btn-secondary) stayed visible despite `hidden` being set. !important
   is deliberate here, not a shortcut -- [hidden] means "must not render,"
   a stronger guarantee than any component's default display, and this is
   the one rule in the codebase that needs to always win regardless of what
   other classes coexist on the element. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.plain-list { list-style: none; margin: 0; padding: 0; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--text-base);
  line-height: 1.55;
}

/* Discrete-unit links (nav, logo, post titles, index entries) get their own
   no-underline treatment in components.css; this is the default for
   anything genuinely inline within a sentence of prose (ui-design.md §5) --
   not relying on color alone to signal interactivity (WCAG 1.4.1). */
a { color: var(--color-accent); text-underline-offset: 0.15em; }
a:not(.btn) { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-accent);
  color: var(--color-accent-on);
  padding: var(--space-2) var(--space-4);
  z-index: 100;
}
.skip-link:focus { left: var(--space-4); top: var(--space-2); }

main { max-width: var(--content-width); margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-8); }

h1 { font-size: var(--text-xl); text-wrap: balance; margin: 0 0 var(--space-2); }
h2 { font-size: var(--text-lg); text-wrap: balance; margin: var(--space-6) 0 var(--space-3); }

.lede { color: var(--color-text-muted); margin: 0 0 var(--space-6); max-width: 65ch; }

@media (prefers-reduced-motion: no-preference) {
  .theme-toggle, .btn, a { transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; }
}