/* Level check. Built on the app's own tokens and lesson frame (styles/app.css): flat paper, navy type, one vermilion
   accent, the sky blue for Maya's bubbles. Nothing here introduces a colour the app does not have. */

.cefr { --bubble: var(--sky); }
.cefr .lesson-body { display: flex; flex-direction: column; }
.cefr .lesson-body > section { flex: 1; display: flex; flex-direction: column; outline: none; }
.cefr .topbar { min-height: 56px; }
.cefr .progress-wrap { padding-right: 0.25rem; }
.cefr .actionbar { background: transparent; border-top: 0; }

/* progress: the app's rope. Thin and dashed ahead, accent behind, and a traveller that carries the confidence number. */
.cefr-rope-box { display: grid; gap: 1px; }
.cefr-rope-label { font: italic 500 0.9rem/1.2 var(--font-display); color: var(--muted); padding-left: 0.1rem; }
.cefr-rope { --pct: 0%; position: relative; height: 26px; }
.cefr-rope-track, .cefr-rope-walked { position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.cefr-rope-track { right: 0; opacity: .4; background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 9px); }
.cefr-rope-walked { width: var(--pct); background: repeating-linear-gradient(90deg, var(--primary) 0 5px, transparent 5px 9px); transition: width .7s var(--ease); }
.cefr-rope-traveller {
  position: absolute; top: 50%; left: var(--pct); transform: translate(calc(var(--pct) * -1), -50%);
  min-width: 2.6rem; padding: 0.15rem 0.5rem; border-radius: 999px; text-align: center;
  background: var(--primary); color: var(--primary-ink); font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums;
  transition: left .7s var(--ease), transform .7s var(--ease), background .4s;
}
.cefr-rope.is-sure .cefr-rope-traveller { background: var(--ok); color: #fff; }
:root[data-theme="dark"] .cefr-rope.is-sure .cefr-rope-traveller { color: #0e2316; }
.cefr-rope.is-pull .cefr-rope-traveller { animation: cefr-hop .5s var(--ease); }
.cefr-rope.is-pull .cefr-rope-walked { animation: cefr-pull .7s var(--ease); }
@keyframes cefr-hop { 40% { margin-top: -7px; } }
@keyframes cefr-pull { from { opacity: .45; } to { opacity: 1; } }

.cefr-note { margin: auto; text-align: center; color: var(--muted); }

/* the two opening slides: art on top, words under it, dots last */
.cefr-slide { gap: 1.25rem; padding: 0.5rem 0 1.5rem; }
.cefr-art { flex: 1; display: grid; place-items: center; align-content: center; gap: 1.25rem; min-height: 0; }
.cefr-guide .avatar { width: 112px; height: 112px; font-size: 2rem; border-width: 3px; box-shadow: 0 0 0 8px var(--accent-soft); }
.cefr-art-rope { width: min(100%, 320px); height: auto; overflow: visible; }
.cefr-art-rope path { fill: none; stroke: var(--primary); stroke-width: 2.2; stroke-dasharray: 3 7; stroke-linecap: round; }
.cefr-art-rope circle { fill: var(--primary); }
.cefr-art-rope circle:nth-of-type(2) { fill: var(--surface); stroke: var(--primary); stroke-width: 3; }
.cefr-copy { display: grid; gap: 0.6rem; }
.cefr-slide h1 { font: 700 2rem/1.15 var(--font-display); letter-spacing: -.015em; }
.cefr-slide .lead { margin: 0; line-height: 1.55; }
.cefr-slide.from-right { animation: cefr-in-right .4s var(--ease) both; }
.cefr-slide.from-left { animation: cefr-in-left .4s var(--ease) both; }
.cefr-dots { display: flex; gap: .4rem; }
.cefr-dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; display: grid; place-items: center; margin-left: -6px; }
.cefr-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .2s, transform .2s var(--ease); }
.cefr-dot[aria-current="step"]::before { background: var(--primary); transform: scale(1.3); }
@keyframes cefr-in-right { from { opacity: 0; transform: translateX(28px); } }
@keyframes cefr-in-left { from { opacity: 0; transform: translateX(-28px); } }

