/* ============================================================
   Elephante Assistant — page styles.
   Concept: Calm Card Stack.

   EA TOKENS — every value below is copied VERBATIM from the
   approved LIQUID GLASS LAYER in styles.css. No new palette is
   invented here.

   G20 — WHY THESE ARE PINNED, DO NOT "SIMPLIFY" THIS AWAY:
   styles.css defines the approved slate palette on a bare
   `:root` selector, specificity (0,1,0). The older dark block
   uses `:root:not([data-theme="light"])`, specificity (0,2,0).
   Specificity beats source order, so on a system-dark device
   with no data-theme attribute — the default state of most
   Macs and every iPhone in dark mode — `var(--accent)` resolves
   to the OLD GREEN #4fb39a, measured on the live site, not the
   approved slate #8fb4c9. Reading var(--accent) here would
   silently ship the wrong colour to most visitors. These
   --ea-* copies make it deterministic. Same palette, no drift.
   ============================================================ */
:root {
  --ea-ink:           #eef2f5;
  --ea-muted:         rgba(226,232,240,.62);
  --ea-faint:         rgba(226,232,240,.34);
  --ea-accent:        #8fb4c9;
  --ea-accent-hi:     #b7d2e0;
  --ea-glass-bg:      rgba(255,255,255,.055);
  --ea-glass-bg-hi:   rgba(255,255,255,.09);
  --ea-glass-line:    rgba(255,255,255,.14);
  --ea-glass-line-hi: rgba(255,255,255,.22);
  --ea-on-accent:     #0e1519;
  --ea-placeholder:   rgba(226,232,240,.4);
  --ea-focus-ring:    rgba(143,180,201,.18);
  --ea-focus-line:    rgba(143,180,201,.7);
  --ea-radius:        12px;
  --ea-radius-lg:     22px;
  --ea-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ea-ease:  cubic-bezier(.22,1,.36,1);
  --ea-in:    cubic-bezier(.2,.9,.3,1.3);   /* G10 — cards arrive, they do not drift */
  --ea-card-max: 560px;                     /* set from script to the real free space */
}

* { box-sizing: border-box; }

/* G11 — app-shell model. The page never scrolls; the card scrolls inside itself. */
/* The elephant is allowed to bleed a little past the padding on a
   phone; without clipping the viewport that bleed became a real 5.5px
   horizontal scroll (measured at 390px). */
html { scroll-behavior: auto; height: 100%; overflow: hidden; }
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--ea-font);
  color: var(--ea-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  background:
    radial-gradient(1200px 800px at 15% 0%, #24313d 0%, transparent 60%),
    radial-gradient(1100px 900px at 100% 30%, #202a39 0%, transparent 55%),
    linear-gradient(160deg, #12181e 0%, #171d26 55%, #1b1f2b 100%) fixed;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 22% 26%, rgba(143,180,201,.10) 0%, transparent 45%),
    radial-gradient(circle at 82% 20%, rgba(120,140,180,.09) 0%, transparent 45%);
}

/* ------------------------------------------------------------
   FULL-BLEED SHELL — fills width AND height at every breakpoint.
   position/z-index are required or the refraction pseudo
   (z-index:-1) drops behind the page backdrop and vanishes.
   ------------------------------------------------------------ */
.ea-root {
  position: relative; z-index: 1;
  height: 100vh; height: 100dvh;
  width: 100%; max-width: none;
  display: flex; flex-direction: column;
  padding:
    max(10px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

/* ---------------- top bar: identity mark + version pill ------ */
.ea-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 2px 2px;
}
.ea-mark { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* G17 — the same silhouette at 28px, so EA has a face on every screen */
.ea-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--ea-glass-bg-hi); border: 1px solid var(--ea-glass-line);
  display: grid; place-items: center; overflow: hidden;
}
.ea-avatar svg { width: 24px; height: 24px; display: block; }
.ea-mark b {
  font-size: .93rem; font-weight: 650; letter-spacing: -.01em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ea-pill {
  appearance: none; cursor: pointer;
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ea-font);
  font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ea-accent-hi); background: var(--ea-glass-bg-hi);
  border: 1px solid var(--ea-glass-line);
  padding: 12px 14px; min-height: 44px; border-radius: 99px; white-space: nowrap;
  transition: border-color .16s, background .16s;
}
.ea-pill:hover { border-color: var(--ea-glass-line-hi); background: rgba(255,255,255,.12); }
.ea-pill:focus-visible { outline: none; border-color: var(--ea-focus-line); box-shadow: 0 0 0 3px var(--ea-focus-ring); }
.ea-pill i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ea-accent);
  box-shadow: 0 0 0 3px rgba(143,180,201,.16);
}

/* ---------------- stage: the big elephant -------------------- */
.ea-stage {
  flex: 1 1 0; min-height: 168px; overflow: visible;
  display: flex; align-items: center; justify-content: center;
  padding: 4px 0 2px; position: relative;
  transition: min-height .55s var(--ea-ease);
}
.ea-eleph {
  flex: 0 0 auto; width: min(112%, 560px); height: 100%;
  display: block; overflow: visible; margin: 0 auto;
}

/* breathing / nodding */
.eBody, .eWear { transform-box: view-box; transform-origin: 220px 220px; animation: eaBreathe 6s ease-in-out infinite; }
@keyframes eaBreathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.014); } }
@keyframes eaNod     { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(1.1deg); } }
.is-speaking .eBody, .is-speaking .eWear { animation: eaNod 1.5s ease-in-out infinite; }

/* ears */
.eEarL { transform-box: view-box; transform-origin: 132px 86px; animation: eaEarL 6.6s ease-in-out infinite; }
.eEarR { transform-box: view-box; transform-origin: 308px 86px; animation: eaEarR 6.6s ease-in-out infinite; }
@keyframes eaEarL { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-5.5deg); } }
@keyframes eaEarR { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate( 5.5deg); } }
.is-speaking .eEarL, .is-speaking .eEarR { animation-duration: 3.2s; }

/* trunk: outer group curls (the thinking pose), inner group sways always */
.eTrunkCurl {
  transform-box: view-box; transform-origin: 220px 234px;
  transition: transform .75s var(--ea-ease);
}
.eTrunkSway {
  transform-box: view-box; transform-origin: 220px 234px;
  animation: eaTrunk 7.4s ease-in-out infinite;
}
@keyframes eaTrunk { 0%,100% { transform: rotate(-2.6deg); } 50% { transform: rotate(2.6deg); } }
/* A001 — the trunk used to curl and FREEZE while it was thinking, which read
   as stopped rather than busy. It now keeps wiggling while curled, and the
   reply sway is wider (not merely faster) so a reply is obvious. */
.is-thinking .eTrunkCurl { transform: rotate(-15deg) translateY(-8px); }
.is-thinking .eTrunkSway { animation: eaTrunkBusy .62s ease-in-out infinite alternate; }
@keyframes eaTrunkBusy { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.is-speaking .eTrunkSway { animation: eaTrunkTalk 1.15s ease-in-out infinite; }
@keyframes eaTrunkTalk { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }

/* G13 — face liveness. Lids close 0.05s apart, never in sync.
   Pupils drift on a slow 11s glance cycle. */
.eLid { transform-box: fill-box; transform-origin: 50% 2%; transform: scaleY(0); animation: eaBlink 6.6s ease-in-out infinite; }
.eLidR { animation-delay: .05s; }
@keyframes eaBlink { 0%, 93%, 100% { transform: scaleY(0); } 95.5% { transform: scaleY(1.08); } }
/* The 11s canned glance cycle is gone: Astra's eyes.js now drives the
   pupils live — they follow the cursor, follow the last touch on phones,
   and wander gently when idle. The [data-eye-pupil] wrapper it moves sits
   OUTSIDE this group, so nothing here fights it. */
.ePupil { transform-box: fill-box; transform-origin: 50% 50%; }
[data-eye-pupil] { pointer-events: none; }

/* halo */
.eGlow { animation: eaGlow 6s ease-in-out infinite; }
@keyframes eaGlow { 0%,100% { opacity: .5; } 50% { opacity: .9; } }

/* the distinct THINKING state: bubbles drift up from the curled trunk */
.eDots { opacity: 0; transition: opacity .35s ease; }
.is-thinking .eDots { opacity: 1; }
.eDots circle { transform-box: view-box; transform-origin: center; }
.is-thinking .eDots circle { animation: eaDot 1.15s ease-in-out infinite; }
.eDots circle:nth-child(2) { animation-delay: .16s; }
.eDots circle:nth-child(3) { animation-delay: .32s; }
@keyframes eaDot { 0%,100% { transform: translateY(3px); opacity: .3; } 50% { transform: translateY(-7px); opacity: 1; } }

/* ---------------- the side column ---------------------------- */
.ea-side { flex: none; display: flex; flex-direction: column; min-width: 0; }

/* ---------------- EA's spoken line (G9 — speech reads as speech) */
.ea-say {
  flex: none; display: flex; justify-content: center;
  padding: 4px 0 0; min-height: 46px;
  transition: min-height .5s var(--ea-ease), padding .5s var(--ea-ease), opacity .4s ease;
}
/* The question itself is what EA says, so this line is the loudest
   thing under the elephant, not a caption. */
.ea-say p {
  margin: 0; font-size: 1.06rem; font-weight: 500; line-height: 1.4; color: #fff;
  max-width: 560px;
  padding: 10px 14px;
  border-radius: 20px 20px 20px 6px;    /* G9 — the tail */
  background: var(--ea-glass-bg);
  border: 1px solid var(--ea-glass-line);
  -webkit-backdrop-filter: blur(6px) saturate(135%);
          backdrop-filter: blur(6px) saturate(135%);
  box-shadow: 0 10px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
  animation: eaSayIn .5s var(--ea-ease) both;
}
@keyframes eaSayIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------- G4 — the countdown, in words --------------- */
.ea-left {
  flex: none; margin: 5px 0 0; text-align: center; min-height: 15px;
  font-size: .82rem; color: var(--ea-faint); line-height: 1.3;
  transition: min-height .5s var(--ea-ease), margin .5s var(--ea-ease), opacity .4s ease;
}

/* ---------------- progress dots ------------------------------ */
.ea-dots {
  flex: none; display: flex; gap: 7px; justify-content: center;
  padding: 5px 0 0; min-height: 14px;
  transition: min-height .5s var(--ea-ease), padding .5s var(--ea-ease), opacity .4s ease;
}
.ea-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(226,232,240,.2);
  transition: background .35s ease, width .35s var(--ea-ease);
}
.ea-dots i.done { background: rgba(143,180,201,.45); }
.ea-dots i.now  { background: var(--ea-accent-hi); width: 20px; border-radius: 99px; }

