/* Clarity OS — Global styles
   Notes:
   - Tailwind is loaded via the CDN <script> in index.html. This file is
     reserved for components that need richer styling (animations, gradients,
     SVG behavior) that would be awkward as Tailwind utility soup.
   - Keep selectors flat and well-scoped to avoid specificity wars.
*/

:root {
  /* Core palette — kept in sync with the Tailwind config in index.html. */
  --c-stress:  244, 63, 94;     /* coral */
  --c-clarity:  59, 130, 246;   /* electric blue */
  --c-action:   16, 185, 129;   /* emerald */
  --c-warn:    245, 158, 11;    /* amber */
  --c-brand:    91, 135, 255;   /* signature blue */
  --c-violet:  168,  85, 247;
  --c-cyan:      6, 182, 212;
  --c-meaning: 168,  85, 247;
}

html, body { height: 100%; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: #f5f8ff;
}
.dark body { background-color: #07091a; }

/* The base gradient lives on a fixed-position pseudo-element so it
 * doesn't create a hard seam when the document scrolls past it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1400px 900px at 110% -10%, rgba(168,85,247,0.10), transparent 60%),
    radial-gradient(1100px 800px at -10% 110%, rgba(6,182,212,0.08), transparent 60%),
    linear-gradient(180deg, #f8faff 0%, #eef2fc 100%);
  pointer-events: none;
}
.dark body::before {
  background:
    radial-gradient(1400px 900px at 110% -10%, rgba(168,85,247,0.14), transparent 60%),
    radial-gradient(1100px 800px at -10% 110%, rgba(6,182,212,0.10), transparent 60%),
    linear-gradient(180deg, #06091a 0%, #0a0f24 100%);
}

::selection {
  background: rgba(var(--c-brand), 0.28);
  color: white;
}

/* ---------- Background layers ---------- */
.bg-aurora, .bg-dotgrid, .bg-orbits {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.bg-aurora__blob {
  position: absolute;
  width: 55vmax; height: 55vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.32;
  mix-blend-mode: screen;
  animation: aurora-drift 26s ease-in-out infinite;
}
.bg-aurora__blob--a {
  background: radial-gradient(circle at center, rgba(91,135,255,0.75), transparent 60%);
  top: -12vmax; left: -12vmax;
}
.bg-aurora__blob--b {
  background: radial-gradient(circle at center, rgba(6,182,212,0.65), transparent 60%);
  bottom: -12vmax; right: -8vmax;
  animation-delay: -9s;
}
.bg-aurora__blob--c {
  background: radial-gradient(circle at center, rgba(168,85,247,0.55), transparent 60%);
  top: 20vmax; left: 30vmax;
  animation-delay: -16s;
  opacity: 0.28;
}
.bg-aurora__blob--d {
  background: radial-gradient(circle at center, rgba(244,63,94,0.4), transparent 60%);
  bottom: 10vmax; left: -8vmax;
  animation-delay: -21s;
  opacity: 0.22;
}
@keyframes aurora-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(7vmax, -5vmax) scale(1.1); }
  66%      { transform: translate(-5vmax, 6vmax) scale(0.92); }
}
.dark .bg-aurora__blob { opacity: 0.55; }

/* Subtle dot grid for futuristic depth — light + dark adapt. */
.bg-dotgrid {
  background-image:
    radial-gradient(circle, rgba(91,135,255,0.10) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 90%);
  opacity: 0.55;
}
.dark .bg-dotgrid {
  background-image:
    radial-gradient(circle, rgba(180,200,255,0.10) 1px, transparent 1px);
  opacity: 0.4;
}

/* Drifting orbs / "stars" — slow vertical orbit, parallax depth. */
.bg-orbits__star {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,135,255,0.9), rgba(91,135,255,0));
  box-shadow: 0 0 18px rgba(91,135,255,0.55);
  filter: blur(0.4px);
  animation: orbit 22s linear infinite;
  opacity: 0.7;
}
.bg-orbits__star--a { top: 12%;  left: 18%; animation-duration: 28s; }
.bg-orbits__star--b { top: 28%;  left: 78%; animation-duration: 36s; animation-delay: -10s; background: radial-gradient(circle, rgba(168,85,247,0.9), rgba(168,85,247,0)); box-shadow: 0 0 18px rgba(168,85,247,0.55); }
.bg-orbits__star--c { top: 58%;  left: 8%;  animation-duration: 30s; animation-delay: -6s; background: radial-gradient(circle, rgba(6,182,212,0.9), rgba(6,182,212,0)); box-shadow: 0 0 18px rgba(6,182,212,0.55); }
.bg-orbits__star--d { top: 78%;  left: 88%; animation-duration: 26s; animation-delay: -14s; }
.bg-orbits__star--e { top: 42%;  left: 48%; animation-duration: 34s; animation-delay: -18s; opacity: 0.4; }
@keyframes orbit {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(20px, -30px); }
  100% { transform: translate(0, 0); }
}

/* ---------- Glass cards ---------- */
.glass {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.dark .glass {
  background: rgba(20,25,37,0.6);
}

.card {
  position: relative;
  border-radius: 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
  border: 1px solid rgba(219,226,239,0.75);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.6) inset,        /* inner highlight */
    0 12px 32px -16px rgba(15,23,42,0.14);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.2s ease;
}
.dark .card {
  background: linear-gradient(180deg, rgba(28,34,48,0.65), rgba(20,25,37,0.55));
  border-color: rgba(58,69,92,0.6);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.06) inset,
    0 14px 40px -16px rgba(0,0,0,0.55);
}

.card--padded { padding: 1.25rem; }
@media (min-width: 640px) { .card--padded { padding: 1.5rem; } }

/* Optional: card with animated gradient border — apply with .card.is-glowing */
.card.is-glowing {
  background-clip: padding-box;
  position: relative;
}
.card.is-glowing::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(91,135,255,0.6),
    rgba(168,85,247,0.6),
    rgba(6,182,212,0.6),
    rgba(91,135,255,0.6)
  );
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: gradient-shift 9s ease infinite;
  pointer-events: none;
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 0.95rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  transition:
    transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.18s cubic-bezier(0.2, 0.7, 0.2, 1),
    background-color 0.18s ease,
    background-position 0.4s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}
.btn:active { transform: translateY(1.5px) scale(0.985); }
.btn:focus-visible { outline: 2px solid rgba(var(--c-brand),0.6); outline-offset: 2px; }

