/* Lesson chrome shared by every study screen: guided units, taught path units,
   recall checks and flashcards. Markup: lesson-ui.html, rendered by
   lesson-ui.js, plus the guided and flashcard screen templates. Loaded after
   the base and theme sheets so these rules win without specificity games. */
:root {
  --sheet-action: #19afe8;
  --sheet-action-lip: #0a97cd;
}

/* ---- 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);
}
/* Bookmark at the far end of the bar: an outline until pressed, then filled in
   the colour of the Saved lessons card it will appear under. */
.lesson-bookmark {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-3);
  box-shadow: none;
}
.lesson-bookmark:hover {
  background: var(--panel);
  color: var(--ink-2);
}
.lesson-bookmark svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linejoin: round;
}
.lesson-bookmark.is-saved,
.lesson-bookmark.is-saved:hover {
  color: #1cb0f6;
}
.lesson-bookmark.is-saved svg {
  fill: currentColor;
}

/* ---- 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(--correct-ink);
  --feedback-fill: var(--correct);
  --feedback-lip: var(--correct-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(--correct-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 0.3s cubic-bezier(0.2, 0.7, 0.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 0.34s cubic-bezier(0.2, 0.7, 0.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 0.3s ease 0.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 0.5s ease-out both;
}
.guided-celebration-spark {
  position: absolute;
  width: 25px;
  height: 25px;
  fill: #ffc800;
  animation: lesson-celebrate 0.5s 0.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: -0.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: 0.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: var(--sheet-action);
  color: #fff;
  box-shadow: 0 4px 0 var(--sheet-action-lip);
  font-size: 18px;
  font-weight: 800;
}
@keyframes lesson-celebrate {
  from {
    opacity: 0;
    scale: 0.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 0.32s cubic-bezier(0.2, 0.7, 0.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);
  }
  /* One desk size for every lesson screen: a frame for the top bar and the
     action row, and a narrower reading column between them. */
  #cards {
    --lesson-frame: 1000px;
    --lesson-column: 640px;
  }
  #cards .cinner,
  #cards.guided-panel .cinner {
    max-width: var(--lesson-frame);
  }
  /* Desk proportions: the progress bar and the action row run wider than the
     question, framing a narrower reading column, and the action sits at the
     right of its row rather than stretching under the question. */
  .guided-question-screen .guided-content {
    max-width: var(--lesson-column);
  }
  .guided-question-screen .guided-toolbar {
    max-width: var(--lesson-frame);
  }
  .guided-question-screen .guided-actions {
    padding: 18px max(40px, calc((100% - var(--lesson-frame)) / 2)) 22px;
  }
  #cards .guided-question-screen .guided-actions .big {
    width: auto;
    min-width: 200px;
    max-width: none;
    margin: 0 0 0 auto;
    padding-inline: 36px;
  }
  /* The verdict reads across the same row: what happened on the left, the way on at the right. */
  .guided-question-screen .guided-actions.has-feedback {
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 26px max(40px, calc((100% - var(--lesson-frame)) / 2)) 28px;
  }
  .guided-question-screen .guided-actions.has-feedback .answer-feedback {
    max-width: none;
    margin: 0;
  }
  .guided-question-screen .guided-actions.has-feedback .answer-feedback-title {
    margin-bottom: 10px;
  }
  /* 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);
  }

  /* The other lesson pages -- reading cards, story screens, the finish and a
     topic’s own flashcards -- share the same frame, column and right-hand action. */
  #cards .guided-toolbar {
    width: 100%;
    max-width: var(--lesson-frame);
    margin-inline: auto;
  }
  #cards.guided-panel:has(.guided-completion-screen) .guided-toolbar {
    max-width: var(--lesson-frame);
  }
  #cards .study-prompt,
  #cards.guided-panel
    .guided-page:not(.guided-question-screen):not(.guided-completion-screen)
    :is(.guided-context, .guided-content) {
    width: 100%;
    max-width: var(--lesson-column);
    margin-inline: auto;
  }
  #cards .study-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 16px;
    width: 100%;
  }
  #cards .study-controls > .report-question {
    margin-right: auto;
  }
  #cards .study-controls button.big,
  #cards .study-rate button {
    width: auto;
    min-width: 200px;
    padding-inline: 36px;
  }
  #cards .study-rate:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  #cards .study-rate > p {
    margin: 0;
  }
  #cards .study-rate > div {
    display: flex;
    gap: 12px;
  }
  #cards.guided-panel .guided-page:not(.guided-question-screen):not(.guided-completion-screen) .guided-actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }
  #cards.guided-panel .guided-page:not(.guided-question-screen):not(.guided-completion-screen) .guided-actions .big {
    width: auto;
    min-width: 200px;
    margin: 0;
    padding-inline: 36px;
  }
}

/* ---- 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: 0.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 question is the same every time -- "which place
   matches this description?" -- and the description is the part that has to be
   read. The corgi says the description, in the question’s bold voice, and the
   repeated question is left to screen readers. One bubble instead of a bubble
   and a second headline under a rule. */
#cards .study-check-screen .corgi-question-bubble h1.study-check-clue {
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  text-wrap: pretty;
}
.study-check-screen:has(.study-check-clue) .corgi-question {
  align-items: center;
  min-height: 0;
}
@media (max-width: 360px) {
  #cards .study-check-screen .corgi-question-bubble h1.study-check-clue {
    font-size: 17px;
  }
}
.study-check-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 6px;
}
.study-choice {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 10px 14px;
  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: left;
  overflow-wrap: anywhere;
  transition:
    transform 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease;
}
.study-choice-result {
  position: static;
  flex: none;
  font-size: 20px;
  line-height: 1;
}
.study-choice-result:empty {
  display: none;
}
.study-choice.is-selected {
  background: var(--brand-soft);
  color: var(--brand-ink);
  border-color: var(--brand);
  box-shadow: 0 4px 0 var(--brand);
}
/* A right answer is green; the choice before checking stays blue. */
.study-choice.is-correct {
  background: var(--correct-soft);
  color: var(--correct-ink);
  border-color: var(--correct);
  box-shadow: 0 4px 0 var(--correct);
}
.study-choice.is-wrong {
  background: var(--wrong-soft);
  color: var(--wrong-ink);
  border-color: #ee838a;
  box-shadow: 0 4px 0 #ee838a;
}
.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 {
    font-size: 16px;
  }
  .study-check-grid {
    gap: 12px;
  }
}
@media (max-width: 359px) {
  .study-choice {
    gap: 10px;
    padding-inline: 10px;
  }
}
@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 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(220ms + var(--i, 0) * 620ms);
}
/* A completion screen has up to three cards. */
.guided-result-card:nth-child(2) {
  --i: 1;
}
.guided-result-card:nth-child(3) {
  --i: 2;
}

/* A view easing out before the next one replaces it (leaveView in lesson-ui.js).
   Important, because it must replace whatever entrance animation the view has
   (#cards.show .cinner's view-enter outranks a single class). */
.is-leaving {
  animation: view-leave 0.2s ease-in forwards !important;
}
@keyframes view-leave {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(22px);
  }
}
@keyframes result-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .guided-result-card {
    animation: none;
  }
}