/* ---- cosmetic stuff: safe to defer ---- */

/* Smooth scroll + default scrollbars (visual only) */
html { scroll-behavior: smooth; }
html, body {
  scrollbar-width: thin;
  scrollbar-color: #3b82f6 #f3f4f6; /* primary-500 / primary-100 */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track { background: #f3f4f6; }
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background-color: #3b82f6;
  border-radius: 6px;
  border: 1px solid #f3f4f6;
}

/* Utility visibility/polish */
.hide-on-empty:empty { display: none; }

/* Optional scrollbars for specific containers */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.custom-scrollbar { scrollbar-width: thin; scrollbar-color: #d6dade transparent; }
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #d6dade; border-radius: 6px; border: 1px solid transparent;
}

/* Search input cosmetics (not layout-affecting) */
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button { appearance: none; }

/* Range input styling (usually below the fold) */
.styled-range { height: 0.125rem; appearance: none;
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--value) - var(--min)) / var(--range));
  --sx: calc(0.5 * 0.75rem + var(--ratio) * (100% - 0.75rem));
  background: linear-gradient(#000,#000) 0/var(--sx) 100% no-repeat, #d1d5db;
}
.styled-range::-webkit-slider-thumb {
  width: 0.75rem; height: 0.75rem; appearance: none;
  background: #eff6ff; border-radius: 9999px; border: 0.125rem solid #111827;
}