/* Host layout and optional site-only decoration. Semantic tokens and their
 * native fallbacks are owned by upstream styles.css. */
:root[data-mithrandir-theme="active"] .brand-mark {
  color: var(--theme-navy-950, #00274c);
}

:root[data-mithrandir-theme="active"] .status.error {
  border-color: var(--theme-danger-border, var(--danger));
}

:root[data-mithrandir-theme="active"] .eval-track,
:root[data-mithrandir-theme="active"] .black-fill {
  background: var(--theme-eval-black, #101720);
}

:root[data-mithrandir-theme="active"] .white-fill {
  background: var(--theme-eval-white, #ffffff);
}

:root[data-mithrandir-theme="active"] .board {
  box-shadow: var(--theme-shadow-strong, var(--shadow));
}

/*
 * The native Chess toggle remains in the standalone application as a fallback.
 * Inside mithrandir-site, the global System / Light / Dark selector is authoritative.
 */
:root[data-mithrandir-theme="active"] .theme-toggle {
  display: none !important;
}

/*
 * Keep the move description readable. The native desktop stylesheet previously
 * compressed this label to 52-60px, which truncated even "Start position".
 * The toolbar may wrap when the center panel is narrow rather than crushing text.
 */
@media (min-width: 1101px) {
  :root[data-mithrandir-theme="active"] .appearance-bar {
    min-height: 63px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  :root[data-mithrandir-theme="active"] .appearance-bar .move-controls {
    flex: 1 1 340px;
    justify-self: auto;
    gap: 14px;
  }

  :root[data-mithrandir-theme="active"] .appearance-bar .position-label {
    min-width: 108px;
    max-width: 168px;
    flex: 1 1 108px;
  }

  :root[data-mithrandir-theme="active"] .appearance-bar .appearance-controls {
    width: auto;
    flex: 1 1 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 14px;
  }
}

/* Flip Board text, sizing, and right alignment come from the standalone app.
 * The hidden native theme switch leaves Flip Board at the far-right edge. */

@media (prefers-reduced-motion: no-preference) {
  :root[data-mithrandir-theme="active"] body,
  :root[data-mithrandir-theme="active"] .panel,
  :root[data-mithrandir-theme="active"] .board-panel,
  :root[data-mithrandir-theme="active"] button,
  :root[data-mithrandir-theme="active"] textarea,
  :root[data-mithrandir-theme="active"] select,
  :root[data-mithrandir-theme="active"] input,
  :root[data-mithrandir-theme="active"] .candidate-row,
  :root[data-mithrandir-theme="active"] .move-button {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  }
}