.btn-primary {
  background: linear-gradient(135deg, #3f6fff 0%, #6b6df8 50%, #06b6d4 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  color: white;
  box-shadow:
    0 10px 24px -10px rgba(91,135,255,0.6),
    0 1px 0 rgba(255,255,255,0.15) inset;
}
.btn-primary:hover {
  background-position: 100% 50%;
  box-shadow: 0 16px 32px -10px rgba(91,135,255,0.7), 0 0 0 1px rgba(255,255,255,0.18) inset;
  transform: translateY(-1.5px);
}

.btn-ghost {
  background: rgba(255,255,255,0.55);
  color: inherit;
  border-color: rgba(219,226,239,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dark .btn-ghost { background: rgba(28,34,48,0.45); border-color: rgba(58,69,92,0.7); }
.btn-ghost:hover { background: rgba(231,238,250,0.65); border-color: rgba(91,135,255,0.4); }
.dark .btn-ghost:hover { background: rgba(40,48,66,0.55); border-color: rgba(91,135,255,0.5); }

.btn-danger {
  background: linear-gradient(135deg, #f43f5e, #fb7185);
  color: white;
  box-shadow: 0 10px 24px -10px rgba(244,63,94,0.6);
}
.btn-danger:hover { transform: translateY(-1.5px); box-shadow: 0 16px 32px -10px rgba(244,63,94,0.7); }
.btn-success {
  background: linear-gradient(135deg, #10b981, #22c55e);
  color: white;
  box-shadow: 0 10px 24px -10px rgba(16,185,129,0.6);
}
.btn-success:hover { transform: translateY(-1.5px); box-shadow: 0 16px 32px -10px rgba(16,185,129,0.7); }
.btn-warn {
  background: linear-gradient(135deg, #f59e0b, #f43f5e);
  color: white;
  box-shadow: 0 10px 24px -10px rgba(245,158,11,0.55);
}
.btn-warn:hover { transform: translateY(-1.5px); box-shadow: 0 16px 32px -10px rgba(245,158,11,0.65); }

.btn-neon {
  background: rgba(11,16,32,0.6);
  color: white;
  border: 1px solid rgba(91,135,255,0.55);
  box-shadow:
    0 0 18px rgba(91,135,255,0.4),
    0 0 30px rgba(168,85,247,0.2) inset;
  backdrop-filter: blur(12px);
}
.btn-neon:hover {
  box-shadow:
    0 0 24px rgba(91,135,255,0.55),
    0 0 36px rgba(168,85,247,0.3) inset;
  transform: translateY(-1.5px);
}

/* ---------- Inputs ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.field label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(93, 107, 129);
}
.dark .field label { color: rgb(139,151,170); }

.input, .textarea, .select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(220,227,237,0.8);
  background: rgba(255,255,255,0.75);
  color: inherit;
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.dark .input, .dark .textarea, .dark .select {
  background: rgba(23,28,40,0.7);
  border-color: rgba(40,48,66,0.8);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: rgba(var(--c-brand),0.6);
  box-shadow: 0 0 0 4px rgba(var(--c-brand),0.18);
}
.textarea { min-height: 9rem; resize: vertical; }

/* Range slider */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--c-action),0.6), rgba(var(--c-warn),0.6), rgba(var(--c-stress),0.6));
  outline: none;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  height: 22px; width: 22px; border-radius: 50%;
  background: white; border: 3px solid #3b82f6;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  cursor: pointer; transition: transform 0.15s ease;
}
.range::-moz-range-thumb {
  height: 22px; width: 22px; border-radius: 50%;
  background: white; border: 3px solid #3b82f6;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  cursor: pointer;
}
.range::-webkit-slider-thumb:hover { transform: scale(1.1); }

/* ---------- Nav ---------- */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0.85rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(62, 74, 93);
  border: 1px solid transparent;
  transition: all 0.15s ease;
  cursor: pointer;
}
.dark .nav-item { color: rgb(185,196,211); }
.nav-item:hover { background: rgba(220,227,237,0.5); }
.dark .nav-item:hover { background: rgba(40,48,66,0.6); }
.nav-item .nav-icon {
  height: 1.75rem; width: 1.75rem; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 0.5rem;
  background: rgba(220,227,237,0.6);
  color: rgb(62,74,93);
}
.dark .nav-item .nav-icon { background: rgba(40,48,66,0.8); color: rgb(185,196,211); }

.nav-item.is-active {
  background: linear-gradient(135deg, rgba(91,135,255,0.18), rgba(59,130,246,0.12));
  color: rgb(31, 41, 78);
  border-color: rgba(91,135,255,0.35);
  box-shadow: 0 6px 18px -10px rgba(91,135,255,0.4);
}
.dark .nav-item.is-active { color: white; }
.nav-item.is-active .nav-icon {
  background: linear-gradient(135deg, #3f6fff, #3b82f6);
  color: white;
}

/* ---------- Pills / tags ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(220,227,237,0.5);
  color: rgb(40, 48, 66);
}
.dark .pill { background: rgba(40,48,66,0.6); color: rgb(220,227,237); }

.pill--stress  { background: rgba(var(--c-stress),0.14);  color: rgb(190, 18, 60); }
.dark .pill--stress  { color: rgb(253, 164, 175); }
.pill--clarity { background: rgba(var(--c-clarity),0.14); color: rgb(29, 78, 216); }
.dark .pill--clarity { color: rgb(147, 197, 253); }
.pill--action  { background: rgba(var(--c-action),0.14);  color: rgb(4, 120, 87); }
.dark .pill--action  { color: rgb(110, 231, 183); }
.pill--warn    { background: rgba(var(--c-warn),0.16);    color: rgb(146, 64, 14); }
.dark .pill--warn    { color: rgb(253, 224, 71); }
.pill--violet, .pill--meaning {
  background: rgba(var(--c-violet),0.16); color: rgb(126, 34, 206);
}
.dark .pill--violet, .dark .pill--meaning { color: rgb(216, 180, 254); }
.pill--cyan {
  background: rgba(var(--c-cyan),0.16); color: rgb(14, 116, 144);
}
.dark .pill--cyan { color: rgb(103, 232, 249); }

/* Neon pill: subtle outline + faint glow — for primary status indicators */
.pill--neon {
  background: rgba(11,16,32,0.04);
  color: rgb(63, 111, 255);
  border: 1px solid rgba(91,135,255,0.4);
  box-shadow: 0 0 10px rgba(91,135,255,0.18);
}
.dark .pill--neon {
  background: rgba(91,135,255,0.08);
  color: rgb(163, 189, 255);
  box-shadow: 0 0 14px rgba(91,135,255,0.25);
}

/* ---------- Heart pulse ---------- */
.heart-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.heart {
  color: rgb(239, 68, 68);
  width: 64px; height: 64px;
  filter: drop-shadow(0 6px 18px rgba(239,68,68,0.4));
  animation: heartbeat var(--heart-rate, 1s) ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 70%, 100% { transform: scale(1); }
  20%           { transform: scale(1.18); }
  40%           { transform: scale(0.95); }
}
.heart-rings::before, .heart-rings::after {
  content: ""; position: absolute; inset: -10px;
  border-radius: 50%; border: 2px solid rgba(239,68,68,0.4);
  animation: pulse-ring var(--heart-rate, 1s) ease-out infinite;
}
.heart-rings::after { animation-delay: calc(var(--heart-rate, 1s) / -2); }
@keyframes pulse-ring {
  0%   { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ---------- Brain waves ---------- */
.brain-wave-bar {
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #5b87ff, #3b82f6);
  animation: wave-bounce var(--wave-rate, 0.9s) ease-in-out infinite;
  transform-origin: bottom;
}
.brain-wave-bar:nth-child(1) { animation-delay: -0.0s; }
.brain-wave-bar:nth-child(2) { animation-delay: -0.1s; }
.brain-wave-bar:nth-child(3) { animation-delay: -0.2s; }
.brain-wave-bar:nth-child(4) { animation-delay: -0.3s; }
.brain-wave-bar:nth-child(5) { animation-delay: -0.4s; }
.brain-wave-bar:nth-child(6) { animation-delay: -0.5s; }
.brain-wave-bar:nth-child(7) { animation-delay: -0.6s; }
@keyframes wave-bounce {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}

/* ---------- Stress meter ---------- */
.stress-meter {
  height: 14px;
  border-radius: 999px;
  background: rgba(220,227,237,0.5);
  overflow: hidden;
  position: relative;
}
.dark .stress-meter { background: rgba(40,48,66,0.6); }
.stress-meter__fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #f59e0b, #ef4444);
  background-size: 200% 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ---------- Toasts ---------- */
.toast {
  background: rgba(23,28,40,0.92);
  color: white;
  padding: 0.8rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(91,135,255,0.4);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.45);
  animation: toast-in 0.25s ease-out forwards;
  display: flex; gap: 0.7rem; align-items: flex-start;
}
.toast--success { border-color: rgba(34,197,94,0.5); }
.toast--warn    { border-color: rgba(245,158,11,0.5); }
.toast--danger  { border-color: rgba(239,68,68,0.5); }
@keyframes toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ---------- View transitions ---------- */
.view-enter {
  animation: viewIn 0.35s ease-out both;
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Task card ---------- */
.task-card {
  position: relative;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(220,227,237,0.8);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dark .task-card {
  background: rgba(23,28,40,0.6);
  border-color: rgba(40,48,66,0.8);
}
.task-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(0,0,0,0.25); }
.task-card.is-done {
  opacity: 0.55;
}
.task-card.is-done .task-title { text-decoration: line-through; }

.priority-dot {
  width: 10px; height: 10px;
  border-radius: 50%; margin-top: 0.4rem;
  background: rgb(148, 163, 184);
  box-shadow: 0 0 0 3px rgba(148,163,184,0.18);
}
.priority-dot[data-priority='3'] { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.2); }
.priority-dot[data-priority='2'] { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.2); }
.priority-dot[data-priority='1'] { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }

/* ---------- Focus mode ---------- */
.focus-stage {
  background: radial-gradient(ellipse at top, rgba(91,135,255,0.18), transparent 60%),
              rgba(11,15,23,0.92);
  color: white;
  border-radius: 1.5rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 1px solid rgba(91,135,255,0.3);
}

/* ---------- Charts container ---------- */
.chart-shell {
  position: relative;
  width: 100%;
  height: 280px;
}

/* ---------- Utilities ---------- */
.scroll-fade {
  mask-image: linear-gradient(180deg, transparent, black 8%, black 92%, transparent);
}

.kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.35rem;
  background: rgba(220,227,237,0.7);
  border: 1px solid rgba(220,227,237,0.9);
}
.dark .kbd { background: rgba(40,48,66,0.7); border-color: rgba(40,48,66,0.9); }

/* ---------- Print friendliness ---------- */
@media print {
  .bg-aurora, header, aside, #toastRegion, #suggestionDock { display: none !important; }
  body { background: white; color: black; }
}

/* ====================================================================
   Interaction layer additions — ripples, confetti, palette, tiles, etc.
   ==================================================================== */

/* ---------- Click ripple ---------- */
.ripple-ink {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  background: currentColor;
  opacity: 0.18;
  transform: scale(0);
  animation: ripple-go 600ms ease-out;
}
@keyframes ripple-go {
  to { transform: scale(2.2); opacity: 0; }
}

/* ---------- Confetti ---------- */
.confetti-piece {
  position: fixed;
  width: 8px; height: 14px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9999;
  animation: confetti-fly 1.4s cubic-bezier(0.15,0.65,0.3,1) forwards;
  will-change: transform, opacity;
}
@keyframes confetti-fly {
  0%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 220px)) rotate(var(--rot)); opacity: 0; }
}

