/* =========================================================
   Case studies, night theme: the home page's lake, carried on.
   One background (the home page's night) with a faint dusk glow behind the title,
   one accent (the home page's peach), no ripples.
   Loads after case.css (and askinto.css), and only re-colours: layout stays as it is.
   Charts and the moodboard stay on light "paper" cards, because they're drawn dark-on-light.
   ========================================================= */
.case {
  --bg: #15131d;
  --surface: #1e1b29;
  --surface-2: #2a2637;
  --text: #f6eee4;
  --text-2: #d8ced6;       /* body copy, softer than headings */
  --muted: #bcb3c4;
  --border: rgba(246, 238, 228, 0.12);
  --focus: #ffd9a8;
  --case: #f3a573;         /* the one accent: home page peach */
  --case-bright: #f3a573;
  --case-soft: rgba(243, 165, 115, 0.12);
  --accent-ink: #f3a573;
  --peach-soft: rgba(243, 165, 115, 0.1);
  --shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.7);
}
.case ::selection { background: rgba(243, 165, 115, 0.3); }

/* light "paper" cards for things drawn dark-on-light (the two charts, the moodboard):
   inside them the old reading colours come back */
.case .streams {
  --text: #221d2b; --text-2: #3f3747; --muted: #675e6b; --border: rgba(34, 29, 43, 0.12);
  --case: #a14d1f; --accent-ink: #a14d1f;
  background: #fbf6ef; color: var(--text); border-color: transparent;
}

