@charset "UTF-8";

/* The viewport reads its palette from html; nested scrollers inherit theirs. */
:root {
  --scroll-track: #eaf0f7;
  --scroll-thumb: #668bb4;
  --scroll-hover: #3975b8;
  --scroll-active: #245f9f;
  --scroll-edge: #c9d8e8;
  --scroll-radius: 8px;
}
:root:has(> body.mood-worn:not(.finance-horror):not(.reduced-stimulus)),
.mood-worn:not(.finance-horror):not(.reduced-stimulus) {
  --scroll-track: #d6d9d9;
  --scroll-thumb: #7c6565;
  --scroll-hover: #973c39;
  --scroll-active: #842e2d;
  --scroll-edge: #afb4b6;
  --scroll-radius: 5px;
}
:root:has(> body.mood-low:not(.finance-horror):not(.reduced-stimulus)),
.mood-low:not(.finance-horror):not(.reduced-stimulus) {
  --scroll-track: #bec3c4;
  --scroll-thumb: #922d32;
  --scroll-hover: #7d2229;
  --scroll-active: #681a20;
  --scroll-edge: #858e92;
  --scroll-radius: 3px;
}
:root:has(> body.mood-fragile:not(.finance-horror):not(.reduced-stimulus)),
.mood-fragile:not(.finance-horror):not(.reduced-stimulus) {
  --scroll-track: #242c31;
  --scroll-thumb: #ad454d;
  --scroll-hover: #df9b91;
  --scroll-active: #f3c6be;
  --scroll-edge: #626d73;
  --scroll-radius: 1px;
}
:root:has(> body.finance-horror), .finance-horror {
  --scroll-track: #d9c69b;
  --scroll-thumb: #914333;
  --scroll-hover: #753124;
  --scroll-active: #55241c;
  --scroll-edge: #a0845c;
  --scroll-radius: 0;
}

* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }

@supports selector(::-webkit-scrollbar) {
  /* Non-auto standard properties would override these native scrollbar parts. */
  * { scrollbar-width: auto; scrollbar-color: auto; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track {
    background: var(--scroll-track);
    box-shadow: inset 0 0 0 1px var(--scroll-edge);
  }
  *::-webkit-scrollbar-thumb {
    min-height: 32px;
    min-width: 32px;
    background: var(--scroll-thumb);
    background-clip: padding-box;
    border: 2px solid var(--scroll-track);
    border-radius: var(--scroll-radius);
  }
  *::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-hover); }
  *::-webkit-scrollbar-thumb:active { background-color: var(--scroll-active); }
  *::-webkit-scrollbar-corner { background: var(--scroll-track); }
  *::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
}