/* LMS exercise page — fallback gradient backgrounds.
 *
 * Applied when an exercise has no page-level image (displayStyle is null,
 * displayStyle.mode === 'fallback' without a custom gradient, or imageId is
 * missing). Keyed by exercise type via [data-fallback="<type>"] on the
 * .exercise-page element.
 *
 * Each gradient is a layered composition: a soft off-axis radial accent on
 * top of a 3-stop linear base. The result reads as an atmospheric "sky" or
 * "stage" rather than a flat tint, while staying subtle enough to host
 * legible content. Custom per-exercise gradients (displayStyle.mode ===
 * 'fallback' with a `gradient` value) are applied inline and override.
 */

/* Multiple-choice — lavender / lilac with a soft pink accent */
.exercise-page[data-fallback="multiple-choice"] {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(214, 188, 250, 0.55) 0%, rgba(214, 188, 250, 0) 60%),
    radial-gradient(ellipse 70% 50% at 90% 100%, rgba(255, 200, 230, 0.45) 0%, rgba(255, 200, 230, 0) 60%),
    linear-gradient(160deg, #f5f0ff 0%, #ebe2ff 50%, #ddd0f5 100%);
}

/* Reading passages — warm peach / cream */
.exercise-page[data-fallback="passage-mc"],
.exercise-page[data-fallback="passage-gap-fill"] {
  background:
    radial-gradient(ellipse 80% 60% at 80% 0%, rgba(255, 213, 165, 0.55) 0%, rgba(255, 213, 165, 0) 60%),
    radial-gradient(ellipse 70% 50% at 10% 100%, rgba(255, 230, 200, 0.5) 0%, rgba(255, 230, 200, 0) 60%),
    linear-gradient(170deg, #fff7ec 0%, #fbecd5 50%, #f5dab8 100%);
}

/* Gap-fill — fresh mint with a teal accent */
.exercise-page[data-fallback="gap-fill"],
.exercise-page[data-fallback="gap-fill-video"] {
  background:
    radial-gradient(ellipse 70% 55% at 15% 5%, rgba(180, 240, 210, 0.55) 0%, rgba(180, 240, 210, 0) 60%),
    radial-gradient(ellipse 75% 55% at 95% 95%, rgba(155, 220, 235, 0.4) 0%, rgba(155, 220, 235, 0) 60%),
    linear-gradient(150deg, #ecfff3 0%, #d6f3e3 50%, #bce6cf 100%);
}

/* Video-listening — sky blue with a hint of indigo */
.exercise-page[data-fallback="video-listening"] {
  background:
    radial-gradient(ellipse 85% 60% at 25% 0%, rgba(176, 211, 255, 0.55) 0%, rgba(176, 211, 255, 0) 60%),
    radial-gradient(ellipse 70% 50% at 90% 100%, rgba(200, 195, 255, 0.4) 0%, rgba(200, 195, 255, 0) 60%),
    linear-gradient(160deg, #ecf3ff 0%, #d6e6ff 50%, #b8d0f5 100%);
}

/* Matching — coral / blush rose */
.exercise-page[data-fallback="matching"] {
  background:
    radial-gradient(ellipse 75% 55% at 85% 5%, rgba(255, 188, 188, 0.55) 0%, rgba(255, 188, 188, 0) 60%),
    radial-gradient(ellipse 80% 60% at 5% 90%, rgba(255, 210, 210, 0.45) 0%, rgba(255, 210, 210, 0) 60%),
    linear-gradient(150deg, #fff0ee 0%, #ffd9d9 50%, #ffc0c0 100%);
}

/* True/false — neutral graphite with a gentle warm tint */
.exercise-page[data-fallback="true-false"] {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(220, 222, 230, 0.7) 0%, rgba(220, 222, 230, 0) 65%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(250, 230, 215, 0.35) 0%, rgba(250, 230, 215, 0) 60%),
    linear-gradient(160deg, #fafafa 0%, #e8e8ec 50%, #d6d8de 100%);
}

/* Word-formation — fresh green / chartreuse */
.exercise-page[data-fallback="word-formation"] {
  background:
    radial-gradient(ellipse 80% 55% at 20% 0%, rgba(195, 240, 175, 0.55) 0%, rgba(195, 240, 175, 0) 60%),
    radial-gradient(ellipse 70% 50% at 95% 95%, rgba(220, 235, 165, 0.4) 0%, rgba(220, 235, 165, 0) 60%),
    linear-gradient(160deg, #f0ffe8 0%, #d8f0c8 50%, #c2e2a8 100%);
}

/* Highlight-words — warm honey / amber */
.exercise-page[data-fallback="highlight-words"],
.exercise-page[data-fallback="highlight-words-passage"] {
  background:
    radial-gradient(ellipse 80% 55% at 75% 0%, rgba(255, 220, 145, 0.55) 0%, rgba(255, 220, 145, 0) 60%),
    radial-gradient(ellipse 70% 50% at 5% 100%, rgba(255, 235, 180, 0.45) 0%, rgba(255, 235, 180, 0) 60%),
    linear-gradient(170deg, #fff8e6 0%, #fee8c0 50%, #f8d68f 100%);
}

/* Writing-correction — orchid / blush pink */
.exercise-page[data-fallback="writing-correction"] {
  background:
    radial-gradient(ellipse 80% 60% at 15% 5%, rgba(245, 195, 230, 0.55) 0%, rgba(245, 195, 230, 0) 60%),
    radial-gradient(ellipse 70% 50% at 90% 100%, rgba(220, 195, 245, 0.4) 0%, rgba(220, 195, 245, 0) 60%),
    linear-gradient(160deg, #fff0fa 0%, #fbd6ee 50%, #efbbe0 100%);
}

/* Mixed — periwinkle with violet accent */
.exercise-page[data-fallback="mixed"] {
  background:
    radial-gradient(ellipse 80% 55% at 25% 0%, rgba(200, 195, 250, 0.55) 0%, rgba(200, 195, 250, 0) 60%),
    radial-gradient(ellipse 70% 50% at 95% 95%, rgba(180, 175, 240, 0.4) 0%, rgba(180, 175, 240, 0) 60%),
    linear-gradient(160deg, #f0eeff 0%, #d9d4f5 50%, #c0b9ea 100%);
}

/* Fallback-of-fallback — anything without a known type still gets a soft
 * neutral gradient instead of the bare blue from `.student-homework`. */
.exercise-page[data-fallback]:not([data-fallback=""]) {
  background-color: #f4f1ff;
}

/* SVG defaults selected in /html/exercise-bg-preview.html.
 * These apply only on the no-image fallback path; explicit image modes keep
 * their configured image treatments. The SVG itself is painted by a
 * `.exercise-fallback-bg-layer` element teleported to <body> — see the
 * comment on `_applyFallbackBackgroundDefault` in exercise.js. Anchoring the
 * background to the viewport (not the host) prevents re-renders when the
 * exercise content height changes between questions. */
.exercise-page.has-svg-fallback[data-fallback] {
  background: transparent !important;
}

.exercise-fallback-bg-layer {
  position: fixed;
  inset: -120px;
  z-index: -1;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
}

.exercise-page.has-svg-fallback[data-fallback] .exercise-image-treatment--fallback {
  background: transparent;
}

.exercise-page.has-svg-fallback[data-fallback] > .exercise-content {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.78),
    rgba(255, 255, 255, 0.66)
  );
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 16px 40px -24px rgba(15, 23, 42, 0.35);
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto 32px;
  padding: 24px;
}

.exercise-page.has-svg-fallback[data-fallback] > .exercise-header,
.exercise-page.has-svg-fallback[data-fallback] .exercise-controls-bar {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.78),
    rgba(255, 255, 255, 0.66)
  );
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.exercise-page.has-svg-fallback[data-fallback] .exercise-controls-bar,
.exercise-page.has-svg-fallback[data-fallback] .progress-bar,
.exercise-page.has-svg-fallback[data-fallback] .question-progress-bar,
.exercise-page.has-svg-fallback[data-fallback] > .background-title-block {
  background: rgba(255, 255, 255, 0.62);
  border-radius: 12px;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

/* Print / PDF — strip all page-level visuals for ink-saving and legibility.
 * Image-based hero/background/faded layouts and the fallback gradients are
 * all removed; body text reverts to black on white.
 */
@media print {
  .exercise-page,
  .exercise-page[data-fallback] {
    background: white !important;
    color: black !important;
  }
  .exercise-fallback-bg-layer {
    display: none !important;
  }
  .exercise-page .banner-image-container,
  .exercise-page .exercise-background,
  .exercise-page .faded-image-container,
  .exercise-page .glass-pill,
  .exercise-page .frost-sentinel {
    display: none !important;
  }
}