/* The site's scrollbar: a cake. Linked from every page except the admin
   panel, which keeps the browser's plain scrollbar.

   The track is the side of a layer cake: sponge, cream and a jam line,
   repeating. The thumb is pink frosting with sprinkles on it.

   Chrome, Edge and Safari draw it from the ::-webkit-scrollbar rules below.
   Firefox cannot draw pictures in a scrollbar, so it gets the two colours
   (frosting on sponge) from scrollbar-color. That property is kept inside
   the @supports on purpose: Chrome 121+ also understands scrollbar-color,
   and once it is set Chrome IGNORES every ::-webkit-scrollbar rule, which
   would quietly swap the cake for two flat colours. */

:root{
  --cake-sponge: #f6d9a8;
  --cake-sponge-dark: #e9c285;
  --cake-cream: #fff8ee;
  --cake-jam: #f58fb4;
  --cake-frosting: #ff9fcf;
  --cake-frosting-deep: #ff6fb3;
  --cake-edge: #c9577f;
}

::-webkit-scrollbar{ width: 16px; height: 16px; }

/* the cake: sponge 24px, cream 5px, sponge 24px, jam 5px, repeating down
   the page (across, for a sideways scrollbar), with a soft shade at the edge */
::-webkit-scrollbar-track{
  background:
    linear-gradient(to right, rgba(120,70,20,.16), transparent 30%, transparent 70%, rgba(120,70,20,.16)),
    repeating-linear-gradient(to bottom,
      var(--cake-sponge) 0 24px, var(--cake-cream) 24px 29px,
      var(--cake-sponge) 29px 53px, var(--cake-jam) 53px 58px);
}
::-webkit-scrollbar-track:horizontal{
  background:
    linear-gradient(to bottom, rgba(120,70,20,.16), transparent 30%, transparent 70%, rgba(120,70,20,.16)),
    repeating-linear-gradient(to right,
      var(--cake-sponge) 0 24px, var(--cake-cream) 24px 29px,
      var(--cake-sponge) 29px 53px, var(--cake-jam) 53px 58px);
}

/* the frosting: sprinkles (a small repeating picture) over a glossy pink,
   with a darker rim so it sits on the cake rather than in it */
::-webkit-scrollbar-thumb{
  border-radius: 999px;
  border: 2px solid var(--cake-edge);
  background-color: var(--cake-frosting);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36' viewBox='0 0 12 36'%3E%3Cg stroke-linecap='round' stroke-width='1.6'%3E%3Cpath d='M2 3l2.5 1.5' stroke='%23ffffff'/%3E%3Cpath d='M8 8l1.5-2.5' stroke='%234fc3f7'/%3E%3Cpath d='M3 13.5l2.8-.6' stroke='%23ffd54f'/%3E%3Cpath d='M8.5 18l.6 2.8' stroke='%2381c784'/%3E%3Cpath d='M2.5 23.5l2.2 1.8' stroke='%23b388ff'/%3E%3Cpath d='M7.5 29l2.6-1.2' stroke='%23ffffff'/%3E%3Cpath d='M3.5 33.5l1.2 1.5' stroke='%23ff3d9a'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(to right, rgba(255,255,255,.55), rgba(255,255,255,0) 45%, rgba(0,0,0,.08));
  background-repeat: repeat-y, no-repeat;
  background-position: center top, 0 0;
  background-size: 12px 36px, 100% 100%;
  min-height: 48px;
}
::-webkit-scrollbar-thumb:horizontal{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12' viewBox='0 0 36 12'%3E%3Cg stroke-linecap='round' stroke-width='1.6'%3E%3Cpath d='M3 2l1.5 2.5' stroke='%23ffffff'/%3E%3Cpath d='M8 8l-2.5 1.5' stroke='%234fc3f7'/%3E%3Cpath d='M13.5 3l-.6 2.8' stroke='%23ffd54f'/%3E%3Cpath d='M18 8.5l2.8.6' stroke='%2381c784'/%3E%3Cpath d='M23.5 2.5l1.8 2.2' stroke='%23b388ff'/%3E%3Cpath d='M29 7.5l-1.2 2.6' stroke='%23ffffff'/%3E%3Cpath d='M33.5 3.5l1.5 1.2' stroke='%23ff3d9a'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0) 45%, rgba(0,0,0,.08));
  background-repeat: repeat-x, no-repeat;
  background-position: left center, 0 0;
  background-size: 36px 12px, 100% 100%;
  min-width: 48px; min-height: 0;
}
::-webkit-scrollbar-thumb:hover{ background-color: var(--cake-frosting-deep); }
::-webkit-scrollbar-thumb:active{ background-color: #ff58a6; }
::-webkit-scrollbar-corner{ background: var(--cake-cream); }
::-webkit-scrollbar-button{ display: none; width: 0; height: 0; }

/* Firefox: colours only (see the note at the top) */
@supports not selector(::-webkit-scrollbar){
  html{ scrollbar-color: var(--cake-frosting-deep) var(--cake-sponge); }
}