/* css/base.css — reset, element defaults, layout primitives, motion. */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-3);
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.015em;
}

h1 {
  font-size: var(--font-size-2xl);
  letter-spacing: -0.025em;
}
h2 {
  font-size: var(--font-size-xl);
}
h3 {
  font-size: var(--font-size-lg);
}
h4 {
  font-size: var(--font-size-base);
}

p {
  margin: 0 0 var(--space-3);
}

a {
  color: var(--navy-700);
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  color: var(--navy-900);
  text-decoration: underline;
  text-underline-offset: 3px;
}

img {
  max-width: 100%;
  height: auto;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--lime-500);
  outline-offset: 2px;
}

::selection {
  background: var(--lime-300);
  color: var(--navy-900);
}

/* Layout primitives */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) var(--space-8);
}

.stack > * + * {
  margin-top: var(--space-4);
}

.stack--lg > * + * {
  margin-top: var(--space-6);
}

.row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

.grid {
  display: grid;
  gap: var(--space-4);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.muted {
  color: var(--color-text-muted);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.visually-hidden {
  /* Screen-reader-only. Forced with !important so a more specific control rule
     (e.g. .field__input { width: 100% }) can never re-expand a visually-hidden
     element — a hidden file input doing so pushed the page 15px wide on mobile. */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap;
  border: 0;
}

/* ── Motion ─────────────────────────────────────────────────────────────── */
@keyframes se-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes se-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes se-shimmer {
  to {
    background-position-x: -200%;
  }
}

@keyframes se-pop {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  60% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes se-drop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Page enter: content fades up on each load (per-page navigation). */
.app__main .container {
  animation: se-fade-up var(--dur-slow) var(--ease-out) both;
}

/* Gentle stagger for a page's top-level blocks. */
.app__main .container > .stack > * {
  animation: se-fade-up var(--dur-slow) var(--ease-out) both;
}
.app__main .container > .stack > *:nth-child(2) { animation-delay: 50ms; }
.app__main .container > .stack > *:nth-child(3) { animation-delay: 100ms; }
.app__main .container > .stack > *:nth-child(4) { animation-delay: 140ms; }
.app__main .container > .stack > *:nth-child(n + 5) { animation-delay: 180ms; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keep focused fields clear of the sticky top bar and form action bar. */
html {
  scroll-padding-top: calc(var(--header-height) + 16px);
  scroll-padding-bottom: 96px;
}

/* ── Global form-control baseline (app surfaces) ───────────────────────────
   One lean, token-driven baseline so every control looks consistent on every
   page without per-page CSS or extra classes. Scoped to `.app` so marketing
   and legal pages are untouched. Element selectors keep it DRY: a plain
   el('input') / el('textarea') / file input / <progress> gets the house style
   automatically. Existing component classes (.btn, .field__input) still win
   where they add more. */
.app input:where([type="text"], [type="email"], [type="tel"], [type="url"],
                 [type="search"], [type="number"], [type="password"], [type="date"]),
.app input.input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.app input:not([type]),
.app textarea,
.app select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-text, inherit);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border-field, #667085);
  border-radius: var(--radius, 10px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.app textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.app select { appearance: none; cursor: pointer; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted, #6b7280) 50%),
                    linear-gradient(135deg, var(--color-text-muted, #6b7280) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.app input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"])):focus,
.app input.input:focus,
.app textarea:focus,
.app select:focus {
  outline: none;
  border-color: var(--color-primary, #1f3a8a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #1f3a8a) 16%, transparent);
}
.app input::placeholder,
.app textarea::placeholder { color: var(--color-text-muted, #9aa1ad); }
.app input:disabled,
.app textarea:disabled,
.app select:disabled { background: var(--color-surface-sunken, #f1f3f6); cursor: not-allowed; opacity: 0.7; }

/* File inputs (upload photo / video / evidence) — the native control is ugly
   and inconsistent across browsers; style its button part + the field frame. */
.app input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-text-muted, #6b7280);
  padding: 8px 10px;
  background: var(--color-surface, #fff);
  border: 1px dashed var(--color-border-strong, #c7ccd4);
  border-radius: var(--radius, 10px);
  cursor: pointer;
}
.app input[type="file"]:hover { border-color: var(--color-primary, #1f3a8a); }
.app input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  margin-right: 12px;
  padding: 7px 14px;
  color: var(--color-primary-contrast, #fff);
  background: var(--color-primary, #1f3a8a);
  border: 0;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: filter 0.15s ease;
}
.app input[type="file"]::file-selector-button:hover { filter: brightness(1.08); }

/* Field label used by many forms (was a single weak rule). */
.app .field-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text, #1a2332);
}

/* Upload progress bar. */
.app progress {
  appearance: none;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-surface-sunken, #eef1f5);
}
.app progress::-webkit-progress-bar { background: var(--color-surface-sunken, #eef1f5); border-radius: 999px; }
.app progress::-webkit-progress-value { background: var(--color-accent-strong, var(--color-primary, #1f3a8a)); border-radius: 999px; }
.app progress::-moz-progress-bar { background: var(--color-accent-strong, var(--color-primary, #1f3a8a)); border-radius: 999px; }

/* Media previews (uploaded photo/video, evidence). */
.app video,
.app img.achievement-evidence-media,
.app .achievement-evidence-media {
  max-width: 100%;
  border-radius: var(--radius, 10px);
  background: #000;
}

/* A bare el('button') with no .btn class still reads as a button, not plain
   text — a safe, low-specificity fallback that .btn overrides. */
.app button:not([class]) {
  font: inherit;
  font-weight: 600;
  padding: 9px 16px;
  color: var(--color-primary-contrast, #fff);
  background: var(--color-primary, #1f3a8a);
  border: 0;
  border-radius: var(--radius, 10px);
  cursor: pointer;
  transition: filter 0.15s ease;
}
.app button:not([class]):hover { filter: brightness(1.08); }
.app button:not([class]):disabled { opacity: 0.6; cursor: not-allowed; }