/* ---------- Attention pulse ---------- */
.attn-pulse {
  animation: attn-pulse 1.2s ease-out;
}
@keyframes attn-pulse {
  0%   { box-shadow: 0 0 0 0 var(--pulse-color, rgba(91,135,255,0.55)); }
  60%  { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* The CTA on the top action card breathes when it matters */
.attn-target {
  position: relative;
}
.attn-target::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: inherit;
  border: 2px solid transparent;
  pointer-events: none;
  animation: attn-breathe 3s ease-in-out infinite;
}
@keyframes attn-breathe {
  0%,100% { box-shadow: 0 0 0 0 rgba(91,135,255,0.25); }
  50%     { box-shadow: 0 0 0 8px rgba(91,135,255,0); }
}

/* ---------- Shake ---------- */
.shake-x {
  animation: shake-x 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake-x {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* ---------- Stagger reveal ---------- */
.fade-in-up {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 360ms cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: inherit;
}
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Animation-delay reuse for class-based version */
[style*="--stagger"] { transition-delay: var(--stagger); }

/* ---------- Tile cards (home module grid) ---------- */
.tile {
  display: block;
  border-radius: 1rem;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(220,227,237,0.7);
  padding: 0.95rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
  overflow: hidden;
}
.dark .tile {
  background: rgba(23,28,40,0.55);
  border-color: rgba(40,48,66,0.75);
}
.tile:hover {
  transform: translateY(-3px);
  border-color: rgba(91,135,255,0.45);
  box-shadow: 0 14px 32px -16px rgba(91,135,255,0.45);
}
.tile::before {
  content: ""; position: absolute; inset: -1px;
  background: radial-gradient(60% 60% at 20% 0%, rgba(91,135,255,0.18), transparent 60%);
  opacity: 0; transition: opacity 0.25s;
  pointer-events: none;
}
.tile:hover::before { opacity: 1; }
.tile__icon {
  font-size: 1.5rem;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  border-radius: 0.65rem;
  background: linear-gradient(135deg, rgba(91,135,255,0.18), rgba(59,130,246,0.12));
  margin-bottom: 0.5rem;
}
.tile__title { font-weight: 600; font-size: 0.875rem; }
.tile__hint { font-size: 0.7rem; color: rgb(93,107,129); margin-top: 0.15rem; }
.dark .tile__hint { color: rgb(139,151,170); }

/* ---------- Top 3 rows ---------- */
.top3-row {
  display: flex; gap: 0.75rem; align-items: center;
  padding: 0.65rem 0.85rem;
  border-radius: 0.9rem;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(220,227,237,0.75);
  transition: transform 0.2s ease, opacity 0.25s ease, border-color 0.2s ease, background 0.2s ease;
}
.dark .top3-row {
  background: rgba(23,28,40,0.5);
  border-color: rgba(40,48,66,0.75);
}
.top3-row.group:hover, .top3-row:hover {
  border-color: rgba(91,135,255,0.4);
  background: rgba(91,135,255,0.05);
}
.top3-row.is-removing {
  opacity: 0;
  transform: translateX(40px) scale(0.96);
}
.top3-check {
  height: 1.5rem; width: 1.5rem;
  border-radius: 50%;
  border: 2px solid rgba(91,135,255,0.5);
  display: grid; place-items: center;
  color: white;
  flex-shrink: 0;
  transition: all 0.18s ease;
}
.top3-check:hover {
  background: linear-gradient(135deg, #22c55e, #10b981);
  border-color: transparent;
  transform: scale(1.08);
}
.top3-check:hover svg { opacity: 1 !important; }

/* ---------- Command palette ---------- */
.cmd-overlay {
  position: fixed; inset: 0;
  z-index: 100;
  display: grid; place-items: start center;
  padding: max(8vh, 4rem) 1rem 1rem;
  opacity: 0;
  transition: opacity 180ms ease;
}
.cmd-overlay.is-open { opacity: 1; }
.cmd-overlay .cmd-backdrop {
  position: absolute; inset: 0;
  background: rgba(11,15,23,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cmd-overlay .cmd-panel {
  position: relative;
  width: 100%; max-width: 38rem;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(220,227,237,0.8);
  border-radius: 1.1rem;
  box-shadow: 0 30px 80px -20px rgba(11,15,23,0.6);
  overflow: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: transform 180ms ease;
}
.cmd-overlay.is-open .cmd-panel { transform: translateY(0) scale(1); }
.dark .cmd-overlay .cmd-panel {
  background: rgba(23,28,40,0.95);
  border-color: rgba(40,48,66,0.8);
}
.cmd-input-wrap {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid rgba(220,227,237,0.7);
}
.dark .cmd-input-wrap { border-color: rgba(40,48,66,0.7); }
.cmd-input-icon {
  font-size: 1.1rem;
  color: rgb(91, 135, 255);
  font-weight: 700;
}
.cmd-input {
  flex: 1;
  border: none; outline: none; background: transparent;
  font: inherit; font-size: 1rem;
  color: inherit;
}
.cmd-list {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.4rem 0;
}
.cmd-item {
  width: 100%;
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.55rem 1.1rem;
  background: transparent;
  border: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.cmd-item__icon {
  width: 1.5rem; text-align: center; font-size: 1rem;
}
.cmd-item__label { flex: 1; font-size: 0.875rem; font-weight: 500; }
.cmd-item__hint { font-size: 0.7rem; color: rgb(93,107,129); }
.dark .cmd-item__hint { color: rgb(139,151,170); }
.cmd-item.is-active {
  background: linear-gradient(90deg, rgba(91,135,255,0.18), rgba(91,135,255,0.05));
  color: rgb(31, 41, 78);
}
.dark .cmd-item.is-active { color: white; }
.cmd-foot {
  display: flex; gap: 1rem;
  padding: 0.6rem 1.1rem;
  border-top: 1px solid rgba(220,227,237,0.7);
  font-size: 0.7rem;
  color: rgb(93,107,129);
}
.dark .cmd-foot { border-color: rgba(40,48,66,0.7); color: rgb(139,151,170); }
.cmd-foot .kbd { margin-right: 0.3rem; }

/* ---------- Skeleton loader (utility) ---------- */
.skeleton {
  background: linear-gradient(90deg, rgba(220,227,237,0.4), rgba(220,227,237,0.7), rgba(220,227,237,0.4));
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s linear infinite;
  border-radius: 0.5rem;
}
.dark .skeleton {
  background: linear-gradient(90deg, rgba(40,48,66,0.4), rgba(40,48,66,0.7), rgba(40,48,66,0.4));
  background-size: 200% 100%;
}
@keyframes skeleton-pulse {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ---------- Tabular numbers ---------- */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ---------- Hover-lift utility ---------- */
.hover-lift {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px rgba(0,0,0,0.3);
}

/* ====================================================================
   Module-specific styles — Quick Relief, Purpose, Memory Vault, Breathing
   ==================================================================== */

/* ---------- Relief / Quick Scan ---------- */
.relief-stage {
  position: relative;
  isolation: isolate;
}

.relief-progress {
  height: 6px; border-radius: 999px;
  background: rgba(220,227,237,0.5); overflow: hidden;
}
.dark .relief-progress { background: rgba(40,48,66,0.6); }
.relief-progress__fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg,#5b87ff,#22c55e);
  transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.relief-card {
  position: relative;
}
.relief-card--enter { animation: relief-card-in 380ms cubic-bezier(0.2,0.7,0.2,1); }
@keyframes relief-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.relief-card__prompt {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
@media (min-width: 640px) {
  .relief-card__prompt { font-size: 1.7rem; }
}
.relief-card__help { font-size: 0.75rem; color: rgb(93,107,129); margin-top: 0.3rem; }
.dark .relief-card__help { color: rgb(139,151,170); }
.relief-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem; margin-top: 1.25rem;
}
@media (min-width: 640px) {
  .relief-card__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.relief-opt {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.85rem;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(220,227,237,0.8);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              border-color 0.18s ease, background 0.18s ease;
  text-align: left;
  font: inherit; color: inherit;
}
.dark .relief-opt {
  background: rgba(23,28,40,0.55);
  border-color: rgba(40,48,66,0.75);
}
.relief-opt:hover {
  transform: translateY(-2px);
  border-color: rgba(91,135,255,0.45);
  box-shadow: 0 12px 26px -16px rgba(91,135,255,0.5);
}
.relief-opt.is-chosen {
  background: linear-gradient(135deg, rgba(91,135,255,0.22), rgba(59,130,246,0.10));
  border-color: rgba(91,135,255,0.6);
  color: rgb(31, 41, 78);
}
.dark .relief-opt.is-chosen { color: white; }
.relief-opt__emoji { font-size: 1.35rem; }
.relief-opt__label { font-weight: 600; font-size: 0.9rem; }

.relief-action {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.65rem;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(220,227,237,0.8);
  text-align: left; font: inherit; color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease,
              background 0.15s ease;
}
.dark .relief-action {
  background: rgba(23,28,40,0.55);
  border-color: rgba(40,48,66,0.75);
}
.relief-action:hover {
  border-color: rgba(91,135,255,0.45);
  transform: translateY(-1px);
}
.relief-action.is-done {
  background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(16,185,129,0.10));
  border-color: rgba(34,197,94,0.5);
  color: rgb(21, 128, 61);
}
.dark .relief-action.is-done { color: rgb(134, 239, 172); }
.relief-action__icon { font-weight: 700; font-size: 0.95rem; }
.relief-action__label { font-size: 0.85rem; font-weight: 500; }

/* ---------- Breathing orb (background of Quick Relief) ---------- */
.breathing-orb {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid; place-items: center;
  z-index: 0;
}
.breathing-orb span {
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,135,255,0.25), transparent 70%);
  animation: breath 7s ease-in-out infinite;
}
.breathing-orb span:nth-child(2) { animation-delay: -2.3s; opacity: 0.7; }
.breathing-orb span:nth-child(3) { animation-delay: -4.6s; opacity: 0.5; }
@keyframes breath {
  0%, 100% { transform: scale(0.7); opacity: 0.3; }
  50%      { transform: scale(1.2); opacity: 0.6; }
}

/* ---------- Breathing overlay (guided exercise) ---------- */
.breath-overlay {
  position: fixed; inset: 0;
  z-index: 110;
  display: grid; place-items: center;
  opacity: 0; transition: opacity 220ms ease;
  padding: 1rem;
}
.breath-overlay.is-open { opacity: 1; }
.breath-overlay .breath-backdrop {
  position: absolute; inset: 0;
  background: rgba(11,15,23,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.breath-overlay .breath-panel {
  position: relative;
  text-align: center;
  color: white;
  max-width: 24rem; width: 100%;
}
.breath-instruction {
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.breath-sub { color: rgba(255,255,255,0.6); font-size: 0.85rem; margin-top: 1rem; }
.breath-circle {
  margin: 1.5rem auto;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,135,255,0.45), rgba(59,130,246,0.15));
  box-shadow: 0 0 60px rgba(91,135,255,0.35);
  animation: breath-box 16s ease-in-out infinite;
}
@keyframes breath-box {
  0%   { transform: scale(0.7); }    /* inhale start */
  25%  { transform: scale(1.15); }   /* hold full */
  50%  { transform: scale(1.15); }   /* exhale start */
  75%  { transform: scale(0.7); }    /* hold empty */
  100% { transform: scale(0.7); }
}

/* ---------- Purpose hero aurora ---------- */
.purpose-aurora {
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 60% at 0% 0%, rgba(168,85,247,0.18), transparent 60%),
    radial-gradient(40% 60% at 100% 100%, rgba(91,135,255,0.18), transparent 60%);
  pointer-events: none;
  animation: purpose-shift 14s ease-in-out infinite;
}
@keyframes purpose-shift {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

.purpose-goal {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.75rem;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(220,227,237,0.7);
}
.dark .purpose-goal {
  background: rgba(23,28,40,0.45);
  border-color: rgba(40,48,66,0.7);
}

/* ---------- Vault tabs ---------- */
.vault-tabs {
  display: inline-flex; gap: 0.4rem;
  padding: 0.35rem;
  border-radius: 0.85rem;
  background: rgba(220,227,237,0.45);
  border: 1px solid rgba(220,227,237,0.7);
}
.dark .vault-tabs {
  background: rgba(40,48,66,0.45);
  border-color: rgba(40,48,66,0.7);
}
.vault-tab {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  border-radius: 0.65rem;
  font-size: 0.85rem; font-weight: 600;
  background: transparent; border: none;
  color: inherit; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.vault-tab:hover { background: rgba(255,255,255,0.4); }
.dark .vault-tab:hover { background: rgba(23,28,40,0.4); }
.vault-tab.is-active {
  background: white;
  box-shadow: 0 4px 12px -6px rgba(0,0,0,0.18);
}
.dark .vault-tab.is-active { background: rgba(23,28,40,0.9); }

/* ---------- Vault cards ---------- */
.vault-card {
  border-radius: 1rem;
  padding: 1rem;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(220,227,237,0.8);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.dark .vault-card {
  background: rgba(23,28,40,0.55);
  border-color: rgba(40,48,66,0.75);
}
.vault-card:hover {
  transform: translateY(-2px);
  border-color: rgba(91,135,255,0.4);
  box-shadow: 0 14px 28px -16px rgba(91,135,255,0.4);
}
.vault-card.is-due {
  border-color: rgba(245,158,11,0.55);
  background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(255,255,255,0.6));
}
.dark .vault-card.is-due {
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(23,28,40,0.55));
}

/* Tailwind doesn't provide line-clamp by default in CDN; ship it. */
.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ====================================================================
   Guidance layer — onboarding, problem matcher, module guide, next step
   ==================================================================== */

/* ---------- Module guide header (auto-prepended by router) ---------- */
.module-guide {
  padding: 1rem 1.25rem !important;
}
@media (min-width: 640px) {
  .module-guide { padding: 1.25rem 1.5rem !important; }
}
.module-guide__bg {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.6;
}
.module-guide__bg[data-tone="clarity"] {
  background: radial-gradient(60% 80% at 0% 0%, rgba(91,135,255,0.18), transparent 60%);
}
.module-guide__bg[data-tone="warn"] {
  background: radial-gradient(60% 80% at 0% 0%, rgba(245,158,11,0.18), transparent 60%);
}
.module-guide__bg[data-tone="action"] {
  background: radial-gradient(60% 80% at 0% 0%, rgba(34,197,94,0.18), transparent 60%);
}
.module-guide__bg[data-tone="stress"] {
  background: radial-gradient(60% 80% at 0% 0%, rgba(239,68,68,0.18), transparent 60%);
}

.module-guide__icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.85rem;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(91,135,255,0.22), rgba(59,130,246,0.10));
  font-size: 1.4rem;
  flex-shrink: 0;
}

.module-guide__title {
  font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.15;
}
@media (min-width: 640px) {
  .module-guide__title { font-size: 1.65rem; }
}
.module-guide__group {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: rgb(93,107,129); margin-top: 0.2rem;
}
.dark .module-guide__group { color: rgb(139,151,170); }

.module-guide__body {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(220,227,237,0.7);
}
.dark .module-guide__body { border-top-color: rgba(40,48,66,0.7); }

.module-guide__row {
  display: grid; gap: 0.85rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .module-guide__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
  }
}
.module-guide__cell-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgb(93, 107, 129);
  font-weight: 700;
}
.dark .module-guide__cell-label { color: rgb(139, 151, 170); }
.module-guide__cell-text {
  font-size: 0.85rem;
  line-height: 1.45;
  margin-top: 0.25rem;
}

.module-guide.is-collapsed .module-guide__body { display: none; }

/* ---------- Next-step footer (auto-appended by router) ---------- */
.next-step {
  background: linear-gradient(135deg, rgba(91,135,255,0.08), rgba(59,130,246,0.04));
  border-color: rgba(91,135,255,0.3) !important;
}
.dark .next-step {
  background: linear-gradient(135deg, rgba(91,135,255,0.14), rgba(59,130,246,0.06));
}

/* ---------- Problem matcher (Home + Onboarding) ---------- */
.problem-matcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
@media (min-width: 640px) { .problem-matcher { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .problem-matcher { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .problem-matcher { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.problem-tile {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.3rem;
  padding: 0.85rem 0.9rem;
  border-radius: 0.95rem;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(220,227,237,0.8);
  cursor: pointer;
  font: inherit; color: inherit;
  text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.dark .problem-tile {
  background: rgba(23,28,40,0.55);
  border-color: rgba(40,48,66,0.75);
}
.problem-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(91,135,255,0.45);
  box-shadow: 0 14px 26px -16px rgba(91,135,255,0.5);
}
.problem-tile.is-selected {
  background: linear-gradient(135deg, rgba(91,135,255,0.22), rgba(59,130,246,0.10));
  border-color: rgba(91,135,255,0.65);
}
.problem-tile__emoji { font-size: 1.45rem; line-height: 1; }
.problem-tile__label {
  font-size: 0.875rem; font-weight: 600;
  line-height: 1.25;
}
.problem-tile__hint {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgb(93,107,129);
}
.dark .problem-tile__hint { color: rgb(139,151,170); }

/* ---------- "My ClarityOS" collapsible drawer ---------- */
.nav-clarity {
  margin-top: 0.6rem;
  border-radius: 1rem;
  border: 1px solid rgba(219,226,239,0.55);
  background: rgba(255,255,255,0.35);
  overflow: hidden;
}
.dark .nav-clarity {
  border-color: rgba(58,69,92,0.45);
  background: rgba(20,25,37,0.35);
}
.nav-clarity__toggle {
  display: flex; align-items: center; gap: 0.65rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-size: 0.875rem; font-weight: 700;
  color: rgb(62, 74, 93);
  background: none; border: none; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.dark .nav-clarity__toggle { color: rgb(196, 207, 230); }
.nav-clarity__toggle:hover { background: rgba(107,109,248,0.08); }
.nav-clarity__icon {
  height: 1.75rem; width: 1.75rem; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgba(107,109,248,0.2), rgba(168,85,247,0.15));
}
.nav-clarity__chev {
  transition: transform 0.28s cubic-bezier(0.2,0.7,0.2,1);
  opacity: 0.6;
}
.nav-clarity.is-open .nav-clarity__chev { transform: rotate(180deg); }

.nav-clarity__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s cubic-bezier(0.2,0.7,0.2,1);
}
.nav-clarity__body > * { overflow: hidden; }
/* grid-rows trick needs a single wrapper; fall back to max-height approach */
.nav-clarity__body {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.2,0.7,0.2,1), opacity 0.3s ease;
  padding: 0 0.35rem;
}
.nav-clarity.is-open .nav-clarity__body {
  max-height: 1400px;
  opacity: 1;
  padding-bottom: 0.5rem;
}
.nav-clarity__body .nav-group { padding-left: 0.6rem; }
.nav-clarity__body .nav-item { margin: 0.1rem 0.15rem; }

/* ---------- Sidebar group headers ---------- */
.nav-group {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 0.4rem 0.3rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: rgb(93, 107, 129);
}
.dark .nav-group { color: rgb(139, 151, 170); }
.nav-group:first-child { padding-top: 0; }
.nav-group__icon { font-size: 0.85rem; }

/* ---------- Onboarding overlay ---------- */
.onboard-overlay {
  position: fixed; inset: 0;
  z-index: 120;
  display: grid; place-items: center;
  padding: 1.25rem;
  opacity: 0;
  transition: opacity 240ms ease;
}
.onboard-overlay.is-open { opacity: 1; }
.onboard-backdrop {
  position: absolute; inset: 0;
  background: rgba(11,15,23,0.78);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.onboard-panel {
  position: relative;
  width: 100%; max-width: 44rem;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(220,227,237,0.8);
  border-radius: 1.4rem;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 30px 80px -20px rgba(11,15,23,0.6);
  max-height: 90vh;
  overflow-y: auto;
}
@media (min-width: 640px) {
  .onboard-panel { padding: 2.25rem 2rem; }
}
.dark .onboard-panel {
  background: rgba(23,28,40,0.96);
  border-color: rgba(40,48,66,0.8);
}
.onboard-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.6rem;
}
.onboard-step {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 700;
  color: rgb(91, 135, 255);
}
.onboard-progress {
  height: 4px; border-radius: 999px;
  background: rgba(220,227,237,0.55);
  overflow: hidden; margin-bottom: 1.2rem;
}
.dark .onboard-progress { background: rgba(40,48,66,0.55); }
.onboard-progress__fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #5b87ff, #22c55e);
  transition: width 0.4s cubic-bezier(0.2,0.7,0.2,1);
}
.onboard-title {
  font-size: 1.65rem; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.15;
}
@media (min-width: 640px) {
  .onboard-title { font-size: 2rem; }
}
.onboard-sub {
  color: rgb(93, 107, 129);
  margin-top: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 36rem;
}
.dark .onboard-sub { color: rgb(139, 151, 170); }
.onboard-input {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(220,227,237,0.8);
  background: rgba(255,255,255,0.8);
  color: inherit;
  font: inherit;
  font-size: 1.05rem;
  resize: vertical;
  margin-top: 1.25rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dark .onboard-input {
  background: rgba(23,28,40,0.7);
  border-color: rgba(40,48,66,0.8);
}
.onboard-input:focus {
  outline: none;
  border-color: rgba(91,135,255,0.6);
  box-shadow: 0 0 0 4px rgba(91,135,255,0.18);
}
.onboard-help {
  margin-top: 0.85rem;
  color: rgb(93, 107, 129);
  font-size: 0.8rem;
}
.dark .onboard-help { color: rgb(139, 151, 170); }
.onboard-help .kbd { margin: 0 0.15rem; }
.onboard-actions {
  margin-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.75rem;
}

/* Problem grid inside onboarding */
.onboard-panel .problem-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
@media (min-width: 640px) {
  .onboard-panel .problem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.onboard-panel .problem-tile {
  flex-direction: row; align-items: center; gap: 0.6rem;
  padding: 0.65rem 0.75rem;
}
.onboard-panel .problem-tile__emoji { font-size: 1.15rem; }
.onboard-panel .problem-tile__label { font-size: 0.82rem; }

/* ====================================================================
   Life OS v3 — Referral cards, layer cards, life chips, life dashboard
   ==================================================================== */

/* ---------- Referral cards (external products) ---------- */
.referral-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 1.1rem 1.2rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(220,227,237,0.8);
  background: rgba(255,255,255,0.6);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
  overflow: hidden;
}
.dark .referral-card {
  background: rgba(23,28,40,0.55);
  border-color: rgba(40,48,66,0.75);
}
.referral-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -16px rgba(0,0,0,0.35);
}
.referral-card--green {
  border-color: rgba(34,197,94,0.45);
  background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(16,185,129,0.05));
}
.dark .referral-card--green {
  background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(16,185,129,0.08));
}
.referral-card--warn {
  border-color: rgba(245,158,11,0.5);
  background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(239,68,68,0.05));
}
.dark .referral-card--warn {
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(239,68,68,0.08));
}
.referral-card--clarity {
  border-color: rgba(91,135,255,0.5);
  background: linear-gradient(135deg, rgba(91,135,255,0.10), rgba(59,130,246,0.05));
}
.dark .referral-card--clarity {
  background: linear-gradient(135deg, rgba(91,135,255,0.18), rgba(59,130,246,0.08));
}

