/* Edu hosts the conversation (assets/host.js): each answer opens with Edu's face and its line,
   every card arrives with an entrance of its own, the next ideas sit on a card Edu holds up, and
   a tapped idea flies into the conversation.

   Tokens only. Orange is a line, a word or an icon, never a fill or a glow. Transforms and opacity
   (and a stroke drawn on a 24px icon); every entrance runs once, as the element is first added, and
   under reduced motion everything is simply there (styles.css ends every animation at once). */

/* --- the answer row: Edu's face, its line, then the answer ------------------------------------- */
.msg-bot {
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-areas: "face host" "face body";
  column-gap: 14px; row-gap: 12px; align-items: start; align-content: start; /* a new turn's room stays below it */
}
/* Wide screens: the face travels down beside the answer as you read it (it never leaves its column).
   A sticky offset counts from inside the thread's 32px top padding: -16px holds it 16px below the edge. */
.msg-bot > .mascot.msg-avatar { grid-area: face; position: sticky; top: -16px; z-index: 1; margin-top: 0; }
.msg-bot > .msg-host { grid-area: host; }
.msg-bot > .msg-body { grid-area: body; }

/* Edu's line: a small speech bubble whose tail points at the face. It keeps its room from the start,
   so nothing moves when it appears with the first words. */
