/* ==========================================================================
   SETL MAP: theme-clean.css  (loaded after theme-red.css)
   The third look, active while <html data-theme="clean"> (header switch, js/theme.js).
   What it does:
     1. the first screens (intro and the four questions) have a pure white page and red accents/buttons.
        Which screens: WHITE_SCREENS in js/theme.js (the attribute <html data-white> is set on them);
     2. the font is Inter on ALL screens (shared with the red look, see theme-red.css);
     3. every colour rule below applies ONLY on the white screens. On all other screens
        (evening assemble, results) the colours are exactly the default look.
     4. the headline word "жизнь": no sparkles, a full-width straight underline in red;
     5. the results screen: white page and red buttons only. Its dark closing block (form + footer) stays dark,
        every other colour there is the default look.
   Illustrations (apartment, facades, sun, figures, windows, ticker stars) are never recoloured:
   only interface elements are, and no shared colour variable (--terra, --sun, --glow) is overridden.
   The red lives in ONE place: --theme-red in theme-red.css.
   ========================================================================== */

/* ───── white page ───── */
html[data-theme="clean"] #atmosphere,
html[data-theme="clean"] .stage-bg,
html[data-theme="clean"] body::before,
html[data-theme="clean"] body::after { transition: opacity .6s ease; }

html[data-theme="clean"][data-white],
html[data-theme="clean"][data-white] body { background: var(--theme-white); }
html[data-theme="clean"][data-white] #atmosphere,
html[data-theme="clean"][data-white] .stage-bg,
html[data-theme="clean"][data-white] body::before,
html[data-theme="clean"][data-white] body::after { opacity: 0 !important; }
html[data-theme="clean"][data-white] .preloader { background: var(--theme-white); }
html[data-theme="clean"][data-white] .preloader::after { display: none; }
html[data-theme="clean"][data-white] .chrome.is-solid:not([data-tone="dusk"]) { background: rgba(255, 255, 255, .86); }
/* fades under scrolling lists / above the sticky mobile button bar: into white */
html[data-theme="clean"][data-white] {
  --grad-fade-b: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--theme-white) 70%);
  --grad-fade-t: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, var(--theme-white) 70%);
  --focus-ring: 0 0 0 2px #fff, 0 0 0 5px var(--theme-red);
  --grad-budget: linear-gradient(90deg, color-mix(in srgb, var(--theme-red) 20%, #fff), var(--theme-red));
}
/* phones: the question sheet is the visible page, so it is white too */
@media (max-width: 1023px) and (not ((orientation: landscape) and (max-height: 520px))) {
  html[data-theme="clean"][data-white] .panel:not(.panel--bare) { background: var(--theme-white); }
}

/* ───── red accents of the interface (white screens only) ───── */
html[data-theme="clean"][data-white] :is(h1, h2, h3, .display) em,
html[data-theme="clean"][data-white] .accent,
html[data-theme="clean"][data-white] .caption--accent,
html[data-theme="clean"][data-white] .q-step,
html[data-theme="clean"][data-white] .q-w__sep,
html[data-theme="clean"][data-white] .q-feedback__icon,
html[data-theme="clean"][data-white] .in-eyebrow,
html[data-theme="clean"][data-white] .in-eyebrow__sun,
html[data-theme="clean"][data-white] .in-facts__i { color: var(--theme-red); }
html[data-theme="clean"][data-white] .q-pips i.is-cur { background: var(--theme-red); }
/* selected check discs and the flying disc of a chosen answer */
html[data-theme="clean"][data-white] .chip[aria-checked="true"] .chip__disc,
html[data-theme="clean"][data-white] .chip.is-selected .chip__disc,
html[data-theme="clean"][data-white] .q-fly--disc { background: var(--theme-red); color: #fff; }
/* budget slider, years pill, selected time row */
html[data-theme="clean"][data-white] .q-thumb__disc { background: var(--theme-red); color: #fff; }
html[data-theme="clean"][data-white] .q-thumb__halo { background: color-mix(in srgb, var(--theme-red) 22%, transparent); }
html[data-theme="clean"][data-white] .q-seg__sun { background: var(--theme-red); }
html[data-theme="clean"][data-white] .q-row[aria-checked="true"] .q-row__time { background: var(--theme-red); color: #fff; }
html[data-theme="clean"][data-white] ::selection { background: color-mix(in srgb, var(--theme-red) 28%, #fff); color: var(--ink); }

/* ───── the word "жизнь": no sparkles, a complete straight underline ───── */
html[data-theme="clean"] .in-spark,
html[data-theme="clean"] .in-accent__line { display: none; }
html[data-theme="clean"] .in-accent::after {
  content: ""; position: absolute; left: -.02em; right: -.03em; bottom: .02em; height: .075em;
  border-radius: 99px; background: var(--theme-red);
  transform-origin: 0 50%;
  transform: scaleX(var(--u, 1));   /* drawn left to right by the intro timeline (js/screen-intro.js sets --u from 0 to 1) */
}

/* ───── results screen: white page, red buttons (the buttons come from theme-red.css) ───── */
html[data-theme="clean"][data-screen="results"],
html[data-theme="clean"][data-screen="results"] body { background: var(--theme-white); }
html[data-theme="clean"][data-screen="results"] #atmosphere,
html[data-theme="clean"][data-screen="results"] .stage-bg,
html[data-theme="clean"][data-screen="results"] body::before,
html[data-theme="clean"][data-screen="results"] body::after { opacity: 0 !important; }
html[data-theme="clean"][data-screen="results"] .chrome.is-solid:not([data-tone="dusk"]) { background: rgba(255, 255, 255, .86); }
html[data-theme="clean"][data-screen="results"] {
  --grad-fade-b: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--theme-white) 70%);
  --grad-fade-t: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, var(--theme-white) 70%);
}