.referral-card__head {
  display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 0.6rem;
}
.referral-card__emoji {
  font-size: 1.6rem;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: 0.7rem;
  background: rgba(255,255,255,0.7);
  flex-shrink: 0;
}
.dark .referral-card__emoji { background: rgba(0,0,0,0.25); }
.referral-card__title-wrap { flex: 1; min-width: 0; }
.referral-card__name {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em;
}
.referral-card__tagline {
  font-size: 0.78rem; color: rgb(93,107,129);
  margin-top: 0.1rem;
}
.dark .referral-card__tagline { color: rgb(139,151,170); }
.referral-card__chip {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 700;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  background: rgba(0,0,0,0.06); color: rgb(93,107,129);
  flex-shrink: 0;
}
.dark .referral-card__chip {
  background: rgba(255,255,255,0.1); color: rgb(139,151,170);
}
.referral-card__why {
  font-size: 0.82rem; color: rgb(40,48,66);
  line-height: 1.5;
}
.dark .referral-card__why { color: rgb(185,196,211); }
.referral-card__cta {
  margin-top: 0.85rem;
  font-size: 0.85rem; font-weight: 700;
  color: rgb(31,41,78);
}
.dark .referral-card__cta { color: white; }

.referral-strip {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(91,135,255,0.4);
  background: rgba(91,135,255,0.08);
  text-decoration: none; color: inherit;
  transition: background 0.15s;
}
.referral-strip:hover { background: rgba(91,135,255,0.15); }
.referral-strip__emoji { font-size: 1.1rem; }
.referral-strip__text { font-size: 0.78rem; flex: 1; }
.referral-strip__arrow { opacity: 0.6; }

