/**
 * reset.css
 *
 * A modern, modular CSS reset organized in three phases:
 * Structure, Typography, and Behavior. All rules are included
 * in a single stylesheet for convenience. See the phase headers
 * below for guidance on what each section normalizes.
 *
 * All configurable values are exposed as CSS custom properties
 * with sensible defaults. Override any --reset-* property in
 * your stylesheet to customize without editing this file.
 */

/* ==================================================================
   Custom Properties
   All configurable values, organized by phase
   ================================================================== */

:root {
  /* Structure Phase */
  --reset-struct-box-sizing: border-box;
  --reset-struct-margin: 0;
  --reset-struct-padding: 0;
  --reset-struct-form-font: inherit;
  --reset-struct-form-line-height: inherit;

  /* Typography Phase */
  --reset-typo-line-height: 1.5;
  --reset-typo-heading-line-height: 1.25;
  --reset-typo-font-size-adjust: 100%;
  --reset-typo-small-font-size: 80%;
  --reset-typo-text-wrap-heading: balance;
  --reset-typo-text-wrap-body: pretty;

  /* Behavior Phase */
  --reset-behavior-scroll-behavior: smooth;
  --reset-behavior-scroll-margin: 5ex;
  --reset-behavior-media-display: block;
  --reset-behavior-media-max-width: 100%;
  --reset-behavior-transition-duration: 0.01ms;
}

/* ==================================================================
   Phase 1: Structure
   Scope: box model, margin, padding, form normalization
   ================================================================== */

/* content-box causes padding and border to expand elements
   beyond declared width, breaking layouts; border-box includes
   them, making sizing predictable */
*,
*::before,
*::after {
  box-sizing: var(--reset-struct-box-sizing);
}

/* UA stylesheets add default margins to block elements for
   readability in unstyled documents; removing them gives the
   design system full control */
*:not(dialog) {
  margin: var(--reset-struct-margin);
}

/* UA stylesheets apply system fonts and reduced sizes to
   form controls; inheriting prevents mobile auto-zoom
   (triggered by font-size < 16px) and enforces system
   typography */
input,
button,
select,
textarea,
optgroup {
  font-family: var(--reset-struct-form-font);
  font-size: 100%;
  line-height: var(--reset-struct-form-line-height);
  margin: 0;
}

/* iOS/Safari does not render button elements without
   explicit appearance. Legacy caveat: -webkit-appearance is
   the only effective value in Safari < 15 */
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  appearance: button;
}

/* Chrome and Safari apply proprietary searchfield styling;
   this removes it and aligns with standard text inputs */
[type='search'] {
  -webkit-appearance: textfield;
  appearance: textfield;
  outline-offset: -2px;
}

/* removes the inner decorative padding Safari adds to search inputs on macOS */
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* Safari/iOS applies system styling to file upload buttons;
   this restores standard button appearance and allows font
   inheritance from the page */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Standard equivalent of ::-webkit-file-upload-button;
   supported in Firefox 82+ and Chrome 89+. Firefox 80 has no
   targetable pseudo-element; unresolvable gap */
::file-selector-button {
  -webkit-appearance: button;
  appearance: button;
  font: inherit;
}

/* Constrain resize to vertical axis only to prevent
   horizontal layout breakage */
textarea {
  resize: vertical;
}

/* Remove UA-imposed border and spacing that varies across
   browsers. Reference: Eric Meyer, MDN, New CSS Reset */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* removes default left and right padding applied by Firefox and Chrome */
legend {
  padding: 0;
}

/* ==================================================================
   Phase 2: Typography
   Scope: font size, line-height, heading scale, text wrapping
   ================================================================== */

/* Prevents mobile browsers from inflating font size on
   orientation change. Vendor prefixes required for Firefox
   (moz) and older Safari/iOS (webkit) */
html {
  -moz-text-size-adjust: var(--reset-typo-font-size-adjust);
  -webkit-text-size-adjust: var(--reset-typo-font-size-adjust);
  text-size-adjust: var(--reset-typo-font-size-adjust);
}

/* WCAG 1.4.12 recommends line-height >= 1.5 for body text;
   UA default ~1.2 is insufficient for accessibility */
body {
  line-height: var(--reset-typo-line-height);
}

/* Non-standard WebKit property. Disables subpixel
   antialiasing on macOS. No effect on Windows, Linux, mobile;
   intentionally included as macOS progressive enhancement */
body {
  -webkit-font-smoothing: antialiased;
}

/* Body line-height 1.5 is too loose for large type;
   tighten headings and controls independently.
   Refs: ECL 1.2, USWDS 1.1-1.35, Material 1.2, WCAG 1.2-1.25 */
h1, h2, h3, h4, h5, h6,
button, input, label {
  line-height: var(--reset-typo-heading-line-height);
}

/* Chrome and Safari do not apply `bolder` by default in
   all contexts; this enforces it */
b, strong {
  font-weight: bolder;
}

/* standardizes `<small>` across browsers; UA default varies */
small {
  font-size: var(--reset-typo-small-font-size);
}

/* Prevents sub/sup from affecting line-height; consistent
   with modern-normalize. vertical-align: baseline prevents
   layout shift */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Long words and URLs with no soft-wrap opportunity will
   overflow their container without this rule */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Progressive enhancement. `balance` equalizes heading line
   lengths. Not supported in Safari < 17.5; degrades
   gracefully to default wrapping */
h1, h2, h3, h4, h5, h6 {
  text-wrap: var(--reset-typo-text-wrap-heading);
}

/* Progressive enhancement. `pretty` prevents orphaned words
   on final lines. Not supported in Firefox (as of 2026) or
   Safari < 26; degrades gracefully */
p {
  text-wrap: var(--reset-typo-text-wrap-body);
}

/* Double `monospace` hack corrects the "odd em font sizing"
   bug where monospace fonts render smaller than intended */
code, kbd, samp, pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* ==================================================================
   Phase 3: Behavior
   Scope: motion, scrolling, media defaults, scroll UX
   ================================================================== */

/* WCAG 2.3.3 (AAA) and strong AA recommendation. Kills
   motion for users who requested reduced motion at OS level.
   !important overrides component animation shorthand. Smooth
   scroll is motion; convert to auto */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: var(--reset-behavior-transition-duration) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--reset-behavior-transition-duration) !important;
    scroll-behavior: auto !important;
  }
}

/* scroll-behavior: smooth unsupported in Safari < 15.4.
   Guarding inside no-preference means activation only for
   users without reduced-motion preference. Sidesteps Safari
   14 gap; fallback `auto` is correct accessible behavior */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: var(--reset-behavior-scroll-behavior);
  }
}

/* Enables animating between fixed and keyword sizes
   (e.g., 0 to auto). Chrome/Edge 129+ only (early 2026).
   Unsupported in Safari, Firefox. @supports gate prevents
   fallback behavior changes in unsupported browsers */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }
}

/* Images are inline by default, causing "magic space" gap
   from baseline alignment. display: block removes it.
   max-width: 100% prevents overflow. Use max-width: revert
   for elements that must exceed their container */
img, picture, video, canvas, svg {
  display: var(--reset-behavior-media-display);
  max-width: var(--reset-behavior-media-max-width);
}

/* Adds vertical breathing room above anchor-targeted
   elements to prevent hiding behind sticky headers.
   scroll-margin supported in Safari 11+; no fallback needed */
:target {
  scroll-margin-block: var(--reset-behavior-scroll-margin);
}

/* Safari/VoiceOver removes list semantics when
   list-style: none is applied. Adding role="list" restores
   the semantic. This rule rewards that practice by removing
   visual style only when role is present */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}