/* ---------------- the card deck ------------------------------ */
.ea-deck {
  flex: none; position: relative; width: 100%;
  max-width: 620px; margin: 6px auto 0; min-height: 40px;
  transition: height .5s var(--ea-ease);
}
.ea-card {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-radius: var(--ea-radius-lg);
  background: linear-gradient(rgba(20,26,34,.58), rgba(20,26,34,.58)), var(--ea-glass-bg);
  -webkit-backdrop-filter: blur(6px) saturate(135%);
          backdrop-filter: blur(6px) saturate(135%);
  border: 1px solid var(--ea-glass-line);
  box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .5s var(--ea-ease), opacity .4s ease, filter .4s ease;
  will-change: transform, opacity;
}
.ea-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  box-shadow: inset -8px -6px 0 -10px rgba(255,255,255,.7),
              inset 0 -7px 0 -7px rgba(255,255,255,.55);
  opacity: .4; filter: blur(1px) drop-shadow(4px 2px 4px rgba(0,0,0,.4));
  pointer-events: none;
}
/* the card scrolls INSIDE itself — the page never does (G11) */
.ea-in {
  padding: 16px;
  max-height: var(--ea-card-max);
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.ea-card.enter { transform: translateY(52px) scale(.97); opacity: 0; }
/* G10 — the incoming front card overshoots slightly and settles */
.ea-card.d0 { transform: translateY(0) scale(1); opacity: 1; transition: transform .38s var(--ea-in), opacity .3s ease; }
/* G21 — no backdrop-filter on the receding cards. Three stacked
   blurred glass layers is the one real performance risk, and at
   34% / 12% opacity the visual cost of dropping it is near zero. */
.ea-card.d1 {
  transform: translateY(-22px) scale(.945); opacity: .34; filter: blur(4px);
  pointer-events: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ea-card.d2 {
  transform: translateY(-38px) scale(.9); opacity: .12; filter: blur(6px);
  pointer-events: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ea-card.d1 .ea-in, .ea-card.d2 .ea-in { overflow: hidden; }
/* A receding card must never be taller than the deck, or a tall card
   that has just left (the greeting, say) hangs its blurred text up
   behind the speech line and reads as a smudge rather than depth.
   Measured at 1440x900 with the greeting card behind question one. */
.ea-card.d1, .ea-card.d2, .ea-card.gone { max-height: 100%; overflow: hidden; }
.ea-card.gone { transform: translateY(-46px) scale(.86); opacity: 0; pointer-events: none; }

/* ---------------- card contents ------------------------------ */
.ea-kicker {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ea-faint); margin: 0 0 9px;
}
.ea-h1  { color: #fff; font-size: 1.5rem; font-weight: 700; margin: 0 0 8px; line-height: 1.22; letter-spacing: -.02em; }
.ea-q   { color: #fff; font-size: 1.16rem; font-weight: 600; margin: 0 0 7px; line-height: 1.35; letter-spacing: -.01em; }
.ea-help{ font-size: 1.04rem; color: var(--ea-muted); margin: 0 0 12px; line-height: 1.45; }
.ea-body{ font-size: 1.18rem; color: var(--ea-ink); opacity: .92; margin: 0 0 14px; line-height: 1.5; }
.ea-note{ font-size: .84rem; color: var(--ea-faint); margin: 12px 0 0; line-height: 1.5; }

/* The example rides inside EA's own speech bubble, under what it just said. */
.ea-eg-in {
  display: block; margin-top: 9px; padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: .96em; font-weight: 400; line-height: 1.45; opacity: .9;
}
/* The "Example:" label reads in its own colour, so it is obviously a label
   and not part of what EA just said. */
.ea-eg-in b { color: #e0b877; font-weight: 700; letter-spacing: .01em; }
.ea-eg-in   { color: #cfd8e0; }

/* G15 — the example sits in its own tinted rail, not on a hairline */
.ea-eg {
  font-size: 1.04rem; color: var(--ea-ink); opacity: .95; margin: 0 0 13px; line-height: 1.5;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.16);
  border-left: 3px solid var(--ea-accent);
  border-radius: 10px; padding: 12px 14px;
}
.ea-eg b { color: var(--ea-accent-hi, var(--ea-accent)); font-weight: 700; }

/* greeting stagger */
.st { animation: eaSayIn .55s var(--ea-ease) both; }
.st1 { animation-delay: .06s; } .st2 { animation-delay: .14s; }
.st3 { animation-delay: .22s; } .st4 { animation-delay: .3s; }

/* ---------------- G16 — orientation as an iOS inset grouped list */
.ea-list {
  list-style: none; margin: 4px 0 16px; padding: 0;
  border: 1px solid var(--ea-glass-line); border-radius: var(--ea-radius);
  background: var(--ea-glass-bg); overflow: hidden;
}
.ea-list li + li { border-top: 1px solid var(--ea-glass-line); }
.ea-listbtn {
  appearance: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 13px 15px; text-align: left;
  font-family: var(--ea-font); font-size: 16px; line-height: 1.35; font-weight: 500;
  color: var(--ea-ink); background: transparent; border: 0;
  transition: background .16s;
}
.ea-listbtn:hover { background: var(--ea-glass-bg-hi); }
.ea-listbtn:focus-visible { outline: none; background: var(--ea-glass-bg-hi); box-shadow: inset 0 0 0 2px var(--ea-focus-line); }
.ea-listbtn span { flex: 1 1 auto; min-width: 0; }
.ea-chev { flex: none; width: 9px; height: 9px; display: block; }

/* ---------------- tap-to-answer boxes ------------------------ */
.ea-opts { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ea-opt {
  display: flex; gap: 12px; align-items: center;
  width: 100%; min-height: 52px; padding: 12px 14px;
  text-align: left; cursor: pointer;
  font-family: var(--ea-font); font-size: 16px; line-height: 1.35;
  color: var(--ea-ink);
  border: 1px solid var(--ea-glass-line); border-radius: var(--ea-radius);
  background: var(--ea-glass-bg);
  -webkit-backdrop-filter: blur(6px) saturate(135%);
          backdrop-filter: blur(6px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: border-color .16s, background .16s, transform .16s var(--ea-ease);
}
.ea-opt:hover { border-color: var(--ea-accent); background: var(--ea-glass-bg-hi); }
.ea-opt:active { transform: scale(.985); }
/* NOTE: this is deliberately NOT the hub's `.opt.checked`, which measures
   1.02:1 contrast on a system-light device. Never reuse hub class names. */
/* A picked option has to be unmistakable. It previously read as a focus ring,
   which Maxi took for a glitch — he thought his tap had not registered. */
.ea-opt.is-selected {
  color: #0e1519; font-weight: 700;
  background: var(--ea-accent-hi);
  border-color: var(--ea-accent-hi);
  box-shadow: 0 0 0 3px var(--ea-focus-ring), 0 6px 20px rgba(143,180,201,.28);
}
.ea-opt:focus-visible { outline: none; border-color: var(--ea-focus-line); box-shadow: 0 0 0 3px var(--ea-focus-ring); }

/* G14 — two columns past 760px so four options do not stretch
   down a lonely desktop column */
@media (min-width: 760px) {
  .ea-opts { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---------------- buttons ------------------------------------ */
.ea-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 12px; }
.ea-btn {
  appearance: none; cursor: pointer;
  font-family: var(--ea-font); font-size: .95rem; font-weight: 700;
  border-radius: var(--ea-radius); padding: 12px 20px; min-height: 48px;
  color: var(--ea-on-accent); background: rgba(183,210,224,.92);
  border: 1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(6px) saturate(135%);
          backdrop-filter: blur(6px) saturate(135%);
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.5);
  transition: background .16s, transform .16s var(--ea-ease), opacity .2s;
}
.ea-btn:hover { background: rgba(199,222,233,.98); transform: translateY(-1px); }
.ea-btn:disabled { opacity: .38; cursor: default; transform: none; }
.ea-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ea-focus-ring), 0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.5);
}
/* the only safe secondary — the hub's `.btn.secondary` measures 1.38:1 */
.ea-btn.ghost {
  background: transparent; color: var(--ea-muted); font-weight: 600;
  border: 1px solid var(--ea-glass-line); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ea-btn.ghost:hover { color: #fff; border-color: var(--ea-glass-line-hi); background: rgba(255,255,255,.03); }
.ea-btn.small { font-size: .88rem; padding: 10px 15px; min-height: 46px; }

/* ---------------- quote-back / summary / next steps ---------- */
.ea-quote {
  margin: 0 0 14px; padding: 13px 15px;
  border-radius: var(--ea-radius); background: var(--ea-glass-bg-hi);
  border: 1px solid var(--ea-glass-line);
  font-size: .95rem; color: var(--ea-ink); line-height: 1.55;
}
.ea-sum { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ea-sum li { display: flex; flex-direction: column; gap: 4px; }
.ea-sum b { font-size: .84rem; font-weight: 600; color: var(--ea-muted); line-height: 1.4; }
.ea-sum span { font-size: 1rem; color: var(--ea-ink); line-height: 1.45; }
.ea-next {
  margin: 0; padding: 15px; border-radius: var(--ea-radius);
  border: 1px solid var(--ea-glass-line); background: rgba(143,180,201,.07);
}
.ea-next > b {
  display: block; color: #fff; font-size: .74rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 9px;
}
.ea-steps { margin: 0; padding-left: 20px; font-size: .95rem; color: var(--ea-muted); line-height: 1.6; }
.ea-steps li { margin: 0 0 4px; }
.ea-steps li:last-child { margin-bottom: 0; }

/* ---------------- G7/G8 — the Messages-style composer -------- */
.ea-composer {
  flex: none; display: flex; align-items: flex-end; gap: 9px;
  padding: 9px 0 0; margin: 0 auto; width: 100%; max-width: 620px;
  transition: opacity .3s ease;
}
/* G8 INVERTED from the mockup: during tap questions the composer is
   dimmed but STAYS ENABLED. Typing past the boxes is always allowed. */
.ea-composer.dim { opacity: .88; }
.ea-composer.dim:focus-within { opacity: 1; }
.ea-field {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
  border-radius: 22px; padding: 2px 4px 2px 8px;
  background: var(--ea-glass-bg); border: 1px solid var(--ea-glass-line);
  -webkit-backdrop-filter: blur(6px) saturate(135%);
          backdrop-filter: blur(6px) saturate(135%);
  box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
  transition: border-color .12s, box-shadow .12s;
}
.ea-field:focus-within { border-color: var(--ea-focus-line); box-shadow: 0 0 0 3px var(--ea-focus-ring); }
.ea-input {
  flex: 1 1 auto; width: 100%; resize: none; border: 0; outline: none; background: transparent;
  color: var(--ea-ink); font-family: var(--ea-font);
  font-size: 16px;              /* literal 16px — anything less makes iOS Safari zoom on focus */
  line-height: 1.45;
  padding: 12px 8px; max-height: 132px; min-height: 44px;
}
.ea-input::placeholder { color: var(--ea-placeholder); }
.ea-send {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); background: rgba(183,210,224,.92);
  color: var(--ea-on-accent); display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.5);
  transition: opacity .15s, transform .15s;
}
.ea-send:hover:not(:disabled) { transform: translateY(-1px); }
.ea-send:disabled { opacity: .32; cursor: default; }
.ea-send:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ea-focus-ring), 0 6px 18px rgba(0,0,0,.28); }
.ea-send svg { width: 20px; height: 20px; display: block; }

/* ------------------------------------------------------------
   G12 — ONE attribute on the root drives the whole camera move.
   Not three independent transitions on three elements.
   ------------------------------------------------------------ */
[data-view="hero"] .ea-say   { min-height: 0; padding: 0; opacity: 0; pointer-events: none; }
[data-view="hero"] .ea-left  { min-height: 0; margin: 0; opacity: 0; }
[data-view="hero"] .ea-dots  { min-height: 0; padding: 0; opacity: 0; }
[data-view="hero"] .ea-composer { display: none; }
[data-view="done"] .ea-composer { display: none; }   /* R047 — terminal. No input still waiting. */
[data-view="done"].is-fixing .ea-composer { display: flex; }  /* ...until he says it missed something. */
[data-view="done"] .ea-left  { min-height: 0; margin: 0; opacity: 0; }
[data-view="done"] .ea-dots  { min-height: 0; padding: 0; opacity: 0; }
[data-view="done"] .ea-stage { min-height: 120px; flex: 0 1 auto; }

/* ---------------- version history sheet (R061) --------------- */
.ea-sheet { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: flex-end; }
/* An author `display` rule beats the browser's own [hidden] rule, so
   without this the closed sheet stays laid out over the whole page and
   swallows every tap. Measured: it blocked the first button on the
   greeting screen. */
.ea-sheet[hidden] { display: none; }
.ea-sheet-back { position: absolute; inset: 0; background: rgba(6,10,14,.6); border: 0; padding: 0; cursor: pointer; }
.ea-sheet-body {
  position: relative; width: 100%; max-width: 620px; margin: 0 auto;
  max-height: 82dvh; display: flex; flex-direction: column;
  border-radius: var(--ea-radius-lg) var(--ea-radius-lg) 0 0;
  background: linear-gradient(rgba(20,26,34,.86), rgba(20,26,34,.86)), var(--ea-glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
          backdrop-filter: blur(14px) saturate(135%);
  border: 1px solid var(--ea-glass-line); border-bottom: 0;
  box-shadow: 0 -14px 40px rgba(0,0,0,.42);
  animation: eaSheetUp .32s var(--ea-in) both;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}
@keyframes eaSheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ea-sheet-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 18px 10px;
}
.ea-sheet-head b { color: #fff; font-size: 1.05rem; font-weight: 700; }
.ea-x {
  appearance: none; cursor: pointer; width: 44px; height: 44px; flex: none;
  border-radius: 50%; border: 1px solid var(--ea-glass-line);
  background: var(--ea-glass-bg-hi); color: var(--ea-ink);
  display: grid; place-items: center;
}
.ea-x:hover { border-color: var(--ea-glass-line-hi); }
.ea-x:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ea-focus-ring); }
.ea-x svg { width: 15px; height: 15px; display: block; }
.ea-sheet-list { flex: 1 1 auto; overflow-y: auto; padding: 0 18px 18px; }
.ea-ver { padding: 14px 0; border-top: 1px solid var(--ea-glass-line); }
.ea-ver:first-child { border-top: 0; padding-top: 4px; }
.ea-ver-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.ea-ver-h b { color: #fff; font-size: 1rem; font-weight: 700; }
.ea-ver-h span { font-size: .8rem; color: var(--ea-faint); }
.ea-ver ul { margin: 0; padding-left: 18px; font-size: .93rem; color: var(--ea-muted); line-height: 1.55; }
.ea-ver p { margin: 8px 0 0; font-size: .82rem; color: var(--ea-faint); }

/* ---------------- breakpoints -------------------------------- */
/* On a phone the pill has to carry a full Pacific timestamp next to
   the name, so both shed a little weight rather than truncating. */
@media (max-width: 430px) {
  .ea-bar { gap: 8px; }
  .ea-mark { gap: 8px; }
  .ea-mark b { font-size: .84rem; }
  .ea-avatar { width: 28px; height: 28px; }
  .ea-avatar svg { width: 22px; height: 22px; }
  .ea-pill { font-size: .66rem; letter-spacing: 0; text-transform: none; padding: 12px 10px; gap: 6px; }
}

@media (min-width: 760px) {
  .ea-root { padding: 22px 40px 26px; }
  .ea-stage { min-height: 210px; }
  .ea-eleph { width: min(100%, 620px); }
  .ea-say p { font-size: 1.16rem; }
  .ea-in { padding: 24px 26px; }
  .ea-h1 { font-size: 1.85rem; }
  .ea-q  { font-size: 1.28rem; }
  .ea-deck, .ea-composer { max-width: 660px; }
}

/* Past 1000px the same calm stack simply moves beside the elephant,
   so the page fills the width instead of leaving half of it empty. */
@media (min-width: 1000px) {
  .ea-root {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 72px);
    padding: 22px clamp(32px, 4vw, 72px) 28px;
  }
  .ea-bar   { grid-column: 1 / 3; grid-row: 1; }
  .ea-stage { grid-column: 1; grid-row: 2; min-height: 0; padding: 0; }
  .ea-side  { grid-column: 2; grid-row: 2; justify-content: center; min-height: 0; }
  .ea-eleph { width: 100%; height: 100%; }
  .ea-say   { justify-content: flex-start; }
  .ea-say p { max-width: none; }
  .ea-left  { text-align: left; }
  .ea-dots  { justify-content: flex-start; }
  .ea-deck, .ea-composer { margin-left: 0; margin-right: 0; }
  [data-view="hero"] .ea-say, [data-view="hero"] .ea-left, [data-view="hero"] .ea-dots { opacity: 0; }
  [data-view="done"] .ea-stage { min-height: 0; }
}
@media (min-width: 1400px) { .ea-deck, .ea-composer { max-width: 700px; } }
@media (max-height: 760px) and (min-width: 760px) { .ea-eleph { width: min(100%, 500px); } }

/* ------------------------------------------------------------
   R007 — reduced motion. Everything settles into a static,
   calm elephant in a sensible resting pose: eyes open, trunk
   down, no bubbles. This block also neutralises the smooth
   scroll behaviour inherited from the hub stylesheet.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ea-btn:hover, .ea-send:hover:not(:disabled) { transform: none; }
  .eDots { opacity: 0 !important; }
  .is-thinking .eTrunkCurl { transform: none; }
  .eLid { transform: scaleY(0) !important; }
  .ePupil { transform: none !important; }
  .eBody, .eWear, .eEarL, .eEarR, .eTrunkSway, .eGlow { animation: none !important; }
}

/* ============================================================
   THE WALK — ported from the guided-path concept, unchanged in
   look. Hidden until the tap questions are done; it appears with
   a wiggle and the elephant walks it one stop at a time.
   ============================================================ */
.ea-trail { flex: none; width: 100%; max-width: 1240px; margin: 0 auto 4px; padding: 10px 4px 0; }
.ea-trail[hidden] { display: none !important; }
.ea-trail.is-new { animation: trailIn .9s cubic-bezier(.34,1.3,.5,1) both; }
@keyframes trailIn {
  0%   { opacity: 0; transform: translateY(10px) scale(.965) rotate(-1.1deg); }
  45%  { opacity: 1; transform: translateY(0)    scale(1.012) rotate(.9deg); }
  70%  { transform: rotate(-.55deg); }
  85%  { transform: rotate(.3deg); }
  100% { opacity: 1; transform: none; }
}
.ea-trail-svg { display: block; width: 100%; height: auto; overflow: visible; }
.trail-base { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 9; }
/* The travelled path LIGHTS UP behind the walker. */
.trail-done {
  fill: none; stroke: var(--ea-accent-hi); stroke-width: 4.2; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(183,210,224,.75)) drop-shadow(0 0 14px rgba(143,180,201,.4));
  transition: stroke-dashoffset 1.05s cubic-bezier(.45,.05,.25,1);
}
/* little lamps strung along the whole route */
.trail-lamp { fill: rgba(255,255,255,.20); transition: fill .4s, filter .4s; }
.trail-lamp.lit {
  fill: var(--ea-accent-hi);
  filter: drop-shadow(0 0 5px rgba(183,210,224,.9));
}
.stop-dot  { fill: rgba(20,28,36,.9); stroke: rgba(255,255,255,.22); stroke-width: 2; transition: fill .35s, stroke .35s; }
.stop-dot.done {
  fill: var(--ea-accent-hi); stroke: var(--ea-accent-hi);
  filter: drop-shadow(0 0 7px rgba(183,210,224,.85));
}
.stop-dot.here {
  fill: #fff; stroke: var(--ea-accent-hi); stroke-width: 3;
  filter: drop-shadow(0 0 11px rgba(255,255,255,.95));
}
.stop-halo { fill: none; stroke: var(--ea-accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.stop-halo.here { animation: halo 2.2s ease-out infinite; }
@keyframes halo { 0% { opacity: .55; transform: scale(.6); } 70%,100% { opacity: 0; transform: scale(1.9); } }
.trail-cap { fill: var(--ea-muted); font-size: 13px; font-weight: 700; letter-spacing: .07em; }
.flag-pole { stroke: rgba(255,255,255,.5); stroke-width: 3; stroke-linecap: round; }
.flag-cloth { fill: var(--ea-accent-hi); transform-box: fill-box; transform-origin: 0% 50%; animation: wave 2.6s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-5deg) scaleX(.9); } }
.walker { transition: transform 1.05s cubic-bezier(.45,.05,.25,1); }
.walker-body { fill: #93b3c8; }
.walker-dark { fill: #6d8ba3; }
.walker-leg  { fill: #7f9db2; transform-box: fill-box; transform-origin: 50% 0%; }
.walking .walker-leg.a, .walking .walker-leg.c { animation: step .38s ease-in-out infinite alternate; }
.walking .walker-leg.b, .walking .walker-leg.d { animation: step .38s ease-in-out infinite alternate-reverse; }
@keyframes step { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.walking .walker-inner { animation: bob .38s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.trail-note {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 2px; font-size: .95rem; color: var(--ea-muted);
}
.trail-note b { color: var(--ea-accent-hi); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .ea-trail.is-new { animation: none; }
  .flag-cloth, .stop-halo.here { animation: none; }
  .trail-done, .walker { transition: none; }
}

/* ============================================================
   PROFILE MENU — top right. Opens on hover and on tap.
   ============================================================ */
.ea-headright { display: flex; align-items: center; gap: 10px; }
.ea-profile { position: relative; }
.ea-avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; color: var(--ea-ink);
  background: var(--ea-glass-bg); border: 1px solid var(--ea-glass-line);
  -webkit-backdrop-filter: blur(6px) saturate(135%);
          backdrop-filter: blur(6px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: border-color .16s, background .16s;
}
.ea-avatar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ea-avatar:hover { border-color: var(--ea-accent); background: var(--ea-glass-bg-hi); }
.ea-avatar:focus-visible { outline: none; border-color: var(--ea-focus-line); box-shadow: 0 0 0 3px var(--ea-focus-ring); }
.ea-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 218px; padding: 6px; display: grid; gap: 2px;
  border-radius: 16px;
  background: rgba(24,31,40,.86); border: 1px solid var(--ea-glass-line-hi);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 18px 44px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.10);
  animation: menuIn .18s var(--ea-ease) both;
}
.ea-menu[hidden] { display: none !important; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.ea-menu-item {
  width: 100%; text-align: left; cursor: pointer;
  padding: 11px 13px; border-radius: 11px; border: 0; background: transparent;
  font-family: var(--ea-font); font-size: 15px; color: var(--ea-ink);
}
.ea-menu-item:hover { background: var(--ea-glass-bg-hi); color: #fff; }
.ea-menu-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ea-focus-ring); }

/* ============================================================
   THE END — a small bloom behind the summary, a Done button,
   and a way to say the report missed something.
   ============================================================ */
.ea-bloom { position: relative; height: 74px; margin: 2px 0 6px; }
.ea-bloom i {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--ea-accent-hi); opacity: 0;
  animation: bloom 1.5s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes bloom {
  0%   { opacity: 0; transform: translate(0,0) scale(.3); }
  22%  { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.5); }
}
.ea-check {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--ea-glass-bg-hi); border: 1px solid var(--ea-accent);
  animation: checkIn .7s cubic-bezier(.34,1.4,.5,1) both;
}
@keyframes checkIn { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
.ea-check svg { width: 26px; height: 26px; fill: none; stroke: var(--ea-accent-hi); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ea-check path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .5s .35s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ea-bloom i, .ea-check, .ea-check path, .ea-menu { animation: none; }
  .ea-bloom i { opacity: 0; }
  .ea-check path { stroke-dashoffset: 0; }
}

/* ============================================================
   THE SEND-OFF — an illuminated orbit, suspended in deep space.
   On screen only for as long as the end report takes to come back.
   ============================================================ */
.ea-cosmos {
  position: fixed; inset: 0; z-index: 60;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 48% 39%, rgba(50,65,104,.25), transparent 48%),
    radial-gradient(ellipse at 18% 23%, rgba(71,43,108,.32), transparent 60%),
    radial-gradient(ellipse at 86% 52%, rgba(16,68,82,.26), transparent 56%),
    #040817;
  animation: cosmosIn .42s ease-out both;
}
.ea-cosmos[hidden] { display: none !important; }
.ea-cosmos.is-out { animation: cosmosOut .55s ease both; }
.ea-cosmos canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
}
.ea-cosmos::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 58%, rgba(3,7,19,.60) 84%, rgba(3,7,19,.88)),
    radial-gradient(ellipse at 50% 42%, transparent 34%, rgba(2,5,15,.38) 100%);
}
.ea-cosmos .ea-cosmos-line {
  position: absolute; z-index: 1;
  left: 24px; right: 24px;
  bottom: max(12%, calc(32px + env(safe-area-inset-bottom, 0px)));
  margin: 0;
  color: #edf0f7;
  text-align: center;
  font-size: clamp(.96rem, 1.6vw, 1.08rem);
  font-weight: 500; line-height: 1.6; letter-spacing: .035em;
  text-shadow: 0 2px 16px #030713, 0 0 32px rgba(143,180,201,.15);
}
.ea-cosmos .ea-cosmos-line::before {
  content: ""; display: block;
  width: 42px; height: 1px;
  margin: 0 auto 19px;
  background: linear-gradient(90deg, transparent, #e0b877, transparent);
  box-shadow: 0 0 12px rgba(224,184,119,.2);
}
@keyframes cosmosIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cosmosOut { from { opacity: 1; } to { opacity: 0; } }
.ea-cosmos.is-still, .ea-cosmos.is-still.is-out,
.ea-cosmos.is-still .ea-cosmos-line { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ea-cosmos, .ea-cosmos.is-out, .ea-cosmos .ea-cosmos-line { animation: none; }
}

/* ============================================================
   "WHAT DOES THIS CHANGE?" — optional bar, bottom left button.
   Big, readable, one panel per option with a small picture.
   ============================================================ */
.ea-whybtn {
  position: fixed; left: 16px; bottom: 16px; z-index: 55;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px; min-height: 44px; cursor: pointer;
  font-family: var(--ea-font); font-size: 15px; font-weight: 600; color: var(--ea-ink);
  border-radius: 999px; border: 1px solid var(--ea-glass-line-hi);
  background: var(--ea-glass-bg);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.10);
  transition: border-color .16s, background .16s, transform .16s var(--ea-ease);
}
.ea-whybtn[hidden] { display: none !important; }
.ea-whybtn:hover { border-color: var(--ea-accent); background: var(--ea-glass-bg-hi); }
.ea-whybtn:active { transform: scale(.97); }
.ea-whydot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ea-accent-hi);
  box-shadow: 0 0 0 4px rgba(143,180,201,.18);
}