/* reveal: what is not there yet is invisible, then fades in. A tap shows everything at once. */
.cefr-fade { opacity: 0; transform: translateY(8px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.cefr-fade.is-in { opacity: 1; transform: none; }
.cefr-fade.is-instant { transition: none; }

/* question: type on paper, no frame. The prompt is the largest thing on the screen. */
.cefr-question { gap: 1rem; padding-top: .25rem; }
.cefr-question.cefr-enter { animation: cefr-in-right .4s var(--ease) both; }
.cefr-question.cefr-leave { animation: cefr-out-left .17s ease-in both; }
@keyframes cefr-out-left { to { opacity: 0; transform: translateX(-24px); } }
.cefr-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.9rem; }
.cefr-instruction { margin: 0 0 0.35rem; font-size: 0.85rem; color: var(--muted); }
.cefr-prompt { margin: 0; font: 600 clamp(1.45rem, 6.4vw, 1.9rem)/1.25 var(--font-display); letter-spacing: -0.012em; overflow-wrap: anywhere; }
.cefr-prompt strong { color: var(--primary); font-weight: 700; }
.cefr-choices { padding-bottom: 0.25rem; }
.cefr-choices:not(.is-ready) .choice { opacity: 0; transform: translateY(10px); }
.cefr-choices.is-ready .choice { animation: cefr-choice-in .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms); }
.is-quick .cefr-choices.is-ready .choice { animation-duration: .3s; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes cefr-choice-in { from { opacity: 0; transform: translateY(10px); } }
.cefr-choices .choice { display: grid; grid-template-columns: 30px 1fr; gap: 0.8rem; align-items: center; min-height: 56px; }
.cefr-letter {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: var(--sky-2); color: var(--accent-ink);
  font: 600 0.8rem var(--font-display); transition: background .2s, color .2s;
}
.cefr-choice-text { overflow-wrap: anywhere; }
.cefr-choices .choice.is-selected { border-color: var(--select); background: var(--accent-soft); box-shadow: none; }
.cefr-choices .choice.is-selected .cefr-letter { background: var(--select); color: #fff; }
.cefr-choices.is-locked .choice:not(.is-selected) { opacity: 0.5; }
.cefr-actions .btn { min-height: 48px; }
.cefr-actions .btn-soft { flex: 1; background: transparent; color: var(--muted); }
/* two equal choices (the interim result): same weight, nothing nudges either way */
.cefr-actions.is-equal .btn { flex: 1; padding: 0 0.5rem; background: var(--surface); border: 1.5px solid var(--line); color: var(--text); }
@media (min-width: 380px) { .cefr-actions.is-equal .btn { white-space: nowrap; font-size: 0.95rem; } }

/* Maya's messages: the questions, the notes and the result are all her chat */
.cefr-thread { display: grid; gap: 1rem; justify-items: start; }
.cefr-maya { display: flex; gap: 0.55rem; align-items: flex-end; max-width: 100%; transform-origin: 0 100%; animation: cefr-pop .32s var(--ease) both; }
.cefr-maya.is-instant { animation: none; }
.cefr-maya-avatar { flex: none; }
.cefr-maya-avatar .avatar { width: 34px; height: 34px; }
.cefr-thread > .cefr-maya:has(~ .cefr-maya) .cefr-maya-avatar { visibility: hidden; }
.cefr-maya-bubble { padding: 0.65rem 0.95rem; border-radius: 20px 20px 20px 5px; background: var(--bubble); min-width: 0; }
.cefr-maya.is-question .cefr-maya-bubble { padding: 0.9rem 1.1rem 1rem; }
.cefr-maya-text { font-size: 1rem; line-height: 1.45; }
@keyframes cefr-in-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes cefr-pop { from { opacity: 0; transform: translateY(10px) scale(.9); } }

/* Maya typing: three dots in a bubble */
.cefr-typing { display: inline-flex; gap: 5px; align-items: center; height: 1.45em; }
.cefr-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .45; animation: cefr-dot 1s ease-in-out infinite; }
.cefr-typing i:nth-child(2) { animation-delay: .15s; }
.cefr-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cefr-dot { 30% { opacity: 1; transform: translateY(-3px); } }

/* the interim result */
.cefr-interim { gap: 1rem; padding-top: 0.5rem; }
.cefr-feeling .avatar { width: 88px; height: 88px; border-width: 3px; }
.cefr-interim .cefr-stage { justify-content: flex-start; }

/* result: the answer first, large, then Maya's messages */
.cefr-result { gap: 1.25rem; padding-top: 0.25rem; }
.cefr-headline { display: grid; justify-items: center; text-align: center; gap: 0.35rem; padding-top: 0.25rem; }
.cefr-kicker { margin: 0; font: italic 500 1.1rem/1.2 var(--font-display); color: var(--muted); }
.cefr-seal { position: relative; width: min(100%, 17rem); aspect-ratio: 6 / 5; display: grid; place-items: center; }
.cefr-loop { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cefr-loop path { fill: none; stroke: var(--primary); stroke-width: 2.4; stroke-dasharray: 3 7; stroke-linecap: round; }
.cefr-loop-dot { fill: var(--primary); }
.cefr-level { position: relative; font: 700 clamp(4.6rem, 25vw, 6.2rem)/1 var(--font-display); letter-spacing: -0.03em; color: var(--text); }
.cefr-level-note { margin: 0; max-width: 30ch; font-size: 0.95rem; line-height: 1.5; color: var(--muted); text-wrap: balance; }
.cefr-result .cefr-stage { justify-content: flex-start; gap: 0.7rem; }
.cefr-replies { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.cefr-reply { min-height: 38px; padding: 0 1rem; border-radius: 999px; border: 1.5px solid transparent; background: var(--surface); color: var(--text); font-weight: 600; }
.cefr-reply.is-selected { border-color: var(--select); }
.cefr-thanks { margin: 0.9rem 0 0; }
.cefr-comment { display: block; width: 100%; resize: none; margin-top: 0.6rem; padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); animation: cefr-in-up .35s var(--ease) both; }
.cefr-comment:focus-visible { outline: 2px solid var(--select); outline-offset: 1px; }

/* exit sheet */
.cefr-sheet-actions { display: flex; gap: 0.6rem; margin-top: 0.9rem; }
.cefr-sheet-actions .btn-primary { flex: 1; }

@media (max-width: 340px) {
  .cefr-slide h1 { font-size: 1.7rem; }
  .cefr-guide .avatar { width: 88px; height: 88px; }
}
@media (max-height: 640px) { .cefr-art { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .cefr-rope-walked, .cefr-rope-traveller, .cefr-dot::before, .cefr-letter { transition: none; }
  .cefr-slide, .cefr-question, .cefr-rope *, .cefr-choices .choice, .cefr-maya, .cefr-typing i, .cefr-replies, .cefr-comment { animation: none !important; }
  .cefr-fade { transition: none; }
  .cefr-choices:not(.is-ready) .choice { transform: none; }
}