/* ══════════════════════════════════════════════════════════════════════
   Spectrum Steps v5.1 — background scenes
   A  beach            landing page, child Home
   B  green classroom  sign-in, registration, password pages, profile picker,
                       Parent Dashboard, parent settings
   C  blue classroom   Let's Talk / Morning · Midday · Evening · Reflection
                       question screens

   The picture sits on a layer *behind* the whole page (html::before,
   z-index -1, pointer-events: none), so it can never catch a click, a drag or
   a touch, and it never moves (no animation). It is `cover`-scaled, so it is
   cropped rather than stretched on any screen shape. Smaller files are used
   on narrow screens.

   Turned off (plain colour) when:
     • low stimulation is on                 html[data-calm="on"]
     • the plain-background choice is on     html[data-bg="plain"]
     • a parent uploaded their own picture    body.has-custom-bg (v4.1 feature)
   ══════════════════════════════════════════════════════════════════════ */
/* The scene covers the whole page, top to bottom (not just the first screen),
   so long pages are painted all the way down. */
html[data-scene] { position: relative; min-height: 100%; }
html[data-scene]::before {
  content: ""; position: absolute; inset: 0; min-height: 100%; z-index: -1; pointer-events: none;
  /* its own compositor layer: dragging tiles never repaints the picture */
  will-change: transform; transform: translateZ(0);
  background-color: var(--md-paper, #F5F8FD);
  background-repeat: no-repeat; background-size: cover; background-position: center;
}
/* A soft veil keeps text and cards readable on every part of the picture. */
html[data-scene]::after {
  content: ""; position: absolute; inset: 0; min-height: 100%; z-index: -1; pointer-events: none;
  will-change: transform; transform: translateZ(0);
  background: var(--scene-veil, rgba(245, 248, 253, 0.18));
}
html[data-scene="beach"]::before {
  background-position: 30% 65%;
  background-image: url("/assets/backgrounds/beach-1672.jpg");
  background-image: image-set(url("/assets/backgrounds/beach-1672.webp") type("image/webp"), url("/assets/backgrounds/beach-1672.jpg") type("image/jpeg"));
}
html[data-scene="green"]::before {
  background-image: url("/assets/backgrounds/classroom-green-1672.jpg");
  background-image: image-set(url("/assets/backgrounds/classroom-green-1672.webp") type("image/webp"), url("/assets/backgrounds/classroom-green-1672.jpg") type("image/jpeg"));
}
html[data-scene="blue"]::before {
  background-position: 45% 40%;
  background-image: url("/assets/backgrounds/classroom-blue-1672.jpg");
  background-image: image-set(url("/assets/backgrounds/classroom-blue-1672.webp") type("image/webp"), url("/assets/backgrounds/classroom-blue-1672.jpg") type("image/jpeg"));
}
@media (max-width: 960px) {
  html[data-scene="beach"]::before {
    background-image: url("/assets/backgrounds/beach-960.jpg");
    background-image: image-set(url("/assets/backgrounds/beach-960.webp") type("image/webp"), url("/assets/backgrounds/beach-960.jpg") type("image/jpeg"));
  }
  html[data-scene="green"]::before {
    background-image: url("/assets/backgrounds/classroom-green-960.jpg");
    background-image: image-set(url("/assets/backgrounds/classroom-green-960.webp") type("image/webp"), url("/assets/backgrounds/classroom-green-960.jpg") type("image/jpeg"));
  }
  html[data-scene="blue"]::before {
    background-image: url("/assets/backgrounds/classroom-blue-960.jpg");
    background-image: image-set(url("/assets/backgrounds/classroom-blue-960.webp") type("image/webp"), url("/assets/backgrounds/classroom-blue-960.jpg") type("image/jpeg"));
  }
}
html[data-scene="beach"] { --scene-veil: rgba(245, 248, 253, 0.10); }
html[data-scene="green"] { --scene-veil: rgba(245, 248, 253, 0.12); }
html[data-scene="blue"]  { --scene-veil: rgba(245, 248, 253, 0.16); }

/* The page itself must be transparent for the scene to show through. */
html[data-scene] body:not(.has-custom-bg),
html[data-scene] body.theme-morning:not(.has-custom-bg),
html[data-scene] body.theme-midday:not(.has-custom-bg),
html[data-scene] body.theme-evening:not(.has-custom-bg),
html[data-scene] body.theme-reflect:not(.has-custom-bg),
html[data-scene] body.portal { background: transparent; }

/* Off switches */
html[data-calm="on"]::before, html[data-calm="on"]::after,
html[data-bg="plain"]::before, html[data-bg="plain"]::after,
html:has(body.has-custom-bg)::before, html:has(body.has-custom-bg)::after { display: none; }
html[data-bg="plain"] body:not(.has-custom-bg), html[data-bg="plain"] body.portal { background: var(--md-paper, #F5F8FD); }

/* ══════════════════════════════════════════════════════════════════════
   Frosted-glass windows — opacity by importance
   Windows are white glass over the scene with a blur behind them. How
   see-through a window is depends on what it holds:

     --glass-focus   0.90  where the child communicates: question, sentence
                           strip, word tiles, controls, caregiver notes,
                           hint, Today's Activities items, dialogs
     --glass-card    0.85  cards to read: Home cards, Calendar, journal,
                           sign-in and Parent Dashboard panels
     --glass-label   0.90  small headings sitting on the picture
     --glass-nav     0.28  the navigation rail / bottom bar (≈72 % clear)

   Word tiles, buttons and form fields stay solid. tests/v51-themes.spec.js
   checks text contrast against the darkest pixel of each picture (worst
   case), so WCAG AA holds wherever a panel sits.
   Low stimulation and "plain backgrounds" switch every panel back to solid.
   ══════════════════════════════════════════════════════════════════════ */
html[data-scene] {
  --glass-focus: rgba(255, 255, 255, 0.90);
  --glass-card: rgba(255, 255, 255, 0.85);
  --glass-label: rgba(255, 255, 255, 0.90);
  --glass-nav: rgba(240, 247, 255, 0.28);
  --glass-edge: rgba(255, 255, 255, 0.80);
  --glass-blur: blur(10px) saturate(1.15);
  --glass-shadow: 0 4px 18px rgba(35, 65, 115, 0.10);
}
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) {
  --scene-on: 1;
}

/* Focus tier — the child's communication space */
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) :is(
  #prompt-card, #builder-wrap:not([style*="none"]), #word-bank, #bank-header, #section-header, #progress-wrap,
  #controls, #caregiver-notes-wrap, #feedback:not(:empty), #yn-wrap:not([style*="none"]),
  #location-wrap:not([style*="none"]), #mood-wrap:not([style*="none"]), #why-wrap:not([style*="none"]), #add-tile-wrap,
  #finish-screen .f-icon ~ *, .journey-wrap, .jr-item, .ad-card, #pp-inner, #qe-inner, #cg-inner, .pcn-modal
) {
  background: var(--glass-focus) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-color: var(--glass-edge) !important;
}
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) :is(
  #builder-wrap:not([style*="none"]), #word-bank, #bank-header, #section-header, #progress-wrap, #controls,
  #caregiver-notes-wrap, #feedback:not(:empty), #add-tile-wrap
) { border-radius: 18px; padding-left: 14px; padding-right: 14px; }
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) :is(#word-bank, #builder-wrap:not([style*="none"])) { padding: 12px 14px; }
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) .skip-btn { background: #FFFFFF; box-shadow: var(--glass-shadow); }
/* Caregiver notes: a clearly defined strip with a solid tip */
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) #caregiver-notes-wrap {
  margin-top: 8px; padding-top: 8px; padding-bottom: 8px;
  border: 1.5px solid rgba(54, 88, 140, 0.28) !important; box-shadow: var(--glass-shadow);
}
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) .cg-quick-tip { background: #FFFFFF; border: 1px solid var(--md-line); }
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) .caregiver-notes-btn { background: #FFFFFF !important; color: var(--md-ink) !important; }
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) .jr-item.is-done { background: rgba(238, 249, 242, 0.92) !important; }

