/* Retro "Xerox Star" scrollbar for the three desktop columns, kept slim and pale.
   Remove this file and scrollbar.js to go back to the browser's scrollbar. */
.sb{display:none}

@media (min-width:960px){
  /* native scrollbars are hidden only after scrollbar.js has started (html.sb-on) */
  html.sb-on .col{scrollbar-width:none;padding-right:26px}
  html.sb-on .col::-webkit-scrollbar{display:none;width:0;height:0}
  html.sb-on .lab{margin-right:-26px;padding-right:26px}

  .sb.on{display:flex}
  .sb{--sb-line:#dedede;--sb-ink:#b0b0b0;
      position:fixed;z-index:30;width:11px;flex-direction:column;background:#fff;border:1px solid var(--sb-line);
      -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
  .sb>*{flex:none;display:flex;align-items:center;justify-content:center;width:100%;padding:0;border:0;border-bottom:1px solid var(--sb-line);
        background:#fff;color:var(--sb-ink);cursor:default;font:inherit}
  .sb>:last-child{border-bottom:0}
  .sb .cap{height:8px;background:#efefef}
  .sb .box{height:12px}
  .sb .box svg{width:7px;height:9px;fill:none;stroke:currentColor;stroke-width:1;shape-rendering:crispEdges;pointer-events:none}
  .sb .box:hover{background:var(--hl);color:#111}
  .sb .cap:hover{background:#e0e0e0}
  .sb .box:active,.sb .cap:active{background:#cfe0f7}
  .sb .track{flex:1 1 auto;position:relative;display:block;min-height:30px;touch-action:none}
  .sb .dia{position:absolute;left:1px;top:0;width:7px;height:7px;pointer-events:none;fill:var(--sb-ink)}
  .sb:hover .dia{fill:var(--hl);stroke:#b6d2f4;stroke-width:.8}

  html[data-theme="dark"] .sb{--sb-line:#333;--sb-ink:#7c7c7c;background:var(--bg)}
  html[data-theme="dark"] .sb>*{background:var(--bg)}
  html[data-theme="dark"] .sb .cap{background:#1d1d1d}
  html[data-theme="dark"] .sb .cap:hover{background:#2c2c2c}
  html[data-theme="dark"] .sb .box:hover{color:#fff}
  html[data-theme="dark"] .sb .box:active,html[data-theme="dark"] .sb .cap:active{background:#2f5a96}
  html[data-theme="dark"] .sb:hover .dia{stroke:#4a78b4}
}

/* Mobile: the same retro bar, laid out horizontally on the line under the name / menu header, showing how far down
   the page you are. Remove the ".sbh" part of scrollbar.js together with this block to drop it. */
.sbh{display:none}
@media (max-width:959px){
  .sbh.on{display:flex}
  .sbh{--sb-line:#dedede;--sb-ink:#b0b0b0;
       position:absolute;left:0;right:0;bottom:-7px;height:13px;z-index:5;flex-direction:row;background:#fff;border:1px solid var(--sb-line);
       -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
  .sbh>*{flex:none;display:flex;align-items:center;justify-content:center;height:100%;padding:0;border:0;border-right:1px solid var(--sb-line);
         background:#fff;color:var(--sb-ink);font:inherit}
  .sbh>:last-child{border-right:0}
  .sbh .cap{width:9px;background:#efefef}
  .sbh .box{width:18px}
  .sbh .box svg{width:9px;height:7px;fill:none;stroke:currentColor;stroke-width:1;shape-rendering:crispEdges;pointer-events:none}
  .sbh .box:active,.sbh .cap:active{background:#cfe0f7}
  .sbh .track{flex:1 1 auto;position:relative;display:block;min-width:30px;touch-action:none}
  .sbh .track::before{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}   /* easier to hit with a finger */
  .sbh .dia{position:absolute;top:1px;left:0;width:8px;height:8px;pointer-events:none;fill:var(--sb-ink)}
  .sbh.drag .dia{fill:var(--hl);stroke:#b6d2f4;stroke-width:.8}

  html[data-theme="dark"] .sbh{--sb-line:#333;--sb-ink:#7c7c7c;background:var(--bg)}
  html[data-theme="dark"] .sbh>*{background:var(--bg)}
  html[data-theme="dark"] .sbh .cap{background:#1d1d1d}
  html[data-theme="dark"] .sbh .box:active,html[data-theme="dark"] .sbh .cap:active{background:#2f5a96}
  html[data-theme="dark"] .sbh.drag .dia{stroke:#4a78b4}
}