/* ---------- Life Dashboard layer cards ---------- */
.layer-card {
  display: block;
  text-decoration: none; color: inherit;
  padding: 1rem 1.1rem;
  border-radius: 1.1rem;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(220,227,237,0.8);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  position: relative; overflow: hidden;
}
.dark .layer-card {
  background: rgba(23,28,40,0.55);
  border-color: rgba(40,48,66,0.75);
}
.layer-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -16px rgba(0,0,0,0.35);
}
.layer-card--action  { border-color: rgba(34,197,94,0.45); }
.layer-card--clarity { border-color: rgba(91,135,255,0.45); }
.layer-card--warn    { border-color: rgba(245,158,11,0.45); }
.layer-card--stress  { border-color: rgba(239,68,68,0.45); }
.layer-card--ink     { border-style: dashed; opacity: 0.85; }

.layer-card__head { display: flex; align-items: center; gap: 0.75rem; }
.layer-card__icon {
  width: 2.4rem; height: 2.4rem;
  border-radius: 0.7rem;
  display: grid; place-items: center;
  font-size: 1.3rem; font-weight: 700;
  flex-shrink: 0;
}
.layer-card__title { font-weight: 700; font-size: 1rem; line-height: 1.1; }
.layer-card__sub {
  font-size: 0.72rem; color: rgb(93,107,129);
  margin-top: 0.15rem; text-transform: capitalize;
}
.dark .layer-card__sub { color: rgb(139,151,170); }
.layer-card__score {
  font-size: 1.8rem; font-weight: 800;
}
.layer-card__meter {
  height: 6px; border-radius: 999px; margin-top: 0.85rem;
  background: rgba(220,227,237,0.55);
  overflow: hidden;
}
.dark .layer-card__meter { background: rgba(40,48,66,0.55); }
.layer-card__meter-fill {
  height: 100%; border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.2,0.7,0.2,1);
}
.layer-card__advice {
  font-size: 0.82rem; color: rgb(40,48,66);
  margin-top: 0.85rem; line-height: 1.45;
}
.dark .layer-card__advice { color: rgb(185,196,211); }
.layer-card__cta {
  margin-top: 0.5rem;
  font-size: 0.75rem; font-weight: 700;
  color: rgb(91,135,255);
}

/* ---------- Compact "life chip" on home ---------- */
.life-chip {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.85rem;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(220,227,237,0.8);
  text-decoration: none; color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  position: relative; overflow: hidden;
}
.dark .life-chip {
  background: rgba(23,28,40,0.5);
  border-color: rgba(40,48,66,0.75);
}
.life-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(91,135,255,0.45);
  box-shadow: 0 10px 20px -14px rgba(0,0,0,0.3);
}
.life-chip__icon {
  width: 2rem; height: 2rem;
  border-radius: 0.6rem;
  display: grid; place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.life-chip__body { flex: 1; min-width: 0; }
.life-chip__label {
  font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700;
  color: rgb(93,107,129);
}
.dark .life-chip__label { color: rgb(139,151,170); }
.life-chip__score { font-size: 1.25rem; font-weight: 800; line-height: 1; }
.life-chip__bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: rgba(220,227,237,0.5);
}
.dark .life-chip__bar { background: rgba(40,48,66,0.5); }
.life-chip__bar > div {
  height: 100%; border-radius: 0 999px 999px 0;
  transition: width 0.5s cubic-bezier(0.2,0.7,0.2,1);
}