.ea-why {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 56;
  max-height: 62vh; overflow: auto;
  border-top: 1px solid var(--ea-glass-line-hi);
  background: rgba(16,22,29,.93);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
          backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 -18px 50px rgba(0,0,0,.5);
  animation: whyUp .34s var(--ea-ease) both;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ea-why[hidden] { display: none !important; }
@keyframes whyUp { from { transform: translateY(101%); } to { transform: none; } }
.ea-why-in { padding: 20px 20px 22px; max-width: 1180px; margin: 0 auto; }
.ea-why-head {
  margin: 0 0 16px; font-size: 1.16rem; font-weight: 600; line-height: 1.45;
  color: var(--ea-ink); max-width: 70ch;
}
.ea-whyclose {
  position: absolute; top: 10px; right: 12px; width: 40px; height: 40px;
  border-radius: 50%; cursor: pointer; font-size: 24px; line-height: 1;
  color: var(--ea-muted); background: transparent; border: 1px solid transparent;
}
.ea-whyclose:hover { color: #fff; border-color: var(--ea-glass-line); }

.ea-why-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.ea-why-card {
  display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: start;
  padding: 13px 14px; border-radius: var(--ea-radius);
  background: var(--ea-glass-bg); border: 1px solid var(--ea-glass-line);
}
.ea-why-card.is-picked { border-color: var(--ea-accent); background: var(--ea-glass-bg-hi); }
.ea-why-viz {
  width: 54px; height: 54px; border-radius: 11px;
  background: rgba(255,255,255,.05); border: 1px solid var(--ea-glass-line);
  display: grid; place-items: center; overflow: hidden;
}
.ea-why-viz svg { width: 34px; height: 34px; }
.ea-why-t { margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--ea-ink); line-height: 1.3; }
.ea-why-d { margin: 0; font-size: .95rem; color: var(--ea-muted); line-height: 1.5; }
.ea-why-card.is-picked .ea-why-t { color: var(--ea-accent-hi); }
@media (max-width: 560px) {
  .ea-why { max-height: 72vh; }
  .ea-why-in { padding: 16px 14px 18px; }
  .ea-why-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ea-why { animation: none; } }

/* [hidden] loses to the class's own display rule, so the pill kept showing
   even with the attribute set. This is what makes it actually disappear. */
.ea-pill[hidden] { display: none !important; }

/* ============================================================
   BACKGROUND MUSIC — a generated loop, so nothing is loaded.
   ============================================================ */
.ea-sound {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; color: var(--ea-muted);
  background: var(--ea-glass-bg); border: 1px solid var(--ea-glass-line);
  -webkit-backdrop-filter: blur(6px) saturate(135%);
          backdrop-filter: blur(6px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: border-color .16s, background .16s, color .16s;
}
.ea-sound svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ea-sound .wv1, .ea-sound .wv2 { opacity: 0; transition: opacity .2s; }
.ea-sound .slash { opacity: .9; transition: opacity .2s; }
.ea-sound:hover { border-color: var(--ea-accent); background: var(--ea-glass-bg-hi); color: var(--ea-ink); }
.ea-sound:focus-visible { outline: none; border-color: var(--ea-focus-line); box-shadow: 0 0 0 3px var(--ea-focus-ring); }
.ea-sound[aria-pressed="true"] { color: var(--ea-accent-hi); border-color: var(--ea-accent); }
.ea-sound[aria-pressed="true"] .slash { opacity: 0; }
.ea-sound[aria-pressed="true"] .wv1 { opacity: 1; animation: wv 1.9s ease-in-out infinite; }
.ea-sound[aria-pressed="true"] .wv2 { opacity: .55; animation: wv 1.9s ease-in-out infinite .28s; }
@keyframes wv { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ea-sound .wv1, .ea-sound .wv2 { animation: none; } }

/* ============================================================
   DEEPER DIVE — the transition out of the quick questions.
   ============================================================ */
.ea-phase {
  position: fixed; inset: 0; z-index: 58; display: grid; place-items: center;
  background: rgba(11,15,20,.82);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
          backdrop-filter: blur(14px) saturate(120%);
  animation: phaseIn .34s ease both;
}
.ea-phase[hidden] { display: none !important; }
.ea-phase.is-out { animation: phaseOut .42s ease both; }
@keyframes phaseIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes phaseOut { from { opacity: 1; } to { opacity: 0; } }
.ea-phase-in { text-align: center; padding: 0 20px; }
.ea-full { width: min(78vw, 340px); height: auto; display: block; margin: 0 auto 6px; overflow: visible; }
.fbod  { fill: #8fb4c9; }
.fear  { fill: #7ba3ba; transform-box: fill-box; transform-origin: 20% 50%; animation: earFlap .42s ease-in-out 4 alternate; }
.fleg  { fill: #6d92a9; transform-box: fill-box; transform-origin: 50% 0%; }
.ftail { fill: none; stroke: #6d92a9; stroke-width: 7; stroke-linecap: round; }
.ftrunk{ fill: none; stroke: #8fb4c9; stroke-width: 15; stroke-linecap: round;
         transform-box: fill-box; transform-origin: 10% 10%; animation: trunkToot .8s ease-in-out 2; }
.feye  { fill: #17222b; }
.fglint{ fill: #fff; }
.ftoot circle { fill: var(--ea-accent-hi); opacity: 0; animation: toot 1.5s ease-out .25s 2; }
.ftoot circle:nth-child(2) { animation-delay: .38s; }
.ftoot circle:nth-child(3) { animation-delay: .5s; }
.full-body { transform-box: fill-box; transform-origin: 50% 100%; animation: hop .52s cubic-bezier(.3,1.5,.5,1) 3; }
.fl1, .fl3 { animation: kick .26s ease-in-out 6 alternate; }
.fl2, .fl4 { animation: kick .26s ease-in-out 6 alternate-reverse; }
@keyframes hop      { 0%,100% { transform: translateY(0) rotate(0deg); } 45% { transform: translateY(-16px) rotate(-2.5deg); } }
@keyframes kick     { from { transform: rotate(-11deg); } to { transform: rotate(11deg); } }
@keyframes earFlap  { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }
@keyframes trunkToot{ 0%,100% { transform: rotate(0deg); } 40% { transform: rotate(-16deg) translateY(-6px); } }
@keyframes toot     { 0% { opacity: 0; transform: translate(0,0) scale(.4); } 25% { opacity: .95; } 100% { opacity: 0; transform: translate(34px,-26px) scale(1.5); } }
.ea-phase-t { margin: 4px 0 6px; font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.ea-phase-s { margin: 0; font-size: 1.06rem; color: var(--ea-muted); max-width: 34ch; margin-inline: auto; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .ea-phase, .ea-phase.is-out { animation: none; }
  .full-body, .fear, .ftrunk, .fleg, .ftoot circle { animation: none; }
  .ftoot circle { opacity: 0; }
}

/* The purpose line now lives in the waiting state — something to read while
   EA is thinking, instead of clutter under every question. */
.ea-thinkwhy {
  margin: 8px auto 0; max-width: 46ch; text-align: center;
  font-size: 1rem; line-height: 1.5; color: var(--ea-muted);
  animation: whyFade .5s ease both;
}
.ea-thinkwhy[hidden] { display: none !important; }
@keyframes whyFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ea-thinkwhy { animation: none; } }

/* The walker keeps moving whenever EA is thinking, not only when it steps. */
.is-thinking .walker-leg.a, .is-thinking .walker-leg.c { animation: step .34s ease-in-out infinite alternate; }
.is-thinking .walker-leg.b, .is-thinking .walker-leg.d { animation: step .34s ease-in-out infinite alternate-reverse; }
.is-thinking .walker-inner { animation: bob .34s ease-in-out infinite alternate; }

/* ---- ACCESSORIES — one earned per phase completed -------------------- */
.ea-acc { opacity: 0; transition: opacity .5s var(--ea-ease); }
.ea-acc.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .is-thinking .walker-leg, .is-thinking .walker-inner { animation: none; }
}

/* ============================================================
   GIFTING — the accessory tumbles in and EA loses it.
   ============================================================ */
.ea-acc.on { opacity: 1; }
.ea-acc.gifting { animation: accGift 1.5s cubic-bezier(.28,1.5,.45,1) both; }
@keyframes accGift {
  0%   { opacity: 0; transform: translateY(-260px) rotate(-220deg) scale(.5); }
  55%  { opacity: 1; transform: translateY(14px)  rotate(12deg)  scale(1.1); }
  72%  { transform: translateY(-6px) rotate(-6deg) scale(.98); }
  86%  { transform: translateY(3px)  rotate(3deg)  scale(1.02); }
  100% { opacity: 1; transform: none; }
}

/* EA'S EXCITED STATE — bigger and sillier than speaking. */
.is-excited .eBody, .is-excited .eWear { animation: exciteBounce .34s cubic-bezier(.3,1.7,.5,1) infinite alternate; }
.is-excited .eEarL   { animation: exciteEarL .19s ease-in-out infinite alternate; }
.is-excited .eEarR   { animation: exciteEarR .19s ease-in-out infinite alternate; }
.is-excited .eTrunkSway { animation: exciteTrunk .26s ease-in-out infinite alternate; }
.is-excited .eGlow   { animation: exciteGlow .34s ease-in-out infinite alternate; }
@keyframes exciteBounce { from { transform: translateY(4px)   scale(.99) rotate(-3.5deg); }
                          to   { transform: translateY(-34px) scale(1.1)  rotate(3.5deg); } }
@keyframes exciteEarL   { from { transform: rotate(-26deg); } to { transform: rotate(22deg); } }
@keyframes exciteEarR   { from { transform: rotate(26deg); }  to { transform: rotate(-22deg); } }
@keyframes exciteTrunk  { from { transform: rotate(-34deg); } to { transform: rotate(34deg); } }
@keyframes exciteGlow   { from { opacity: .5; transform: scale(.96); } to { opacity: 1; transform: scale(1.08); } }

/* sparkle burst around the head when the gift lands */
.ea-sparkle { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.ea-sparkle i {
  position: absolute; left: 50%; top: 40%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  background: var(--ea-accent-hi); border-radius: 3px; opacity: 0;
  box-shadow: 0 0 18px currentColor;
  animation: spark 1.15s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes spark {
  0%   { opacity: 0; transform: translate(0,0) rotate(0deg) scale(.3); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(320deg) scale(.35); }
}

/* the caption that names the ridiculous thing */
.ea-gift {
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  z-index: 4; text-align: center; pointer-events: none;
  max-width: 94%; width: max-content;
  padding: 7px 16px; border-radius: 14px;
  background: rgba(24,31,40,.9); border: 1px solid var(--ea-accent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
  animation: giftIn .5s cubic-bezier(.3,1.5,.5,1) both;
}
.ea-gift[hidden] { display: none !important; }
.ea-gift b { display: inline; font-size: .95rem; letter-spacing: .05em; color: var(--ea-accent-hi); }
.ea-gift span { display: inline; margin-left: 8px; font-size: .92rem; color: var(--ea-muted); }
@keyframes giftIn { from { opacity: 0; transform: translateX(-50%) translateY(18px) scale(.9); }
                    to   { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ea-acc.gifting, .ea-gift { animation: none; }
  .is-excited .eBody, .is-excited .eWear, .is-excited .eEarL, .is-excited .eEarR,
  .is-excited .eTrunkSway, .is-excited .eGlow { animation: none; }
  .ea-sparkle i { display: none; }
}

/* ============================================================
   PICTURES ON QUESTIONS AND OPTIONS
   Not a selection control — a picture, so options that mean
   different outcomes look different before they are read.
   ============================================================ */
.ea-opt-viz {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ea-glass-line);
  transition: background .16s, border-color .16s;
}
.ea-opt-viz svg { width: 21px; height: 21px; }
.ea-opt-t { flex: 1 1 auto; min-width: 0; }
.ea-opt.is-selected .ea-opt-viz {
  background: rgba(14,21,25,.16);
  border-color: rgba(14,21,25,.28);
}
.ea-opt.is-selected .ea-opt-viz svg { stroke: #0e1519; }

/* the question's own picture, riding inside the speech bubble */
.ea-say-viz {
  display: inline-grid; place-items: center; vertical-align: -6px;
  width: 28px; height: 28px; margin-right: 9px; border-radius: 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--ea-glass-line);
}
.ea-say-viz svg { width: 17px; height: 17px; }

/* ==========================================================================
   PHASE THREE — the billing screen, recreated inside an EA card.

   Ported from public/mockups/elephante-billing.html (READ only; that file is
   untouched). Class names are re-prefixed bd- deliberately: this stylesheet
   already records two MEASURED contrast failures caused by reusing another
   sheet's short class names, and the demo's `.here` collides with the walk.

   Two DELIBERATE deviations from the demo, both upward: the ALREADY DECIDED /
   NOT YET DECIDED kickers render at 10.88px in --ea-faint there, and the
   evidence labels at 13.44px. A walkthrough points straight at them, and
   13.6px text was rejected by name on this project. They are raised here.

   Breakpoints are driven by data-w, which a ResizeObserver sets from the
   MEASURED width of the piece — the card is 620px inside a wider window, so
   a viewport media query would flip the layout for the wrong reason.
   ========================================================================== */

.bd { margin: 2px 0 0; }
.bd-cap {
  margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ea-accent-hi);
}
.bd-stamp { margin: 4px 0 0; font-size: 1rem; color: var(--ea-faint); }
.bd-was { margin: 12px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ea-muted); }
.bd-now {
  margin: 8px 0 0; padding-left: 12px; border-left: 2px solid var(--ea-accent);
  font-size: 1.04rem; line-height: 1.5; color: var(--ea-ink);
}
.bd-piece { margin: 18px 0 0; }
.bd-cut { height: 1px; background: var(--ea-glass-line); margin: 22px 0 18px; }

/* the glass surface — .ea-card's recipe with the positioning stripped */
.bd-glass {
  position: relative; z-index: 1; border-radius: var(--ea-radius-lg);
  background: linear-gradient(rgba(20,26,34,.58), rgba(20,26,34,.58)), var(--ea-glass-bg);
  -webkit-backdrop-filter: blur(6px) saturate(135%); backdrop-filter: blur(6px) saturate(135%);
  border: 1px solid var(--ea-glass-line);
  box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
}
.bd-pad { padding: 16px; }

.bd-two { display: flex; flex-direction: column; gap: 18px; }
.bd[data-w="wide"] .bd-two {
  display: grid; grid-template-columns: 1.05fr .95fr; column-gap: 28px; align-items: start;
}

/* RAISED from the demo's .68rem/--ea-faint — the smallest, dimmest text on
   the page was the label carrying the whole argument. */
.bd-kick {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ea-muted); margin: 0 0 8px;
}
.bd-big {
  font-size: clamp(1.9rem, 7vw, 2.3rem); line-height: 1.1; font-weight: 700;
  color: #fff; letter-spacing: -.02em; margin: 0;
}
.bd-lead { font-size: 1.06rem; color: var(--ea-ink); opacity: .92; margin: 10px 0 0; line-height: 1.5; }
.bd-note { font-size: 1.02rem; color: var(--ea-muted); margin: 8px 0 0; line-height: 1.45; }

/* the quiet side: no card at all, so it can never read as a peer */
.bd-quiet { padding: 2px 0 0 14px; border-left: 1px solid var(--ea-glass-line); }
.bd-quiet .bd-big { font-size: clamp(1.45rem, 5.5vw, 1.75rem); color: var(--ea-muted); font-weight: 600; }
.bd-quiet .bd-lead { font-size: 1.02rem; opacity: .85; }
.bd-proj {
  margin: 12px 0 0; padding: 11px 13px; border-radius: 10px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid var(--ea-accent);
  font-size: 1.02rem; color: var(--ea-ink); line-height: 1.5;
}
.bd-proj b { color: var(--ea-accent-hi); font-weight: 700; }
.bd-never { font-size: 1.02rem; color: var(--ea-ink); opacity: .95; margin: 10px 0 0; font-weight: 600; }

.bd-tap {
  appearance: none; -webkit-appearance: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 16px;
  text-align: left; font-family: inherit; font-size: 16px; line-height: 1.35; font-weight: 600;
  color: var(--ea-ink); border: 1px solid var(--ea-glass-line); border-radius: var(--ea-radius);
  background: var(--ea-glass-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: border-color .16s, background .16s, transform .16s var(--ea-ease);
}
.bd-tap:hover { border-color: var(--ea-accent); background: var(--ea-glass-bg-hi); }
.bd-tap:active { transform: scale(.985); }
.bd-tap:focus-visible { outline: none; border-color: var(--ea-focus-line); box-shadow: 0 0 0 3px var(--ea-focus-ring); }
.bd-tap[disabled] { cursor: default; opacity: 1; }
.bd-tapt { flex: 1 1 auto; min-width: 0; }
.bd-tap.hi { border-color: var(--ea-accent); background: var(--ea-glass-bg-hi); color: #fff; }
.bd-glass .bd-tap { margin-top: 18px; }
.bd-flag { margin-top: 18px; }
.bd-flag .bd-tapt small {
  display: block; font-size: 1.02rem; font-weight: 400; color: var(--ea-muted); margin-top: 4px;
}

.bd-chev { flex: none; width: 10px; height: 10px; color: var(--ea-faint); transition: transform .35s var(--ea-ease), color .16s; }
.bd-tap:hover .bd-chev, .bd-row:hover .bd-chev { color: var(--ea-accent-hi); }
.bd-row[aria-expanded="true"] .bd-chev,
.bd-letter[open] summary .bd-chev { transform: rotate(90deg); color: var(--ea-accent-hi); }

/* the one table */
.bd-list {
  list-style: none; margin: 18px 0 0; padding: 0;
  border: 1px solid var(--ea-glass-line); border-radius: var(--ea-radius);
  background: var(--ea-glass-bg); overflow: hidden;
}
.bd-list li + li { border-top: 1px solid var(--ea-glass-line); }
.bd-row {
  appearance: none; -webkit-appearance: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 15px 16px;
  text-align: left; font-family: inherit; font-size: 16px; line-height: 1.4; font-weight: 500;
  color: var(--ea-ink); background: transparent; border: 0; transition: background .16s;
}
.bd-row:hover { background: var(--ea-glass-bg-hi); }
.bd-row:focus-visible { outline: none; background: var(--ea-glass-bg-hi); box-shadow: inset 0 0 0 2px var(--ea-focus-line); }
.bd-what { flex: 1 1 auto; min-width: 0; }
.bd-worth { flex: none; font-size: 1.06rem; font-weight: 700; color: #fff; white-space: nowrap; }
.bd-row[aria-expanded="true"] { background: var(--ea-glass-bg-hi); }
/* a row with nothing to open is a line, not an affordance */
.bd-row.is-flat { cursor: default; }
.bd-row.is-flat:hover { background: transparent; }
.bd-det {
  padding: 2px 16px 18px; border-top: 1px solid var(--ea-glass-line);
  background: rgba(255,255,255,.03); animation: bdDetUp .32s var(--ea-in) both;
}
@keyframes bdDetUp { from { transform: translateY(10px); opacity: 0 } to { transform: none; opacity: 1 } }
.bd-det p { margin: 13px 0 0; font-size: 1.02rem; color: var(--ea-ink); opacity: .92; line-height: 1.5; }
.bd-det p.bd-do { color: var(--ea-accent-hi); font-weight: 600; opacity: 1; }
.bd-why { margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.bd[data-w="mid"] .bd-why, .bd[data-w="wide"] .bd-why { grid-template-columns: 1fr 1fr; gap: 12px 22px; }
/* RAISED from the demo's .84rem — 13.44px is under the floor set on this project. */
.bd-why dt { font-size: 1rem; font-weight: 600; color: var(--ea-muted); line-height: 1.4; }
.bd-why dd { margin: 3px 0 0; font-size: 1rem; color: var(--ea-ink); line-height: 1.45; }

/* the surprise charge */
.bd-real {
  margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ea-accent-hi);
}
.bd-real + .bd-big { margin-top: 6px; }
.bd-bill { margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 13px; }
.bd[data-w="mid"] .bd-bill, .bd[data-w="wide"] .bd-bill { grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.bd-bill dt { font-size: 1rem; font-weight: 600; color: var(--ea-muted); line-height: 1.4; }
.bd-bill dd { margin: 3px 0 0; font-size: 1.06rem; color: #fff; font-weight: 600; line-height: 1.45; }

.bd-letter {
  margin: 20px 0 0; border: 1px solid var(--ea-glass-line); border-radius: var(--ea-radius);
  background: var(--ea-glass-bg); overflow: hidden;
}
.bd-letter summary {
  cursor: pointer; list-style: none; min-height: 56px; padding: 16px;
  font-size: 16px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 10px;
}
.bd-letter summary::-webkit-details-marker { display: none; }
.bd-letter summary span { flex: 1 1 auto; }
.bd-letter summary:hover { background: var(--ea-glass-bg-hi); }
.bd-letter summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ea-focus-line); }
.bd-letterbody { padding: 0 16px 18px; font-size: 1rem; color: var(--ea-ink); opacity: .92; line-height: 1.6; }
.bd-letterbody p { margin: 0 0 13px; }
.bd-letterbody p:last-child { margin-bottom: 0; }
.bd-letterbody b { color: #fff; }
.bd-letterbody ul { margin: 0 0 13px; padding-left: 20px; }
.bd-letterbody li { margin: 0 0 6px; }

/* the whole screen, for the free run at the end */
.bd-sh { display: block; }
.bd-bar { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bd-back {
  appearance: none; -webkit-appearance: none; cursor: pointer; order: -1;
  background: var(--ea-glass-bg); border: 1px solid var(--ea-glass-line);
  border-radius: 999px; color: var(--ea-ink); font-family: inherit; font-size: 15px;
  font-weight: 600; padding: 8px 14px; min-height: 40px;
}
.bd-back:hover { border-color: var(--ea-accent); background: var(--ea-glass-bg-hi); }
.bd-wm { font-size: 1.24rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.bd-wmsub { font-size: 1rem; color: var(--ea-muted); }
.bd-sh:not([data-view="home"]) .bd-wmsub { display: none; }
.bd-here {
  margin: 12px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--ea-accent);
  font-size: 1.02rem; line-height: 1.4; color: var(--ea-muted); font-weight: 500;
}
.bd-here b { color: #fff; font-weight: 700; }
.bd-say { padding: 16px 0 0; }
.bd-say p {
  margin: 0; font-size: 1.04rem; font-weight: 500; line-height: 1.4; color: #fff;
  padding: 12px 15px; border-radius: 20px 20px 20px 6px;
  background: var(--ea-glass-bg); border: 1px solid var(--ea-glass-line);
  box-shadow: 0 10px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
}
.bd-say p.bd-sayin { animation: bdSayIn .5s var(--ea-ease) both; }
@keyframes bdSayIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.bd-view { padding-top: 16px; }
.bd-foot { padding: 22px 0 0; display: flex; flex-direction: column; gap: 8px; }
.bd-rule { font-size: 1.02rem; color: var(--ea-ink); opacity: .9; margin: 0; line-height: 1.5; }
.bd-fine { font-size: 1rem; color: var(--ea-muted); margin: 0; line-height: 1.5; }

/* phase three's option labels carry their cost in the label, so they never
   go two-up however wide the card gets */
.ea-card .bd ~ .ea-opts { grid-template-columns: 1fr; }

@media (prefers-reduced-motion: reduce) {
  .bd-det, .bd-say p.bd-sayin { animation: none; }
}

/* ============================================================
   THE END REPORT — "more concise and more visually appealing".
   One headline, three things, everything else one tap away.
   Nothing here is new palette: every value is a --ea-* token.
   The card must never grow and never scroll, so the two things
   that could grow it (the rest of his answers, and the "this
   missed something" note) swap the body instead of appending
   to it.
   ============================================================ */
.rp-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; }
.rp-tick {
  width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--ea-glass-bg-hi); border: 1px solid var(--ea-accent); margin-top: 3px;
  animation: checkIn .6s cubic-bezier(.34,1.4,.5,1) both;
}
.rp-tick svg { width: 17px; height: 17px; display: block; fill: none; stroke: var(--ea-accent-hi); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rp-tick path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .5s .3s ease-out forwards; }
.rp-headtext { min-width: 0; }
.rp-stamp {
  margin: 0 0 3px; font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ea-faint);
}
.rp-h1 { margin: 0; font-size: 1.42rem; line-height: 1.24; font-weight: 700; color: #fff; letter-spacing: -.015em;
         display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.rp-three { list-style: none; margin: 0 0 10px; padding: 0; border: 1px solid var(--ea-glass-line); border-radius: var(--ea-radius); overflow: hidden; background: var(--ea-glass-bg); }
.rp-three li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 9px 14px 9px 16px; animation: rpUp .46s var(--ea-ease) both; }
.rp-three li + li { border-top: 1px solid var(--ea-glass-line); }
.rp-three li::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--ea-accent-hi), var(--ea-accent));
  transform: scaleY(0); transform-origin: top; animation: rpLight .5s var(--ea-ease) both;
}
.rp-three li:nth-child(1), .rp-three li:nth-child(1)::before { animation-delay: .24s; }
.rp-three li:nth-child(2), .rp-three li:nth-child(2)::before { animation-delay: .33s; }
.rp-three li:nth-child(3), .rp-three li:nth-child(3)::before { animation-delay: .42s; }
@keyframes rpUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rpLight { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.rp-n { font-size: .78rem; font-weight: 700; letter-spacing: .05em; color: var(--ea-accent); padding-top: 3px; font-variant-numeric: tabular-nums; }
.rp-lab { margin: 0 0 2px; font-size: 1.02rem; font-weight: 650; color: #fff; line-height: 1.3; letter-spacing: -.01em; }
.rp-v { margin: 0; font-size: .95rem; color: var(--ea-muted); line-height: 1.4;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.rp-more {
  appearance: none; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 10px;
  font: inherit; font-size: .95rem; text-align: left; color: var(--ea-muted);
  padding: 10px 14px; border-radius: var(--ea-radius);
  background: var(--ea-glass-bg); border: 1px solid var(--ea-glass-line);
  animation: rpUp .46s var(--ea-ease) .5s both;
}
.rp-more:hover { background: var(--ea-glass-bg-hi); border-color: var(--ea-glass-line-hi); color: #fff; }
.rp-more:focus-visible { outline: none; border-color: var(--ea-focus-line); box-shadow: 0 0 0 3px var(--ea-focus-ring); }
.rp-more > span:first-child { flex: 1 1 auto; min-width: 0; }
.rp-count { flex: none; font-size: .84rem; font-weight: 700; color: var(--ea-accent); }
.rp-chev { flex: none; font-size: 1.1rem; color: var(--ea-faint); line-height: 1; }

.rp-next {
  display: flex; align-items: flex-start; gap: 12px; margin: 10px 0 0;
  padding: 10px 14px; border-radius: var(--ea-radius);
  background: rgba(143,180,201,.07); border: 1px solid var(--ea-glass-line);
  animation: rpUp .46s var(--ea-ease) .56s both;
}
.rp-next b { flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ea-accent-hi); padding-top: 3px; }
.rp-next span { font-size: .93rem; color: var(--ea-muted); line-height: 1.45; }

.rp-row { animation: rpUp .46s var(--ea-ease) .62s both; }

/* Anything that would otherwise make the card taller opens over it instead. */
.rp-sheet {
  position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column;
  border-radius: var(--ea-radius-lg); padding: 16px;
  background: rgb(18, 24, 31);
  animation: rpUp .3s var(--ea-ease) both;
}
.rp-sheet[hidden] { display: none !important; }
.rp-sheet-h { margin: 0 0 10px; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ea-faint); }
.rp-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.rp-list { list-style: none; margin: 0; padding: 0; }
.rp-list li { padding: 9px 0; }
.rp-list li + li { border-top: 1px solid var(--ea-glass-line); }
.rp-list b { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ea-accent); margin-bottom: 3px; }
.rp-list span { display: block; font-size: .98rem; color: var(--ea-ink); opacity: .92; line-height: 1.45; }
.rp-sheet .ea-row { margin-top: 12px; }
@media (min-width: 1000px) {
  .rp-h1 { font-size: 1.66rem; }
  .rp-sheet { padding: 24px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-three li, .rp-three li::before, .rp-more, .rp-next, .rp-row, .rp-tick, .rp-sheet { animation: none; }
  .rp-three li::before { transform: scaleY(1); }
  .rp-tick path { stroke-dashoffset: 0; }
}

/* ============================================================
   THE SPACE SKY — v0.9.
   The block below, down to the reduced-motion rule, is Astra's
   space-bg.css verbatim (Astra, GPT-6 — authored alongside
   eyes.js and space-bg.js). Everything after the marked line is
   Claude's integration glue: the Blender plates (also Astra's,
   rendered from space-scene.blend and compressed per Astra's
   WebP plan) layered into Astra's host, and the app lifted
   above the fixed sky.
   ============================================================ */
/* Dedicated fixed background; put the app above it (see INTEGRATION.md). */
.elephante-space {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  contain: strict;
  background: #030711;
  background:
    radial-gradient(ellipse at 76% 25%, rgba(45, 69, 115, .23), transparent 58%),
    radial-gradient(ellipse at 25% 69%, rgba(69, 44, 94, .16), transparent 48%),
    radial-gradient(ellipse at 52% 52%, rgba(29, 57, 72, .17), transparent 62%),
    linear-gradient(145deg, #030711, #080c1b 52%, #03060e);
}
.elephante-space__stars {
  position: absolute;
  top: -24px;
  left: -24px;
  pointer-events: none;
}
.elephante-space::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 25%, rgba(0, 2, 9, .45) 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .elephante-space__stars { transform: none !important; }
}

/* ---- Claude's glue starts here ---------------------------------- */
/* Astra's Blender nebula rides the same host, under the star canvases. */
.elephante-space--plated {
  background:
    url("/space/nebula-far.webp") center / cover no-repeat,
    linear-gradient(145deg, #030711, #080c1b 52%, #03060e);
}
.elephante-space__plate {
  position: absolute;
  inset: -24px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}
.elephante-space__plate--mid  { background-image: url("/space/stars-mid.webp");  opacity: .85; }
.elephante-space__plate--near { background-image: url("/space/stars-near.webp"); }
@media (prefers-reduced-motion: reduce) {
  .elephante-space__plate { transform: none !important; }
}
.elephante-app { position: relative; z-index: 1; }

/* ---- the thinking-impact line (formatter by Astra, placement by Claude) */
.elephante-thinking-impact {
  margin: 6px auto 0;
  max-width: 42ch;
  font-size: .875rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-align: center;
  color: var(--ea-ink);
  opacity: .75;
}
.elephante-thinking-impact[hidden] { display: none !important; }

/* ---- the home screen (F10) — every exit lands here, never a dead end */
[data-view="home"] .ea-composer { display: none; }
[data-view="home"] .ea-left  { min-height: 0; margin: 0; opacity: 0; }
[data-view="home"] .ea-dots  { min-height: 0; padding: 0; opacity: 0; }
[data-view="home"] .ea-stage { min-height: 120px; flex: 0 1 auto; }
.ea-home-note { font-size: .875rem; opacity: .72; margin: 10px 0 2px; }