/* App-wide control styles, linked by every page so a new panel or page
   gets them without doing anything: scrollbars and number-input arrows.
   The tokens let a panel restyle its own. */
:root {
  --scrollbar-thumb: rgba(255, 255, 255, 0.2);
  --scrollbar-thumb-active: rgba(255, 255, 255, 0.32);
  --scrollbar-thumb-hover: rgba(110, 168, 254, 0.6);
  /* Two small chevrons, up over down, in the panels' text color. */
  --spin-arrows: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath d='M1 5.5 4 2.5 7 5.5M1 8.5 4 11.5 7 8.5' fill='none' stroke='%23e7e9ee' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Scrollbars ---
   Everything that scrolls (panels, the builders, dropdown lists, text
   boxes): thin, rounded and translucent — the style the Spotify panel
   started with. scrollbar-width/-color cover Firefox and current Chromium;
   the ::-webkit-scrollbar rules are the fallback for older WebKit/Blink
   (and Safari). */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* Browsers that go by scrollbar-color can't restyle a hovered thumb, so the
   thumb brightens while the box itself is hovered instead. */
*:hover {
  scrollbar-color: var(--scrollbar-thumb-active) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* --- Number inputs ---
   The browser's own up/down control, redrawn as two small chevrons in the
   panel style — faint until the box is hovered or focused. Once restyled,
   Chrome no longer tells the halves apart, so js/ui.js handles clicks on
   them (top half up, bottom half down, hold to repeat); keyboard arrows
   and the wheel stay native. Chrome/Edge/Safari; Firefox doesn't let pages
   restyle its arrows and keeps its own. */
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 18px;
  margin: 0 -2px 0 4px;
  align-self: center;
  cursor: pointer;
  background: var(--spin-arrows) no-repeat center / 8px 14px;
  border-radius: 4px;
  opacity: 0.45;
  transition: opacity 120ms ease, background-color 120ms ease;
}

input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:focus::-webkit-inner-spin-button {
  opacity: 0.9;
}

input[type="number"]::-webkit-inner-spin-button:hover {
  opacity: 1;
  background-color: rgba(110, 168, 254, 0.22);
}

input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

input[type="number"]:disabled::-webkit-inner-spin-button {
  opacity: 0.2;
  cursor: default;
}