/* Compact header control; its full label appears in the mobile menu. */
.theme-toggle {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 44px;
  min-height: 44px;
  padding: 5px;
  border: 1px solid #b5c1b4;
  border-radius: 999px;
  background: #fffdf8;
  color: #173d35;
  font: 600 13px/20px var(--control-font);
  cursor: pointer;
  transition: box-shadow 160ms var(--ease-out);
}
.theme-toggle>span:nth-child(2) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.theme-toggle-orbit {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e8ece2;
  overflow: hidden;
}
.theme-toggle svg {
  position: absolute;
  inset: 6px;
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 240ms var(--ease-out), opacity 160ms var(--ease-out);
}
.theme-moon { opacity: 0; transform: rotate(-40deg) scale(.8); }
.theme-toggle-state { display: none; width: 6px; height: 6px; border-radius: 50%; background: #91a291; }
.theme-toggle[aria-pressed=true] { background: #203b31; color: #e8efdf; border-color: #66836d; }
.theme-toggle[aria-pressed=true] .theme-toggle-orbit { background: #dfeabc; color: #173d35; }
.theme-toggle[aria-pressed=true] .theme-sun { opacity: 0; transform: rotate(40deg) scale(.8); }
.theme-toggle[aria-pressed=true] .theme-moon { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle[aria-pressed=true] .theme-toggle-state { background: #dfeabc; }
.theme-toggle[data-motion-immediate],
.theme-toggle[data-motion-immediate] svg { transition: none; }
body:has(dialog[open]) .theme-toggle { visibility: hidden; }

/* Existing semantic roles get a forest-toned dark palette. */
html[data-theme=dark] {
  color-scheme: dark;
  --paper: #0e211c;
  --ink: #e8efdf;
  --text: #d7e0d2;
  --muted: #b1c3b4;
  --sage: #223c32;
  --panel-secondary: #2c483c;
  --line: #6e8b76;
  --white: #172d26;
  --green: #c3d8a1;
  --forest-line: #557360;
  --error: #ffb4a8;
  --action-text: #173d35;
  --on-dark: #edf2e4;
  --on-dark-muted: #afc2b1;
  --dark-hero-shade: #0e211cbf;
}
html[data-theme=dark] :focus-visible { outline-color: var(--lime); }
html[data-theme=dark] ::selection { background: var(--lime); color: var(--action-text); }
html[data-theme=dark] .hero-scene {
  background-image: linear-gradient(var(--dark-hero-shade), var(--dark-hero-shade)), url('../assets/figma/hero-buildings.png');
}
html[data-theme=dark] .hero-rating,
html[data-theme=dark] .hero-rating strong { color: var(--text); }
html[data-theme=dark] .hero-testimonial,
html[data-theme=dark] .hero-testimonial:before,
html[data-theme=dark] .hero-testimonial:after { background: #203b31f2; }
html[data-theme=dark] .quote-pagination span:first-child { background: var(--lime); }
html[data-theme=dark] .site-header .header-cta { border-color: var(--line); }
html[data-theme=dark] .header-links>a[href]:hover { background: #dfeabc14; }
html[data-theme=dark] .menu-toggle { background: var(--white); border-color: var(--line); }
html[data-theme=dark] .hero-actions .text-link { color: var(--ink); }
html[data-theme=dark] .button { background: var(--lime); border-color: var(--lime); color: var(--action-text); }
html[data-theme=dark] .button:hover { background: #edf4d4; border-color: #edf4d4; }
html[data-theme=dark] .button-outline { background: transparent; border-color: var(--line); color: var(--ink); }
html[data-theme=dark] .button-outline:hover { background: var(--sage); border-color: var(--lime); }
html[data-theme=dark] .package-symbol,
html[data-theme=dark] .business-relationship>img,
html[data-theme=dark] .hero-testimonial figcaption a img { filter: brightness(0) invert(.88); }
html[data-theme=dark] .package-photo { opacity: .8; }
/* This illustration depicts its own light interface; keep its original asset colours. */
html[data-theme=dark] .forecast-card { --white: #fffdf8; }
html[data-theme=dark] .numbers {
  background-image: linear-gradient(#0e211ce8, #0e211ccc), url('../assets/figma/calculator-sky.png');
}
html[data-theme=dark] .flex-switch[aria-pressed=true],
html[data-theme=dark] .optimised-rate-value {
  background: linear-gradient(90deg, #173d35, #225940);
  color: var(--on-dark);
}
html[data-theme=dark] .gain-tag,
html[data-theme=dark] .flex-benefits li { color: var(--action-text); }
html[data-theme=dark] .switch-track { background: #506958; }
html[data-theme=dark] .switch-track>span { background: var(--on-dark); }
html[data-theme=dark] [aria-pressed=true]>.switch-track { background: var(--lime); }
html[data-theme=dark] [aria-pressed=true]>.switch-track>span { background: var(--action-text); }
html[data-theme=dark] .flex-switch[aria-pressed=false] .flex-symbol { filter: none; opacity: .6; }
html[data-theme=dark] .occupancy-track {
  background: #506958;
}
/* Existing inverse panels retain light text on a deep green surface. */
html[data-theme=dark] :is(.calculator-results,.testimonial-featured,.strategy,.site-footer) {
  --ink: #123129;
  --white: var(--on-dark);
  --line: var(--on-dark-muted);
  --panel-secondary: #dfeabc;
}
html[data-theme=dark] .result-pair .flex-result { background: linear-gradient(90deg,#244b3d,#2c5c43); }
html[data-theme=dark] .flex-off .result-pair .flex-result { background: #263d33; }
html[data-theme=dark] .team-link .icon { color: var(--muted); }
html[data-theme=dark] .strategy .checklist {
  --ink: #e8efdf;
  --white: #172d26;
  --line: #6e8b76;
  --checklist-focus: var(--lime);
  background: var(--sage);
  box-shadow: 0 0 0 1px oklch(1 0 0 / .08);
}
html[data-theme=dark] .slots span { border-color: var(--line); }
html[data-theme=dark] .slots input:checked+span { background: var(--lime); color: var(--action-text); border-color: var(--lime); }
html[data-theme=dark] dialog::backdrop { background: #04120ddd; }

@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover { box-shadow: 0 6px 24px #071e2438; }
}
@media (max-width: 1120px) {
  .theme-toggle { align-self: flex-start; width: auto; padding-block: 7px; padding-inline: 8px 14px; }
  .theme-toggle>span:nth-child(2) { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
  .theme-toggle-state { display: block; }
}
@media (max-width: 1000px) {
  html[data-theme=dark] .hero-actions .text-link { background: var(--white); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle svg { transition: none; }
}
@media (forced-colors: active) {
  .theme-toggle, .theme-toggle[aria-pressed=true] { background: Canvas; color: ButtonText; border-color: ButtonText; box-shadow: none; }
  .theme-toggle-orbit, .theme-toggle[aria-pressed=true] .theme-toggle-orbit { background: Canvas; color: ButtonText; }
  .theme-toggle-state { background: ButtonText; }
  .theme-toggle[aria-pressed=true] .theme-toggle-state { background: Highlight; }
}