/* ====================================================================
   v4 — Futuristic polish: gradient text, holo shimmer, hover glow,
   bouncy interactions, focus streak, rich animations
   ==================================================================== */

/* ---------- Gradient text (for hero titles) ---------- */
.text-gradient {
  background: linear-gradient(135deg, #3f6fff 0%, #a855f7 50%, #06b6d4 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: gradient-shift 9s ease infinite;
}

.text-gradient-warm {
  background: linear-gradient(135deg, #f43f5e 0%, #f59e0b 50%, #a855f7 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: gradient-shift 9s ease infinite;
}

/* ---------- Holographic shimmer overlay ---------- */
.holo {
  position: relative;
  overflow: hidden;
}
.holo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,0.18) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: holo-sweep 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes holo-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(180%); }
}

/* ---------- Hover-glow utility (use on tiles / chips) ---------- */
.glow-on-hover {
  transition: transform 0.22s cubic-bezier(0.2,0.7,0.2,1),
              box-shadow 0.22s cubic-bezier(0.2,0.7,0.2,1),
              border-color 0.22s ease;
}
.glow-on-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -18px rgba(91,135,255,0.55), 0 0 0 1px rgba(91,135,255,0.4);
  border-color: rgba(91,135,255,0.4) !important;
}

/* ---------- Apply global lift to common card patterns ---------- */
.problem-tile, .tile, .vault-card, .layer-card,
.referral-card, .life-chip, .top3-row {
  /* Layered behavior already in module CSS — keep here for consistency */
  transition: transform 0.22s cubic-bezier(0.2,0.7,0.2,1),
              box-shadow 0.22s cubic-bezier(0.2,0.7,0.2,1),
              border-color 0.22s ease,
              background 0.22s ease;
}

/* ---------- Animated border ring (use as a wrapper for hero CTA) ---------- */
.ring-anim {
  position: relative;
  isolation: isolate;
}
.ring-anim::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--ring-angle, 0deg),
    rgba(91,135,255,0.7),
    rgba(168,85,247,0.7),
    rgba(6,182,212,0.7),
    rgba(91,135,255,0.7)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: spin-ring 7s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes spin-ring {
  to { --ring-angle: 360deg; }
}
/* Property registration so the angle animates smoothly */
@property --ring-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ---------- Hero number tickers ---------- */
.ticker {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, currentColor 0%, currentColor 60%, transparent 200%);
  -webkit-background-clip: text;
          background-clip: text;
}

/* ---------- Focus rewards / streak chip ---------- */
.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem 0.25rem 0.4rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(244,63,94,0.18));
  color: rgb(146, 64, 14);
  border: 1px solid rgba(245,158,11,0.45);
  box-shadow: 0 0 12px rgba(245,158,11,0.25);
}
.dark .streak-chip {
  background: linear-gradient(135deg, rgba(245,158,11,0.22), rgba(244,63,94,0.22));
  color: rgb(253, 224, 71);
}
.streak-chip__flame {
  display: inline-block;
  animation: flame 1.6s ease-in-out infinite alternate;
}
@keyframes flame {
  0%   { transform: translateY(0)    rotate(-3deg) scale(1); }
  100% { transform: translateY(-1px) rotate(4deg)  scale(1.08); }
}

/* ---------- Reward badges grid (Focus Mode) ---------- */
.reward-badge {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.75rem;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(219,226,239,0.7);
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
.dark .reward-badge { background: rgba(28,34,48,0.45); border-color: rgba(58,69,92,0.6); }
.reward-badge.is-locked { opacity: 0.4; filter: saturate(0.6); }
.reward-badge.is-earned {
  border-color: rgba(245,158,11,0.5);
  background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(244,63,94,0.10));
  box-shadow: 0 0 16px rgba(245,158,11,0.25);
}
.reward-badge__icon { font-size: 1.15rem; }

/* ---------- Live "AI thinking" dots ---------- */
.ai-dots {
  display: inline-flex; gap: 4px; align-items: center;
}
.ai-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  animation: ai-bob 1.1s ease-in-out infinite;
}
.ai-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-bob {
  0%,100% { transform: translateY(0); opacity: 0.45; }
  50%     { transform: translateY(-4px); opacity: 1; }
}

/* ---------- Module guide refinements (light mode contrast) ---------- */
.module-guide__icon {
  background: linear-gradient(135deg, rgba(91,135,255,0.22), rgba(168,85,247,0.18));
  box-shadow: 0 4px 14px -6px rgba(91,135,255,0.5), 0 0 0 1px rgba(91,135,255,0.18) inset;
}

/* ---------- Better top-action card glow when warning ---------- */
#topAction.border-stress\/40 { box-shadow: 0 24px 48px -22px rgba(244,63,94,0.45); }
#topAction.border-warn\/40   { box-shadow: 0 24px 48px -22px rgba(245,158,11,0.45); }
#topAction.border-action\/40 { box-shadow: 0 24px 48px -22px rgba(16,185,129,0.40); }
#topAction.border-clarity\/40 { box-shadow: 0 24px 48px -22px rgba(91,135,255,0.40); }

/* ---------- Toast refinement ---------- */
.toast {
  background: linear-gradient(135deg, rgba(20,25,37,0.96), rgba(28,34,48,0.92));
  border: 1px solid rgba(91,135,255,0.45);
  box-shadow:
    0 12px 36px -12px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.05) inset;
}

/* ---------- Range thumb: brighter focus ring ---------- */
.range::-webkit-slider-thumb { border-color: #6b6df8; }
.range::-moz-range-thumb     { border-color: #6b6df8; }
.range:focus { outline: none; }
.range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(91,135,255,0.25), 0 4px 10px rgba(0,0,0,0.2);
}

/* ---------- Selectable surfaces ---------- */
.surface-press { transition: transform 0.12s ease; }
.surface-press:active { transform: scale(0.97); }

/* ---------- Light + dark contrast bumps ---------- */
.text-ink-500 { color: rgb(76, 91, 119); }
.dark .text-ink-500 { color: rgb(166, 178, 204); }

/* Crisper module-guide title in light mode */
:not(.dark) .module-guide__title { color: rgb(15, 20, 32); }

/* Tile / chip / problem-tile sub-labels should be readable on dark cards */
.dark .problem-tile__label,
.dark .tile__title,
.dark .layer-card__title,
.dark .life-chip__score,
.dark .vault-card,
.dark .top3-row {
  color: rgb(232, 238, 252);
}
.dark .problem-tile__hint,
.dark .tile__hint,
.dark .life-chip__label {
  color: rgb(166, 178, 204);
}

/* Section caption labels — used a lot in module bodies. Make them crisp. */
.dark p.text-xs.uppercase,
.dark p.text-\[10px\].uppercase,
.dark .module-guide__cell-label,
.dark .layer-card__sub {
  color: rgb(166, 178, 204);
}

/* Print-friendly analytics report styling */
@media print {
  body { background: white !important; }
  body::before { display: none; }
  .bg-aurora, .bg-dotgrid, .bg-orbits,
  header, aside, #toastRegion, #suggestionDock, .next-step, .referral-card { display: none !important; }
  .card { box-shadow: none !important; border-color: #ddd !important; }
}

/* ====================================================================
   v5 — Smoother boundaries, scroll reveals, mobile polish
   ==================================================================== */

/* Softer card borders so adjacent cards blend instead of stacking seams */
.card {
  border-color: rgba(219,226,239,0.55);
}
.dark .card {
  border-color: rgba(58,69,92,0.42);
}

/* Less aggressive card glow shadow — keeps depth without ridge effect */
.card {
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.5) inset,
    0 10px 28px -18px rgba(15,23,42,0.10);
}
.dark .card {
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.04) inset,
    0 12px 32px -18px rgba(0,0,0,0.45);
}

