/* ============================================================
   TUMMI — Component library (v5 · Zeegloed)
   A PORT of v4 Herbarium, re-lit to the sea-glow. Same selector
   contract + child anatomy (the showcase depends on it): gradient
   CTA, glow-focus fields, backlit-glass secondary, --grad-horizon
   indicators, coral today, sage balans, gold energie, sky vocht.
   Primitives + all custom props + ::selection + :focus-visible +
   the reduced-motion gate live in tokens.css — never redefined.
   Motion law: compositor props only; hover/press never transition
   box-shadow/background — ::before/::after layers crossfade opacity,
   transform carries the lift. Warmth is behind the glass, never on
   the letters.
   ============================================================ */
/* ===================== BASE ===================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  font-size: var(--t-body);
  line-height: 1.55;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  padding-bottom: .06em;   /* descender room for Fraunces */
  margin: 0;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

p { margin: 0 0 var(--s-4); }
a { color: var(--raspberry-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 2px; }

/* the human aside — solid-ink italic, the gradient-text replacement */
em.disp {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--raspberry-deep);
}
/* ===================== BUTTONS ===================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 44px; padding: 0 var(--s-5);
  border: 0; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-weight: 600; font-size: var(--t-sm); line-height: 1;
  color: var(--ink); background: transparent;
  cursor: pointer; isolation: isolate;
  transition: transform var(--d-control) var(--ease-settle);
}
.btn > * { position: relative; z-index: 1; }
.btn:active { transition-duration: var(--d-press); }

/* arrow affordance: clip-path wipe in + nudge, no layout move */
.btn .arr {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--d-control) var(--ease-settle),
              transform var(--d-control) var(--ease-settle);
}
.btn:hover .arr { clip-path: inset(0); transform: translateX(2px); }

/* primary — the sunrise into oxblood. Hover is a pre-rendered
   --grad-cta-hover ::after layer (crossfade, never a bg transition). */
.btn-primary {
  color: var(--cta-ink);
  background: var(--grad-cta);
  border: 1px solid var(--cta-border);
  box-shadow: var(--cta-sheen), var(--cta-shade), var(--cta-shadow);
}
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; background: var(--grad-cta-hover);
  opacity: 0; transition: opacity var(--d-state) var(--ease-settle);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--cta-sheen), var(--cta-shade), var(--shadow-bloom); }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: translateY(1px) scale(.99); box-shadow: var(--press-inset); }

/* cta-glint — primary + a decorative vermilion sun-glint dot (optional).
   Vermilion is fenced to decorative here (never touches data). */
.btn-cta-glint .glint {
  position: absolute; z-index: 2; top: 8px; right: 12px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--vermilion);
  box-shadow: 0 0 6px 1px rgba(226,58,28,.55);
  pointer-events: none;
}

/* secondary — the backlit glass recipe: transparent + blur, a
   --grad-horizon masked stroke at 40%, --ink text. Hover brightens
   the stroke to 100% + a faint --grad-tint catch. (SPEC §7) */
.btn-secondary {
  color: var(--ink);
  background: transparent;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.btn-secondary::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; padding: 1px;
  background: var(--grad-horizon);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .4;
  transition: opacity var(--d-state) var(--ease-settle);
}
.btn-secondary::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; background: var(--grad-tint);
  opacity: 0; transition: opacity var(--d-state) var(--ease-settle);
}
.btn-secondary:hover { transform: translateY(-2px); }
.btn-secondary:hover::before { opacity: 1; }
.btn-secondary:hover::after { opacity: 1; }
.btn-secondary:active { transform: translateY(1px) scale(.99); }

/* ghost — the pen stroke: underline draws scaleX, exits origin-right */
.btn-ghost { color: var(--raspberry-deep); padding-inline: var(--s-3); }
.btn-ghost::after {
  content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 10px; z-index: 0;
  height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-control) var(--ease-settle);
}
.btn-ghost:hover::after { transform: scaleX(1); }
.btn-ghost:not(:hover)::after { transform-origin: right; }

