/* The theme switch, then dark mode for every style. Loaded last. Light mode is untouched. */

/* ---------- Switch ---------- */
.theme-switch {
  position: relative; display: block; flex: none; width: var(--s-600); height: var(--s-300); padding: 0;
  border: 1px solid #8A7BA3; border-radius: var(--r-full); background: var(--tint-strong); cursor: pointer;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
}
.theme-switch::after { content: ""; position: absolute; inset: calc(var(--s-75) * -1); } /* Larger tap area */
.theme-thumb {
  position: absolute; top: 1px; left: 1px; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: var(--r-full); background: var(--white); color: var(--violet-deep);
  box-shadow: 0 1px 4px rgba(28, 10, 51, 0.32);
  transition: transform 500ms var(--ease);
}
.theme-thumb svg { grid-area: 1 / 1; width: 14px; height: 14px; transition: opacity 300ms var(--ease); }
.theme-thumb .i-moon { opacity: 0; }
.theme-switch[aria-checked="true"] { background: var(--violet); border-color: #D9A0FF; }
.theme-switch[aria-checked="true"] .theme-thumb { transform: translateX(var(--s-300)); }
.theme-switch[aria-checked="true"] .i-sun { opacity: 0; }
.theme-switch[aria-checked="true"] .i-moon { opacity: 1; }
.theme-switch:hover { border-color: var(--violet); }
.theme-switch:active .theme-thumb { opacity: 0.85; }

.nav-theme { display: none; }
@media (min-width: 900px) { .nav-theme { display: block; } }
.mobile-menu .menu-theme { display: flex; align-items: center; justify-content: space-between; gap: var(--s-200); margin-top: var(--s-300); padding-top: var(--s-300); border-top: 1px solid var(--line); }
.page-nav .theme-switch { margin-left: auto; margin-right: var(--s-100); }

@media (prefers-reduced-motion: reduce) {
  .theme-thumb { transition: none; }
}

/* A gentle change between themes, only while switching */
.theme-changing body, .theme-changing section, .theme-changing footer, .theme-changing .panel,
.theme-changing .site-nav, .theme-changing .input, .theme-changing .device, .theme-changing .screen,
.theme-changing .bubble, .theme-changing .container, .theme-changing .faq-item {
  transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
}

/* ---------- Dark: colour tokens ---------- */
html.dark {
  color-scheme: dark;
  --lilac: #0D0419; --tint: #1E1033; --tint-strong: #2C1B47;
  --ink: #F3EEFB; --ink-soft: #C9BEDC; --line: #3A2A52;
  --violet-text: #D9A0FF; --danger: #FFB3C7;
}
html.dark :focus-visible { outline-color: var(--lilac-bright); }
html.dark ::selection { background: var(--violet); color: var(--white); }
html.dark .skip-link { background: var(--white); color: var(--aubergine); }

/* Bands lift off the page, since the page itself is now aubergine */
html.dark .band-dark { background: var(--tint); }
html.dark .band-dark .input { background: var(--aubergine); }
html.dark .band-dark .form-success { background: var(--aubergine); }
html.dark .btn:hover { background: var(--violet-deep); }

/* Hero heading: the skill's dark theme text gradient */
html.dark:not(.ol) .hero-title { background-image: linear-gradient(90deg, #FFFFFF, #9B9B9B); }

/* Navigation */
html.dark .site-nav { border-color: rgba(255, 255, 255, 0.12); background: rgba(30, 16, 51, 0.72); }
html.dark .nav-links a { color: var(--ink-soft); }
html.dark .nav-links a:hover, html.dark .nav-links a[aria-current="true"] { color: var(--ink); }
html.dark .mobile-menu { background: rgba(13, 4, 25, 0.96); }

/* Forms */
html.dark .input { background: var(--tint); }
html.dark .input::placeholder { color: var(--ink-soft); }

/* Conversation */
html.dark .device { background: var(--tint-strong); }
html.dark .screen { background: #160A28; }
html.dark .bubble-ai { background: var(--tint-strong); }
html.dark .illustration-note { color: var(--ink-soft); }

/* Panels */
html.dark .panel-dark { background: var(--tint-strong); }
html.dark .panel-dark .pill { background: var(--tint); }
html.dark .how-num { background: var(--tint-strong); }
html.dark .text-link:hover { background: var(--tint); }

html.dark .role-select { color-scheme: dark; }
html.dark .role-trigger.is-empty .role-value { color: var(--ink-soft); }
html.dark .role-list { border-color: rgba(255, 255, 255, 0.14); background: rgba(44, 27, 71, 0.82); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
html.dark .role-option + .role-option::before { background: rgba(255, 255, 255, 0.14); }
html.dark .role-option.is-active { background: rgba(217, 160, 255, 0.16); }
html.dark .role-tick { color: #D9A0FF; }
@media (prefers-reduced-transparency: reduce) { html.dark .role-list { background: #2C1B47; } }

/* ---------- Dark: Companion ---------- */
html.companion.dark .tagline, html.companion.dark .final { background: transparent; }
html.companion.dark .tagline::before, html.companion.dark .final::before { background: var(--tint); }

/* ---------- Dark: Still Water, the same water after dark ---------- */
html.still.dark {
  --glass: rgba(20, 10, 36, 0.93);
  --glass-strong: rgba(20, 10, 36, 0.95);
  --glass-soft: rgba(20, 10, 36, 0.55);
  --glass-edge: rgba(255, 255, 255, 0.18);
  --glass-light: 0 16px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
html.still.dark .still-bg { filter: brightness(0.5) saturate(0.9); }
html.still.dark body { background-color: #0D0419; }
html.still.dark .site-nav { background: rgba(20, 10, 36, 0.62); }
html.still.dark .nav-links a:hover, html.still.dark .nav-links a[aria-current="true"] { background: rgba(255, 255, 255, 0.14); }
html.still.dark .input { background: rgba(13, 4, 25, 0.6); border-color: rgba(255, 255, 255, 0.5); }
html.still.dark .band-dark { background: transparent; }
html.still.dark .site-footer { background: rgba(13, 4, 25, 0.94); }
html.still.dark .band-tint { background: transparent; }
html.still.dark .device { background: var(--glass-soft); }
html.still.dark .screen { background: var(--glass-strong); }
html.still.dark .bubble-ai { background: rgba(44, 27, 71, 0.92); }
html.still.dark .handover { border-color: rgba(255, 255, 255, 0.18); }
html.still.dark .chat-head { border-bottom-color: rgba(255, 255, 255, 0.14); }
html.still.dark .form-success { background: rgba(44, 27, 71, 0.92); }
html.still.dark .mobile-menu { background: rgba(13, 4, 25, 0.72); }
html.still.dark .panel-tint { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
html.still.dark .panel-dark { background: rgba(0, 0, 0, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
html.still.dark .panel-dark .pill { background: rgba(255, 255, 255, 0.08); }
html.still.dark .how-num { background: rgba(255, 255, 255, 0.1); }
html.still.dark .role-card { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
html.still.dark .role-select { background-color: rgba(13, 4, 25, 0.6); }
html.still.dark .role-list { background: rgba(44, 27, 71, 0.92); }
html.still.dark .how-step:not(:last-child)::after { background: rgba(255, 255, 255, 0.2); }
html.still.dark .faq-item { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.14); }
html.still.dark .faq-item:first-child { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.14); }

@media (prefers-reduced-transparency: reduce) {
  html.still.dark { --glass: #1E1033; --glass-strong: #1E1033; --glass-soft: #1E1033; }
  html.still.dark .site-nav { background: #1E1033; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.still.dark { --glass: rgba(20, 10, 36, 0.96); --glass-strong: rgba(20, 10, 36, 0.96); --glass-soft: rgba(20, 10, 36, 0.9); }
  html.still.dark .site-nav { background: rgba(20, 10, 36, 0.96); }
}

/* Increase Contrast in dark: soft text at full strength, solid sheets in Still Water */
@media (prefers-contrast: more) {
  html.dark { --ink-soft: var(--ink); --line: #6E5C8C; }
  html.still.dark { --glass: #1E1033; --glass-strong: #1E1033; --glass-soft: #1E1033; --glass-edge: rgba(255, 255, 255, 0.4); }
  html.still.dark .site-nav, html.still.dark .mobile-menu { background: #1E1033; }
  html.still.dark .input { border-color: var(--ink); }
}