/* ============================================================
   UX-2026 — design-system foundation (loaded LAST, additive)
   Distilled from 30 UI/UX videos + 12 references
   (IBM Carbon, GOV.UK, Apple HIG, Mobbin, Calm / Headspace / Wysa).
   Clusters in this layer:  E tokens · F calm visual · C motion · A accessibility.
   Pure presentation. References EXISTING vars (--paper/--ink/--forest/--coral/
   --soft-text...) so NO color is duplicated. Codex lanes (clinical / voice /
   api / server) are untouched. Safe: never auto-inverts the light theme.
   ============================================================ */

:root {
  /* ---- E. Semantic token layer — maps onto the existing palette (no dup) ---- */
  --surface-page:   var(--paper);
  --surface-raised: var(--white);
  --surface-sunken: rgba(60, 78, 68, .04);
  --text-primary:   var(--ink);
  --text-secondary: var(--soft-text, #6c766f);
  --text-faint:     var(--faint-text, #97a09a);
  --action:         var(--forest);     /* primary element fill            */
  --on-action:      #ffffff;           /* text / icon sitting ON --action */
  --action-hover:   var(--forest2, #245544);
  --accent:         var(--coral);      /* highlights only, never body text */
  --border:         var(--line);

  /* ---- 4px spacing scale (one source of truth for gaps/padding) ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px;

  /* ---- Radius scale + soft squircle (F: calm, non-threatening corners) ---- */
  --radius-xs:8px; --radius-sm:12px; --radius-md:16px; --radius-lg:22px;
  --radius-pill:999px;
  --squircle:30% / 45%;                /* border-radius shorthand for a squircle */

  /* ---- Type scale in rem so OS Dynamic Type / browser zoom scales it (A) ---- */
  --text-xs:.6875rem;  /* 11 */  --text-sm:.8125rem; /* 13 */
  --text-base:1rem;    /* 16 — body floor */  --text-lg:1.25rem;  /* 20 */
  --text-xl:1.75rem;   /* 28 */  --text-2xl:2.5rem;  /* 40 */

  /* ---- Motion tokens (C: all <=300ms, calm easing) ---- */
  --dur-instant:120ms; --dur-fast:180ms; --dur-base:240ms; --dur-slow:300ms;
  --ease-out:cubic-bezier(.22, 1, .36, 1);   /* enter: decelerate (soothing) */
  --ease-in:cubic-bezier(.4, 0, 1, 1);       /* exit: accelerate             */
  --ease-soft:cubic-bezier(.4, 0, .2, 1);

  /* ---- Elevation (soft, low-saturation — F) ---- */
  --shadow-sm:0 4px 16px rgba(60, 78, 68, .06);
  --shadow-md:var(--shadow);
  --shadow-lg:0 30px 90px rgba(60, 78, 68, .12);

  /* ---- Focus + touch (A / D) ---- */
  --focus-offset:3px;
  --tap-min:44px;                      /* WCAG 2.5.5 / Apple HIG minimum */
}

/* ============================================================
   A. ACCESSIBILITY — visible keyboard focus on EVERY control.
   :focus-visible (not :focus) so a tap/click leaves no stuck ring,
   but Tab always shows one. Offset so it sits off the edge and
   follows the element's border-radius (Kevin Powell pattern).
   ============================================================ */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--action);
  outline-offset: var(--focus-offset);
  border-radius: inherit;
}
@supports selector(:focus-visible) {
  :where(a, button, [role="button"], input, select, textarea):focus:not(:focus-visible) {
    outline: none;
  }
}

/* ============================================================
   A / D. TOUCH TARGETS — primary nav + icon controls >= 44px.
   Scoped to the controls that were below the floor (icon-button 36px,
   bottom-tab items) so the header layout is left intact.
   ============================================================ */
.tabbar a, .tabbar button, .rn-fab, #rightNowFab {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
}
.icon-button { width: var(--tap-min); height: var(--tap-min); }

/* ============================================================
   F. CALM VISUAL — soft, consistent corners on the large surfaces.
   Sharp corners read as "danger", pure circles as childish; a gentle
   large radius reads calm + premium for a clinical context.
   ============================================================ */
.today-card, .panel, .mode-card, .typeform-card,
.hierarchy-item, .evidence-grid article, .rn-hero {
  border-radius: var(--radius-lg);
}

/* ============================================================
   C. MOTION — in-app pause control (parity with the OS reduced-motion
   already honored in styles.css). Lets an anxious user kill ALL motion
   without leaving the app:  document.documentElement.dataset.motion='off'.
   ============================================================ */
