/* Only shared controls and layout adapters live here.
   app.css and app-dark.css preserve the two original designs. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] .theme-dark-only,
html[data-theme="dark"] .theme-light-only { display: none !important; }
.brand__dark { display: contents; }
.topbar__side { display: flex; align-items: center; gap: 16px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 5px; border: 0; background: transparent; color: var(--ink-dim); cursor: pointer; flex-shrink: 0; }
.theme-toggle[hidden] { display: none; }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle__track { width: 34px; height: 20px; border: 1px solid var(--line-strong); border-radius: 20px; padding: 3px; background: var(--bg); }
.theme-toggle__track span { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); transition: transform .2s; }
.theme-toggle[aria-checked="true"] .theme-toggle__track span { transform: translateX(14px); }
.theme-toggle:hover { color: var(--accent); }
html[data-theme="light"] .theme-toggle__sun,
html[data-theme="dark"] .theme-toggle__moon { color: var(--accent); }
/* display:contents restores the original hero + monitor grid in dark mode
   without duplicating contacts, IDs, or live monitoring elements. */
html[data-theme="dark"] .home-composition { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr); gap: clamp(1.5rem, 4vw, 3.2rem); align-items: start; }
html[data-theme="dark"] .home-composition .hero,
html[data-theme="dark"] .system-strip { display: contents; }
@media (max-width: 900px) { html[data-theme="dark"] .home-composition { grid-template-columns: 1fr; } }
/* Extra room for the shared switch at intermediate widths. */
@media (min-width: 721px) and (max-width: 1020px) {
  html[data-theme="dark"] .topbar { flex-wrap: wrap; }
  html[data-theme="dark"] .topbar__side { margin-left: auto; }
  html[data-theme="dark"] .nav { order: 3; width: 100%; margin-left: 0; justify-content: center; }
}
@media (max-width: 460px) { .topbar__side { gap: 5px; } .topbar__side .stamp { padding-inline: 5px; font-size: 8px; letter-spacing: 0; } .theme-toggle { gap: 4px; padding-inline: 2px; } }
@media (max-width: 360px) { .topbar__side .stamp { display: none; } }
@media (prefers-reduced-motion: reduce) { .theme-toggle__track span { transition: none; } }
@media print { .theme-toggle { display: none !important; } }