/* ==========================================================================
   SETL MAP: theme-red.css  (loaded last)
   The owner's "red" look. Active only while <html data-theme="red"> (header switch, js/theme.js).
   It changes exactly three things and nothing else:
     1. every call-to-action BUTTON is fully red with white text;
     2. the page background is pure white (the weather canvas is switched off);
     3. all text is set in Inter.
   Everything else (cards, illustrations, scene, shapes, sizes, motion) stays as in the default look.
   ========================================================================== */

/* ───── THE RED, IN ONE PLACE ─────────────────────────────────────────────
   Change the hex below to recolour every red button. The darker hover and
   pressed shades are calculated from it automatically.                       */
:root {
  --theme-red: #E8363D;     /* <<< button colour of the red theme */
  --theme-white: #FFFFFF;   /* page background of the red theme */
}

html:is([data-theme="red"], [data-theme="clean"]) {
  /* fonts and the shade variables: shared by the red look and the clean look (all screens) */
  --theme-red-hover: color-mix(in srgb, var(--theme-red) 88%, #000);
  --theme-red-press: color-mix(in srgb, var(--theme-red) 76%, #000);

  /* 3. font: Inter everywhere. Headings use "Inter Display", the same face scaled to 78% (see fonts.css),
        because the default heading face is much narrower and smaller on the line than Inter. */
  --font-display: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

}

html[data-theme="red"] {
  /* fades under scrolling lists and above the sticky mobile button bar: into white instead of cream */
  --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%);
}

/* buttons keep their lifted shadow, tinted with the red (red look, and the clean look on its white screens only) */
html:is([data-theme="red"], [data-theme="clean"][data-white], [data-theme="clean"][data-screen="results"]) { --shadow-btn: 0 10px 24px -10px color-mix(in srgb, var(--theme-red) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22); }

/* ==========================================================================
   2. PAGE BACKGROUND: pure white
   ========================================================================== */
html[data-theme="red"], html[data-theme="red"] body { background: var(--theme-white); }
/* the living background (dusk layer, weather canvas, vignette, paper grain) is off; core.js also stops the canvas loop */
html[data-theme="red"] .stage-bg,
html[data-theme="red"] #atmosphere { display: none !important; }
html[data-theme="red"] body::before,
html[data-theme="red"] body::after { display: none; }
html[data-theme="red"] .preloader { background: var(--theme-white); }
html[data-theme="red"] .preloader::after { display: none; }
/* core.js sets the circle wipe colour inline (dusk or paper), so this needs !important */
html[data-theme="red"] .wipe { background: var(--theme-white) !important; }
html[data-theme="red"] .chrome.is-solid { background: rgba(255, 255, 255, .86); }
/* 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="red"] .panel:not(.panel--bare) { background: var(--theme-white); }
}

/* Evening ("dusk") screens: the dark backdrop turns white, so the text that sits straight on it turns to ink.
   Dark inner cards keep their own colours: the list under "islands" restores the dusk palette inside them. */
html[data-theme="red"] body[data-tone="dusk"],
html[data-theme="red"] .rs-dusk,
html[data-theme="red"] .chrome[data-tone="dusk"] {
  --bg: var(--theme-white); --fg: var(--ink); --fg-2: var(--ink-2); --hair: var(--line); --ring: var(--focus-ring);
  --on-dusk: var(--ink); --on-dusk-2: var(--ink-2);
}
html[data-theme="red"] .rs-dusk { background: var(--theme-white); }
html[data-theme="red"] .rs-dusk::before { display: none; }
html[data-theme="red"] .chrome[data-tone="dusk"] { background: rgba(255, 255, 255, .86); box-shadow: 0 1px 0 var(--line); --c-line: var(--line-strong); }
html[data-theme="red"] [data-tone="dusk"] :focus-visible { box-shadow: var(--focus-ring); }
html[data-theme="red"] [data-tone="dusk"] .chrome { --c-line: var(--line-strong); }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="red"] [data-tone="dusk"] .chrome__back:hover, html[data-theme="red"] [data-tone="dusk"] .theme-toggle:hover,
  html[data-theme="red"] [data-tone="dusk"] .icon-btn:hover { background: var(--paper-2); }
}

