/* Design rule (owner, 2026-10-24): square corners everywhere in the interface.
   Exceptions: the map pins keep their own oval / round shapes (score pills, dots and
   count badges are Leaflet divIcons with class .cbm), and the small loading spinner
   stays a circle. Loaded last on every page (pages/base, seo/base, home). */
:not(.cbm, .cbm *, .leaflet-marker-icon, .leaflet-marker-icon *, .spinner),
:not(.cbm *, .leaflet-marker-icon *)::before,
:not(.cbm *, .leaflet-marker-icon *)::after {
    border-radius: 0 !important;
}

/* Scrollbars (owner request 2026-10-24): thin and dark in Chrome too, like Safari.
   color-scheme tells the browser the page is dark (native scrollbars and form controls follow). */
html { color-scheme: dark; }
* { scrollbar-width: thin; scrollbar-color: #4a4a4a transparent; }
body.light-mode { color-scheme: light; }
body.light-mode, body.light-mode * { scrollbar-color: #b5b5b5 transparent; }

/* Dropdowns (owner request 2026-10-25): square with one chevron everywhere, like the map's
   side menu. Without appearance:none Safari draws its own rounded control with up/down arrows.
   "My car" and the list "Sort" have their own styling. */
select:not([multiple]):not(.car-select):not(.list-sort) {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
}