/* Smoother content area — extra vertical breathing space */
#view { gap: 1.5rem; }
@media (min-width: 1024px) { #view { gap: 1.75rem; } }

/* ---------- Scroll-reveal animations ----------
 * Set initial state on every .reveal element; JS adds .is-visible when
 * the element enters the viewport, removes it when it leaves above. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.is-leaving {
  opacity: 0;
  transform: translateY(-12px);
}
/* Variants */
.reveal--left  { transform: translate(-26px, 0); }
.reveal--left.is-visible  { transform: translate(0, 0); }
.reveal--right { transform: translate(26px, 0); }
.reveal--right.is-visible { transform: translate(0, 0); }
.reveal--scale { transform: scale(0.96); }
.reveal--scale.is-visible { transform: scale(1); }

/* ---------- Mobile responsiveness fixes ---------- */
@media (max-width: 640px) {
  .module-guide__row { gap: 0.6rem; }
  .module-guide__title { font-size: 1.25rem; line-height: 1.2; }
  .module-guide__icon { width: 2.1rem; height: 2.1rem; font-size: 1.15rem; }
  .onboard-title { font-size: 1.4rem; }
  .onboard-sub { font-size: 0.85rem; }
  /* Tighter problem matcher on phones */
  .problem-matcher { gap: 0.45rem; }
  .problem-tile { padding: 0.7rem 0.75rem; }
  .problem-tile__label { font-size: 0.78rem; }
  /* Compact buttons */
  .btn { padding: 0 0.75rem; }
  /* Compact KPI text */
  .ticker { letter-spacing: -0.03em; }
  /* Stress meter slightly thinner */
  .stress-meter { height: 10px; }
  /* Layer-card score smaller on phones */
  .layer-card__score { font-size: 1.5rem; }
  /* Life-chip more compact */
  .life-chip { padding: 0.45rem 0.6rem; gap: 0.45rem; }
  .life-chip__score { font-size: 1.1rem; }
  /* Reduce header h-16 to feel less heavy */
  header.sticky { height: 3.5rem; }
}

@media (max-width: 480px) {
  /* Single column problem matcher on tiny screens */
  .problem-matcher { grid-template-columns: 1fr 1fr; }
  .problem-tile { flex-direction: row; align-items: center; gap: 0.5rem; padding: 0.6rem 0.7rem; }
  .problem-tile__emoji { font-size: 1.15rem; }
  .problem-tile__label { font-size: 0.75rem; line-height: 1.2; }
  .problem-tile__hint { display: none; }
}

/* ---------- Smoother backdrop on top bar so it doesn't create a seam ---------- */
header.sticky { border-bottom-color: rgba(219,226,239,0.45); }
.dark header.sticky { border-bottom-color: rgba(58,69,92,0.4); }

/* Onboarding panel — explicit bright text in dark mode too */
.dark .onboard-panel .problem-tile__label { color: rgb(232, 238, 252); }
.dark .onboard-title { color: rgb(244, 247, 255); }

/* Make the existing module body subtitle paragraph crisper in dark mode */
.dark p.text-ink-500 { color: rgb(166, 178, 204); }

/* The "Live State" card in the sidebar shouldn't bleed into bg */
.dark aside .glass {
  background: rgba(20,25,37,0.72);
  border-color: rgba(58,69,92,0.5);
}

/* Headings on dark gradient cards need explicit color override */
.dark h1, .dark h2, .dark h3 { color: rgb(244, 247, 255); }
/* Except gradient-text variants, which intentionally use background-clip */
.dark h1.text-gradient, .dark h2.text-gradient, .dark h3.text-gradient,
.dark h1.text-gradient-warm, .dark h2.text-gradient-warm, .dark h3.text-gradient-warm {
  color: transparent;
}

/* Nav items in dark mode — more legible label */
.dark .nav-item {
  color: rgb(196, 207, 230);
}
.dark .nav-item:hover { color: rgb(232, 238, 252); }

/* ====================================================================
   v7 — Comprehensive heading + label contrast guarantees
   ==================================================================== */

/* Every heading visible by default — explicit, not inherited */
h1, h2, h3, h4, h5, h6 { color: rgb(15, 23, 42); }
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: rgb(244, 247, 255);
}

/* Gradient-text headings stay transparent so the gradient shows */
h1.text-gradient, h2.text-gradient, h3.text-gradient,
h1.text-gradient-warm, h2.text-gradient-warm, h3.text-gradient-warm,
.dark h1.text-gradient, .dark h2.text-gradient, .dark h3.text-gradient,
.dark h1.text-gradient-warm, .dark h2.text-gradient-warm, .dark h3.text-gradient-warm {
  color: transparent !important;
}

/* Section captions / uppercase chips: bright in dark, deep ink in light */
p.text-xs.uppercase,
p.text-\[10px\].uppercase,
p.text-\[11px\].uppercase,
.module-guide__cell-label,
.module-guide__group {
  color: rgb(75, 88, 117);
}
.dark p.text-xs.uppercase,
.dark p.text-\[10px\].uppercase,
.dark p.text-\[11px\].uppercase,
.dark .module-guide__cell-label,
.dark .module-guide__group {
  color: rgb(170, 184, 213);
}

/* Sub-text under tile titles — was washing out on dark cards */
.dark .tile__hint,
.dark .problem-tile__hint,
.dark .life-chip__label,
.dark .threat-card__hint,
.dark .layer-card__sub {
  color: rgb(176, 190, 222);
}

/* Pill text inside dark cards bumped a notch for legibility */
.dark .pill { color: rgb(220, 228, 244); }
.dark .pill--stress  { color: rgb(254, 188, 197); }
.dark .pill--clarity { color: rgb(178, 213, 255); }
.dark .pill--action  { color: rgb(151, 240, 200); }
.dark .pill--warn    { color: rgb(254, 234, 130); }
.dark .pill--violet, .dark .pill--meaning { color: rgb(225, 197, 255); }
.dark .pill--cyan    { color: rgb(140, 232, 250); }

/* Inputs, selects, textareas — explicit text colour both modes */
.input, .select, .textarea { color: rgb(15, 23, 42); }
.dark .input, .dark .select, .dark .textarea { color: rgb(240, 244, 255); }
.input::placeholder, .textarea::placeholder {
  color: rgb(140, 152, 178); opacity: 1;
}
.dark .input::placeholder, .dark .textarea::placeholder {
  color: rgb(130, 144, 174); opacity: 1;
}

/* Body text — guarantee minimum contrast on both modes */
body { color: rgb(20, 25, 37); }
.dark body { color: rgb(232, 238, 252); }

/* Buttons text colors explicit so they don't bleed into bg */
.btn-primary, .btn-danger, .btn-success, .btn-warn { color: white; }
.btn-ghost { color: rgb(20, 25, 37); }
.dark .btn-ghost { color: rgb(232, 238, 252); }

/* The Live State sidebar block in dark mode needed brighter labels */
.dark aside .text-ink-500 { color: rgb(176, 190, 222); }
.dark aside .font-mono { color: rgb(232, 238, 252); }

/* Generic dim-text safe-net: any text using only ink-500 in dark is now bright enough */
.dark .text-ink-400 { color: rgb(158, 174, 207); }
.dark .text-ink-600 { color: rgb(200, 213, 240); }

/* Headlines inside coloured gradient cards (top action, hero) — already styled
   with text-gradient where intentional; everything else gets crisp white text */
.dark .module-guide__title { color: rgb(244, 247, 255); }

/* Spinner / loading skeleton in dark mode shouldn't be too dark to see */
.dark .skeleton {
  background: linear-gradient(90deg, rgba(60,72,98,0.55), rgba(90,104,138,0.55), rgba(60,72,98,0.55));
  background-size: 200% 100%;
}

/* ====================================================================
   v6 — Distinctive brand identity (Clarity Orb, serif accents, signature)
   ==================================================================== */

/* ---------- The Clarity Orb (signature mark) ---------- */
.clarity-orb {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.clarity-orb::before, .clarity-orb::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  pointer-events: none;
}
.clarity-orb::before {
  background: radial-gradient(circle at 35% 35%,
    rgba(168,85,247,0.35), transparent 70%);
  filter: blur(6px);
  animation: orb-breathe 4.5s ease-in-out infinite;
}
.clarity-orb::after {
  border: 1px solid rgba(91,135,255,0.25);
  animation: orb-pulse 4.5s ease-in-out infinite;
}
.clarity-orb__svg {
  width: 38px; height: 38px;
  position: relative; z-index: 1;
  transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1);
  filter: drop-shadow(0 4px 14px rgba(91,135,255,0.35));
}
.group:hover .clarity-orb__svg { transform: rotate(-12deg) scale(1.05); }
.clarity-orb__glint {
  transform-origin: 22px 22px;
  animation: orb-glint 8s linear infinite;
}
@keyframes orb-breathe {
  0%,100% { opacity: 0.55; transform: scale(1); }
  50%     { opacity: 0.85; transform: scale(1.08); }
}
@keyframes orb-pulse {
  0%,100% { transform: scale(1);   opacity: 0.7; }
  50%     { transform: scale(1.15); opacity: 0; }
}
@keyframes orb-glint {
  0%   { transform: rotate(0deg) translate(0,0); }
  50%  { transform: rotate(0deg) translate(6px, 2px); }
  100% { transform: rotate(0deg) translate(0,0); }
}

/* ---------- Signature serif treatment for hero headlines ---------- */
.serif-hero {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.serif-hero em {
  font-style: italic;
  font-weight: 800;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}

/* ---------- Signature coral accent (rarely used = special) ---------- */
:root {
  --c-coral: 251, 113, 133;
}
.text-coral { color: rgb(var(--c-coral)); }
.bg-coral   { background: rgb(var(--c-coral)); }

/* ---------- Custom scrollbars (subtle but distinctive) ---------- */
@supports (scrollbar-width: thin) {
  * { scrollbar-width: thin; scrollbar-color: rgba(91,135,255,0.35) transparent; }
  .dark * { scrollbar-color: rgba(168,85,247,0.35) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(91,135,255,0.4), rgba(168,85,247,0.4));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(91,135,255,0.6), rgba(168,85,247,0.6));
  background-clip: padding-box;
}

