@layer base {
  html { scroll-behavior: smooth; }

  body {
    background: var(--color-bg);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    line-height: 1.6;
    min-block-size: 100dvh;
  }

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

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

    html { scroll-behavior: auto; }
  }

  h1 {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;

    @media (max-width: 640px) { font-size: 1.5rem; }
  }
  h2 { font-size: 1.5rem;   font-weight: 600; }
  h3 { font-size: 1.25rem;  font-weight: 600; }

  a  { color: var(--color-primary); text-decoration: underline; }
  a:hover { text-decoration: none; }

  button, [role="button"] { min-block-size: 44px; min-inline-size: 44px; }

  /* MathLive styles every <math-field> as an input box (white field, black fieldtext, grey
     border). A read-only one (lib/math_field_readonly.js) is displayed formula text, so it sits
     in the surrounding text instead. Outer-document rules beat MathLive's :host rules whatever
     their layer. Editable fields (Lexxy, graph label entry) keep the box. */
  math-field[read-only] {
    background: none;
    border: 0;
    color: inherit;
  }
}