/* The original dark palette and page layout stay in Bardia's stylesheet. */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover {
  background: var(--panel);
  color: var(--ink);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--lime-ink);
  outline-offset: 3px;
}
.theme-toggle svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.theme-toggle svg[hidden] { display: none; }

/* Bardia's light palette, with darker secondary text for small labels. */
:root[data-theme="light"] {
  --bg: #ffffff;
  --panel: #f6f6f2;
  --ink: #181916;
  --muted: #62645c;
  --faint: #6d6f65;
  --line: #e9e9e3;
  --lime: #9cbd35;
  --lime-ink: #4b5f18;
  --lime-tint: #eef4d9;
  --card: #ffffff;
  --chip: #f1f1ec;
  --device: #181916;
  --good: #24713f;
  --warn: #83540b;
  --shadow: 0 1px 2px rgba(24, 25, 22, .06), 0 8px 24px rgba(24, 25, 22, .07);
  color-scheme: light;
}
:root[data-theme="light"] :focus-visible { outline-color: var(--lime-ink); }
:root[data-theme="light"] .demo input,
:root[data-theme="light"] .demo select,
:root[data-theme="light"] .po input { border-color: #8b8d81; }

/* Keep the existing logo, demo action and menu on one line at 320 CSS pixels. */
@media (max-width: 420px) {
  header.site .bar { gap: 10px; }
  header.site .bar-right { gap: 6px; }
}

/* Theme changes are immediate; no color, icon or layout animation is added. */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; animation: none; }
}
@media (max-width: 360px) {
  header.site .bar { gap: 6px; }
  header.site .bar-right { gap: 4px; }
}