/* Meet your DNA Coach — four beats.
   Uses the leader's theme tokens (cathedral light/dark, or the phone app). */
.wj-card, #dnaMeet {
  --wj-bg: var(--c-bg, var(--bg, var(--brand-black)));
  --wj-ink: var(--c-cream, var(--cream, color-mix(in srgb, var(--brand-white) 88%, transparent)));
  --wj-bright: var(--c-cream-bright, var(--cream-bright, var(--brand-white)));
  --wj-muted: var(--c-muted, var(--muted, color-mix(in srgb, var(--brand-white) 62%, transparent)));
  --wj-gold: var(--c-copper, var(--copper, var(--brand-gold)));
  --wj-gold-ink: var(--c-copper-ink, var(--copper-ink, var(--brand-black)));
  --wj-line: var(--c-hairline-strong, var(--line-strong, color-mix(in srgb, var(--brand-gold) 35%, transparent)));
  --wj-surface: var(--c-surface, var(--surface, color-mix(in srgb, var(--brand-white) 4%, transparent)));
  --wj-serif: var(--c-serif, var(--serif, var(--brand-heading)));
  color: var(--wj-ink);
  font-family: var(--brand-body);
}
body.welcome-journey { min-height: 100vh; background: var(--c-bg, var(--bg)); color: var(--c-cream, var(--cream)); }
.wj-top-actions { display: flex; align-items: center; gap: 12px; }
.wj-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(16px + env(safe-area-inset-top)) clamp(16px, 4vw, 36px) 8px; }
.wj-page { width: min(640px, calc(100% - 32px)); margin: 0 auto; padding: 8px 0 calc(48px + env(safe-area-inset-bottom)); }
.wj-kicker { margin: 0 0 10px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wj-gold); }
.wj-h { font-family: var(--wj-serif); font-weight: 600; font-size: clamp(1.7rem, 5vw, 2.45rem); line-height: 1.16; letter-spacing: -.015em; margin: 0 0 18px; color: var(--wj-bright); }
.wj-h:focus { outline: none; }
.wj-line { font-family: var(--wj-serif); font-size: clamp(1.2rem, 3.4vw, 1.45rem); line-height: 1.45; color: var(--wj-bright); margin: 0 0 16px; }
.wj-coach { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.wj-coach-name { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wj-gold); }
.wj-coach-sub { display: block; margin-top: 2px; font-size: .85rem; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--wj-muted); }
.wj-choices { display: grid; gap: 10px; margin: 0 0 8px; }
.wj-choice { appearance: none; text-align: left; cursor: pointer; width: 100%; min-height: 56px; padding: 16px 16px 12px; border-radius: 16px; border: 1px solid var(--wj-line); background: var(--wj-surface); color: var(--wj-ink); font: 500 1.02rem/1.4 var(--brand-body); display: grid; gap: 0; }
.wj-choice small { display: block; margin-top: 4px; color: var(--wj-muted); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; }
.wj-choice.is-on { border-color: var(--wj-gold); box-shadow: inset 0 0 0 1px var(--wj-gold); }
.wj-sprout { display: block; width: 2px; height: 0; margin-top: 0; background: var(--wj-gold); border-radius: 2px; transform-origin: top; }
.wj-choice.is-on .wj-sprout { height: 14px; margin-top: 10px; animation: wj-root .55s ease; }
@keyframes wj-root { from { height: 0; opacity: .4; } to { height: 14px; opacity: 1; } }
.wj-other { display: grid; gap: 8px; margin: 12px 0 4px; }
.wj-other.is-hidden { display: none; }
.wj-other label, .wj-ask { font-size: 1rem; line-height: 1.5; color: var(--wj-bright); }
.wj-ask { display: block; margin: 0 0 12px; }
textarea, .wj-other textarea { width: 100%; box-sizing: border-box; min-height: 96px; margin: 0 0 8px; padding: 14px 14px; border-radius: 14px; border: 1px solid var(--wj-line); background: var(--wj-surface); color: var(--wj-ink); font: 400 1.02rem/1.45 var(--brand-body); }
textarea:focus, .wj-choice:focus-visible, .wj-btn:focus-visible, .wj-textlink:focus-visible, #welcomeLanding:focus-visible {
  outline: 2px solid var(--wj-gold, var(--c-copper, var(--copper)));
  outline-offset: 3px;
}
.wj-heard { min-height: 1.4em; margin: 8px 0 12px; color: var(--wj-gold); font-size: .95rem; }
.wj-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--wj-gold); font: 600 1rem/1.2 var(--brand-body); text-decoration: none; }
.wj-btn-primary { background: var(--wj-gold); color: var(--wj-gold-ink); }
.wj-btn-secondary { background: transparent; color: var(--wj-bright); }
.wj-actions { display: grid; gap: 10px; margin: 8px 0 14px; }
.wj-next { width: 100%; }
.wj-textlink { appearance: none; background: none; border: 0; padding: 12px 4px; min-height: 48px; color: var(--wj-muted, var(--c-muted, var(--c-copper, var(--brand-gold)))); font: 500 .95rem/1.3 var(--brand-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.wj-explore { display: block; margin: 4px auto 0; }
.wj-seeds { display: flex; gap: 8px; margin: 0 0 16px; }
.wj-seeds i { width: 18px; height: 18px; border-radius: 50% 50% 50% 0; border: 1.5px solid var(--wj-gold); transform: rotate(-35deg); opacity: .45; }
.wj-seeds i.is-on { background: var(--wj-gold); opacity: 1; }
.wj-focus { margin: 0 0 12px; padding: 16px 16px 8px; border-radius: 16px; border: 1px solid var(--wj-line); background: var(--wj-surface); }
.wj-focus p:last-child { font-family: var(--wj-serif); font-size: 1.25rem; line-height: 1.4; color: var(--wj-bright); margin: 0 0 10px; }
.wj-glance { margin: 0 0 12px; padding: 14px 16px; border-left: 2px solid var(--wj-gold); }
.wj-glance p { margin: 0 0 8px; line-height: 1.5; color: var(--wj-bright); }
.wj-path { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.wj-path li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; min-height: 48px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--wj-line); }
.wj-path strong { font-family: var(--wj-serif); font-size: 1.2rem; font-weight: 600; color: var(--wj-bright); }
.wj-path span { color: var(--wj-muted); }
.wj-unlock { margin: 0 0 16px; color: var(--wj-gold); font-weight: 600; letter-spacing: .02em; }
.wj-intro { margin: 0 0 14px; border-top: 1px solid var(--wj-line); padding-top: 4px; }
.wj-intro summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--wj-gold); font-weight: 600; }
.wj-intro p { margin: 0 0 12px; line-height: 1.55; color: var(--wj-ink); font-size: 1.02rem; }
.wj-rhythm { margin: 0 0 14px; line-height: 1.5; color: var(--wj-muted); }
#dnaMeet { position: fixed; inset: 0; z-index: 80; overflow: auto; background: var(--bg, var(--c-bg)); color: var(--cream, var(--c-cream)); }
#dnaMeet .brand { color: inherit; display: flex; align-items: center; gap: 8px; text-decoration: none; }
#welcomeLanding.welcome-choice, .home-shortcut.welcome-choice, .tile.welcome-choice, #nextAction.welcome-choice {
  outline: 2px solid var(--copper, var(--c-copper, var(--brand-gold)));
  outline-offset: 3px;
}
#welcomeLanding { width: 100%; text-align: left; margin: 0 0 14px; cursor: pointer; font: 600 1.05rem/1.35 var(--serif, var(--brand-heading)); color: var(--cream-bright, var(--cream)); }
.app-settings .replay-intro { display: flex; align-items: center; min-height: 44px; color: var(--copper, var(--brand-gold)); font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .wj-choice.is-on .wj-sprout { animation: none; height: 14px; }
  .wj-card, .wj-card *, #dnaMeet, #dnaMeet * { animation: none !important; transition: none !important; }
}