/* ============================================================
   Brass scroll bars, everywhere on the staff pages (owner, 20 Oct 2026).
   One file, linked by the console, the staff phone, the Desk Phone, scan,
   door route, parking and the offline page. Colours are the pages' own
   tokens (--brass-dim, --brass), with their values as a fallback.

   Design B (owner, 23 Oct 2026): a capsule drawn in brass outline with
   three short grip lines across its middle, the same size as before — a 10px
   lane, the capsule inset 1px from it (8px wide, fully rounded ends) — no
   arrow buttons, the track see-through so it blends with whatever panel it
   sits on. Brighter brass on hover and while dragging. #9C7038 on the dark
   panels is about 3.6:1, so it is easy to find. Also the resident app's
   panels (the bell list and every sheet); its page itself keeps no bar.
   iPhone and iPad Safari draw their own thin indicator and take no styling.

   Chrome, Edge and Safari draw it from the ::-webkit-scrollbar rules. Firefox
   has no such rules, so it gets the standard properties instead — only there:
   in current Chrome, setting scrollbar-color switches the ::-webkit-scrollbar
   rules off, and the rounded, inset thumb would be lost.
   ============================================================ */
::-webkit-scrollbar{width:10px;height:10px;background:transparent}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  --sb:var(--brass-dim,#9C7038);
  background-color:transparent;background-clip:padding-box;border:1px solid transparent;border-radius:10px;min-height:28px;
  box-shadow:inset 0 0 0 1.5px var(--sb);
  /* three grip lines, 4px wide, 3px apart, across the middle */
  background-image:linear-gradient(to bottom,
    transparent calc(50% - 4px), var(--sb) calc(50% - 4px), var(--sb) calc(50% - 3px), transparent calc(50% - 3px),
    transparent calc(50% - .5px), var(--sb) calc(50% - .5px), var(--sb) calc(50% + .5px), transparent calc(50% + .5px),
    transparent calc(50% + 3px), var(--sb) calc(50% + 3px), var(--sb) calc(50% + 4px), transparent calc(50% + 4px));
  background-size:4px 100%;background-position:center;background-repeat:no-repeat}
::-webkit-scrollbar-thumb:horizontal{
  background-image:linear-gradient(to right,
    transparent calc(50% - 4px), var(--sb) calc(50% - 4px), var(--sb) calc(50% - 3px), transparent calc(50% - 3px),
    transparent calc(50% - .5px), var(--sb) calc(50% - .5px), var(--sb) calc(50% + .5px), transparent calc(50% + .5px),
    transparent calc(50% + 3px), var(--sb) calc(50% + 3px), var(--sb) calc(50% + 4px), transparent calc(50% + 4px));
  background-size:100% 4px}
::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{--sb:var(--brass,#EBAF63)}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}

@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:var(--brass-dim,#9C7038) transparent}
  *:hover{scrollbar-color:var(--brass,#EBAF63) transparent}
}