/* Page ruler: the page in miniature down the right edge, with a mark per section and a pop-up naming the section you are in.
   Inspired by getartcraft.com's scroll ruler. Desktop with a mouse only; touch screens keep the normal scrollbar.
   Loaded as a stylesheet in <head> so the space and the hidden scrollbar are there from the first paint (nothing shifts).
   Drawn by assets/page-ruler.js. Used on every page of the site. */
#pageRuler, #rulerPopup { display: none; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html { scrollbar-width: none; }   /* set from the first paint (not by the script) so nothing shifts when the ruler appears */
  html::-webkit-scrollbar { width: 0; height: 0; }
  body { padding-right: 56px; }   /* keep content clear of the ruler */
  #pageRuler { display: block; position: fixed; right: 0; bottom: 0; width: 56px; z-index: 30; cursor: crosshair; user-select: none;
    background: color-mix(in srgb, #0D0B1F 55%, transparent); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
    -webkit-mask-image: linear-gradient(to left, #000 45%, rgba(0,0,0,.5) 75%, transparent); mask-image: linear-gradient(to left, #000 45%, rgba(0,0,0,.5) 75%, transparent); }
  #pageRuler .ruler-marks, #pageRuler .ruler-view { position: absolute; inset: 0; }
  #pageRuler .tick { position: absolute; right: 0; height: 1px; width: 7px; background: rgba(171, 166, 151, .35); }
  #pageRuler .tick.major { width: 14px; background: rgba(141, 147, 168, .9); }
  #pageRuler .label { position: absolute; right: 17px; transform: translateY(-50%); font: 600 10px/1 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible Next Fallback', sans-serif; color: #ABA697; white-space: nowrap; }
  /* tier sections in their item colours (same values as tools/tailwind.config.js tier / tiertext) */
  #pageRuler .band { position: absolute; right: 0; width: 3px; border-radius: 2px; opacity: .75; }
  #pageRuler .band.tone-s, #pageRuler .tick.tone-s { background: #FF8000; }
  #pageRuler .band.tone-a, #pageRuler .tick.tone-a { background: #A335EE; }
  #pageRuler .band.tone-b, #pageRuler .tick.tone-b { background: #0070DD; }
  #pageRuler .band.tone-c, #pageRuler .tick.tone-c { background: #41D45A; }
  #pageRuler .band.tone-f, #pageRuler .tick.tone-f { background: #9D9D9D; }
  #pageRuler .label.tone-s { color: #FF8000; } #pageRuler .label.tone-a { color: #B970F2; } #pageRuler .label.tone-b { color: #3D9BFF; }
  #pageRuler .label.tone-c { color: #41D45A; } #pageRuler .label.tone-f { color: #9D9D9D; }
  #pageRuler .label.on { color: #E3BC45; }
  #pageRuler .readout { position: absolute; right: 15px; transform: translateY(4px);   /* just under the gold line, so it is visible at the very top too */ font: 700 10px/1 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible Next Fallback', sans-serif; color: #E3BC45; font-variant-numeric: tabular-nums; background: #0D0B1F; padding: 2px 3px; border-radius: 4px; z-index: 1; }
  /* the section you're in pops up beside the ruler while you scroll, then fades (getartcraft.com-style) */
  #rulerPopup { display: block; position: fixed; right: 72px; z-index: 31; pointer-events: none; text-align: right; max-width: 26rem; padding: 12px 16px; border-radius: 18px;
    background: radial-gradient(ellipse at 100% 40%, rgba(13, 11, 31, .94), rgba(13, 11, 31, .7) 55%, transparent 80%);
    opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease; }
  #rulerPopup.show { opacity: 1; transform: none; }
  #rulerPopup .near { font-synthesis: none; font: 400 11px/1.5 'Marcellus', 'Marcellus Fallback', serif; letter-spacing: .08em; text-transform: uppercase; color: rgba(171, 166, 151, .7); }
  #rulerPopup .now { font-synthesis: none; font: 400 30px/1.1 'Marcellus', 'Marcellus Fallback', serif; letter-spacing: .03em; text-transform: uppercase; color: #FBF9F3; margin: 2px 0; }
  #rulerPopup .sub { font: 600 13px/1.3 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible Next Fallback', sans-serif; color: #E3BC45; margin-bottom: 4px; }
  #pageRuler .label, #pageRuler .readout, #rulerPopup div { font-variant-numeric: lining-nums; }   /* after the font shorthands, which reset it */
  #pageRuler .window { position: absolute; right: 0; width: 100%; border-top: 2px solid #E3BC45; background: linear-gradient(to left, rgba(227, 188, 69, .12), transparent 85%); pointer-events: none; }
}

/* Where the browser supports scroll-driven animation, CSS moves the gold window and the % readout as you scroll;
   the script only sets --ruler-travel (how far the window can move) when the page size changes. */
@property --ruler-pct { syntax: '<integer>'; inherits: false; initial-value: 0; }
@keyframes ruler-travel { from { translate: 0 0; --ruler-pct: 0; } to { translate: 0 var(--ruler-travel, 0px); --ruler-pct: 100; } }
@supports (animation-timeline: scroll()) {
  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    #pageRuler.css-driven .window, #pageRuler.css-driven .readout { top: 0; animation: ruler-travel linear both; animation-timeline: scroll(root block); }
    #pageRuler.css-driven .readout { counter-reset: ruler-pct var(--ruler-pct); }
    #pageRuler.css-driven .readout::after { content: counter(ruler-pct) "%"; }
  }
}