/* AICAN — global base / reset.
   The foundation the app was missing. Loaded BEFORE colors_and_type.css and
   app.css (see index.html), so every component style overrides it.

   Deliberately conservative for an existing codebase:
   - box-sizing:border-box is the one big win (padding/border no longer add to
     width — fixes the width:100%+padding overflow pattern used by inputs etc.).
   - NO global margin reset: the AI chat / rationale render markdown (via
     marked.js) and rely on default <p>/<ul>/<h*> margins for readability.
   - Form controls inherit typography; images stay inside their container;
     keyboard focus is visible; reduced-motion is respected. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Content images never overflow their container. (SVG icons are left alone so
   inline button/text icons keep their explicit sizing.) */
img { max-width: 100%; }

/* Form controls inherit the app's typography instead of the UA's tiny defaults.
   Component classes (.btn, .input) still override via higher specificity. */
button, input, select, textarea, optgroup { font: inherit; }

/* Accessible keyboard focus — only for keyboard users, never on mouse click. */
:focus-visible { outline: 2px solid var(--accent-1, #1F6FEB); outline-offset: 2px; }

/* Honour users who ask the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}