/* quiet — raised plate material */
.btn-quiet { background: var(--raise); box-shadow: var(--raise-shadow); color: var(--ink); }
.btn-quiet:hover { transform: translateY(-2px); }
.btn-quiet:active { transform: translateY(1px) scale(.99); box-shadow: var(--press-inset); }

/* icon button — 40px circle; active fills sage wash */
.icon-btn {
  min-height: 40px; width: 40px; padding: 0;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
  background: var(--card);
  transition: transform var(--d-state) var(--ease-settle);
}
.icon-btn::after {
  content: ""; position: absolute; inset: -1px; z-index: 0;
  border-radius: inherit; border: 1px solid var(--hairline-strong);
  opacity: 0; transition: opacity var(--d-state) var(--ease-settle);
}
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:hover::after { opacity: 1; }
.icon-btn:active { transform: translateY(1px) scale(.99); box-shadow: var(--press-inset); background: var(--sage-wash); }
/* the canonical 9-glyph strip: reuse .icon-btn; the SVGs live in the HTML.
   Set = hart · druppel · zon · blad · oog · maan · bliksem · upload · vink */
.iconrow { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* sizes — gradient re-anchors on the token so both stops stay AA */
.btn-sm { min-height: 36px; padding: 0 var(--s-4); font-size: var(--t-caption); }
.btn-lg { min-height: 52px; padding: 0 var(--s-6); font-size: var(--t-body-lg); }
.btn-block { display: flex; width: 100%; }

/* loading — label dims, spinner rotates currentColor */
.btn.is-loading { pointer-events: none; }
.btn.is-loading > :not(.spinner) { opacity: .6; }
.spinner {
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: .7;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: pulse-dim 1600ms ease-in-out infinite; }
}
@keyframes pulse-dim { 50% { opacity: .3; } }

/* disabled — flat, no hover/press, inset wells survive elsewhere */
.btn[disabled], .btn:disabled {
  opacity: .45; cursor: not-allowed; pointer-events: none;
  box-shadow: none; transform: none;
}
.btn[disabled]::after { opacity: 0; }
/* ===================== CHIPS ===================== */
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 40px; padding: 0 var(--s-4);
  border: 0; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-weight: 500; font-size: var(--t-sm);
  color: var(--ink-soft);
  background: var(--sink);
  box-shadow: var(--well-inset);
  cursor: pointer;
  isolation: isolate;
  transition: transform var(--d-state) var(--ease-settle), color var(--d-state) var(--ease-across);
}
/* selected wash ground — pre-rendered layer crossfades in */
.chip::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--d-state) var(--ease-settle);
}
.chip > * { position: relative; z-index: 1; }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.chip-check {
  width: 12px; height: 12px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  clip-path: inset(0 100% 0 0);
  margin-left: -2px; width: 0;
  transition: width var(--d-state) var(--ease-settle),
              clip-path var(--d-state) var(--ease-settle) 80ms;
}
.chip[aria-pressed="true"] {
  color: var(--ink);
  background: var(--raise);
  box-shadow: var(--raise-shadow);
}
.chip[aria-pressed="true"]::before { opacity: 1; }
.chip[aria-pressed="true"] .chip-check { width: 12px; clip-path: inset(0); }

/* domain washes + -mark dot + -text tier (the Zeegloed sunrise set).
   rasp KEPT as flare alias: coral wash ground, raspberry-deep text. */
