/* ═══════════════════════════════════════════════════════════════
   Neuroinclusive interaction patterns — Synapse Spark Foundation
   Companion to NEUROINCLUSIVE_DESIGN_STANDARD.md (§4). Built on the same
   design tokens as lab/website/styles.css (--paper, --ink, --ochre, --rust,
   --plum, --teal, --radius, --f-sans) so a product adopting this file reads
   as the same visual family as the marketing site and brandbook, not a
   fourth stylesheet with its own palette.

   This is a STARTING SCAFFOLD (three patterns), not a complete component
   library — see the parent doc's §4 for what's intentionally still missing
   and the recommended one-venture-first rollout order.
   ═══════════════════════════════════════════════════════════════ */

/* ── §2.6 — Reduced motion, everywhere a product embeds this file ── */
@media (prefers-reduced-motion: reduce) {
  .ni-animate,
  .ni-animate * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── §2.2 — Resumable multi-step flow progress indicator ──
   Usage:
     <nav class="ni-steps" aria-label="Assessment progress">
       <ol>
         <li class="ni-step is-done"><span class="ni-step-label">Consent</span></li>
         <li class="ni-step is-current" aria-current="step"><span class="ni-step-label">Symptoms</span></li>
         <li class="ni-step"><span class="ni-step-label">Review</span></li>
       </ol>
     </nav>
   Every step carries a text label (never an icon alone, per §2.4) and the
   current step is marked both visually and via aria-current for screen
   readers. Pair with server-side draft persistence so returning to this
   screen restores exactly this state — the CSS alone doesn't provide
   resumability, the backing form-state handling in each product's own
   frontend does; this is only the visual contract for it. */
.ni-steps ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ni-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-sm, 12px);
  background: var(--paper-warm, #EFE5D0);
  color: var(--ink-mute, #55524A);
  font-family: var(--f-sans, sans-serif);
  font-size: 0.9rem;
}
.ni-step.is-done {
  background: color-mix(in srgb, var(--teal, #1E7A6D) 18%, var(--paper, #F7F1E3));
  color: var(--teal, #1E7A6D);
}
.ni-step.is-current {
  background: var(--plum, #3A1F42);
  color: var(--white, #FFFDF7);
  font-weight: 600;
}
.ni-step-label { white-space: nowrap; }

/* ── §2.7 — Standardized field-error component ──
   Usage:
     <label for="dob">Date of birth</label>
     <input id="dob" aria-describedby="dob-error" aria-invalid="true">
     <p id="dob-error" class="ni-field-error">
       Date of birth must be in MM/DD/YYYY format — you entered "13/40/2026".
     </p>
   Always adjacent to the field (not only in a page-level banner), always
   names the field and, where a fix is knowable, states the expected format
   — never a bare "invalid input." Pair `aria-describedby` + `aria-invalid`
   on the input itself so assistive tech announces the error inline. */
.ni-field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 4px 0 0;
  padding: 6px 10px;
  border-left: 3px solid var(--rust, #C8492E);
  background: color-mix(in srgb, var(--rust, #C8492E) 8%, var(--paper, #F7F1E3));
  color: var(--ink, #14121A);
  font-family: var(--f-sans, sans-serif);
  font-size: 0.88rem;
  border-radius: 0 var(--radius-sm, 12px) var(--radius-sm, 12px) 0;
}

/* ── §2.8 — Paginated result-count header (anti-infinite-scroll) ──
   Usage:
     <p class="ni-result-count">Showing <strong>1–20</strong> of <strong>143</strong></p>
   Pure presentational — the pagination logic itself belongs in each
   product's own list/table component. */
.ni-result-count {
  font-family: var(--f-sans, sans-serif);
  font-size: 0.85rem;
  color: var(--ink-mute, #55524A);
  margin: 0 0 12px;
}