/* Card tier — things to read */
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) :is(
  #quick-phrases-wrap, #day-progress-card, .section-card, .explore-card, .cal-container, #weekly-summary, .jj-day,
  .auth-card, .panel, .dash-link, .portal-header, .lp-section
) {
  background: var(--glass-card) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-color: var(--glass-edge) !important;
  box-shadow: var(--glass-shadow);
}
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) .explore-card.is-preview { border-style: dashed !important; border-color: rgba(54, 88, 140, 0.35) !important; }
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) :is(.explore-card .ec-desc, .section-card .sc-info p) { color: var(--md-ink-soft) !important; }

/* Let's Talk stays the solid-blue focal point */
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) .talk-card { background: var(--md-navy) !important; box-shadow: 0 8px 26px rgba(35, 65, 115, 0.25); }

/* Section headings on the picture: clearly defined labels */
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) :is(.home-heading, .home-hello) {
  background: var(--glass-label); border: 1.5px solid rgba(54, 88, 140, 0.22);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: 16px; padding: 6px 16px; width: fit-content; max-width: 100%; color: var(--md-ink);
}

/* Parent settings (v4.1 parent panel overlay) on the green classroom */
html:not([data-calm="on"]):not([data-bg="plain"]) #parent-panel.show {
  background-color: rgba(34, 50, 77, 0.30);
  background-image: linear-gradient(rgba(34, 50, 77, 0.22), rgba(34, 50, 77, 0.22)), url("/assets/backgrounds/classroom-green-1672.jpg");
  background-image: linear-gradient(rgba(34, 50, 77, 0.22), rgba(34, 50, 77, 0.22)), image-set(url("/assets/backgrounds/classroom-green-1672.webp") type("image/webp"), url("/assets/backgrounds/classroom-green-1672.jpg") type("image/jpeg"));
  background-size: cover; background-position: center;
}

/* ── Navigation rail (bottom bar on phones): ≈72 % clear, defined edge ── */
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) #topbar {
  background: var(--glass-nav);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border-right: 2px solid rgba(54, 88, 140, 0.58);
  box-shadow: 3px 0 12px rgba(35, 65, 115, 0.12);
}
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) :is(.time-tab, #topbar-right .icon-btn) {
  color: var(--md-ink);
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.95), 0 0 7px rgba(255, 255, 255, 0.85);
}
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) :is(.time-tab, #topbar-right .icon-btn):hover { background: rgba(255, 255, 255, 0.60); }
html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) :is(#topbar-right, #nav-profile) { border-color: rgba(54, 88, 140, 0.35); }
@media (max-width: 760px) {
  html[data-scene]:not([data-bg="plain"]):not([data-calm="on"]) #topbar {
    /* the bar floats over word tiles on phones: a little more frosting */
    background: rgba(240, 247, 255, 0.40);
    -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
    border-right: 0; border-top: 2px solid rgba(54, 88, 140, 0.58);
    box-shadow: 0 -3px 12px rgba(35, 65, 115, 0.12);
  }
}

/* Browsers without backdrop blur: slightly more solid windows */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-scene] { --glass-focus: rgba(255, 255, 255, 0.95); --glass-card: rgba(255, 255, 255, 0.92); --glass-nav: rgba(240, 247, 255, 0.55); }
}