/* Welcome experience: Nova/Orion in a living night sky (public/nova.js draws the sky and the character).
   Phone-first (412 x 915), scales up to desktop. Everything sits on one full-screen stage:
   .nova-sky (canvas) < .nv-layer (character) < .nv-fx (stars' tags, fireflies, feature cards) < .nv-ui (text and controls). */
.welcome { position: fixed; inset: 0; z-index: 60; color: #f4f1ff; overflow: hidden; background: #070b1f; font-family: var(--body); }
.welcome[hidden] { display: none; }
body.wl-open { overflow: hidden; }
.nv-stage { position: absolute; inset: 0; overflow: hidden; touch-action: manipulation; }
.nova-sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nv-layer, .nv-fx { position: absolute; inset: 0; pointer-events: none; }
.nv-stage.perch .nv-layer { z-index: 2; } /* the character sits on top of the review sheet */
.nv-ui { position: absolute; inset: 0; pointer-events: none; padding: calc(64px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); }
.nv-ui > * { pointer-events: auto; }

/* top bar */
.wl-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; }
.wl-brand { font: 700 .9rem var(--display); letter-spacing: .02em; color: #ffd35c; }
.wl-link { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #e9e6ff; font-weight: 600; padding: 9px 14px; border-radius: 999px; cursor: pointer; min-height: 40px; backdrop-filter: blur(8px); }
.wl-icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px); }

