/* SPDX-License-Identifier: CC0-1.0 */
/* Shared appearance contract: docs/design/appearance.markdown.
   Collapsed end alignment and natural labels support continuity with the native popup. */
:root {
  color-scheme: light;
  --paper: #f2eee5;
  --ink: #21302b;
  --muted: #607067;
  --accent: #a74832;
  --interactive-hover: rgb(33 48 43 / 5%);
  --paper-highlight: color-mix(in srgb, var(--paper) 74%, white);
}
@supports (color: light-dark(white, black)) {
  :root {
    color-scheme: light dark;
    --paper: light-dark(#f2eee5, #181716);
    --ink: light-dark(#21302b, #d6d2c8);
    --muted: light-dark(#607067, #898880);
    --accent: light-dark(#a74832, #dca487);
    --interactive-hover: light-dark(rgb(33 48 43 / 5%), rgb(255 255 255 / 5%));
    --paper-highlight: light-dark(color-mix(in srgb, var(--paper) 74%, white), #1d1c1a);
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
}
select[data-appearance] {
  box-sizing: border-box;
  min-block-size: 1.5rem;
  padding: 0 .3rem;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-interface, system-ui, sans-serif);
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .025em;
  text-align: end;
  text-align-last: end;
  cursor: pointer;
}
select[data-appearance]:hover {
  color: var(--ink);
  background-color: var(--interactive-hover);
}
select[data-appearance]:focus-visible {
  color: var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media print {
  :root, :root[data-theme] { color-scheme: light; }
  select[data-appearance] { display: none; }
}
@media (forced-colors: active) {
  select[data-appearance] { color: ButtonText; }
}