.chip[data-domain="gold"]::before { background: var(--gold-wash); }
.chip[data-domain="gold"][aria-pressed="true"] { color: var(--gold-text); }
.chip[data-domain="gold"][aria-pressed="true"] .chip-dot { background: var(--gold-mark); }
.chip[data-domain="amber"]::before { background: var(--amber-wash); }
.chip[data-domain="amber"][aria-pressed="true"] { color: var(--amber-text); }
.chip[data-domain="amber"][aria-pressed="true"] .chip-dot { background: var(--amber-mark); }
.chip[data-domain="coral"]::before { background: var(--coral-wash); }
.chip[data-domain="coral"][aria-pressed="true"] { color: var(--coral-text); }
.chip[data-domain="coral"][aria-pressed="true"] .chip-dot { background: var(--coral-mark); }
.chip[data-domain="sky"]::before { background: var(--sky-wash); }
.chip[data-domain="sky"][aria-pressed="true"] { color: var(--sky-text); }
.chip[data-domain="sky"][aria-pressed="true"] .chip-dot { background: var(--sky-mark); }
.chip[data-domain="sage"]::before { background: var(--sage-wash); }
.chip[data-domain="sage"][aria-pressed="true"] { color: var(--sage-text); }
.chip[data-domain="sage"][aria-pressed="true"] .chip-dot { background: var(--sage-mark); }
.chip[data-domain="rasp"]::before { background: var(--coral-wash); }   /* flare alias */
.chip[data-domain="rasp"][aria-pressed="true"] { color: var(--raspberry-deep); }
.chip[data-domain="rasp"][aria-pressed="true"] .chip-dot { background: var(--coral-mark); }
.chip[data-domain="ink"]::before { background: var(--ink-wash); }
.chip[data-domain="ink"][aria-pressed="true"] { color: var(--ink-soft); }
.chip[data-domain="ink"][aria-pressed="true"] .chip-dot { background: var(--ink-muted); }
/* ===================== BADGES ===================== */
/* labels, not events — badges never animate. Warm attention, NOT red. */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px var(--s-3);
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-weight: 500;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
}
.badge-balans   { background: var(--sage-wash);  color: var(--sage-text); }
.badge-aandacht { background: var(--coral-wash); color: var(--coral-text); }   /* coral = warm attention */
.badge-reactie  { background: var(--amber-wash); color: var(--amber-text); }
.badge-info     { background: var(--sky-wash);   color: var(--sky-text); }
/* ===================== EVIDENCE + CITATION ===================== */
/* honesty colored honestly: high sage · moderate gold · low NEVER colored */
.ev {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 3px var(--s-3);
  border-radius: var(--r-pill);
  font-family: var(--font-sans); font-weight: 500; font-size: var(--t-caption);
}
.ev::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ev-high { background: var(--sage-wash);  color: var(--sage-text); }
.ev-high::before { background: var(--sage-mark); }
.ev-mod  { background: var(--gold-wash);  color: var(--gold-text); }
.ev-mod::before  { background: var(--gold-mark); }
.ev-low  { background: var(--paper-alt);  color: var(--ink-soft); }
.ev-low::before  { background: var(--ink-muted); }   /* low never colored */

.cite {
  display: inline-flex; align-items: center;
  padding: 3px var(--s-3);
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: .04em;
  color: var(--raspberry-deep);
  background: var(--raspberry-wash);
  border: 1px solid rgba(178,58,78,.25);
}
.cite:hover { text-decoration: underline; text-underline-offset: 2px; }
/* ===================== FORMS ===================== */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label { font-weight: 600; font-size: 13px; color: var(--ink-soft); }
.field .help { margin: 0; font-size: var(--t-caption); color: var(--ink-muted); }
.field.is-warn  .help { color: var(--gold-deep); }
.field.is-ok    .help { color: var(--sage-deep); }    /* gentle affirm, not alarm */
.field.is-error .help { color: var(--coral-deep); }   /* warm, never bare red */

.input, .select, textarea.input {
  position: relative;
  width: 100%;
  padding: 14px var(--s-4);
  border: 0; border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: var(--t-body); color: var(--ink);
  background: var(--sink);
  box-shadow: var(--well-inset);
  transition: box-shadow 120ms var(--ease-settle);
}
.input::placeholder, textarea.input::placeholder { color: var(--ink-muted); }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.55; }

