/* Iteration 2: shared portfolio theme behavior for the public lab. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

.lab-header-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.theme-moon { display: none; }
html[data-theme="dark"] .theme-sun { display: none; }
html[data-theme="dark"] .theme-moon { display: block; }
html[data-theme="dark"] .theme-toggle { border-color: rgba(200, 255, 77, 0.58); }

html[data-theme="light"] body { background: #f2eee7; }
html[data-theme="light"] .lab-header { color: #071114; }
html[data-theme="light"] .back-link {
  color: rgba(7, 17, 20, 0.64);
  border-bottom-color: rgba(7, 17, 20, 0.2);
}
html[data-theme="light"] .back-link:hover { color: #356500; }
html[data-theme="light"] .theme-toggle {
  color: #071114;
  background: rgba(7, 17, 20, 0.035);
  border-color: rgba(53, 101, 0, 0.5);
}

html[data-theme="light"] .lab-hero {
  color: #071114;
  background:
    radial-gradient(circle at 80% 18%, rgba(8, 122, 160, 0.13), transparent 28%),
    radial-gradient(circle at 12% 78%, rgba(83, 132, 0, 0.12), transparent 30%),
    linear-gradient(rgba(7, 17, 20, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 17, 20, 0.05) 1px, transparent 1px),
    #f2eee7;
  background-size: auto, auto, 48px 48px, 48px 48px, auto;
}

html[data-theme="light"] .lab-hero .eyebrow { color: #087aa0; }
html[data-theme="light"] .lab-hero em { color: #b13f2a; }
html[data-theme="light"] .lab-hero .hero-copy { color: rgba(7, 17, 20, 0.68); }
html[data-theme="light"] .lab-hero .button-quiet {
  color: #071114;
  border-color: rgba(7, 17, 20, 0.22);
}

html[data-theme="light"] .trust-panel {
  color: #fffdf8;
  background: rgba(7, 25, 29, 0.94);
  border-color: rgba(8, 122, 160, 0.38);
}

html[data-theme="light"] .trust-panel dl div { border-top-color: rgba(255, 255, 255, 0.14); }
html[data-theme="light"] .trust-panel dt { color: rgba(255, 255, 255, 0.5); }
html[data-theme="light"] .trust-panel dd { color: #fffdf8; }
html[data-theme="light"] .proof-strip { --line: rgba(7, 17, 20, 0.16); }
html[data-theme="light"] .proof-strip p { background: rgba(7, 17, 20, 0.94); }
html[data-theme="light"] .proof-strip span { color: rgba(255, 255, 255, 0.52); }

@media (max-width: 600px) {
  .lab-header-actions { gap: 11px; }
  .theme-toggle { width: 38px; height: 38px; }
}

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