/* What the site's build adds to the design's pages (P-0003 W2 C5 and C6, D-0033), loaded after site.css.
   Like site.css, it reads only --dz-* tokens, and follows the .page container. */

/* ── The light and dark switch (scheme.js) ───────────────────────────────────────────────────────
   scheme.js sets data-scheme on the root before the page shows. Without it the button stays hidden. */
:root[data-scheme="light"] { color-scheme: light; }
:root[data-scheme="dark"] { color-scheme: dark; }
.scheme-switch {
  order: 2; display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  padding-inline: 10px; margin-inline-end: -10px; border: 0; border-radius: 999px;
  background: none; color: var(--dz-muted); font: inherit; font-size: var(--dz-text-ui); cursor: pointer;
}
/* Beside the language switch, the header's gap would set them far apart. */
.scheme-switch:has(+ .lang-switch) { margin-inline-end: calc(4px - var(--dz-space-5)); }
.scheme-switch:hover { background: var(--dz-surface-2); color: var(--dz-text); }
:root[data-scheme] .scheme-switch { display: inline-flex; }
.scheme-switch__auto, .scheme-switch__light, .scheme-switch__dark { display: none; align-items: center; gap: 6px; }
:root[data-scheme="auto"] .scheme-switch__auto,
:root[data-scheme="light"] .scheme-switch__light,
:root[data-scheme="dark"] .scheme-switch__dark { display: inline-flex; }
.icon .icon-fill { fill: currentColor; stroke: none; }
/* Narrow: the icon alone; the button's name still says the choice. */
@container page (max-width: 899px) {
  .scheme-switch__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Under 360 px the button would push the language switch onto a line of its own: a smaller gap keeps
   the logo and both buttons on one. The gap is a minimum; the logo's auto margin takes what is left. */
@container page (max-width: 359px) {
  .site-header__in { column-gap: 12px; }
  .scheme-switch:has(+ .lang-switch) { margin-inline-end: -8px; }
}

/* ── The home board in motion (chat-demo.js) ─────────────────────────────────────────────────────
   Every move's status line and comment are on the page, stacked in one cell; the current one shows. The
   tallest sets the height, so nothing below moves as they change. */
.chat-demo { position: relative; }
.chat-demo :is(.board-card__status, .board-card__talk) { display: grid; align-items: center; }
.chat-demo :is(.board-card__status, .board-card__talk) > * { grid-area: 1 / 1; }
.chat-demo [data-plies]:not(.is-on) { visibility: hidden; }
.chat-demo__toggle {
  position: absolute; inset-block-start: clamp(14px, 2.4cqi, 22px); inset-inline-start: clamp(14px, 2.4cqi, 22px);
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--dz-border-strong); border-radius: 999px;
  background: var(--dz-page); color: var(--dz-muted); cursor: pointer;
}
.chat-demo__toggle:hover { background: var(--dz-surface-2); color: var(--dz-text); }
.chat-demo__toggle[hidden],
.chat-demo__toggle[data-state="playing"] .chat-demo__play,
.chat-demo__toggle:not([data-state="playing"]) .chat-demo__pause { display: none; }

/* ── Print and forced colours ─────────────────────────────────────────────────────────────────── */
@media print {
  :root[data-scheme] .scheme-switch, .chat-demo__toggle { display: none; }
}
@media (forced-colors: active) {
  .chat-demo__toggle { border-color: ButtonText; }
}