[data-motion="off"] *,
[data-motion="off"] *::before,
[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* ============================================================
   A. HIGH-CONTRAST — OS preference + in-app [data-contrast="high"].
   Boosts text + border contrast and drops low-contrast transparency.
   Additive boost only — it never inverts the light theme, so nothing
   breaks. Toggle:  document.documentElement.dataset.contrast='high'.
   ============================================================ */
@media (prefers-contrast: more) {
  :root { --text-secondary:#3c4742; --text-faint:#566058; --border:rgba(29, 41, 35, .4); }
}
[data-contrast="high"] {
  --text-secondary:#28302b;
  --text-faint:#3c4742;
  --border:rgba(29, 41, 35, .55);
}
[data-contrast="high"] .today-card,
[data-contrast="high"] .panel,
[data-contrast="high"] .hierarchy-item,
[data-contrast="high"] input,
[data-contrast="high"] textarea,
[data-contrast="high"] select { border-color: var(--border); background:#fff; }
[data-contrast="high"] .microcopy,
[data-contrast="high"] .privacy { color:#3c4742 !important; }
[data-contrast="high"] :focus-visible { outline-color:#1d2923; outline-width:3px; }

/* ============================================================
   E / F. DARK THEME tokens — OPT-IN only ([data-theme="dark"]).
   Defined now, dormant until the theme-toggle batch wires the control
   and sweeps the remaining hardcoded light hexes. Deliberately NOT
   bound to @media (prefers-color-scheme) so a dark-OS user is never
   shown a half-converted screen by surprise.
   ============================================================ */
[data-theme="dark"] {
  --paper:#15201b;            --surface-page:#15201b;
  --ink:#e8efe9;              --text-primary:#e8efe9;
  --soft-text:#aab8b0;        --text-secondary:#aab8b0;
  --faint-text:#7e8c84;       --text-faint:#7e8c84;
  --forest:#6f9e88; --forest2:#84b39c; --action:#6f9e88; --action-hover:#84b39c;
  --line:rgba(232, 239, 233, .14); --border:rgba(232, 239, 233, .14);
  --white:rgba(255, 255, 255, .05); --surface-raised:rgba(255, 255, 255, .05);
  --shadow:0 30px 90px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

/* ============================================================
   LAYOUT FIX — intro & onboarding hide the sidebar (display:none),
   but .app-shell keeps its 2-column grid track (sidebar 238px | main),
   so #mainContent auto-places into the narrow sidebar track and
   collapses to ~238px (the "one word per line" hero). Collapse the
   shell to a single column whenever the sidebar is hidden.
   ============================================================ */
body[data-view="intro"] .app-shell,
body[data-view="onboarding"] .app-shell {
  grid-template-columns: 1fr;
}

/* ============================================================
   BEHAVIOR-LAYER STYLES (paired with ux-2026.js) — clusters A/B/D/G/H
   ============================================================ */

/* sr-only — visually hidden but available to screen readers / live regions */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- A. Display & accessibility toggle switches (in #adminView) ---- */
.ux-pref-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.ux-pref-row:last-child { border-bottom: 0; }
.ux-pref-label b { display: block; font: 600 14px Georgia, serif; }
.ux-pref-label small { color: var(--text-secondary); font-size: 12px; }
.ux-switch { position: relative; flex: 0 0 auto; width: 52px; height: 30px; }
.ux-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ux-switch .ux-track {
  position: absolute; inset: 0; border-radius: var(--radius-pill);
  background: rgba(60, 78, 68, .18); transition: background var(--dur-fast) var(--ease-soft);
}
.ux-switch .ux-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}
.ux-switch input:checked + .ux-track { background: var(--action); }
.ux-switch input:checked + .ux-track::after { transform: translateX(22px); }
.ux-switch input:focus-visible + .ux-track { outline: 2px solid var(--action); outline-offset: 3px; }

/* ---- B. Voice-state pip — driven by body[data-voice] set in ux-2026.js ---- */
.ux-voice-pip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font: 600 11px/1 sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-secondary);
}
.ux-voice-pip::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint);
  transition: background var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft);
}
body[data-voice] .ux-voice-pip::after { content: "Listening"; }
body[data-voice="listening"] .ux-voice-pip::before { background: var(--action); animation: uxBreathe 2.4s ease-in-out infinite; }
body[data-voice="listening"] .ux-voice-pip::after { content: "Your turn"; }
body[data-voice="speaking"]  .ux-voice-pip::before { background: var(--accent); }
body[data-voice="speaking"]  .ux-voice-pip::after { content: "Steady speaking"; }
body[data-voice="paused"]    .ux-voice-pip::after { content: "Paused"; }
@keyframes uxBreathe { 50% { transform: scale(1.35); opacity: .6; } }

/* ---- D. Calm bottom sheets — safety/auth dialogs slide up from bottom on phones ---- */
@media (max-width: 620px) {
  dialog.safety-dialog {
    position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-top: 30px;
    animation: uxSheetUp var(--dur-slow) var(--ease-out);
  }
  dialog.safety-dialog::before {
    content: ""; position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--border);
  }
}
@keyframes uxSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---- G. Forgiving, non-punitive progress note (appended to #progressView) ---- */
.ux-kindness {
  margin: 28px 0 0; padding: 16px 18px; border-radius: var(--radius-md);
  background: var(--surface-sunken); color: var(--text-secondary);
  font: 400 14px/1.55 Georgia, serif; max-width: 640px;
}

/* ---- H. Crisis affordance — keep "Right now" unmistakable + clear of the tab bar ---- */
.rn-fab:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (max-width: 620px) { .rn-fab { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }

/* progressive-disclosure utility (NN/g #30) — reveal advanced controls on demand */
.ux-advanced[hidden] { display: none; }