/* ─── base ────────────────────────────────────────────────── */
:root {
  --bb-base: 16px;
}
html { font-size: var(--bb-base); }

/* Font-size scale via pref attribute */
html[data-font-size="s"]  { --bb-base: 14px; }
html[data-font-size="m"]  { --bb-base: 16px; }
html[data-font-size="l"]  { --bb-base: 18px; }
html[data-font-size="xl"] { --bb-base: 21px; }

/* Theme: explicit overrides win over OS pref. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }
html[data-theme="auto"]  { color-scheme: light dark; }

/* Easy-read font when dyslexic-friendly toggle is on */
html[data-dyslexic="1"] body,
html[data-dyslexic="1"] input,
html[data-dyslexic="1"] textarea,
html[data-dyslexic="1"] button {
  font-family: 'Lexend', system-ui, sans-serif;
  letter-spacing: 0.005em;
  line-height: 1.55;
}

/* High-contrast mode boosts borders + ink + removes alpha bg */
html[data-contrast="1"] body { color: #0c0a08; background: #fffaf2; }
html[data-contrast="1"] [class*="ring-"] { box-shadow: 0 0 0 2px #1f1a17 inset; }
html[data-contrast="1"][data-theme="dark"] body,
html[data-contrast="1"].sys-dark[data-theme="auto"] body { color: #ffffff; background: #000000; }
html[data-contrast="1"] a { text-decoration: underline; text-underline-offset: 2px; }

/* Reduce motion — kills our transitions and pulse, but keeps state changes */
html[data-reduce-motion="1"] *,
html[data-reduce-motion="1"] *::before,
html[data-reduce-motion="1"] *::after {
  animation-duration: 0ms !important;
  transition-duration: 0ms !important;
  scroll-behavior: auto !important;
}

/* Active a11y radio */
.bb-radio-on { background: #92b189; color: #fdf8f3; box-shadow: inset 0 0 0 2px #42603c; }
html[data-theme="dark"] .bb-radio-on,
html[data-theme="auto"].sys-dark .bb-radio-on { background: #577a4f; color: #fdf8f3; }

/* Clinical surface: subtle hover, no scale-on-press, no bouncy feel */
@media (prefers-reduced-motion: no-preference) {
  a, button, [role="button"] { transition: background-color 120ms, border-color 120ms, box-shadow 120ms; }
}

/* Bottom-nav: 3px sage underline for active route */
.bb-nav { color: rgb(60 40 30 / .65); padding-top: 6px; padding-bottom: 6px; position: relative; }
html[data-theme="dark"] .bb-nav,
html[data-theme="auto"].sys-dark .bb-nav { color: rgb(249 239 229 / .60); }
.bb-nav-active { color: #42603c; }
html[data-theme="dark"] .bb-nav-active,
html[data-theme="auto"].sys-dark .bb-nav-active { color: #bdd1b6; }
.bb-nav-active::after {
  content: ""; position: absolute; left: 30%; right: 30%; bottom: 0;
  height: 3px; border-radius: 2px; background: currentColor;
}

/* Reading-register headings: Lexend, slightly tighter */
.font-reading { font-family: 'Lexend', 'Nunito', system-ui, sans-serif; letter-spacing: -0.005em; }
.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
:focus-visible { outline: 3px solid #6e9665; outline-offset: 2px; border-radius: 1rem; }
html[data-contrast="1"] :focus-visible { outline: 3px solid #d76b3c; }

/* Body diagram styles */
.bb-zone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f9efe5;
  color: #2b2421;
  font-size: 0.85em;
  font-weight: 700;
  border: 1px solid #ecd9c1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
html[data-theme="dark"] .bb-zone-btn,
html[data-theme="auto"].sys-dark .bb-zone-btn {
  background: #2b2421; color: #f9efe5; border-color: #3a322d;
}
.bb-zone-btn[aria-pressed="true"] {
  background: #f7c5a2; border-color: #e88654; color: #1f1a17;
}
html[data-contrast="1"] .bb-zone-btn { border-width: 2px; border-color: currentColor; }
html[data-contrast="1"] .bb-zone-btn[aria-pressed="true"] { background: #1f1a17; color: #fdf8f3; }

/* SVG body silhouette zones */
.bb-svg-zone { fill: transparent; stroke: transparent; cursor: pointer; transition: fill 120ms, stroke 120ms; }
.bb-svg-zone:hover { fill: rgba(247, 197, 162, 0.30); stroke: rgba(231, 134, 84, 0.8); stroke-width: 1; }
.bb-svg-zone[aria-pressed="true"] { fill: rgba(247, 197, 162, 0.55); stroke: rgba(231, 134, 84, 1); stroke-width: 1.5; }
html[data-reduce-motion="1"] .bb-svg-zone { transition: none; }

/* Match card "why" pills */
.bb-why-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #dde8d9; color: #42603c; font-size: 0.7rem; font-weight: 700;
  margin-right: 4px; margin-top: 4px;
}
html[data-theme="dark"] .bb-why-pill,
html[data-theme="auto"].sys-dark .bb-why-pill { background: #42603c; color: #f0f5ee; }