/* Native <select> lists: the chosen option's tick is the app's (lucide check, on the right, in the brand colour), as in
   its own lists, instead of the browser's « ✓ » before the text, which also indented every option.

   It belongs with the other native-list rules in app/globals.css, but Next 16.3's CSS step drops rules with
   ::checkmark (its CSS compiler doesn't know that pseudo-element yet), so this file is served as is and linked from
   app/layout.tsx. Move it back into globals.css once Next keeps the rule. Theme values only (--primary, --spacing come
   from globals.css). Same support as the rules there: browsers with customizable selects (appearance: base-select,
   Chrome and Edge 135+); the others keep their own list. */

:root {
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

@supports (appearance: base-select) {
  /* Unchecked options keep it hidden (the browser's own rule). */
  select:not([multiple], [size]) option::checkmark {
    order: 1;
    margin-inline-start: auto;
    flex-shrink: 0;
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
    content: "";
    background-color: var(--primary);
    -webkit-mask: var(--check) center / contain no-repeat;
    mask: var(--check) center / contain no-repeat;
  }
}