/* the character */
.nova-actor { position: absolute; left: 0; top: 0; width: var(--nv, 120px); height: var(--nv, 120px); will-change: transform; transform-origin: 50% 50%; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nova-actor .nova-bob.nv-spin { animation: nv-spin .85s cubic-bezier(.3, 1.4, .5, 1), nv-bob 3.2s ease-in-out .85s infinite; }
@keyframes nv-spin { 0% { transform: rotate(0) scale(1); } 35% { transform: rotate(200deg) scale(1.18); } 100% { transform: rotate(360deg) scale(1); } }
.nv-emote { position: absolute; left: 50%; top: -6%; font-size: calc(var(--nv, 120px) * .26); pointer-events: none; animation: nv-emote 1.5s cubic-bezier(.2, 1.2, .4, 1) forwards; }
@keyframes nv-emote { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.3); } 25% { opacity: 1; transform: translate(calc(-50% + var(--dx) * .5), -14px) scale(1.15); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -70px) scale(.9); } }
.nova-bob { width: 100%; height: 100%; animation: nv-bob 3.2s ease-in-out infinite; }
.nova-bob svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 18px rgba(255, 200, 100, .45)); }
.nova-actor.orion .nova-bob svg { filter: drop-shadow(0 0 18px rgba(110, 190, 255, .5)); }
@keyframes nv-bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
.nv-halo { animation: nv-halo 2.6s ease-in-out infinite; transform-origin: 60px 64px; }
@keyframes nv-halo { 50% { transform: scale(1.08); opacity: .8; } }
.nv-mouth { fill: none; stroke: #4a1626; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.nv-mouth.open { fill: #4a1626; stroke-width: 1.5; }
.nv-brows path { fill: none; stroke: #6b3a1a; stroke-width: 2.6; stroke-linecap: round; transition: transform .25s; }
.nova-actor.orion .nv-brows path { stroke: #23426b; }
.nv-eyes { transform-origin: 60px 62px; transition: transform .1s; }
.nova-actor.nv-blink .nv-eyes { transform: scaleY(.12); }
.nv-tassel { transform-origin: 86px 26px; animation: nv-tassel 2.4s ease-in-out infinite; }
@keyframes nv-tassel { 50% { transform: rotate(12deg); } }
.nova-actor.nv-pop .nova-bob { animation: nv-pop .7s cubic-bezier(.2, 1.6, .4, 1) both, nv-bob 3.2s ease-in-out .7s infinite; }
@keyframes nv-pop { from { transform: scale(0) rotate(-40deg); } }
.nova-actor.nv-wiggle .nova-bob { animation: nv-wiggle .7s ease-in-out, nv-bob 3.2s ease-in-out .7s infinite; }
@keyframes nv-wiggle { 20% { transform: rotate(-14deg) scale(1.06); } 45% { transform: rotate(12deg); } 70% { transform: rotate(-6deg); } }
.nova-actor[data-state=listen] .nv-brows path { transform: translateY(-3px); }
.nova-actor[data-state=listen] .nova-bob { animation: nv-lean 1.6s ease-in-out infinite; }
@keyframes nv-lean { 50% { transform: rotate(6deg) translateY(-4px); } }
.nova-actor[data-state=think] .nova-bob { animation: nv-think 1.4s linear infinite; }
@keyframes nv-think { 0% { transform: rotate(0); } 25% { transform: rotate(-10deg) translateY(-4px); } 75% { transform: rotate(10deg) translateY(-4px); } 100% { transform: rotate(0); } }

/* text */
.nv-title { position: absolute; left: 18px; right: 18px; top: 54%; margin: 0; text-align: center; font: 800 clamp(2.1rem, 9vw, 3.4rem)/1.05 var(--display); font-stretch: 108%; color: #fff; text-shadow: 0 0 30px rgba(255, 200, 120, .45); transition: opacity .4s, transform .4s; }
.nv-title.head { top: calc(70px + env(safe-area-inset-top)); font-size: clamp(1.6rem, 7vw, 2.4rem); }
.nv-title.fade { opacity: 0; transform: translateY(-14px); }
.bl { display: inline-block; animation: bl-in .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes bl-in { from { opacity: 0; transform: translateY(40px) scale(.4) rotate(-12deg); } }
.nv-cap { position: absolute; left: 22px; right: 22px; top: 64%; text-align: center; font: 500 1.18rem/1.5 var(--body); color: #f1eeff; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); cursor: pointer; }
.nv-cap.low { top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); }
.kw { display: inline-block; opacity: 0; transform: translateY(14px); filter: blur(4px); }
.kw.in { animation: kw-in .42s cubic-bezier(.2, .9, .3, 1) both; }
.kw.ghost { opacity: .16; transform: none; filter: none; }
.kw.ghost.in { animation: kw-lit .5s ease-out both; }
@keyframes kw-lit { 0% { opacity: .16; text-shadow: 0 0 0 rgba(255, 220, 140, 0); } 35% { opacity: 1; color: #fff4c8; text-shadow: 0 0 18px rgba(255, 210, 120, .95); transform: translateY(-3px); } 100% { opacity: 1; } }
@keyframes kw-in { to { opacity: 1; transform: none; filter: none; } }

/* buttons */
.nv-cta { min-height: 56px; padding: 0 30px; border-radius: 999px; border: none; cursor: pointer; font: 700 1.05rem var(--body); color: #1d1030; background: linear-gradient(135deg, #ffe58a, #ffb84d 55%, #ff8a6a); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 12px 34px -10px rgba(255, 170, 80, .8); animation: cta-glow 2.4s ease-in-out infinite; }
.nv-cta:active { transform: scale(.97); }
.nv-cta.ghost { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset; animation: none; backdrop-filter: blur(8px); }
@keyframes cta-glow { 50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 12px 44px -6px rgba(255, 170, 80, 1); } }
.nv-ui.arrival #nvGo { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(40px + env(safe-area-inset-bottom)); width: min(340px, calc(100% - 40px)); }
.nv-ui .low { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(26px + env(safe-area-inset-bottom)); min-height: 44px; }
.nv-row { position: absolute; left: 18px; right: 18px; bottom: calc(34px + env(safe-area-inset-bottom)); display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.nv-row .nv-cta { flex: 1 1 150px; max-width: 320px; padding: 0 16px; }
.nv-ui.intro .nv-cap { top: 58%; }

/* choose Nova or Orion */
.nv-pick { position: absolute; top: 56%; transform: translateX(-50%); display: grid; gap: 2px; justify-items: center; padding: 12px 22px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; backdrop-filter: blur(10px); min-width: 120px; }
.nv-pick b { font: 800 1.3rem var(--display); }
.nv-pick span { font-size: .8rem; opacity: .75; }
.nv-pick:hover, .nv-pick:focus-visible { background: rgba(255, 255, 255, .16); }
.nv-foot { position: absolute; left: 0; right: 0; bottom: calc(30px + env(safe-area-inset-bottom)); text-align: center; color: rgba(255, 255, 255, .6); font-size: .85rem; }

/* tour */
.nv-feature { position: absolute; transform: translate(-50%, -130%); display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26); color: #fff; backdrop-filter: blur(10px); font-weight: 700; white-space: nowrap; animation: feat-in .6s cubic-bezier(.2, 1.5, .4, 1) both; transition: opacity .4s, transform .4s; }
.nv-feature .ico { width: 20px; height: 20px; color: #ffd35c; }
.nv-feature.away { opacity: 0; transform: translate(-50%, -160%) scale(.8); }
@keyframes feat-in { from { opacity: 0; transform: translate(-50%, -60%) scale(.3); } }

/* constellation tags */
.nv-tag { position: absolute; transform: translate(-50%, 12px); font-size: .74rem; font-weight: 600; color: #fff6dc; background: rgba(20, 16, 50, .55); border: 1px solid rgba(255, 220, 150, .35); padding: 3px 9px; border-radius: 999px; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; animation: tag-in .5s cubic-bezier(.2, 1.4, .4, 1) both; transition: opacity .6s, transform .6s; backdrop-filter: blur(6px); }
.nv-tag.above { transform: translate(-50%, calc(-100% - 12px)); }
.nv-tag.old { opacity: 0; transform: translate(-50%, 4px) scale(.85); }
@keyframes tag-in { from { opacity: 0; transform: translate(-50%, 0) scale(.4); } }

/* fireflies: spoken words that float up */
.firefly { position: absolute; translate: -50% 0; transform: translate(0, 0); opacity: 0; font: 600 1rem var(--body); color: #fff2c4; text-shadow: 0 0 10px rgba(255, 210, 120, .9), 0 0 22px rgba(255, 170, 90, .6); white-space: nowrap; transition: transform 1.4s cubic-bezier(.2, .8, .3, 1), opacity .5s; animation: ff-hover 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes ff-hover { 50% { margin-top: -6px; } }

/* interview */
.nv-qbox { position: absolute; left: 34%; right: 18px; top: 36%; bottom: calc(214px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: center; gap: 12px; pointer-events: none; }
.nv-q { font: 700 1.24rem/1.4 var(--display); color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .7); cursor: pointer; transition: opacity .3s; pointer-events: auto; }
.nv-q.long { font-size: 1.06rem; line-height: 1.38; }
.nv-q.fade { opacity: .25; }
.nv-hint { margin: 0; color: rgba(235, 228, 255, .7); font-size: .86rem; }
.nv-hint:empty { display: none; }
.nv-choices { position: absolute; left: 18px; right: 18px; bottom: calc(196px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.nv-choices button { border: 1px solid rgba(255, 220, 150, .45); background: rgba(255, 200, 100, .12); color: #fff3d0; border-radius: 999px; padding: 9px 16px; min-height: 42px; cursor: pointer; font-weight: 600; backdrop-filter: blur(8px); }
.nv-heard { position: absolute; left: 18px; right: 18px; bottom: calc(176px + env(safe-area-inset-bottom)); max-height: 3.2em; overflow: hidden; text-align: center; font-size: .85rem; color: rgba(255, 245, 220, .75); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nv-heard[hidden] { display: none; }
.nv-type { position: absolute; left: 14px; right: 14px; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 2; background: rgba(20, 16, 50, .75); border: 1px solid rgba(255, 255, 255, .2); border-radius: 18px; padding: 8px 12px; backdrop-filter: blur(14px); }
.nv-type[hidden] { display: none; }
.nv-type textarea { width: 100%; background: transparent; border: none; color: #fff; font: 16px/1.45 var(--body); resize: none; min-height: 70px; box-shadow: none; padding: 4px; }
.nv-type textarea:focus { outline: none; box-shadow: none; }
.nv-type textarea::placeholder { color: rgba(255, 255, 255, .5); }
.nv-dock { position: absolute; left: 0; right: 0; bottom: calc(52px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 28px; }
.nv-round { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px); }
.nv-round.send:not([disabled]) { background: linear-gradient(135deg, #7fe0b0, #3fa37e); border-color: transparent; color: #08261a; box-shadow: 0 0 24px rgba(110, 230, 170, .6); }
.nv-round[disabled] { opacity: .4; cursor: default; }
.nv-mic { position: relative; width: 92px; height: 92px; border-radius: 50%; border: none; cursor: pointer; color: #2a1236; background: radial-gradient(circle at 40% 35%, #fff6d6, #ffcf5c 55%, #ff9a5a); box-shadow: 0 0 40px rgba(255, 190, 90, .55), 0 0 0 8px rgba(255, 200, 120, .08); display: grid; place-items: center; -webkit-tap-highlight-color: transparent; animation: mic-breathe 2.8s ease-in-out infinite; }
.nv-mic .ico { width: 34px; height: 34px; position: relative; z-index: 1; }
.nv-mic[disabled] { opacity: .45; animation: none; }
@keyframes mic-breathe { 50% { box-shadow: 0 0 56px rgba(255, 190, 90, .75), 0 0 0 14px rgba(255, 200, 120, .06); } }
.nv-mic.on { background: radial-gradient(circle at 40% 35%, #ffe0e6, #ff6f8f 55%, #d63a68); color: #fff; animation: none; }
.nv-mic.on::before, .nv-mic.on::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid rgba(255, 120, 150, .8); animation: mic-ring 1.5s ease-out infinite; }
.nv-mic.on::after { animation-delay: .75s; }
@keyframes mic-ring { from { transform: scale(.95); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.nv-ring { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); transform: rotate(-90deg); }
.nv-ring circle { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 3; }
.nv-ring circle.on { stroke: #ffe58a; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; transition: stroke-dashoffset 1s cubic-bezier(.3, 1.2, .4, 1); filter: drop-shadow(0 0 6px rgba(255, 220, 120, .9)); }
.nv-status { position: absolute; left: 18px; right: 18px; bottom: calc(150px + env(safe-area-inset-bottom)); margin: 0; text-align: center; font-size: .8rem; color: rgba(235, 228, 255, .6); pointer-events: none; }
.nv-heard:not([hidden]) ~ .nv-status { visibility: hidden; }
.nv-links { position: absolute; left: 0; right: 0; bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; padding: 0 14px; }
.nv-links button { background: none; border: none; color: rgba(235, 228, 255, .65); font-weight: 600; font-size: .86rem; padding: 10px 6px; cursor: pointer; min-height: 40px; }
.nv-links button[disabled] { opacity: .35; }

/* finish: review sheet */
.nv-ui.finish .nv-title { top: 50%; }
.nv-ui.finish .nv-cap { top: 59%; font-size: 1.02rem; }
.nv-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 62dvh; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(38, 30, 84, .9), rgba(22, 16, 52, .96)); color: #f4f1ff; border: 1px solid rgba(255, 255, 255, .14); border-bottom: none; border-radius: 26px 26px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .45), 0 -1px 0 rgba(255, 220, 150, .25) inset; backdrop-filter: blur(16px); transform: translateY(105%); transition: transform .7s cubic-bezier(.2, .9, .3, 1); }
.nv-sheet.up { transform: none; }
.nv-ui.sheet-up .nv-title, .nv-ui.sheet-up .nv-cap { opacity: 0; transform: translateY(-20px); transition: opacity .5s, transform .5s; pointer-events: none; }
.nv-said { margin: 2px 0 4px; font: 500 1rem/1.5 var(--body); color: #fff4d6; padding-left: 12px; border-left: 3px solid #ffd35c; }
.nv-review { overflow: auto; display: grid; gap: 8px; text-align: left; padding: 2px; }
.nv-review h4 { margin: 8px 0 0; font: 700 .9rem var(--display); color: #ffd35c; }
.nv-rv { display: grid; gap: 4px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 9px 11px; animation: rv-in .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.nv-rv:nth-child(2) { animation-delay: .5s; } .nv-rv:nth-child(3) { animation-delay: .58s; } .nv-rv:nth-child(4) { animation-delay: .66s; } .nv-rv:nth-child(5) { animation-delay: .74s; } .nv-rv:nth-child(n+6) { animation-delay: .82s; }
@keyframes rv-in { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.nv-rv b { font-size: .78rem; color: rgba(235, 228, 255, .7); font-weight: 600; }
.nv-rv input[type=text], .nv-rv textarea { font-size: 16px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; color: #fff; background: rgba(10, 8, 30, .45); min-height: 0; }
.nv-rv input[type=text]:focus, .nv-rv textarea:focus { outline: none; border-color: #ffd35c; box-shadow: 0 0 0 3px rgba(255, 211, 92, .2); }
.nv-rv input[type=checkbox] { accent-color: #ffb84d; width: 20px; height: 20px; }
.nv-rv .muted { color: rgba(235, 228, 255, .6); }
.nv-rv.pick { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.nv-sheet .nv-cta { width: 100%; animation: none; flex: none; }

/* plan: deadlines drop in */
.nv-ui.plan .nv-title { top: calc(74px + env(safe-area-inset-top)); }
.nv-ui.plan .nv-cap { top: auto; bottom: calc(110px + env(safe-area-inset-bottom)); font-size: 1rem; }
.nv-plan { position: absolute; left: 30%; right: 16px; top: calc(150px + env(safe-area-inset-top)); display: grid; gap: 10px; }
.nv-due { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(10px); animation: due-drop .8s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes due-drop { from { opacity: 0; transform: translateY(-120px) rotate(-6deg); } }
.nv-due .num { text-align: center; }
.nv-due .num b { display: block; font: 800 1.9rem/1 var(--display); font-stretch: 70%; color: #ffd35c; }
.nv-due .num small { font-size: .62rem; color: rgba(255, 255, 255, .7); }
.nv-due > div:last-child b { display: block; font-size: .92rem; line-height: 1.3; }
.nv-due > div:last-child span { font-size: .78rem; color: rgba(255, 255, 255, .65); }
.nv-row.end { bottom: calc(30px + env(safe-area-inset-bottom)); }

/* wider screens */
@media (min-width: 700px) {
  .nv-qbox { left: 34%; right: 12%; top: 30%; }
  .nv-q { font-size: 1.6rem; }
  .nv-q.long { font-size: 1.32rem; }
  .nv-cap { left: 18%; right: 18%; font-size: 1.35rem; }
  .nv-sheet { left: 50%; right: auto; width: 620px; margin-left: -310px; }
  .nv-plan { left: 38%; right: 18%; }
  .nv-tag { font-size: .82rem; }
}
@media (max-height: 700px) { .nv-cap { top: 62%; font-size: 1.05rem; } .nv-title { top: 51%; } }

/* captured-fact chips (used by the interview wizard in app.js) */
.got-row { display: flex; flex-wrap: wrap; gap: 6px; }
.got { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--spruce-soft); color: var(--spruce); font-size: .82rem; font-weight: 600; max-width: 100%; animation: got-in .55s cubic-bezier(.2, 1.5, .4, 1) both; }
.got small { font-weight: 500; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16ch; }
.got.medal { background: var(--amber-soft); color: var(--amber); }
@keyframes got-in { from { opacity: 0; transform: translateY(16px) scale(.6); } }

@media (prefers-reduced-motion: reduce) {
  .welcome *, .welcome *::before, .welcome *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}