.msg-host {
  position: relative; justify-self: start; align-self: center; max-width: 100%;
  display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 6px 13px 7px;
  border-radius: 15px; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--heading); font: 500 13.5px/1.35 var(--font-sans); letter-spacing: -0.003em;
  opacity: 0; transform-origin: 0 50%;
}
.msg-host::before {
  content: ""; position: absolute; left: -5px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
  background: inherit; border: inherit; border-top: 0; border-right: 0; border-radius: 0 0 0 3px; transform: rotate(45deg);
}
.msg-host.is-on { opacity: 1; animation: host-say 0.55s cubic-bezier(0.3, 1.45, 0.55, 1) backwards; }
.msg-host.is-sad { color: var(--muted); }
:root[data-theme="light"] .msg-host { background: var(--sunken); }
@keyframes host-say { from { opacity: 0; transform: translateX(-8px) scale(0.6); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }

/* thinking shows on the face itself (its cloud sits where the line will appear) */
.msg-avatar .m-think { z-index: 2; }

/* Earlier turns skip layout and paint while off screen; their size is remembered once seen. */
.msg-bot.is-past { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* --- each card arrives in its own way --------------------------------------------------------------- */
@keyframes xb-fade { from { opacity: 0; } }
@keyframes xb-rise { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
@keyframes xb-slide { from { opacity: 0; transform: translateX(-12px); } }
@keyframes xb-words { from { opacity: 0; transform: translateY(6px); } }
@keyframes xb-step { from { opacity: 0; transform: translateX(-8px); } }
@keyframes xb-draw-y { from { transform: scaleY(0); } }
@keyframes xb-draw-x { from { transform: scaleX(0); } }
@keyframes xb-ink { from { opacity: 0; transform: scaleX(0); } }
@keyframes xb-pop { 0% { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; transform: scale(1.14); } 100% { opacity: 1; transform: none; } }
@keyframes xb-pop-node { from { opacity: 0; transform: scale(0.82); } }
@keyframes xb-pop-scale { from { opacity: 0; scale: 0.6; } }
@keyframes xb-star { from { opacity: 0; transform: rotate(-110deg) scale(0.2); } 70% { opacity: 1; transform: rotate(12deg) scale(1.15); } to { transform: none; } }
@keyframes xb-nudge { 0%, 100% { transform: none; } 18% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 62% { transform: translateX(-1.5px); } 82% { transform: translateX(0.8px); } }
@keyframes xb-wobble { 0%, 100% { transform: none; } 25% { transform: rotate(-12deg); } 55% { transform: rotate(9deg); } 80% { transform: rotate(-4deg); } }
@keyframes xb-math { from { opacity: 0; transform: scale(0.94); } }
@keyframes xb-spin-in { from { opacity: 0; transform: rotate(-70deg) scale(0.9); } }

.answer > .xb-enter { animation: xb-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.answer > .xb-md.xb-enter { animation: xb-words 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
/* the label icons pop in; the tick of "In short" is drawn */
.answer > .xb-enter .xb-label svg { animation: xb-pop 0.5s 0.12s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; }
.answer > .xb-answer.xb-enter .xb-label svg { animation: none; }
.answer > .xb-answer.xb-enter .xb-label svg { transform-origin: left center; animation: xb-ink 0.55s 0.2s cubic-bezier(0.5, 0, 0.3, 1) backwards; }

/* Picture this: the orange rule is drawn down the side, then the words appear */
.xb-hook { border-left: 0; }
.xb-hook::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; border-radius: 2px;
  background: var(--brand); transform-origin: 50% 0;
}
.answer > .xb-hook.xb-enter { animation: xb-fade 0.3s ease-out backwards; }
.xb-hook.xb-enter::before { animation: xb-draw-y 0.75s cubic-bezier(0.6, 0, 0.2, 1) backwards; }
.xb-hook.xb-enter .xb-body { animation: xb-words 0.6s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }

/* Step by step: every step slides in as it is written, its number pops, and the thread to the
   next step is drawn down when that step arrives */
.answer > .xb-steps.xb-enter { animation: xb-fade 0.3s ease-out backwards; }
.answer .xb-steplist > li { animation: xb-step 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.answer .xb-steplist > li > .xb-n { animation: xb-pop 0.55s 0.05s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; }
.answer .xb-steplist > li:not(:last-child)::before { transform-origin: 50% 0; animation: xb-draw-y 0.55s 0.1s cubic-bezier(0.6, 0, 0.2, 1) backwards; }

/* The formula: written out dimmed, then it settles in as real maths */
.xb-formula.xb-open .xb-formula-main { opacity: 0.45; }
.xb-formula.is-typeset .xb-formula-main { animation: xb-math 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.answer .xb-symbols > div { animation: xb-step 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }

/* See it: each stage pops in and the arrow to it is drawn */
.answer .xb-flow > .xb-node, .answer .xb-hop > .xb-node { animation: xb-pop-node 0.5s 0.12s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; }
.answer .xb-hop > .xb-arrow { transform-origin: 0 50%; animation: xb-draw-x 0.4s cubic-bezier(0.6, 0, 0.2, 1) backwards; }
.answer .xb-cycle > svg { animation: xb-spin-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.answer .xb-cycle > .xb-node { animation: xb-pop-scale 0.5s 0.2s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; }

/* For example: slides in from the side */
.answer > .xb-example.xb-enter { animation: xb-slide 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }

/* Watch out: the amber rule is drawn, the card gives a small "careful!" nudge, the sign wobbles */
.xb-trap::before { transform-origin: 50% 0; }
.answer > .xb-trap.xb-enter { animation: xb-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards, xb-nudge 0.5s 0.55s ease-in-out forwards; }
.xb-trap.xb-enter::before { animation: xb-draw-y 0.6s 0.1s cubic-bezier(0.6, 0, 0.2, 1) backwards; }
.answer > .xb-trap.xb-enter .xb-label svg { transform-origin: 50% 70%; animation: xb-wobble 0.6s 0.55s ease-in-out backwards; }

/* Remember this: the orange line is drawn across the top and the star spins in */
.xb-key::before { transform-origin: 0 50%; }
.xb-key.xb-enter::before { animation: xb-draw-x 0.65s 0.25s cubic-bezier(0.6, 0, 0.2, 1) backwards; }
.answer > .xb-key.xb-enter .xb-label svg { animation: none; }
.answer > .xb-key.xb-enter .xb-label svg path { transform-box: fill-box; transform-origin: 50% 50%; animation: xb-star 0.8s 0.3s cubic-bezier(0.3, 1.4, 0.5, 1) backwards; }

@media (max-width: 600px) {
  .answer .xb-hop > .xb-arrow { transform-origin: 50% 0; animation-name: xb-draw-y; }
}

/* --- explain it differently: asking Edu to try again, another way ---------------------------------- */
.modes-label { display: flex; align-items: center; gap: 9px; color: var(--faint); }
.modes-mark {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 8px; box-sizing: border-box;
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--brand-ink);
}
.modes-mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.modes.is-picked .modes-mark svg { animation: mode-spin 0.6s cubic-bezier(0.3, 1.2, 0.5, 1) backwards; }
@keyframes mode-spin { from { transform: rotate(-200deg); } }
.modes-label::after {
  content: "Ask Edu to try another way"; margin-left: auto; font-size: 12px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--faint);
}
.mode-btn { transition: background-color 0.15s ease, color 0.15s ease, opacity 0.2s ease; }
.mode-btn::before { transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
@media (hover: hover) and (pointer: fine) {
  .mode-btn:hover::before { transform: scale(1.15) rotate(-6deg); }
}
.modes.is-picked .mode-btn:not(.is-chosen) { opacity: 0.45; }
.mode-btn.is-chosen { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--brand); }
.mode-btn.is-chosen::before { animation: mode-go 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; }
@keyframes mode-go { 0% { transform: none; } 40% { transform: scale(1.35) rotate(-12deg); } 100% { transform: none; } }
@media (max-width: 600px) {
  .modes-label::after { content: "Ask Edu another way"; }
}

/* --- the next ideas: a card Edu sits on, holding up what to try next ------------------------------ */
.ideas { --card: var(--surface); --tile: var(--sunken); --row-hover: var(--surface-2); position: relative; }
:root[data-theme="light"] .ideas { --card: var(--sunken); --tile: var(--surface); --row-hover: var(--surface); }
.msg-body > .followups.ideas { margin-top: 0; }
/* (styles.css styled the old follow-ups as a wrapping row of pills, two at most on small phones) */
.ideas .ideas-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; flex-wrap: nowrap; justify-content: normal; }
.followups.ideas .ideas-list > li:nth-child(n+3) { display: block; }

/* the room above the card: Edu's line, then Edu itself sitting on the card's top edge */
.ideas-stage {
  position: relative; display: flex; justify-content: flex-end; align-items: flex-start;
  height: 58px; padding: 13px 92px 0 0;
}
.ideas-perch { position: absolute; z-index: 2; right: 16px; bottom: -13px; width: 64px; line-height: 0; }
/* Edu ducks behind the card's edge when it goes back to the chat box */
.ideas-perch .mascot .m-clip, .dock-perch .mascot .m-clip { clip-path: inset(-170% -95% 0 -95%); }
.ideas-say {
  position: relative; margin: 0; max-width: 100%; padding: 7px 13px 8px; border-radius: 15px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--heading);
  font: 500 13.5px/1.35 var(--font-sans); letter-spacing: -0.003em; transform-origin: 100% 50%;
  animation: host-say-r 0.5s 0.3s cubic-bezier(0.3, 1.45, 0.55, 1) backwards;
}
.ideas-say::after {
  content: ""; position: absolute; right: -5px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
  background: inherit; border: inherit; border-left: 0; border-bottom: 0; border-radius: 0 3px 0 0; transform: rotate(45deg);
}
/* a new line pops in again (another keyframes name, so the browser restarts it every time) */
.ideas-say.is-new { animation: host-say-r2 0.45s cubic-bezier(0.3, 1.45, 0.55, 1) backwards; }
.ideas-say.is-cheer { box-shadow: inset 0 0 0 1px var(--ok); }
.ideas-say.is-sad { color: var(--muted); }
:root[data-theme="light"] .ideas-say { background: var(--sunken); box-shadow: var(--shadow-1); }
:root[data-theme="light"] .ideas-say.is-cheer { box-shadow: inset 0 0 0 1px var(--ok), var(--shadow-1); }
@keyframes host-say-r { from { opacity: 0; transform: translateX(8px) scale(0.6); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes host-say-r2 { from { opacity: 0; transform: translateX(8px) scale(0.6); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }

/* the card */
.ideas .ideas-list {
  list-style: none; margin: 0; padding: 14px 6px 6px; border-radius: 22px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.ideas-list > li { position: relative; min-width: 0; animation: xb-rise 0.5s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.ideas-list > li:nth-child(2) { animation-delay: 0.2s; }
.ideas-list > li:nth-child(3) { animation-delay: 0.28s; }
.ideas-list > li:nth-child(4) { animation-delay: 0.36s; }
.ideas-list > li + li::before { content: ""; position: absolute; left: 62px; right: 14px; top: 0; height: 1px; background: var(--line); }
.ideas .idea {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; align-items: center; column-gap: 13px;
  width: 100%; max-width: none; min-height: 62px; padding: 10px 12px; border: 0; border-radius: 15px;
  background: transparent; color: var(--heading); text-align: left; font-size: 15px; line-height: 1.35;
  transition: background-color 0.15s ease, opacity 0.2s ease, transform 0.15s ease;
}
.ideas .idea svg { width: auto; height: auto; color: inherit; }
.idea-glyph {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--tile); color: var(--brand-ink);
  transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.ideas .idea-glyph svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.idea-q { display: block; min-width: 0; font-weight: 500; color: var(--heading); overflow-wrap: anywhere; }
.idea-q::before {
  content: attr(data-intent); display: block; margin-bottom: 3px;
  font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand-ink);
}
.idea-go { display: grid; place-items: center; color: var(--faint); transition: transform 0.25s ease, color 0.2s ease; }
.ideas .idea-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ideas .idea:active { transform: scale(0.985); background: var(--row-hover); }
@media (hover: hover) and (pointer: fine) {
  .ideas .idea:hover { background: var(--row-hover); }
  .ideas .idea:hover .idea-glyph { transform: translateY(-2px) rotate(-4deg); }
  .ideas .idea:hover .idea-go { transform: translateX(3px); color: var(--brand-ink); }
}
/* picked: the others step back, the words lift off (and fly into the conversation) */
.ideas.is-picked .idea:not(.is-chosen) { opacity: 0.4; }
.ideas .idea.is-chosen { background: var(--row-hover); }
.idea.is-chosen .idea-glyph { transform: scale(1.12) rotate(-6deg); }
.idea.is-chosen .idea-go { transform: translateX(4px); color: var(--brand-ink); }

/* the other ideas and Edu's line melt away; the chosen one stays until its words lift off */
.ideas.is-leaving .ideas-list > li:not(.is-chosen), .ideas.is-leaving .ideas-say { opacity: 0; transition: opacity 0.12s ease-in; }

/* an empty chat: the first ideas, Edu peeking over their card with its paws on the edge */
.empty .ideas { margin: 30px auto 0; max-width: 540px; text-align: left; }
.empty .ideas .ideas-say { margin: 0; max-width: 100%; color: var(--heading); }
.ideas--peek .ideas-stage { height: 52px; padding: 8px 126px 0 0; }
.ideas--peek .ideas-perch { bottom: 0; right: 14px; width: 104px; }
.ideas .suggest { margin-top: 0; }

/* wide screens: the ideas side by side, each a little card of its own */
@media (min-width: 768px) {
  .ideas-stage { height: 73px; padding: 19px 112px 0 0; }
  .ideas-perch { right: 24px; bottom: -16px; width: 80px; }
  .ideas .ideas-list { padding: 16px 8px 8px; }
  .ideas.followups[data-count="2"] .ideas-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ideas.followups[data-count="3"] .ideas-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ideas.followups:is([data-count="2"], [data-count="3"]) .idea {
    grid-template-columns: minmax(0, 1fr) 18px; grid-template-rows: auto 1fr; align-items: start;
    row-gap: 12px; height: 100%; min-height: 124px; padding: 14px 14px 16px;
  }
  .ideas.followups:is([data-count="2"], [data-count="3"]) .idea-glyph { grid-column: 1; grid-row: 1; }
  .ideas.followups:is([data-count="2"], [data-count="3"]) .idea-go { grid-column: 2; grid-row: 1; align-self: center; }
  .ideas.followups:is([data-count="2"], [data-count="3"]) .idea-q { grid-column: 1 / -1; grid-row: 2; }
  .ideas.followups:is([data-count="2"], [data-count="3"]) .ideas-list > li + li::before { left: 0; right: auto; top: 18px; bottom: 18px; width: 1px; height: auto; }
}

/* --- the class board: Edu holds it up, peeking over its top edge (host.js board()) ---------------
   Edu stands behind the board with its paws on the frame's top edge, in the room kept above it
   (styles.css .cv-stage), so it never covers the screen; its lines go in a bubble beside it, where
   the card's label steps aside for them. */
.cv-perch { position: absolute; z-index: 2; right: 14px; bottom: calc(100% - 3px); width: 84px; line-height: 0; }
.cv-perch .mascot .m-clip { clip-path: inset(-170% -95% 0 -95%); }
/* watching the class: even the slow breath rests (blinks and its small reactions still show) */
.cv-perch .mascot.mascot--peek.is-glued .m-mood { animation: none; }
.cv-say {
  position: absolute; z-index: 1; right: 114px; bottom: 7px; max-width: calc(100% - 120px); /* clear of Edu's cheer */ margin: 0;
  padding: 6px 12px 7px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); color: var(--heading);
  font: 500 13px/1.35 var(--font-sans); letter-spacing: -0.003em; transform-origin: 100% 50%;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.cv-say::after {
  content: ""; position: absolute; right: -5px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
  background: inherit; border: inherit; border-left: 0; border-bottom: 0; border-radius: 0 3px 0 0; transform: rotate(45deg);
}
.class-card.is-saying .cv-say { opacity: 1; visibility: visible; }
.class-card.is-saying .cv-say.is-new { animation: host-say-r2 0.45s cubic-bezier(0.3, 1.45, 0.55, 1) backwards; }
.class-card.is-saying .class-label { opacity: 0; }
.cv-say.is-cheer { box-shadow: inset 0 0 0 1px var(--ok); }
:root[data-theme="light"] .cv-say { background: var(--sunken); box-shadow: var(--shadow-1); }
:root[data-theme="light"] .cv-say.is-cheer { box-shadow: inset 0 0 0 1px var(--ok), var(--shadow-1); }
@media (max-width: 380px) {
  .cv-perch { right: 10px; width: 74px; }
  .cv-say { right: 98px; max-width: calc(100% - 104px); }
}
@media (min-width: 560px) {
  .cv-perch { right: 18px; width: 108px; }
  .cv-say { right: 144px; bottom: 10px; max-width: calc(100% - 150px); font-size: 13.5px; }
}

/* --- the question that flies into the conversation -------------------------------------------- */
.q-fly {
  position: fixed; z-index: 58; margin: 0; max-width: none; box-sizing: border-box;
  transform-origin: 0 0; pointer-events: none; animation: none; will-change: transform, opacity;
  box-shadow: var(--shadow-1);
}
.msg-user.is-arriving { opacity: 0; }
.msg-user.is-flown { animation: none; }

/* --- the quiz: a real exam question, in the same family as the practice card -------------------- */
.quiz-head .eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.quiz-mark {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; box-sizing: border-box;
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--brand-ink);
}
.quiz-mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.quiz-head small { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); }
.quiz-card { animation: xb-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
:root[data-theme="light"] .quiz-card { background: var(--sunken); box-shadow: var(--shadow-1); }
:root[data-theme="light"] .quiz-options button:not(.right, .wrong) { background: var(--surface); }
.quiz-options button { position: relative; min-height: 52px; animation: xb-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.quiz-options button:nth-child(1) { animation-delay: 0.1s; }
.quiz-options button:nth-child(2) { animation-delay: 0.16s; }
.quiz-options button:nth-child(3) { animation-delay: 0.22s; }
.quiz-options button:nth-child(4) { animation-delay: 0.28s; }
.quiz-options button:nth-child(5) { animation-delay: 0.34s; }
@media (min-width: 600px) { .quiz-options.is-short { grid-template-columns: 1fr 1fr; } }
.quiz-options .math { flex: 1; min-width: 0; }
.quiz-tick { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; opacity: 0; transform: scale(0.3); background: var(--ok); }
.quiz-tick::after {
  content: ""; position: absolute; inset: 4px; background: var(--bg);
  -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.quiz-options button.right .quiz-tick { opacity: 1; transform: none; transition: transform 0.45s 0.1s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.2s 0.1s; }
/* a wrong pick: a red hairline and badge, never a red-brown wash on the tile */
.quiz-options button.wrong { background: var(--surface-2); border-color: var(--danger); }
:root[data-theme="light"] .quiz-options button.wrong { background: var(--surface); }
.quiz-card.is-right .quiz-options button.right { animation: quiz-yes 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; }
.quiz-card.is-wrong .quiz-options button.wrong { animation: quiz-no 0.5s ease-in-out backwards; }
.quiz-card.is-wrong .quiz-options button.right { animation: quiz-yes 0.6s 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; }
@keyframes quiz-yes { 0% { transform: none; } 35% { transform: scale(1.025); } 100% { transform: none; } }
@keyframes quiz-no { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
.quiz-result { display: flex; align-items: flex-start; gap: 9px; animation: xb-words 0.45s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.quiz-result::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: var(--brand-ink);
  -webkit-mask: var(--res) center / contain no-repeat; mask: var(--res) center / contain no-repeat;
  --res: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9V16h7v-2.1A6 6 0 0 0 12 3Z'/%3E%3Cpath d='M9.5 19.5h5M10.5 22h3'/%3E%3C/svg%3E");
}
.quiz-card.is-right .quiz-result::before {
  background: var(--ok);
  --res: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* --- copy and feedback: a little press, and Edu answers on the ideas card --------------------- */
.mini-btn svg { transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
.mini-btn:active svg { transform: scale(0.85); }
.mini-btn[aria-pressed="true"] svg { animation: mini-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) backwards; }
@keyframes mini-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.25) rotate(-8deg); } 100% { transform: none; } }

/* --- phones ------------------------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Edu on the chat box shows its whole face over the edge (it reacts and listens from there), and
     the thread's see-through band under it grows to match, so no line ever runs under it. */
  .dock-perch { bottom: calc(100% - 15px); }
  .thread { --edu-band: 34px; }
  .msg-bot { grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "face host" "body body"; column-gap: 10px; row-gap: 12px; }
  .msg-bot > .mascot.msg-avatar { width: 32px; height: 32px; position: relative; top: 0; align-self: center; }
  .ideas .idea { min-height: 60px; }
}
@media (max-width: 380px) {
  .modes-label::after { content: none; } /* the label alone says it on the narrowest phones */
  .ideas-stage { padding-right: 86px; }
  .ideas-perch { right: 12px; width: 60px; bottom: -12px; }
  .ideas .idea { grid-template-columns: 34px minmax(0, 1fr) 14px; column-gap: 11px; padding: 10px 10px; }
  .idea-glyph { width: 34px; height: 34px; }
  .ideas-list > li + li::before { left: 56px; }
}

/* --- reduced motion: Edu is simply where it should be (no duck or pop), every card simply there ---- */
@media (prefers-reduced-motion: reduce) {
  .dock-perch .mascot.is-dipped .m-dip, .ideas-perch .mascot.is-dipped .m-dip, .cv-perch .mascot.is-dipped .m-dip { opacity: 0; }
  .class-card.is-saying .cv-say.is-new { animation: none; }
}

/* --- round 7 grafts ------------------------------------------------------------------------------ */
/* Edu's pick: a short brand hairline on its top edge and a ring on its glyph (study-path) */
.ideas .idea.is-pick { position: relative; }
.ideas .idea.is-pick::after { content: ""; position: absolute; left: 14px; top: -1px; width: 28px; height: 2px; border-radius: 1px; background: var(--brand); }
.ideas .idea.is-pick .idea-glyph { box-shadow: 0 0 0 1px var(--brand); }
/* Phones: copy and feedback reach 44px tap targets without moving the icons (ship judge) */
@media (max-width: 767px) { .msg-tools .mini-btn, .mini-btn { width: 44px; height: 44px; } }
/* Touch presses wait a beat so a swipe never flashes a row (calm-premium) */
@media (hover: none) { .ideas .idea:active { transition-delay: 70ms; } }