/* glow-focus: the well shadow swaps for a --grad-horizon stroke +
   gold halo. Stroke is a masked ::after so the border never animates.
   The .field-well wrapper carries the stroke for input/textarea. */
.field-well { position: relative; border-radius: var(--r-sm); isolation: isolate; }
.field-well::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; padding: 1px;
  background: var(--grad-horizon);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-state) var(--ease-settle);
}
.field-well:focus-within::after { opacity: 1; }
.field-well:focus-within { box-shadow: 0 0 0 4px rgba(242,180,76,.18); }
.field.is-error .field-well:focus-within { box-shadow: 0 0 0 4px rgba(240,104,74,.20); }
.field.is-warn  .field-well:focus-within { box-shadow: 0 0 0 4px rgba(242,180,76,.18); }
.field.is-ok    .field-well:focus-within { box-shadow: 0 0 0 4px rgba(138,168,117,.20); }

/* bare inputs (no wrapper) keep the composited focus-ring halo */
.input:focus-visible, .select:focus-visible, textarea.input:focus-visible {
  outline: none; box-shadow: var(--well-inset), 0 0 0 4px rgba(242,180,76,.18);
}
/* select chevron via background SVG (ink-soft stroke) */
.select {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--s-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%233E4A63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
}
/* ===================== TOGGLE ===================== */
.toggle {
  position: relative;
  width: 62px; height: 34px; padding: 0;
  border: 0; border-radius: var(--r-pill);
  background: var(--sink);
  box-shadow: var(--well-inset);
  cursor: pointer;
  isolation: isolate;
}
/* on-track: sage-wash layer crossfades opacity, never a bg transition */
.toggle::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  background: var(--sage-soft);
  opacity: 0;
  transition: opacity var(--d-state) var(--ease-across);
}
.toggle .knob {
  position: absolute; z-index: 1; top: 4px; left: 4px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--raise);
  box-shadow: var(--shadow-xs), inset 0 6px 8px -6px rgba(255,255,255,.9);
  transition: transform var(--d-control) var(--ease-settle);
}
/* warm-white knob with a gold catch edge */
.toggle .knob::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(242,180,76,0);
  transition: box-shadow var(--d-state) var(--ease-settle);
}
.toggle[aria-checked="true"]::before { opacity: 1; }
.toggle[aria-checked="true"] .knob { transform: translateX(28px); }
.toggle[aria-checked="true"] .knob::after { box-shadow: inset 0 0 0 1px rgba(242,180,76,.6); }
[data-theme="dark"] .toggle[aria-checked="true"] .knob { box-shadow: 0 2px 4px rgba(3,6,14,.5); }
/* ===================== SEGMENTED ===================== */
.seg {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 4px; gap: 2px;
  border-radius: var(--r-pill);
  background: var(--sink);
  box-shadow: var(--well-inset);
}
/* active pill glides on a low-alpha --grad-horizon ground */
.seg-thumb {
  position: absolute; z-index: 0; top: 4px; left: 4px;
  width: 72px;   /* base width; JS scales via scaleX(active / 72) */
  height: calc(100% - 8px);
  border-radius: var(--r-pill);
  background: var(--raise);
  box-shadow: var(--raise-shadow);
  isolation: isolate;
  transform-origin: left center;
  /* JS sets translateX + scaleX; this is object-constancy travel */
  transition: transform var(--d-control) var(--ease-across);
}
.seg-thumb::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--grad-horizon); opacity: .12;
}
.seg-btn {
  position: relative; z-index: 1;
  min-height: 34px; padding: 0 var(--s-4);
  border: 0; background: transparent;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--t-sm);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--d-control) var(--ease-across);
}
.seg-btn.is-active { color: var(--ink); }
/* ===================== CHECKBOX ===================== */
.check, .radio {
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 44px; cursor: pointer;
  font-size: var(--t-body); color: var(--ink);
}
.check input, .radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  position: relative;
  width: 26px; height: 26px; flex: none;
  border-radius: var(--r-xs);
  background: var(--sink);
  box-shadow: var(--well-inset);
  isolation: isolate;
}
/* checked fill: --grad-cta (both stops pass vs --cta-ink tick) */
.check .box::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  background: var(--grad-cta);
  opacity: 0;
  transition: opacity var(--d-state) var(--ease-settle);
}
.check .box svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
.check .tick {
  fill: none; stroke: var(--cta-ink); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22;
  transition: stroke-dashoffset var(--d-enter) var(--ease-settle) 60ms;
}
.check input:checked ~ .box::before { opacity: 1; }
.check input:checked ~ .box .tick { stroke-dashoffset: 0; }
.check input:focus-visible ~ .box { box-shadow: var(--well-inset), var(--focus-ring); }
/* ===================== RADIO ===================== */
.radio .dot {
  position: relative;
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: var(--sink);
  box-shadow: var(--well-inset);
  isolation: isolate;
}
.radio .dot::after {
  content: ""; position: absolute; inset: 7px;
  border-radius: 50%;
  background: var(--grad-cta);
  opacity: 0; transform: scale(.4);
  transition: opacity var(--d-control) var(--ease-settle),
              transform var(--d-control) var(--ease-settle);
}
.radio input:checked ~ .dot::after { opacity: 1; transform: scale(1); }
.radio input:focus-visible ~ .dot { box-shadow: var(--well-inset), var(--focus-ring); }
/* ===================== RANGE (static demo) ===================== */
.range {
  position: relative;
  height: 14px; border-radius: var(--r-pill);
  background: var(--sink);
  box-shadow: var(--well-inset);
}
.range .fill {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  border-radius: var(--r-pill);
  background: var(--grad-horizon);
}
.range .thumb {
  position: absolute; top: 50%; z-index: 1;
  width: 26px; height: 26px; margin-left: -13px;
  border-radius: 50%;
  background: var(--raise);
  box-shadow: var(--raise-shadow);
  transform: translateY(-50%);
}
.range .thumb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(242,180,76,.5);
}
/* ===================== SYMPTOM WORD SCALE ===================== */
.symptom-scale {
  display: flex; gap: 2px;
  padding: 4px; border-radius: var(--r-sm);
  background: var(--sink);
  box-shadow: var(--well-inset);
}
.symptom-opt {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 56px; padding: var(--s-2) var(--s-1);
  border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer;
  isolation: isolate;
  transition: opacity var(--d-state) var(--ease-across);
}
.symptom-opt::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  background: var(--coral-wash);
  opacity: 0;
  transition: opacity var(--d-state) var(--ease-settle);
}
.symptom-opt > * { position: relative; z-index: 1; }
.symptom-opt .word { font-weight: 550; font-size: 13.5px; color: var(--ink); }
.symptom-opt .num  { font-family: var(--font-mono); font-size: var(--t-caption); color: var(--ink-soft); }
.symptom-opt:hover::before { opacity: .5; }
.symptom-opt[aria-checked="true"] { background: var(--raise); box-shadow: var(--raise-shadow); }
.symptom-opt[aria-checked="true"]::before { opacity: 1; }
.symptom-opt[aria-checked="true"] .num { color: var(--raspberry-deep); }
/* alarmerend = raspberry-deep word, never a red fill */
.symptom-opt[data-level="alarmerend"][aria-checked="true"] .word { color: var(--raspberry-deep); }
/* neighbor de-emphasis: once a choice exists, others quiet to .75 */
.symptom-scale:has([aria-checked="true"]) .symptom-opt:not([aria-checked="true"]) { opacity: .75; }
.reassure { font-family: var(--font-display); font-style: italic; color: var(--ink-soft); margin-top: var(--s-3); }
/* ===================== VOICE LINES (wel / niet) ===================== */
/* no left borders anywhere — icon tiles carry the distinction */
.voice-line { display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-3); }
.voice-line p { margin: 0; }
.vtile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border-radius: var(--r-sm);
}
.vtile svg { width: 16px; height: 16px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.voice-line.wel  .vtile { background: var(--sage-wash); }
.voice-line.wel  .vtile svg { stroke: var(--sage-text); }
.voice-line.wel  p { color: var(--ink); }
.voice-line.niet .vtile { background: var(--paper-alt); }
.voice-line.niet .vtile svg { stroke: var(--ink-muted); }
.voice-line.niet p { color: var(--ink-muted); }
/* ===================== CARDS ===================== */
.plate-pad { padding: var(--s-5) var(--s-6); }

/* interactive plate — three tempos: lift, shadow layer, inner image */
.plate.is-hoverable { position: relative; transition: transform var(--d-control) var(--ease-settle); }
.plate.is-hoverable::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity var(--d-enter) var(--ease-settle);
}
.plate.is-hoverable:hover { transform: translateY(-2px); }
.plate.is-hoverable:hover::after { opacity: 1; }
.plate-img { overflow: hidden; border-radius: var(--r-sm); }
.plate-img img { display: block; width: 100%; height: auto; transition: transform var(--d-reveal) var(--ease-settle); }
.plate.is-hoverable:hover .plate-img img { transform: scale(1.02); }