/* islands: dark cards that stay dark on the white page */
html[data-theme="red"] .as-stage,
html[data-theme="red"] .dt-cap,
html[data-theme="red"] .as-q {
  --fg: #F6EFE3; --fg-2: #D9D0DE; --hair: rgba(246, 239, 227, .18); --ring: var(--focus-ring-dusk);
  --on-dusk: #F6EFE3; --on-dusk-2: #D9D0DE; color: var(--on-dusk);
}
html[data-theme="red"] .as-stage :focus-visible, html[data-theme="red"] .dt-cap :focus-visible, html[data-theme="red"] .as-q :focus-visible { box-shadow: var(--focus-ring-dusk); }

/* text on the white backdrop that was gold on dusk: eyebrow captions, accent words, small gold labels */
html[data-theme="red"] [data-tone="dusk"] .caption--accent,
html[data-theme="red"] .as-compute__eyebrow,
html[data-theme="red"] .as-head__cap,
html[data-theme="red"] .as-meter__pct,
html[data-theme="red"] .rs-prev__more,
html[data-theme="red"] .dt-mark.is-active { color: var(--sun-deep); }
html[data-theme="red"] .rs-closing em { color: var(--terra); }
html[data-theme="red"] .rs-key { color: var(--sun); }
html[data-theme="red"] .rs-spark { background: var(--sun); }
html[data-theme="red"] [data-tone="dusk"] :is(h1, h2, h3, .display) em { color: var(--terra); }
html[data-theme="red"] [data-tone="dusk"] .as-q .caption--accent, html[data-theme="red"] [data-tone="dusk"] .as-q :is(h1, h2, h3, .display) em,
html[data-theme="red"] [data-tone="dusk"] .dt-cap .caption--accent, html[data-theme="red"] [data-tone="dusk"] .dt-cap :is(h1, h2, h3, .display) em { color: var(--glow); }
html[data-theme="red"] .site-foot .demo-tag, html[data-theme="red"] [data-tone="dusk"] .site-foot .demo-tag { background: var(--glass-paper); color: var(--ink-3); }
html[data-theme="red"] .rs-formcard, html[data-theme="red"] .rs-mgr { box-shadow: var(--shadow-card); }
/* footer skyline: the street strip under the towers is white, so the page ends white */
html[data-theme="red"] .rs-sky--foot::after { background: var(--theme-white); border-top-color: var(--line-strong); box-shadow: none; }