/* ---------- hero: the dusk glow, fading into the night within the first screen ---------- */
.case .case-hero {
  padding-bottom: clamp(72px, 10vh, 112px);
  background:
    radial-gradient(65% 70% at 72% 0%, rgba(243, 165, 115, 0.16), transparent 70%),
    linear-gradient(180deg, #252b47 0%, #1c1a2d 60%, var(--bg) 100%);
}
.case .hero-water { display: none; }
.case .meta dt { color: var(--muted); }

/* ---------- top bar and side rail: the same night glass everywhere ---------- */
.case .topbar, .case .topbar.on-hero { background: rgba(21, 19, 29, 0.78); color: var(--text); border-color: var(--border); }
.case .topbar.site-nav, .case .topbar.site-nav.on-hero { --nav-solid: rgba(21, 19, 29, 0.78); --nav-panel: #1e1b29; --nav-line: var(--border); }
.case .topbar:not(.on-hero) .nm { --water: #9fc3f0; }
.case .topbar:not(.on-hero) .nm::after { background: none; }
.case .rail, .case .rail.on-hero { color: var(--text); }
.case .motion-toggle[aria-pressed="true"] .mt-track { background: var(--case); }

/* ---------- no ripples: rings, splashes and pulses go; the plain marks stay ---------- */
.case .cs-num::before,
.case .rail a.is-active .rail-dot::before, .case .rail a.is-active .rail-dot::after,
.case .skim-marks i.passed::after,
.case .stone-btn.is-current .peb::after,
.case .learning::after,
.case .lake-ripple { display: none; }

/* ---------- pieces that had their own light colours ---------- */
.case .callout { border-left-color: var(--case); }
.case .decision { border-color: rgba(243, 165, 115, 0.22); }
.case .learning-n { color: rgba(243, 165, 115, 0.55); }
.case .stones::before { background: repeating-linear-gradient(90deg, rgba(246, 238, 228, 0.25) 0 4px, transparent 4px 9px); }
.case .stone-btn.is-current .peb, .case .door-n, .case .try-me { color: var(--on-accent); }
.case .ba-toggle button[aria-pressed="true"] { color: var(--on-accent); }
.case .ba-thumb { background: var(--text); }
.case .seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.case .fields-grid i { border-color: rgba(246, 238, 228, 0.12); }
.case .fields-grid i.keep { background: rgba(243, 165, 115, 0.2); border-color: rgba(243, 165, 115, 0.5); }
.case .pedestal { background: radial-gradient(120% 90% at 50% 0%, rgba(243, 165, 115, 0.1), transparent 65%), var(--surface-2); }
.case .chip-btn:hover, .case .next-case:hover { border-color: rgba(243, 165, 115, 0.5); }
.case .concept:hover { box-shadow: 0 16px 30px -12px rgba(40, 20, 10, 0.4), 0 0 0 1px rgba(243, 165, 115, 0.5); }
.case .walk-rate button[aria-pressed="true"] { background: rgba(243, 165, 115, 0.18); }
.case .toast-on { color: var(--on-accent); }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(243, 165, 115, 0.45); } 80%, 100% { box-shadow: 0 0 0 7px rgba(243, 165, 115, 0); } }

/* =========================================================
   AskINTO: its figures carry their colours inline, so these rules re-colour them.
   "Paper" = anything with a light inline background: text inside stays dark (it's a card).
   Text sitting straight on the night turns light, and the teal becomes the one peach.
   ========================================================= */
.case-main [style*="color: #3f3747" i]:not(:is([style*="background: #fff" i], [style*="background: #efe8de" i], [style*="background: #ede6db" i], [style*="background: #e2dad0" i], [style*="background: #e9f2ee" i], [style*="background: #f4d8c4" i], [style*="background: #fbeadf" i], [style*="background: #f6faf9" i], [style*="background: #f1d9c8" i], [style*="background: #fcefe5" i], [style*="background: #d9cfc2" i], [style*="background: #d8d0c6" i], [style*="background: #c9e0da" i], [style*="background: #e8b992" i], [style*="background: #f0c8a0" i], [style*="background: #c9b" i], [style*="background: #b9b1a8" i], .ai-typing) *):not(:is([style*="background: #fff" i], [style*="background: #efe8de" i], [style*="background: #ede6db" i], [style*="background: #e2dad0" i], [style*="background: #e9f2ee" i], [style*="background: #f4d8c4" i], [style*="background: #fbeadf" i], [style*="background: #f6faf9" i], [style*="background: #f1d9c8" i], [style*="background: #fcefe5" i], [style*="background: #d9cfc2" i], [style*="background: #d8d0c6" i], [style*="background: #c9e0da" i], [style*="background: #e8b992" i], [style*="background: #f0c8a0" i], [style*="background: #c9b" i], [style*="background: #b9b1a8" i], .ai-typing)) { color: var(--text-2) !important; }
.case-main [style*="color: #221d2b" i]:not(:is([style*="background: #fff" i], [style*="background: #efe8de" i], [style*="background: #ede6db" i], [style*="background: #e2dad0" i], [style*="background: #e9f2ee" i], [style*="background: #f4d8c4" i], [style*="background: #fbeadf" i], [style*="background: #f6faf9" i], [style*="background: #f1d9c8" i], [style*="background: #fcefe5" i], [style*="background: #d9cfc2" i], [style*="background: #d8d0c6" i], [style*="background: #c9e0da" i], [style*="background: #e8b992" i], [style*="background: #f0c8a0" i], [style*="background: #c9b" i], [style*="background: #b9b1a8" i], .ai-typing) *):not(:is([style*="background: #fff" i], [style*="background: #efe8de" i], [style*="background: #ede6db" i], [style*="background: #e2dad0" i], [style*="background: #e9f2ee" i], [style*="background: #f4d8c4" i], [style*="background: #fbeadf" i], [style*="background: #f6faf9" i], [style*="background: #f1d9c8" i], [style*="background: #fcefe5" i], [style*="background: #d9cfc2" i], [style*="background: #d8d0c6" i], [style*="background: #c9e0da" i], [style*="background: #e8b992" i], [style*="background: #f0c8a0" i], [style*="background: #c9b" i], [style*="background: #b9b1a8" i], .ai-typing)) { color: var(--text) !important; }
.case-main :is([style*="color: #675e6b" i], [style*="color: #7d7280" i], [style*="color: #24302e" i]):not(:is([style*="background: #fff" i], [style*="background: #efe8de" i], [style*="background: #ede6db" i], [style*="background: #e2dad0" i], [style*="background: #e9f2ee" i], [style*="background: #f4d8c4" i], [style*="background: #fbeadf" i], [style*="background: #f6faf9" i], [style*="background: #f1d9c8" i], [style*="background: #fcefe5" i], [style*="background: #d9cfc2" i], [style*="background: #d8d0c6" i], [style*="background: #c9e0da" i], [style*="background: #e8b992" i], [style*="background: #f0c8a0" i], [style*="background: #c9b" i], [style*="background: #b9b1a8" i], .ai-typing) *):not(:is([style*="background: #fff" i], [style*="background: #efe8de" i], [style*="background: #ede6db" i], [style*="background: #e2dad0" i], [style*="background: #e9f2ee" i], [style*="background: #f4d8c4" i], [style*="background: #fbeadf" i], [style*="background: #f6faf9" i], [style*="background: #f1d9c8" i], [style*="background: #fcefe5" i], [style*="background: #d9cfc2" i], [style*="background: #d8d0c6" i], [style*="background: #c9e0da" i], [style*="background: #e8b992" i], [style*="background: #f0c8a0" i], [style*="background: #c9b" i], [style*="background: #b9b1a8" i], .ai-typing)) { color: var(--muted) !important; }

/* teal text: peach on the night, deep peach on paper */
.case-main [style*="color: #0f6f63" i] { color: #a14d1f !important; }
.case-main [style*="color: #0f6f63" i]:not(:is([style*="background: #fff" i], [style*="background: #efe8de" i], [style*="background: #ede6db" i], [style*="background: #e2dad0" i], [style*="background: #e9f2ee" i], [style*="background: #f4d8c4" i], [style*="background: #fbeadf" i], [style*="background: #f6faf9" i], [style*="background: #f1d9c8" i], [style*="background: #fcefe5" i], [style*="background: #d9cfc2" i], [style*="background: #d8d0c6" i], [style*="background: #c9e0da" i], [style*="background: #e8b992" i], [style*="background: #f0c8a0" i], [style*="background: #c9b" i], [style*="background: #b9b1a8" i], .ai-typing) *):not(:is([style*="background: #fff" i], [style*="background: #efe8de" i], [style*="background: #ede6db" i], [style*="background: #e2dad0" i], [style*="background: #e9f2ee" i], [style*="background: #f4d8c4" i], [style*="background: #fbeadf" i], [style*="background: #f6faf9" i], [style*="background: #f1d9c8" i], [style*="background: #fcefe5" i], [style*="background: #d9cfc2" i], [style*="background: #d8d0c6" i], [style*="background: #c9e0da" i], [style*="background: #e8b992" i], [style*="background: #f0c8a0" i], [style*="background: #c9b" i], [style*="background: #b9b1a8" i], .ai-typing)) { color: var(--accent) !important; }
.case-main :is([style*="color: #7fd1c1" i], [style*="color: #bfe0d8" i], [style*="color: #c9e5de" i], [style*="color: #e3f1ed" i]) { color: var(--accent) !important; }

/* teal fills become peach, and what sits on them goes dark */
.case-main [style*="background: #0f6f63" i], .case-main [style*="background: #7fd1c1" i],
.case-main [style*="background: #4e9488" i] { background: var(--accent) !important; color: var(--on-accent) !important; }
.case-main :is([style*="background: #0f6f63" i], [style*="background: #4e9488" i]) :is([style*="color: #fff" i], [style*="color: #bfe0d8" i], [style*="color: #c9e5de" i], [style*="color: #e3f1ed" i], [style*="color: #7fd1c1" i]) { color: var(--on-accent) !important; }
.case-main [style*="background: #8fbfb5" i] { background: #e8b992 !important; }
.case-main :is([style*="background: #e9f2ee" i], [style*="background: #f6faf9" i], [style*="background: #c9e0da" i]) { background: #fbeee3 !important; }
.case-main [style*="#0f6f63" i][style*="border" i] { border-color: var(--accent) !important; }
.case-main :is([style*="#cde3dd" i], [style*="#8fbfb5" i])[style*="border" i] { border-color: rgba(243, 165, 115, 0.45) !important; }

/* paper cards keep the old reading colours for everything inside them, however it's coloured */
.case-main :is([style*="background: #fff" i], [style*="background: #efe8de" i], [style*="background: #ede6db" i], [style*="background: #e2dad0" i], [style*="background: #e9f2ee" i], [style*="background: #f4d8c4" i], [style*="background: #fbeadf" i], [style*="background: #f6faf9" i], [style*="background: #f1d9c8" i], [style*="background: #fcefe5" i], [style*="background: #d9cfc2" i], [style*="background: #d8d0c6" i], [style*="background: #c9e0da" i], [style*="background: #e8b992" i], [style*="background: #f0c8a0" i], [style*="background: #c9b" i], [style*="background: #b9b1a8" i], .ai-typing, .ai-msg-bot, .ai-msg-ok, .ai-msg-user, .ai-tq-user, .ai-tq-bot, .ai-fb, .ai-reason) {
  --text: #221d2b; --text-2: #3f3747; --muted: #675e6b; --border: rgba(34, 29, 43, 0.12); --case: #a14d1f; --case-soft: rgba(243, 165, 115, 0.16);
  --surface: #fffdf9; --surface-2: #efe8de; --accent-ink: #a14d1f;
  color: var(--text);
}
.case-main :is(.ai-msg-ok, .ai-tq-bot) { background: #fbeee3; border-color: #f0cfb6; }
.case-main .ai-chips span { border-color: #f0cfb6; }
/* white on peach reads poorly: dark, like the primary button */
.case :is(.ai-try, .ai-branch button[aria-pressed="true"], .ai-fb[data-fb="up"][aria-pressed="true"]) { color: var(--on-accent); }
.case-main [style*="background: #0f6f63" i] * { color: var(--on-accent) !important; }
/* deep-peach text that sits straight on the night: the bright peach instead */
.case-main :is([style*="color: #a14d1f" i], [style*="color: #8a3f17" i], [style*="color: #7a3a16" i]):not(:is([style*="background: #fff" i], [style*="background: #efe8de" i], [style*="background: #ede6db" i], [style*="background: #e2dad0" i], [style*="background: #e9f2ee" i], [style*="background: #f4d8c4" i], [style*="background: #fbeadf" i], [style*="background: #f6faf9" i], [style*="background: #f1d9c8" i], [style*="background: #fcefe5" i], [style*="background: #d9cfc2" i], [style*="background: #d8d0c6" i], [style*="background: #c9e0da" i], [style*="background: #e8b992" i], [style*="background: #f0c8a0" i], [style*="background: #c9b" i], [style*="background: #b9b1a8" i], .ai-typing) *):not(:is([style*="background: #fff" i], [style*="background: #efe8de" i], [style*="background: #ede6db" i], [style*="background: #e2dad0" i], [style*="background: #e9f2ee" i], [style*="background: #f4d8c4" i], [style*="background: #fbeadf" i], [style*="background: #f6faf9" i], [style*="background: #f1d9c8" i], [style*="background: #fcefe5" i], [style*="background: #d9cfc2" i], [style*="background: #d8d0c6" i], [style*="background: #c9e0da" i], [style*="background: #e8b992" i], [style*="background: #f0c8a0" i], [style*="background: #c9b" i], [style*="background: #b9b1a8" i], .ai-typing)) { color: var(--accent) !important; }
/* AskINTO's before / after switch: dark label on the cream (before) and peach (after) thumb */
.case .ai-seg button[aria-pressed="true"] { color: var(--on-accent); }

/* AskINTO's opening before / after used to tuck up into the tall dusk hero; the night hero is shorter,
   so it now starts just below it instead of overlapping the Role / Company row */
.case .ask-intro { margin-top: clamp(8px, 2vw, 24px); }

/* the key result in a subtitle: the same peach as the eyebrow above it, in bold */
.case .lede-hl { color: var(--accent); font-weight: 600; }

/* side rail: no dots. The section you're reading is the peach one; the rest stay soft */
.case .rail a.is-active { color: var(--accent); }

/* AskINTO's animations rewrite some inline colours as rgb(); catch the teal in that form too */
.case-main [style*="background: rgb(15, 111, 99)"] { background: var(--accent) !important; color: var(--on-accent) !important; }
.case-main [style*="background: rgb(15, 111, 99)"] * { color: var(--on-accent) !important; }
.case-main [style*="color: rgb(15, 111, 99)"] { color: #a14d1f !important; }
.case-main [style*="background: rgb(78, 148, 136)"] { background: var(--accent) !important; }
.case-main [style*="background: rgb(143, 191, 181)"] { background: #e8b992 !important; }
.case-main [style*="background: rgb(201, 224, 218)"] { background: #fbeee3 !important; }
/* the screens on the laptops and phones in the user story drawings */
.case-main [style*="background:#7fd1c1"] { background: #f4d8c4 !important; }