/* backlit-panel — inset legible content panel used inside .backlit
   cards so text never touches a raw bloom (NEW v5). */
.backlit-panel {
  position: relative; z-index: 1;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--card) 92%, transparent);
}
.backlit-panel.is-blur {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* quote plate — printed ornament mark behind the words */
.quote-plate { position: relative; padding: var(--s-6); overflow: hidden; }
.quote-plate .qmark {
  position: absolute; top: -.2em; left: var(--s-4); z-index: 0;
  font-family: var(--font-display); font-style: italic; font-size: 7rem;
  color: var(--coral-soft); line-height: 1; pointer-events: none;
}
.quote-plate blockquote {
  position: relative; z-index: 1; margin: 0;
  font-family: var(--font-display); font-style: italic; font-size: var(--t-quote);
  line-height: 1.35; color: var(--ink);
}
.quote-plate figcaption {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
}
.quote-plate .attr {
  font-family: var(--font-mono); font-size: var(--t-caption);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
}

/* insight — sky stock, content is paper not glass, hedged copy */
.insight { padding: var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.insight .eyebrow {
  font-family: var(--font-mono); font-size: var(--t-eyebrow);
  letter-spacing: .18em; text-transform: uppercase; color: var(--sky-text);
}
.insight p { margin: 0; color: var(--ink); }
.insight .cite { align-self: flex-start; }

/* disclaimer — sage→coral dual tint band, icon tile on card stock */
.disclaimer {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: linear-gradient(100deg, var(--sage-wash), var(--coral-wash));
}
.disclaimer p { margin: 0; font-size: var(--t-sm); color: var(--ink); }
.disclaimer strong { font-weight: 600; }
.disclaimer .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border-radius: var(--r-sm);
  background: var(--card);
  box-shadow: var(--shadow-xs);
}
.disclaimer .ic svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-soft); stroke-width: 2; }
/* ===================== NAV + CHROME ===================== */
.topnav {
  position: sticky; top: var(--s-4); z-index: 40;
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-5);
  border-radius: var(--r-pill);
}
.topnav .btn-primary { margin-left: auto; }
.navlink {
  position: relative;
  font-family: var(--font-sans); font-weight: 500; font-size: var(--t-sm);
  color: var(--ink-soft); text-decoration: none; padding: var(--s-2) 0;
}
.navlink:hover { text-decoration: none; color: var(--ink); }
.navlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1.5px; background: var(--coral);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-control) var(--ease-settle);
}
.navlink:hover::after { transform: scaleX(1); }
.navlink:not(:hover)::after { transform-origin: right; }