/* assemble screen (06): strokes, fills and discs that were cream or gold on dusk */
html[data-theme="red"] .as-compute::before {
  background:
    radial-gradient(circle, rgba(242, 169, 59, .12) 0%, rgba(242, 169, 59, .04) 26%, transparent 58%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 13vh, rgba(42, 33, 27, .07) 13vh calc(13vh + 1px));
}
html[data-theme="red"] .as-arc__track { stroke: rgba(42, 33, 27, .3); }
html[data-theme="red"] .as-arc__done { stroke: var(--sun); }
html[data-theme="red"] .as-node { background: var(--card); border-color: var(--line-strong); }
html[data-theme="red"] .as-node.is-lit { background: var(--glow); border-color: var(--sun); }
html[data-theme="red"] .as-line__dot { background: var(--sun); }
html[data-theme="red"] .as-line__check { color: var(--sun-deep); }
html[data-theme="red"] .as-meter__bar { background: rgba(42, 33, 27, .1); }
html[data-theme="red"] .as-meter__bar i, html[data-theme="red"] .dt-scrub__fill { background: var(--sun); }
html[data-theme="red"] .dt-scrub__line { background: rgba(42, 33, 27, .14); }
html[data-theme="red"] .dt-mark__node { background: var(--theme-white); border-color: rgba(42, 33, 27, .4); }
html[data-theme="red"] .dt-mark.is-done .dt-mark__node { background: var(--ink); border-color: var(--ink); }
html[data-theme="red"] .dt-mark.is-active .dt-mark__node { background: var(--sun); border-color: var(--sun); }
html[data-theme="red"] .dt-ctrl__play { border-color: rgba(42, 33, 27, .45); }
@media (hover: hover) and (pointer: fine) { html[data-theme="red"] .dt-ctrl__play:hover { background: var(--paper-2); } }
html[data-theme="red"] .rs-prev { background: transparent; }
html[data-theme="red"] .rs-prev .tag { background: var(--card-2); }
html[data-theme="red"] .rs-prev .tag--ghost { background: transparent; border-color: var(--line-strong); }
/* the evening dock of the day film on phones rides on its own dark pill over the scene: that pill stays dark */
@media (max-width: 1023px) and (not ((orientation: landscape) and (max-height: 520px))) {
  html[data-theme="red"] .as-clock-mount { --on-dusk: #F6EFE3; --on-dusk-2: #D9D0DE; }
}

/* ==========================================================================
   1. BUTTONS: fully red, white label
   --------------------------------------------------------------------------
   Counts as a button (every .btn, however it is built by SetlMap.button):
     intro CTA, Next / Back / skip-to-end on question screens, the assemble question (Yes / Fix / Again / Skip),
     day-film controls (Back / Next / Skip / Again), results hero buttons, results card actions, rewind and
     compare action buttons, lead form submit, the floating "form" button, success and footer buttons.
   Does NOT count (stays as designed): selection cards, answer rows, chips, pills, segmented tabs, room chips,
     range handles and sliders, timeline marks, the play / swap / header-back icon buttons, the progress dots,
     the theme switch itself, text links.
   !important is deliberate: it beats every per-screen variant (dusk, results form, card links) in one place.
   ========================================================================== */
html:is([data-theme="red"], [data-theme="clean"][data-white], [data-theme="clean"][data-screen="results"]) .btn {
  background: var(--theme-red) !important;
  border-color: var(--theme-red) !important;
  color: #fff !important;
}
html:is([data-theme="red"], [data-theme="clean"][data-white], [data-theme="clean"][data-screen="results"]) .btn--primary { box-shadow: var(--shadow-btn); }
html:is([data-theme="red"], [data-theme="clean"][data-white], [data-theme="clean"][data-screen="results"]) [data-tone="dusk"] .btn--primary { box-shadow: var(--shadow-btn); }
html:is([data-theme="red"], [data-theme="clean"][data-white], [data-theme="clean"][data-screen="results"]) .btn:active:not([aria-disabled="true"]):not(:disabled) {
  background: var(--theme-red-press) !important; border-color: var(--theme-red-press) !important;
}
@media (hover: hover) and (pointer: fine) {
  html:is([data-theme="red"], [data-theme="clean"][data-white], [data-theme="clean"][data-screen="results"]) .btn:hover:not([aria-disabled="true"]):not(:disabled) {
    background: var(--theme-red-hover) !important; border-color: var(--theme-red-hover) !important; color: #fff !important;
  }
}
html:is([data-theme="red"], [data-theme="clean"][data-white], [data-theme="clean"][data-screen="results"]) .btn:focus-visible,
html:is([data-theme="red"], [data-theme="clean"][data-white], [data-theme="clean"][data-screen="results"]) [data-tone="dusk"] .btn:focus-visible,
html:is([data-theme="red"], [data-theme="clean"][data-white], [data-theme="clean"][data-screen="results"]) .rs-dusk .rs-formcard .btn:focus-visible {
  box-shadow: 0 0 0 2px var(--theme-white), 0 0 0 5px var(--theme-red);
}
/* disabled: a muted red-grey fill (not a faded red) so the white label keeps about 4:1 contrast */
html:is([data-theme="red"], [data-theme="clean"][data-white], [data-theme="clean"][data-screen="results"]) .btn[aria-disabled="true"], html:is([data-theme="red"], [data-theme="clean"][data-white], [data-theme="clean"][data-screen="results"]) .btn:disabled {
  background: color-mix(in srgb, var(--theme-red) 60%, #8A8A8A) !important;
  border-color: color-mix(in srgb, var(--theme-red) 60%, #8A8A8A) !important;
  box-shadow: none !important;
}
html:is([data-theme="red"], [data-theme="clean"][data-white], [data-theme="clean"][data-screen="results"]) .btn--pulse::after { border-color: var(--theme-red); }

/* ==========================================================================
   Header switch: the dot now previews the way back (the default look's sun)
   ========================================================================== */
/* red look: the next press gives the clean look (white with a red core); clean look: the next press gives the default sun */
html[data-theme="red"] .theme-toggle__dot { background: radial-gradient(circle, var(--theme-red) 0 36%, #fff 40%); }
html[data-theme="clean"] .theme-toggle__dot { background: var(--grad-sun); }

/* ==========================================================================
   Cross-fade of the switch. js/theme.js uses View Transitions where available;
   elsewhere it adds .theme-fade for ~330 ms.
   ========================================================================== */
::view-transition-group(root) { animation-duration: .25s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; animation-timing-function: ease; }
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, fill .25s ease, stroke .25s ease !important;
}

/* SVG text that carries its own font-family attribute (scene labels, cafe sign) */
html:is([data-theme="red"], [data-theme="clean"]) text[font-family] { font-family: var(--font-text); }