/* ==========================================================================
   SUKOON RESONANCE — thought -> intention -> personalized soundscape
   Uses sukoon.css tokens + account.css (choice/segmented/switch) + earth.css
   (immersive player + mixer). This file adds the journey + signature orb.
   ========================================================================== */

.resonance { background: var(--paper); }

/* ---------- Hero + signature orb ---------- */
.res-hero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 40px) 0 var(--s-6); text-align: center; }
.res-hero .hero-wash { opacity: 0.8; }
.res-eyebrow { color: var(--sage-700); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.76rem; font-weight: 700; }
.res-title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; margin: 12px 0 10px; }
.res-title .em { font-style: italic; color: var(--sage-700); }
.res-sub { color: var(--muted); max-width: 540px; margin: 0 auto; }

.res-orb-wrap { display: grid; place-items: center; margin: var(--s-6) auto var(--s-4); position: relative; height: clamp(200px, 30vw, 300px); }
.res-orb { width: clamp(170px, 26vw, 250px); height: clamp(170px, 26vw, 250px); border-radius: 50%; position: relative;
  background: radial-gradient(circle at 36% 32%, rgba(255,255,255,0.92), rgba(255,255,255,0) 56%), var(--grad-orb);
  box-shadow: var(--sh-orb); --breath-scale: 0.82; transform: scale(var(--breath-scale)); transition: transform 0.5s var(--ease); display: grid; place-items: center; }
.res-orb .res-orb-label { font-family: var(--font-display); color: #16302a; font-size: 1rem; opacity: 0.85; text-align: center; padding: 0 16px; }
.res-orb.typing { transform: scale(0.86); }
.res-orb.listening { animation: breathe 12s var(--ease-soft) infinite; }
.res-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(139,175,155,0.45); inset: -6%; opacity: 0; pointer-events: none; }
.res-ring.r2 { inset: -14%; border-color: rgba(168,199,216,0.4); }
.res-ring.r3 { inset: -22%; border-color: rgba(231,201,139,0.35); }
.res-orb-wrap.thinking .res-ring { animation: resPulse 2s var(--ease) infinite; }
.res-orb-wrap.thinking .res-ring.r2 { animation-delay: 0.4s; }
.res-orb-wrap.thinking .res-ring.r3 { animation-delay: 0.8s; }
@keyframes resPulse { 0% { opacity: 0; transform: scale(0.85); } 40% { opacity: 0.8; } 100% { opacity: 0; transform: scale(1.12); } }

/* ---------- Journey steps ---------- */
.res-stage { max-width: 760px; margin: 0 auto; padding: 0 20px var(--s-9); }
.res-progress { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: var(--s-6); }
.res-progress .dot { width: 26px; height: 4px; border-radius: 4px; background: var(--line); transition: background 0.3s; }
.res-progress .dot.on { background: var(--sage-600); }
.res-step { display: none; animation: fadeUp 0.45s var(--ease); }
.res-step.active { display: block; }
.res-step h2 { font-size: clamp(1.5rem, 3vw, 2rem); text-align: center; margin-bottom: 6px; }
.res-step .step-sub { color: var(--muted); text-align: center; margin-bottom: var(--s-5); }

/* Write */
.res-editor { width: 100%; min-height: 160px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); padding: 20px 22px; font-size: 1.05rem; line-height: 1.7; color: var(--ink); resize: vertical; box-shadow: var(--sh-1); transition: border-color 0.2s, box-shadow 0.2s; font-family: var(--font-body); }
.res-editor::placeholder { color: var(--faint); }
.res-editor:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 4px rgba(139,175,155,0.16); }
.res-write-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; flex-wrap: wrap; gap: 10px; }
.res-count { font-size: 0.8rem; color: var(--faint); }
.res-privacy { font-size: 0.8rem; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.res-privacy i { color: var(--sage-700); }
.res-moods { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 16px 0 6px; }
.res-mood { width: 58px; height: 66px; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; transition: all 0.2s var(--ease); }
.res-mood .e { font-size: 1.4rem; } .res-mood .l { font-size: 0.62rem; color: var(--muted); font-weight: 600; }
.res-mood[aria-pressed="true"] { border-color: var(--sage-700); background: #f2f8f2; }

/* Intention */
.intent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.intent-card { text-align: left; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line-soft); background: var(--card); box-shadow: var(--sh-1); cursor: pointer; transition: all 0.28s var(--ease); }
.intent-card:hover { transform: translateY(-3px); border-color: var(--sage); box-shadow: var(--sh-2); }
.intent-card[aria-pressed="true"] { border-color: var(--sage-700); background: linear-gradient(180deg,#fff,#f2f8f2); }
.intent-card .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg,#8baf9b,#6f9784); margin-bottom: 12px; }
.intent-card b { display: block; font-size: 1rem; }
.intent-card span { font-size: 0.85rem; color: var(--muted); }

/* Personalize */
.pref-block { margin-bottom: var(--s-5); }
.pref-block h3 { font-family: var(--font-body); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }

/* Plan preview */
.plan-card { background: var(--grad-ink); color: #eef3ee; border-radius: var(--r-xl); padding: var(--s-7); box-shadow: var(--sh-3); text-align: center; }
.plan-card .chip { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); color: #eef3ee; margin-inline: auto; }
.plan-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 14px 0 6px; }
.plan-meta { color: #c3d1c8; margin-bottom: 18px; }
.plan-atmos { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 22px; }
.plan-atmos .a { font-size: 0.82rem; font-weight: 600; padding: 6px 13px; border-radius: var(--r-pill); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); }
.plan-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Earth "inspired by a real place" */
.res-place { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; font-size: 0.88rem; }
.res-place a { color: var(--gold); font-weight: 600; }

/* Make-it-like input in player */
.rz-refine { display: flex; gap: 8px; max-width: 520px; margin: 12px auto 0; }
.rz-refine .field { flex: 1; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #eef3ee; }
.rz-refine .field::placeholder { color: #9fb2a6; }
.rz-quick { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.rz-quick button { padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #dfeae2; font-size: 0.78rem; font-weight: 600; }
.rz-quick button:hover { background: rgba(139,175,155,0.28); }

/* Take me somewhere / crisis note */
.res-support { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md); background: rgba(231,201,139,0.12); border: 1px solid rgba(231,201,139,0.3); font-size: 0.9rem; }
.res-support a { color: var(--sage-700); font-weight: 600; }

@media (max-width: 620px) {
  .intent-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .res-orb.listening { animation: none; }
  .res-orb-wrap.thinking .res-ring { animation: none; }
}

/* .linky is defined in css/earth.css with var(--sage), which is correct against
   Earth's dark panel but only ~2.3:1 on this page's light background - a WCAG AA
   failure Lighthouse flagged on #resDontSave and #resClear. Override here only;
   resonance.css loads after earth.css so this wins without affecting Earth. */
.linky { color: var(--sage-700); }
.linky:hover { color: var(--gold-600); }