/* ============================================================================
 * reset.css  --  Modern, minimal CSS reset
 *
 * Project: EFI / Experiencer Team -- unified UI shell
 * Owner:   /srv/efi-unified-ui/static/css/reset.css
 * Served:  https://forum.experiencerteam.com/shared/css/reset.css
 * Loaded:  After tokens.css + fonts.css, before base.css.
 *
 * --------------------------------------------------------------------------
 * Algorithm summary
 * --------------------------------------------------------------------------
 *   Modeled on Andy Bell's "More Modern CSS Reset" (2023), trimmed to what
 *   this project actually needs. The reset itself is intentionally
 *   token-free so it works even if tokens.css fails to load. Reset
 *   responsibilities:
 *
 *     1. Universal box-sizing.
 *     2. Strip default margins on everything that has them by default.
 *     3. Make headings + paragraphs + lists balanced.
 *     4. Sane media defaults (max-width, display block).
 *     5. Forms inherit font.
 *     6. Avoid scrollbar layout shift.
 *     7. Respect prefers-reduced-motion (kill scroll-behavior smooth +
 *        nuke animations/transitions for users who opted out).
 *     8. Set a sensible default line-height + text-rendering.
 *
 *   Anything that needs token values (link color, body bg, type scale)
 *   belongs in base.css, NOT here.
 * ============================================================================ */


/* 1. Universal box-sizing -- borders + padding stay inside declared sizes. */
*, *::before, *::after {
  box-sizing: border-box;
}


/* 2. Strip default margins (we set spacing intentionally where needed). */
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}


/* 3. Sensible list resets when we use lists for navigation / chrome.
 *    Authors who want bulleted prose use role-less <ul> and re-add the
 *    list-style in their own CSS. */
ul[role='list'], ol[role='list'] {
  list-style: none;
  padding: 0;
  margin: 0;
}


/* 4. Smooth scrolling for in-page anchors -- gated on no-reduced-motion. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* 5. Body baseline -- minimum viewport coverage + visible line-height +
 *    crisp text rendering. Token-based values land in base.css. */
body {
  min-height: 100vh;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* 6. Sane media defaults -- replaced-element sizing that respects layout. */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}


/* 7. Forms inherit font + don't trap focus inside themselves. */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}


/* 8. Headings inherit weight by default; explicit weights are set in base.css.
 *    Default line-height tightens for display sizes. */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  text-wrap: balance;
}


/* 9. Avoid horizontal scroll caused by absolutely-positioned children
 *    bleeding outside the viewport. */
html, body {
  overflow-x: clip;
}


/* 10. Respect prefers-reduced-motion -- kill smooth scroll + cap animation
 *     + transition durations to "instant from the user's POV". */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* 11. Focus-visible (keyboard) outline -- baseline visible focus ring.
 *     Theme-specific override happens in base.css using --teal. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* End of reset.css */