/* Lesson chrome shared by every study screen: guided units, taught path units,
   recall checks and flashcards. Markup comes from lesson-ui.js. Loaded last so
   these rules win over the base and theme sheets without specificity games. */

/* ---- Study panel: the lesson takes over #cards ---- */
#cards.guided-panel { padding: 0 18px calc(20px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); background: var(--paper); }
#cards.guided-panel .cinner { max-width: 560px; }
#cards.guided-panel .cinner > * { animation: none; }
.guided-page { min-height: calc(100svh - 116px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); display: flex; flex-direction: column; padding-bottom: 10px; }
/* A LEARN card carrying a big term panel outgrows the viewport, and margin-top:
   auto alone then pushed the only way forward below the fold — 14px of a 52px
   button, the word "Continue" itself off screen, with nothing to suggest the
   page scrolled. Pinning the action to the bottom of the scrollport keeps the
   word visible at any content height; a card that already fits is unchanged,
   because margin-top: auto still bottoms it out against the same surface. Question
   and completion screens own a fixed footer of their own and are excluded. */
.guided-page:not(.guided-question-screen):not(.guided-completion-screen) .guided-actions {
  position: sticky;
  bottom: 0;
  background: var(--paper);
  padding-bottom: calc(12px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}

/* ---- Header: the shared .session-header row (session-header.css). Only the
   lesson's own placement lives here — it sits in the page and sticks, where the
   feed's copy floats over the reel. ---- */
.guided-toolbar { position: sticky; top: 0; z-index: 3; min-height: 70px; padding: 8px 0; background: var(--paper); }
.session-title { font-size: 14px; font-weight: 800; color: var(--ink-2); }

/* ---- Full-screen question and reading layout ---- */
/* A lesson takes the whole screen. The tab bar would compete with the single
   action every lesson screen offers, and reserving room for it is what left
   Continue floating short of the bottom. */
body:has(#cards.guided-panel.show) #tabs { display: none; }
#cards.guided-panel:has(.guided-question-screen) { padding: 0; overflow: hidden; }
#cards.guided-panel:has(.guided-question-screen) .cinner { height: 100%; max-width: none; }
.guided-page.guided-question-screen { height: 100%; min-height: 0; padding: 0; }
.guided-question-scroll { flex: 1; min-height: 0; padding: 12px 14px 20px; overflow-y: auto; overscroll-behavior: contain; }
.guided-question-screen .guided-toolbar { position: static; padding: 4px 0 8px; margin: 0 auto; max-width: 560px; }
.guided-question-screen .guided-toolbar .session-track { background: var(--panel-2); }
.guided-question-screen .guided-context, .guided-question-screen .guided-eyebrow, .guided-question-screen .guided-instruction { display: none; }
.guided-question-screen .guided-content { max-width: 560px; margin: 0 auto; padding: 0; }
.guided-question-screen .corgi-question { border-bottom: 1px solid var(--line-1); }
.guided-question-screen .guided-actions { flex: none; margin: 0; padding: 12px 14px calc(18px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); border-top: 1px solid var(--line-1); background: var(--paper); }
#cards .guided-question-screen .guided-actions .big { display: block; max-width: 560px; margin: 0 auto; min-height: 56px; border-radius: 15px; font-size: 18px; font-weight: 700; }

/* ---- Answer feedback panel ---- */
/* A flat result panel joins the feedback and action at the screen edge. */
.quiz-action-bar.has-feedback, .guided-question-screen .guided-actions.has-feedback {
  --feedback-ink: var(--brand-ink); --feedback-fill: var(--brand); --feedback-lip: var(--brand-lip);
  display: flex; flex-direction: column; gap: 24px; max-height: 55svh;
  padding: 24px 20px calc(24px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  border-top: 0; background: var(--brand-soft); color: var(--feedback-ink);
}
.quiz-action-bar.has-feedback.is-wrong, .guided-question-screen .guided-actions.has-feedback.is-wrong {
  --feedback-ink: var(--wrong-ink); --feedback-fill: var(--wrong); --feedback-lip: var(--wrong-lip);
  background: var(--wrong-soft);
}
/* The study panel eases up into place each time it is shown; re-adding .show restarts it. */
#cards.show .cinner { animation: view-enter .3s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes view-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #cards.show .cinner { animation: none; } }
/* The result panel rises from the bottom edge and its text follows a beat later. */
.quiz-action-bar.has-feedback, .guided-question-screen .guided-actions.has-feedback { animation: feedback-rise .34s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes feedback-rise { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } }
.answer-feedback { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 560px; margin: 0 auto; overflow-y: auto; overscroll-behavior: contain; animation: feedback-fade .3s ease .1s both; }
@keyframes feedback-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .quiz-action-bar.has-feedback, .guided-question-screen .guided-actions.has-feedback, .answer-feedback { animation: none; } }
.answer-feedback-title { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.answer-feedback-title strong { font-size: 24px; font-weight: 700; line-height: 1.3; }
.answer-feedback-icon { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--feedback-fill); color: #fff; }
.answer-feedback-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.answer-feedback p { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 500; }
.answer-feedback .answer-feedback-label { margin-bottom: 8px; font-size: 20px; font-weight: 600; }
.answer-feedback .answer-feedback-explanation { margin-top: 12px; font-size: 15px; }
.question-action-panel.has-feedback .big { flex: none; background: var(--feedback-fill); box-shadow: 0 4px 0 var(--feedback-lip); color: #fff; }
.question-action-panel.has-feedback .big:active { box-shadow: 0 1px 0 var(--feedback-lip); }

/* ---- Completion celebration ---- */
/* A completed lesson gets a moment of its own before the next one starts. */
#cards.guided-panel:has(.guided-completion-screen) { padding: 0; overflow: hidden; background: var(--paper); }
#cards.guided-panel:has(.guided-completion-screen) .cinner { display: flex; flex-direction: column; height: 100%; max-width: none; }
#cards.guided-panel:has(.guided-completion-screen) .guided-toolbar { flex: none; margin: 0 auto; width: 100%; max-width: 600px; padding: 16px 14px 0; }
.guided-page.guided-completion-screen { flex: 1; height: auto; min-height: 0; padding: 0; }
.guided-completion-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 30px 24px 28px; overflow-y: auto; overscroll-behavior: contain; text-align: center; }
.guided-celebration { position: relative; flex: none; width: min(290px, 70vw); margin: auto 0 32px; padding-top: 20px; }
.guided-celebration img { display: block; width: 100%; height: auto; object-fit: contain; animation: lesson-celebrate .5s ease-out both; }
.guided-celebration-spark { position: absolute; width: 25px; height: 25px; fill: #ffc800; animation: lesson-celebrate .5s .15s ease-out both; }
.guided-celebration .spark-one { top: 22%; left: -3%; transform: rotate(-15deg); }
.guided-celebration .spark-two { right: -1%; bottom: 14%; width: 18px; height: 18px; fill: #33bdf4; transform: rotate(18deg); }
.guided-completion-message { flex: none; }
#cards .guided-completion-message h1 { margin: 0; color: #18ace7; font-size: clamp(29px, 7.5vw, 38px); line-height: 1.18; font-weight: 900; letter-spacing: -.5px; }
.guided-result-cards { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 470px; margin: 54px 0 32px; }
.guided-result-card { --result-colour: #ffc400; overflow: hidden; border: 3px solid var(--result-colour); border-radius: 22px; background: var(--result-colour); color: var(--result-colour); }
.guided-result-card.result-blue { --result-colour: #1db9f1; }
.guided-result-card.result-teal { --result-colour: #08b89a; }
.guided-result-card dt { padding: 4px 3px 7px; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .3px; text-transform: uppercase; }
.guided-result-card dd { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 70px; margin: 0; padding: 10px 4px; border-radius: 17px; background: var(--paper); font-size: 24px; font-weight: 900; white-space: nowrap; }
.guided-result-card svg { flex: none; width: 24px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.guided-result-card.result-gold svg { fill: currentColor; stroke-width: 1.5; }
.guided-completion-actions { flex: none; width: 100%; padding: 18px 24px calc(28px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); background: var(--paper); }
#cards .guided-completion-actions .ghost { display: block; width: 100%; max-width: 470px; min-height: 52px; margin: 10px auto 0; border-radius: 16px; font-size: 17px; font-weight: 800; }
#cards .guided-completion-actions .big { display: block; width: 100%; max-width: 470px; min-height: 56px; margin: 0 auto; border-radius: 16px; background: #19afe8; color: #fff; box-shadow: 0 4px 0 #0a97cd; font-size: 18px; font-weight: 800; }
@keyframes lesson-celebrate { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
@media (max-width: 380px) { .guided-completion-scroll { padding-right: 18px; padding-left: 18px; } .guided-result-cards { gap: 10px; } .guided-result-card dt { font-size: 10px; } .guided-result-card dd { font-size: 21px; gap: 4px; } .guided-result-card svg { width: 21px; } }
@media (max-height: 760px) { .guided-celebration { width: min(220px, 55vw); margin-bottom: 20px; padding-top: 0; } .guided-completion-scroll { padding-top: 18px; padding-bottom: 8px; } .guided-result-cards { margin-top: 32px; margin-bottom: 16px; } .guided-result-card dd { min-height: 58px; } }
@media (prefers-reduced-motion: reduce) { .guided-celebration img, .guided-celebration-spark { animation: none; } }

/* ---- Transitions ---- */
/* A new screen slides in from the right; feedback re-renders keep the class off so they don't replay it. */
.guided-enter { animation: guided-enter .32s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes guided-enter { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .guided-enter { animation: none; } }

/* ---- Desktop: lessons fill the screen and centre their content ---- */
@media (min-width: 960px) {
  /* Lessons take the whole screen on desktop: the rail hides and the study
     column sits centred in the full width. */
  #cards.guided-panel { left: 0; padding: 0 40px 40px; background: var(--paper); }
  #cards.guided-panel .cinner { max-width: 600px; }
  .guided-question-screen .guided-toolbar, .guided-question-screen .guided-content { max-width: 600px; }
  /* The header stays at the top; the lesson content floats to the vertical middle. */
  .guided-question-scroll { display: flex; flex-direction: column; padding-top: 24px; }
  /* Reading and recall screens match the question screens: header at the top, action at the foot. */
  #cards.guided-panel .guided-toolbar { padding-top: 16px; }
  /* Completion: auto margins above the trophy and below the cards centre the group. */
  #cards.guided-panel .guided-result-cards { margin-bottom: auto; padding-bottom: 24px; }
  /* Auto margins above the first block and below the last centre the reading
     content between the header and the action, like the question screens. */
  #cards.guided-panel .study-session > .study-prompt { margin-top: auto; }
  #cards.guided-panel .study-session > .study-controls { margin-top: auto; padding-top: 32px; }
  #cards.guided-panel .study-session > .study-prompt { padding-bottom: 8px; }
  .guided-question-screen .guided-toolbar { width: 100%; flex: 0 0 auto; }
  #cards .guided-question-screen .guided-content { width: 100%; margin: auto; padding: 24px 0; }
  .guided-page { min-height: calc(100svh - 40px); }
}

/* ---- Reading, recall and check screens (taught path units, flashcards) ---- */
/* `.show` is the contract every panel in #studyApp obeys: panes.css hides them
   all and .show reveals one. This rule set display on #cards without asking for
   .show, and an ID plus :has() outranks the panes.css hide — so once a flashcard
   session's markup was in the DOM, #cards painted over the whole app whether or
   not it was the visible panel. Leaving a deck by its own X removes .show but
   leaves the markup, which stranded the card full-screen above every other view,
   surviving tab switches, with no way out but a reload. Finishing a deck happened
   to clear the markup, which is why only the X path stranded it. */
#cards.show:has(.study-session) { display: flex; flex-direction: column; }
/* The flex parent above shrank .cinner to its content — 174px of a 375px
   phone — so a whole flashcard session ran in a column narrower than half
   the screen. It needs an explicit width; its existing max-width still caps it. */
#cards.show:has(.study-session) .cinner { width: 100%; }
#cards:has(.study-session) .cinner { flex: 1; display: flex; flex-direction: column; }
#cards .study-session {display: flex; flex-direction: column; flex: 1; min-height: 0; }
.study-prompt {padding: 38px 0 28px; }
.study-eyebrow {color: var(--brand-ink); font-size: 12px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 12px; }
#cards .study-prompt h1 {font-size: clamp(25px, 5vw, 34px); line-height: 1.22; margin: 0; text-wrap: balance; }
.study-hint {font-size: 15px; color: var(--ink-2); margin: 16px 0 0; }
.study-answer {margin-top: 28px; padding: 22px; border-radius: 20px; background: var(--brand-soft); border: 1px solid var(--brand-soft-2); }
.study-answer > p:not(.study-eyebrow) {font-size: 17px; line-height: 1.65; margin: 0; color: var(--ink); white-space: pre-line; }
.study-answer > p.study-extra {margin-top: 14px; font-size: 14px; }
.study-controls {margin-top: auto; padding: 16px 0 12px; }
.study-rate > p {text-align: center; color: var(--ink-2); font-size: 14px; margin: 0 0 14px; }
.study-rate > div {display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#cards .study-controls button {width: 100%; margin: 0; font-size: 16px; }
.corgi-question {display: flex; align-items: flex-start; gap: 20px; width: 100%; min-height: 150px; margin: 14px 0 0; padding-bottom: 18px; }
.corgi-question-mascot {display: block; flex: 0 0 96px; width: 96px; height: auto; aspect-ratio: 1; object-fit: contain; }
.corgi-question-bubble {position: relative; flex: 1; min-width: 0; padding: 16px 14px; border: 2px solid var(--line-1); border-radius: 6px; background: var(--paper); }
.corgi-question-bubble::before {content: ""; position: absolute; width: 12px; height: 12px; left: -8px; top: 28px; background: var(--paper); border-left: 2px solid var(--line-1); border-bottom: 2px solid var(--line-1); transform: rotate(45deg); }
@media (max-width: 380px) {
  .corgi-question {gap: 16px; }
  .corgi-question-mascot {flex-basis: 82px; width: 82px; }
  .corgi-question-bubble {padding: 14px 12px; }
}
.study-check-screen .corgi-question {margin-bottom: 20px; }
/* On a generated check the bubble asks the same thing every time -- "which
   place matches this description?" -- and the description is the part that
   changes and has to be read. It was the quieter of the two: 17px regular
   under an 18px medium bubble. So the clue is the headline here and the bubble
   drops to an instruction, the way picture-answer quizzes put "select the correct image"
   above the word you are actually matching. Where there is no clue the bubble
   carries the real question, and keeps its usual voice. */
.study-check-clue {color: var(--ink); font-size: 22px; font-weight: 700; line-height: 1.34; letter-spacing: -.2px; margin: 2px 0 18px; text-wrap: balance; }
#cards .study-check-screen:has(.study-check-clue) .corgi-question-bubble h1 {font-size: 15px; font-weight: 600; color: var(--ink-2); line-height: 1.45; }
.study-check-screen:has(.study-check-clue) .corgi-question {min-height: 0; }
@media (max-width: 360px) { .study-check-clue {font-size: 20px; } }
.study-check-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-bottom: 6px; }
.study-choice {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; width: 100%; min-height: 142px; margin: 0; padding: 18px 12px; background: var(--paper); color: var(--ink); border: 2px solid var(--line-2); border-radius: 18px; box-shadow: 0 4px 0 var(--lip); font-size: 17px; font-weight: 600; line-height: 1.35; text-align: center; overflow-wrap: anywhere; transition: transform .12s ease, background .12s ease, border-color .12s ease; }
.study-choice-letter {color: var(--ink-2); font-size: 13px; font-weight: 800; }
/* With a picture the letter is noise: the image is what the eye picks first,
   and it should be the largest thing on the card rather than a thumbnail with
   a caption. Pip shrinks on these screens so the pictures get the room -- the
   instruction beside him is small grey text now, so a 96px mascot was spending
   a hundred vertical pixels on decoration. */
.study-check-grid.has-art .study-choice {gap: 10px; min-height: 218px; padding: 16px 10px 18px; }
.study-check-grid.has-art .study-choice-letter {display: none; }
.study-choice-art {display: block; width: 100%; max-width: 144px; height: 138px; object-fit: contain; pointer-events: none; }
/* No mascot where the pictures are. Four illustrations carry the warmth on
   their own, and Pip was holding a line of boilerplate -- the same sentence
   every time -- which reads better as a plain label above the question, the
   way picture grids are usually captioned. He stays on every other lesson
   screen, including checks that have no artwork to carry them. */
#cards .study-check-screen:has(.has-art) .corgi-question-mascot {display: none; }
#cards .study-check-screen:has(.has-art) .corgi-question {display: block; gap: 0; min-height: 0; margin: 0; padding: 0; border: 0; }
#cards .study-check-screen:has(.has-art) .corgi-question-bubble {padding: 0; border: 0; background: none; }
#cards .study-check-screen:has(.has-art) .corgi-question-bubble::before {display: none; }
#cards .study-check-screen:has(.has-art) .corgi-question-bubble h1 {font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); line-height: 1.4; }
@media (max-width: 360px) { .study-choice-art {max-width: 108px; height: 104px; } .study-check-grid.has-art .study-choice {min-height: 182px; } }
.study-choice-result {position: absolute; top: 12px; right: 12px; font-size: 20px; line-height: 1; }
.study-choice.sel, .study-choice.is-correct {background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand); box-shadow: 0 4px 0 var(--brand); }
.study-choice.sel .study-choice-letter, .study-choice.is-correct .study-choice-letter {color: var(--brand-ink); }
.study-choice.is-wrong {background: var(--wrong-soft); color: var(--wrong-ink); border-color: #ee838a; box-shadow: 0 4px 0 #ee838a; }
.study-choice.is-wrong .study-choice-letter {color: var(--wrong-ink); }
.study-choice:disabled {opacity: 1; cursor: default; }
.study-choice:active:not(:disabled) {transform: translateY(3px); box-shadow: 0 1px 0 var(--lip); }
.study-choice:focus-visible {outline: 3px solid var(--brand-ink); outline-offset: 5px; }
@media (max-width: 380px) {
  .study-choice {min-height: 130px; padding: 16px 10px; font-size: 16px; }
  .study-check-grid {gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .study-choice {transition: none; }
}
.study-session.has-graphic .study-prompt {padding: 22px 0 8px; }
.study-session.has-graphic .study-eyebrow {display: none; }
.study-graphic-intro {margin: 12px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
@media (max-height: 760px) {
  .study-session.has-graphic .study-prompt {padding-top: 14px; }
}

/* Result cards rise in one after another; their numbers count up in lesson-ui.js. */
.guided-result-card { animation: result-pop .9s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(220ms + var(--i, 0) * 620ms); }
@keyframes result-pop { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .guided-result-card { animation: none; } }