/* Shared by the app and standalone legal pages. Existing day colours stay intact. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle svg {
  display: block;
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .theme-moon { display: none; }
:root[data-theme='dark'] .theme-toggle .theme-sun { display: none; }
:root[data-theme='dark'] .theme-toggle .theme-moon { display: block; }
.theme-toggle:active { background: color-mix(in srgb, currentColor 8%, transparent); }
/* Touch browsers can retain :hover after a tap; only real hover gets a fill. */
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
}
.theme-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.site-header .theme-toggle {
  position: absolute;
  left: max(20px, env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
}
.panel-header .theme-toggle,
.legal-header .theme-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.legal-header { position: relative; }
@media (max-width: 620px) {
  .site-header .theme-toggle { left: max(8px, env(safe-area-inset-left)); }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --night-bg: #10120f;
  --night-card: #1b2019;
  --night-raised: #262d22;
  --night-border: #3c4436;
  --night-text: #f2f4ed;
  --night-muted: #b6bdae;
  --night-accent: #d6fa31;
  --particle-color: #c1db70;
  --page: var(--night-bg);
  --surface-bg: var(--night-bg);
  color: var(--night-text);
  background: var(--surface-bg);
}
:root[data-theme='dark'][data-panel] { --surface-bg: var(--night-bg); }
:root[data-theme='dark'][data-panel='work'],
:root[data-theme='dark'][data-panel='virtual'] { --surface-bg: #0c0a09; }
:root[data-theme='dark'] body { color: var(--night-text); }
:root[data-theme='dark'] .detail-panel {
  --panel-bg: var(--night-bg);
  --panel-ink: var(--night-text);
}
:root[data-theme='dark'] .detail-panel--work,
:root[data-theme='dark'] .detail-panel--virtual { --panel-bg: #0c0a09; }
:root[data-theme='dark'] .brand-flip { background-color: var(--night-accent); }
:root[data-theme='dark'] .brand-ai { color: var(--night-text); }
:root[data-theme='dark'] .theme-toggle { color: var(--night-accent); }
:root[data-theme='dark'] .choice-stack { background: var(--night-card); }
:root[data-theme='dark'] .language-toggle {
  color: var(--night-text);
  background: var(--night-raised);
  border-color: var(--night-border);
}
:root[data-theme='dark'] .language-toggle:active {
  color: var(--ink);
  background: var(--night-accent);
}
@media (hover: hover) and (pointer: fine) {
  :root[data-theme='dark'] .language-toggle:hover {
    color: var(--ink);
    background: var(--night-accent);
  }
}

/* Portfolio: leave all preview surfaces empty and preserve disabled controls. */
:root[data-theme='dark'] .portfolio-case-preview {
  background: var(--night-card);
  border-color: var(--night-border);
}
:root[data-theme='dark'] .portfolio-case h3 span { color: var(--night-muted); }
:root[data-theme='dark'] .portfolio-preview-button {
  color: var(--night-text);
  -webkit-text-fill-color: var(--night-text);
  background: var(--night-raised);
}

/* Match the app's MeAI hover on the separate legal documents. */
.legal-header .ai-spark { transition: transform 640ms cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .legal-header .pill:hover .ai-spark { transform: rotate(180deg); }
}

/* About: muted, readable profile, review rows and monochrome client marks. */
:root[data-theme='dark'] .profile-card {
  background: var(--night-card);
  border-color: var(--night-border);
}
:root[data-theme='dark'] .profile-section,
:root[data-theme='dark'] .profile-review-author { border-color: var(--night-border); }
:root[data-theme='dark'] :is(.profile-identity p, .profile-overview p, .profile-stats dt,
  .profile-project-count, .profile-reviews-source p, .profile-review-date,
  .profile-review-kind, .profile-review-no-text, .profile-review-author span,
  .profile-review-status, .profile-review-card blockquote p) { color: var(--night-muted); }
:root[data-theme='dark'] .profile-specialty {
  color: #d2e7a2;
  background: var(--night-raised);
}
:root[data-theme='dark'] .profile-socials a {
  color: var(--night-text);
  border-color: var(--night-border);
}
:root[data-theme='dark'] .profile-socials a:hover { background: var(--night-raised); }
:root[data-theme='dark'] .profile-network-mark { color: var(--night-muted); }
:root[data-theme='dark'] .profile-client-logo img { filter: grayscale(1) brightness(0) invert(1); opacity: .55; }
:root[data-theme='dark'] .profile-review-tabs { background: #12170f; }
:root[data-theme='dark'] .profile-review-tabs button { color: var(--night-muted); }
:root[data-theme='dark'] .profile-review-tabs button[aria-selected='true'] {
  color: var(--night-text);
  background: var(--night-raised);
  box-shadow: none;
}
:root[data-theme='dark'] .profile-review-tabs button span {
  color: #d2e7a2;
  background: #354129;
}
:root[data-theme='dark'] .profile-review-card {
  color: var(--night-text);
  background: transparent;
  border-color: var(--night-border);
}
:root[data-theme='dark'] .profile-upwork-badge { background: #f1b9c8; color: #59162c; }
:root[data-theme='dark'] .profile-upwork-badge--success { background: #b7cef1; color: #173d88; }
:root[data-theme='dark'] .profile-review-date { border-color: var(--night-border); }
:root[data-theme='dark'] :is(.profile-review-expand, .profile-reviews-source a) { color: #d2e7a2; }
:root[data-theme='dark'] .profile-review-more {
  color: #d2e7a2;
  background: var(--night-raised);
  border-color: var(--night-border);
}
:root[data-theme='dark'] .profile-review-more:hover { background: #354129; }
:root[data-theme='dark'] .profile-card :is(a, button, [tabindex]):focus-visible,
:root[data-theme='dark'] .about-content:focus-visible { outline-color: var(--night-accent); }

/* Services retain their hierarchy, expandable details and local brand assets. */
:root[data-theme='dark'] .business-service {
  color: var(--night-text);
  background: var(--night-card);
  border-color: var(--night-border);
}
:root[data-theme='dark'] .business-service--website { background: #26301d; border-color: #3e4b2e; }
:root[data-theme='dark'] .business-service--fix { background: #0c0e0a; }
:root[data-theme='dark'] .business-service-icon { color: var(--night-text); background: #354129; }
:root[data-theme='dark'] .business-service--website .business-service-icon { color: #c9e596; background: #354129; }
:root[data-theme='dark'] .business-service--ecommerce .business-service-icon { color: #dbb7ed; background: #3c2d45; }
:root[data-theme='dark'] .business-service--booking .business-service-icon { color: #9dd5f0; background: #263d49; }
:root[data-theme='dark'] .business-service--enquiries .business-service-icon { color: #a6dfca; background: #29433b; }
:root[data-theme='dark'] .business-service--system .business-service-icon { color: #b9c9fa; background: #303a53; }
:root[data-theme='dark'] .business-service--fix .business-service-icon { color: var(--ink); background: var(--night-accent); }
:root[data-theme='dark'] .business-service--ai .business-service-icon { color: #cdbafa; background: #392f4c; }
:root[data-theme='dark'] .business-service--automation .business-service-icon { color: #f2cb96; background: #493a27; }
:root[data-theme='dark'] .service-feature-tags > span {
  color: var(--night-muted);
  background: rgba(255, 255, 255, .06);
}
:root[data-theme='dark'] .service-details { border-color: var(--night-border); }
:root[data-theme='dark'] :is(.service-details p, .services-next-step p) { color: var(--night-muted); }
:root[data-theme='dark'] .service-tech-tag {
  color: var(--night-text);
  background: rgba(255, 255, 255, .04);
  border-color: var(--night-border);
}
:root[data-theme='dark'] .service-tech-tag img { filter: brightness(0) invert(1); opacity: .85; }
:root[data-theme='dark'] .services-contact,
:root[data-theme='dark'] .submit-button { color: var(--ink); background: var(--night-accent); }
:root[data-theme='dark'] :is(.services-contact, .submit-button):hover { background: #e3ff72; }
:root[data-theme='dark'] :is(.services-contact, .submit-button):focus-visible { outline-color: var(--night-accent); }

/* Form data, validation and the native-backed country/direction logic are untouched. */
:root[data-theme='dark'] .contact-form { color: var(--night-text); background: var(--night-card); }
:root[data-theme='dark'] .contact-form .form-field { background: #242a20; border-color: var(--night-border); }
:root[data-theme='dark'] .contact-form .form-field:focus-within { background: #2a3224; border-color: #c1db70; }
:root[data-theme='dark'] .contact-form :is(input, select, textarea),
:root[data-theme='dark'] .direction-trigger.has-value,
:root[data-theme='dark'] .direction-chevron { color: var(--night-text); }
:root[data-theme='dark'] .contact-form :is(input, textarea)::placeholder,
:root[data-theme='dark'] .contact-form select:invalid,
:root[data-theme='dark'] .direction-trigger,
:root[data-theme='dark'] .form-status { color: var(--night-muted); }
:root[data-theme='dark'] .contact-form select option { color: var(--night-text); background: var(--night-card); }
:root[data-theme='dark'] .form-field--problem:has(.direction-trigger:focus-visible) {
  border-color: var(--night-accent);
  box-shadow: 0 0 0 1px var(--night-accent);
}
:root[data-theme='dark'] .phone-error { color: #ff9b88; }
:root[data-theme='dark'] .contact-form .form-field--phone.has-phone-error,
:root[data-theme='dark'] .form-field--problem:has([aria-invalid='true']) { border-color: #ff9b88; }

/* Standalone Terms/Cookies keep native document scrolling and their explicit anchors. */
:root[data-theme='dark'] .legal-page { color: var(--night-text); }
:root[data-theme='dark'] .legal-page .pill { background: var(--night-raised); }
:root[data-theme='dark'] .legal-page .updated { color: var(--night-muted); }
:root[data-theme='dark'] .legal-page footer { border-color: var(--night-border); }