/* mobile-tokens-v1 — W-26-1 — Saadjie mobile-first CSS reset. */
/*
 * Planning: .archon/queued-builds/WAVE-26-mobile-responsiveness-mvp.md
 *
 * WHY a hand-rolled reset (not normalize.css / modern-normalize): the wave
 * forbids new npm dependencies and the Saadjie surface is small enough
 * that a ~40-line reset covers every concern. Keeps the dep-tree clean and
 * avoids shipping rules for elements (<fieldset legend>, <hr>) we never
 * use.
 *
 * WHY mobile-first base rules (no media queries at this layer): everything
 * below is the 320px-floor default. Component files layer wider-viewport
 * overrides on top via `@media (min-width: …)` queries — see the
 * public-profile / dashboard / contribute sheets in this same directory.
 *
 * GOTCHA: every colour / size / radius MUST come from public/css/tokens.css.
 * The ANTI-RAW-VALUE proof-gate rejects raw hex / rgba in this file.
 *
 * CONSTRAINT: every interactive element below pins `min-height` to
 * `var(--touch-target-min)` so the Lighthouse mobile-usability ≥ 90 gate
 * (W26 DoD) stays satisfied without per-component padding hacks.
 */

/* ---------- Universal box-sizing ----------
   WHY *,*::before,*::after: padding + border should count *into* the
   declared width/height. Without this, `width: 100%` + padding overflows
   the viewport on mobile and triggers horizontal scroll. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---------- Root + body ----------
   WHY html { font-size: 100% } and NOT a px value: respects the user's
   browser font-size preference. All other type sizes are rem-based so they
   scale with this root. */
html {
  font-size: 100%;
  line-height: var(--line-height-base);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Headings ----------
   WHY margin-block-end only (not -start): the parent container controls
   the gap *above* the heading so adjacent sections stack predictably. */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3) 0;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5, h6 { font-size: var(--font-size-base); }

p, ul, ol, dl, blockquote, figure, pre {
  margin: 0 0 var(--space-4) 0;
}

ul, ol {
  padding-inline-start: var(--space-5);
}

/* ---------- Links ---------- */
a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--color-brand-dark); }
a:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* ---------- Media ----------
   WHY max-width: 100%: photos uploaded to a child's page (W10) come in at
   variable resolutions. Capping every <img> at the parent's width prevents
   horizontal overflow on 320px screens. */
img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- Forms ----------
   WHY font-size: var(--font-size-base) (16px): iOS Safari auto-zooms any
   form control rendered below 16px on focus and never zooms back out. The
   reset enforces 16px on every input/textarea/select/button so individual
   form partials don't have to remember.

   WHY width: 100%: form fields stack full-width on mobile by default;
   tablet+ layouts narrow them via component CSS. */
button, input, select, textarea {
  font: inherit;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: inherit;
  margin: 0;
}

input, select, textarea {
  width: 100%;
  max-width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

textarea {
  min-height: calc(var(--touch-target-min) * 2);
  resize: vertical;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-color: var(--color-focus-ring);
}

button {
  min-height: var(--touch-target-min);
  cursor: pointer;
  background: none;
  border: 0;
  padding: var(--space-2) var(--space-4);
}
button:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}
button[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---------- Tables (admin queue uses none yet, but defensive) ---------- */
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: var(--space-2) var(--space-3);
  text-align: start;
  vertical-align: top;
}

/* ---------- Code ---------- */
code, pre, kbd, samp {
  font-family: var(--font-family-mono);
  font-size: 0.95em;
}
code {
  padding: 0 var(--space-1);
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  word-break: break-word;
}

/* ---------- Page-level layout helpers ----------
   WHY a generic <main> rule: every public + dashboard view wraps content
   in <main>. Pinning padding + max-width here means component CSS only
   needs to override when a page genuinely needs a wider column. */
main {
  display: block;
  padding: var(--space-5) var(--content-padding-x);
  margin: 0 auto;
  max-width: var(--container-max);
  width: 100%;
}

header, footer, section, article, aside, nav, figure {
  display: block;
}

/* ---------- Visually-hidden utility ----------
   WHY: accessibility-only labels (for example the "Choose an amount"
   legend on the contribute form) sometimes need to stay in the DOM for
   screen readers but be invisible to sighted users. This is the standard
   technique — `display: none` would also hide it from assistive tech. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Reduced-motion ----------
   WHY: parents on older devices and visitors with vestibular conditions
   set `prefers-reduced-motion`. We honour it globally so no component
   sheet has to remember to. */
@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;
  }
}