/* Shared by Learn, Review and Practice only. Kept beside the artwork so
   copyStatic() preserves the URL without an esbuild asset loader. */
body.learning-background {
  isolation: isolate;
}

body.learning-background::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #e5efff;
  background-image:
    linear-gradient(rgb(247 250 255 / 16%), rgb(247 250 255 / 16%)),
    url("./learning-landscape.webp");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

@media (max-width: 640px) {
  body.learning-background::before {
    /* Preserve the valley; the distant flag may be cropped. */
    background-position: 55% bottom;
  }

  body.learning-background :is(.review-footer, .train-footer, .learn-footer) {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* Cards and buttons keep their opaque surfaces and semantic colours. Everything
   else outside a card takes a darker ink so it holds against the sky, and only
   the small footer items carry a surface of their own.

   No page puts a panel behind a whole header or footer, and no label carries a
   white strip of its own: either reads as a second band competing with the card,
   which is the thing the Review refinement set out to fix. */
body.learning-background
  :is(
    .review-header__subtitle,
    .train-header__subtitle,
    .learn-header__subtitle,
    .learn-field__label,
    .learn-footnote,
    .mode-row__hint
  ) {
  color: #334155;
}

body.learning-background
  :is(.review-footer, .train-footer, .learn-footer)
  :is(
    .review-footer__hint,
    .train-footer__hint,
    .learn-footnote,
    .page-footer__link
  ) {
  color: #334155;
  background-color: rgb(255 255 255 / 88%);
  border-radius: 8px;
}

body.learning-background
  :is(.review-footer, .train-footer, .learn-footer)
  :is(.review-footer__hint, .train-footer__hint, .learn-footnote) {
  padding: 8px;
}

body.learning-background
  :is(.review-footer, .train-footer, .learn-footer)
  .page-footer__link:hover {
  color: #0f172a;
  background-color: #fff;
}

/* Practice's verdict line is the one piece of live copy that sits outside a card
   on any of the three pages. It keeps its own green and red for the verdict, so
   it takes the surface without the ink override. */
body.learning-background .train-status {
  background-color: rgb(255 255 255 / 88%);
  border-radius: 8px;
  /* border-box so the padding lands inside the 40px the line already reserves,
     rather than pushing the buttons below it down by another 16px. */
  box-sizing: border-box;
  padding: 8px 12px;
}

@media (forced-colors: active), print {
  body.learning-background::before {
    display: none;
  }
}