.appbar {
  position: sticky; top: 0; z-index: 40;
  padding: var(--s-4) var(--s-5) var(--s-5);
  background: linear-gradient(180deg, var(--paper) 70%, transparent);
}
/* ===================== TAB BAR (app) ===================== */
/* active gets a 3px --grad-horizon underline that travels + icon lifts.
   Decision: .tab-pill is KEPT as the element but restyled from a wash
   pill into the gradient underline bar (object-constancy travel). */
.tabbar {
  display: flex; align-items: center; justify-content: space-around;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
}
.tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 44px; min-height: 44px; padding: var(--s-2);
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-soft);
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase;
  isolation: isolate;
}
.tab svg { position: relative; z-index: 1; width: 22px; height: 22px; transition: transform var(--d-control) var(--ease-settle); }
.tab span:not(.tab-pill) { position: relative; z-index: 1; }
.tab-pill {
  position: absolute; z-index: 0; bottom: 2px; left: 50%;
  width: 28px; height: 3px; margin-left: -14px;
  border-radius: var(--r-pill);
  background: var(--grad-horizon);
  opacity: 0; transform: scaleX(.5);
  transform-origin: center;
  transition: opacity var(--d-control) var(--ease-settle),
              transform var(--d-control) var(--ease-settle);
}
.tab.is-active { color: var(--coral-deep); }
.tab.is-active .tab-pill { opacity: 1; transform: scaleX(1); }
.tab.is-active svg { transform: translateY(-2px); }
/* ===================== CONTENT TABS ===================== */
.tabs {
  position: relative;
  display: inline-flex; gap: var(--s-5);
  border-bottom: 1px solid var(--hairline);
}
.tabs-btn {
  min-height: 44px; padding: 0 var(--s-1);
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--t-sm);
  color: var(--ink-soft);
  transition: color var(--d-control) var(--ease-across);
}
.tabs-btn.is-active { color: var(--ink); }
.tabs-ind {
  position: absolute; bottom: -1px; left: 0;
  height: 2px; width: 100px;   /* base width; JS sets translateX + scaleX(active / 100) */
  background: var(--grad-horizon);
  transform-origin: left center;
  transition: transform var(--d-control) var(--ease-across);
}
/* ===================== OVERLAYS ===================== */
/* scrim indigo-tinted, not black (light .4 / dark .5) */
.sheet-scrim, .modal-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(24,35,56,.4);
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-control) var(--ease-across);
}
[data-theme="dark"] .sheet-scrim, [data-theme="dark"] .modal-scrim { background: rgba(3,6,14,.5); }
.sheet-scrim.is-open, .modal-scrim.is-open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 91;
  padding: var(--s-4) var(--s-5) var(--s-7);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--card);
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform var(--d-reveal) var(--ease-settle);
}
.sheet.is-open { transform: translateY(0); }
.sheet .grip {
  display: block; width: 40px; height: 4px; margin: 0 auto var(--s-4);
  border-radius: var(--r-pill); background: var(--hairline-strong);
}

.modal {
  position: fixed; top: 50%; left: 50%; z-index: 91;
  width: min(440px, calc(100vw - var(--s-6)));
  padding: var(--s-6);
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translate(-50%, calc(-50% + var(--rise-2)));
  transition: opacity var(--d-enter) var(--ease-settle),
              transform var(--d-enter) var(--ease-settle);
}
.modal.is-open { opacity: 1; transform: translate(-50%, -50%); }

.toast {
  position: fixed; left: 50%; bottom: var(--s-6); z-index: 95;
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md);
  font-size: var(--t-sm); color: var(--ink);
  transform: translate(-50%, var(--rise-1));
  opacity: 0;
  animation: toast-in var(--d-enter) var(--ease-settle) forwards;
}
@keyframes toast-in { to { opacity: 1; transform: translate(-50%, 0); } }
.toast.is-leaving { animation: toast-out var(--d-swap) var(--ease-across) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, -4px); } }
.toast-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  color: var(--ink-muted); font-size: 15px;
}
.toast-x:hover { color: var(--ink); }