/* ---------- Bento grid utilities (asymmetric cards on Home) ---------- */
.bento {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(120px, auto);
}
@media (max-width: 768px) { .bento { grid-template-columns: repeat(2, 1fr); } }
.bento--wide  { grid-column: span 2; }
.bento--tall  { grid-row: span 2; }
.bento--full  { grid-column: span 4; }
@media (max-width: 768px) {
  .bento--wide, .bento--full { grid-column: span 2; }
}

/* ---------- Install prompt card ---------- */
.install-card {
  position: fixed;
  bottom: 1rem; left: 50%; transform: translateX(-50%) translateY(120%);
  z-index: 90;
  width: calc(100% - 2rem); max-width: 22rem;
  padding: 1rem 1.1rem;
  border-radius: 1.1rem;
  background: linear-gradient(135deg, rgba(20,25,37,0.96), rgba(28,34,48,0.92));
  border: 1px solid rgba(91,135,255,0.5);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05) inset;
  color: white;
  transition: transform 0.45s cubic-bezier(0.2,0.7,0.2,1);
}
.install-card.is-open {
  transform: translateX(-50%) translateY(0);
}
.install-card__title { font-weight: 700; font-size: 0.95rem; }
.install-card__body  { font-size: 0.78rem; color: rgba(255,255,255,0.7); margin-top: 0.25rem; }
.install-card__actions {
  display: flex; gap: 0.5rem; margin-top: 0.75rem;
}

/* ---------- Signature divider (used between hero + body) ---------- */
.signature-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(91,135,255,0.5),
    rgba(168,85,247,0.5),
    rgba(6,182,212,0.5),
    transparent);
  margin: 0.5rem 0;
}

/* ---------- Section title (literary serif intro) ---------- */
.section-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.section-title em {
  font-style: italic;
  background: linear-gradient(135deg, #5b87ff, #a855f7, #06b6d4);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---------- Resilience module signature ---------- */
.threat-card {
  display: block; text-decoration: none; color: inherit;
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(219,226,239,0.55);
  position: relative; overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.2,0.7,0.2,1),
              border-color 0.22s ease, box-shadow 0.22s ease;
}
.dark .threat-card {
  background: rgba(20,25,37,0.55);
  border-color: rgba(58,69,92,0.5);
}
.threat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(244,63,94,0.5);
  box-shadow: 0 16px 32px -18px rgba(244,63,94,0.45);
}
.threat-card__icon {
  width: 2.2rem; height: 2.2rem;
  border-radius: 0.7rem;
  display: grid; place-items: center;
  font-size: 1.2rem;
  background: linear-gradient(135deg, rgba(244,63,94,0.18), rgba(168,85,247,0.18));
  margin-bottom: 0.65rem;
}
.threat-card__name {
  font-weight: 700; font-size: 0.95rem;
  letter-spacing: -0.005em;
}
.threat-card__hint {
  font-size: 0.75rem; color: rgb(76, 91, 119);
  margin-top: 0.25rem;
  line-height: 1.4;
}
.dark .threat-card__hint { color: rgb(166, 178, 204); }

/* ---------- Habit row ---------- */
.habit-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.85rem;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(219,226,239,0.55);
  transition: all 0.22s ease;
}
.dark .habit-row {
  background: rgba(20,25,37,0.5);
  border-color: rgba(58,69,92,0.5);
}
.habit-row.is-done {
  background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(34,197,94,0.05));
  border-color: rgba(16,185,129,0.5);
}
.habit-check {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  border: 2px solid rgba(91,135,255,0.5);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: all 0.22s ease;
  color: transparent;
  cursor: pointer;
}
.habit-row.is-done .habit-check {
  background: linear-gradient(135deg, #10b981, #22c55e);
  border-color: transparent;
  color: white;
}
.habit-check svg { width: 0.85rem; height: 0.85rem; }
.habit-streak {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.7rem; font-weight: 700;
  padding: 0.15rem 0.5rem; border-radius: 999px;
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(244,63,94,0.18));
  color: rgb(146, 64, 14);
}
.dark .habit-streak { color: rgb(253, 224, 71); }

/* ---------- Connection ring (for relationship health) ---------- */
.connection-ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(91,135,255,0.18));
  border: 1px solid rgba(168,85,247,0.35);
  font-size: 1rem;
}

/* ====================================================================
   v2.0 — Adaptive UI modes + Ultra Quick overlay
   ==================================================================== */

/* ---------- ui-calm: stress is elevated → quiet the interface ---------- */
.ui-calm .bg-aurora__blob { opacity: 0.18 !important; animation-duration: 40s !important; }
.ui-calm .bg-orbits { display: none; }
.ui-calm .holo::after { display: none; }            /* stop shimmer */
.ui-calm .ring-anim::before { animation-duration: 16s; opacity: 0.6; }
.ui-calm .text-gradient, .ui-calm .text-gradient-warm { animation: none; }
.ui-calm * { transition-duration: 0.28s !important; } /* slower, softer */
/* Desaturate slightly to lower visual intensity */
.ui-calm #app { filter: saturate(0.88); }

/* ---------- ui-fatigue: very low energy → raise legibility ---------- */
.ui-fatigue { --fatigue: 1; }
.ui-fatigue .text-ink-500 { color: rgb(60, 74, 102) !important; }
.dark.ui-fatigue .text-ink-500,
.ui-fatigue.dark .text-ink-500 { color: rgb(196, 208, 233) !important; }
.ui-fatigue .card { border-width: 1.5px; }
.ui-fatigue body, .ui-fatigue { letter-spacing: 0.005em; }
/* Bigger tap targets when tired */
.ui-fatigue .btn { min-height: 2.6rem; }

/* ---------- ui-overload: reduce motion + simplify ---------- */
.ui-overload *,
.ui-overload *::before,
.ui-overload *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.12s !important;
}
.ui-overload .bg-aurora, .ui-overload .bg-orbits, .ui-overload .bg-dotgrid { opacity: 0.25; }
.ui-overload .holo::after, .ui-overload .ring-anim::before { display: none; }
/* A calming hint bar at the top during overload */
.ui-overload #app::before {
  content: "Recovery mode — the interface has been simplified. Be gentle with yourself.";
  display: block;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.35rem 1rem;
  color: white;
  background: linear-gradient(90deg, rgba(244,63,94,0.9), rgba(168,85,247,0.9));
}

/* Mode chip pulse on the header */
#modeChip { transition: background 0.3s ease, border-color 0.3s ease; }
#modeChip:hover { border-color: rgba(91,135,255,0.5); }

/* ---------- Ultra Quick overlay ---------- */
.ultra-overlay {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center;
  padding: 1.25rem;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.ultra-overlay.is-open { opacity: 1; }
.ultra-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(11,16,32,0.86), rgba(7,9,26,0.95));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ultra-panel {
  position: relative;
  width: 100%; max-width: 30rem;
  background: linear-gradient(180deg, rgba(28,34,52,0.95), rgba(18,22,38,0.95));
  border: 1px solid rgba(91,135,255,0.35);
  border-radius: 1.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
  color: white;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7);
  transform: translateY(14px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.2,0.7,0.2,1);
}
.ultra-overlay.is-open .ultra-panel { transform: translateY(0) scale(1); }
.ultra-close {
  position: absolute; top: 0.85rem; right: 1rem;
  background: none; border: none; color: rgba(255,255,255,0.5);
  font-size: 1.5rem; cursor: pointer; line-height: 1;
}
.ultra-close:hover { color: white; }
.ultra-kicker {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: #7aa2ff; font-weight: 700;
}
.ultra-q {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.85rem; font-weight: 700; margin-top: 0.5rem;
  line-height: 1.15; color: white;
}
.ultra-sub { color: rgba(255,255,255,0.6); font-size: 0.85rem; margin-top: 0.5rem; }
.ultra-moods {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;
  margin-top: 1.5rem;
}
.ultra-mood {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: 1rem 0.5rem;
  border-radius: 1rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: white; cursor: pointer;
  transition: all 0.18s cubic-bezier(0.2,0.7,0.2,1);
}
.ultra-mood:hover {
  background: rgba(91,135,255,0.18);
  border-color: rgba(91,135,255,0.5);
  transform: translateY(-3px) scale(1.03);
}
.ultra-mood__emoji { font-size: 1.8rem; }
.ultra-mood__label { font-size: 0.75rem; font-weight: 600; }

.ultra-panel--result { text-align: center; }
.ultra-result-emoji { font-size: 3rem; }
.ultra-state {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.6rem; font-weight: 700; margin-top: 0.5rem; color: white;
}
.ultra-rx {
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}
.ultra-rx--task { background: rgba(255,255,255,0.03); }
.ultra-rx__label {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: #7aa2ff; font-weight: 700;
}
.ultra-rx__action { font-size: 1.05rem; margin-top: 0.35rem; line-height: 1.4; color: white; }
.ultra-rest { margin-top: 1.25rem; color: rgba(255,255,255,0.55); font-style: italic; }
.ultra-actions { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1.5rem; }
.ultra-tone-stress { border-color: rgba(244,63,94,0.45); }
.ultra-tone-action { border-color: rgba(16,185,129,0.45); }
.ultra-tone-warn   { border-color: rgba(245,158,11,0.45); }

@media (max-width: 420px) {
  .ultra-moods { grid-template-columns: repeat(2, 1fr); }
  .ultra-q { font-size: 1.5rem; }
}

/* ---------- Reduced motion (must stay last) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}