/* =========================================================== */
/* AG Scrollbar Standard v1.1  — CANONICAL DROP-IN             */
/* Source of truth: sectors/web/standards/AG-SCROLLBAR-STANDARD.md */
/* Rail. Checkpoint. Grab. Gold thumb tracks scroll; section    */
/* checkpoints + name bubble; thumb+bubble grab-to-scroll.      */
/* Tokens (--ink, --paper, --accent, --ease-*) from Palette/Motion */
/* =========================================================== */

html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }

.ag-sb {
  position: fixed; top: 0; right: 0; width: 18px; height: 100%;
  z-index: 2147483640; opacity: 0; pointer-events: none;
  transition: opacity 300ms var(--ease-satisfying, cubic-bezier(0.16,1,0.3,1));
}
.ag-sb.is-active { opacity: 1; }

.ag-sb__track {
  position: absolute; top: 21px; bottom: 21px; right: 7px; width: 3px; border-radius: 7px;
  background: color-mix(in oklch, var(--accent, #c9a861) 16%, transparent);
  pointer-events: auto; cursor: pointer;
}

.ag-sb__tick {
  position: absolute; left: 50%; width: 5px; height: 2px; border-radius: 3px;
  transform: translate(-50%, -50%);
  background: color-mix(in oklch, var(--accent, #c9a861) 50%, transparent);
  transition: width 300ms var(--ease-settle, cubic-bezier(.22,1,.36,1)),
              height 300ms var(--ease-settle, cubic-bezier(.22,1,.36,1)),
              background 300ms var(--ease-settle, cubic-bezier(.22,1,.36,1)),
              box-shadow 300ms var(--ease-settle, cubic-bezier(.22,1,.36,1));
}
.ag-sb__tick.is-active {
  width: 7px; height: 3px;
  background: var(--accent, #c9a861);
  box-shadow: 0 0 9px var(--accent, #c9a861);
}

.ag-sb__thumb {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 7px; border-radius: 7px;
  background: linear-gradient(180deg, var(--accent, #c9a861), color-mix(in oklch, var(--accent, #c9a861) 62%, #000));
  box-shadow: 0 0 9px color-mix(in oklch, var(--accent, #c9a861) 60%, transparent);
  pointer-events: auto; cursor: grab;
  transition: width 300ms var(--ease-settle, cubic-bezier(.22,1,.36,1)),
              box-shadow 300ms var(--ease-settle, cubic-bezier(.22,1,.36,1));
}
.ag-sb:hover .ag-sb__thumb,
.ag-sb.is-drag .ag-sb__thumb { width: 11px; box-shadow: 0 0 16px var(--accent, #c9a861); }
.ag-sb.is-drag .ag-sb__thumb { cursor: grabbing; }

.ag-sb__label {
  position: absolute; right: 24px; transform-origin: right center;
  padding: 6px 12px; border-radius: 7px; white-space: nowrap;
  background: var(--accent, #c9a861);
  color: var(--ink, #0a0a0a);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1;
  border: 1px solid color-mix(in oklch, var(--accent, #c9a861) 75%, #000);
  box-shadow: 0 6px 21px rgba(0,0,0,.30), 0 0 16px color-mix(in oklch, var(--accent, #c9a861) 45%, transparent);
  opacity: 0; pointer-events: none; cursor: grab;
  transition: opacity 210ms var(--ease-settle, cubic-bezier(.22,1,.36,1));
}
.ag-sb__label.is-show { opacity: 1; pointer-events: auto; }
.ag-sb.is-drag .ag-sb__label { cursor: grabbing; }
.ag-sb__label::after {
  content: ''; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px;
  background: inherit; border-top: inherit; border-right: inherit;
  transform: translateY(-50%) rotate(45deg);
}

@media (hover: none), (pointer: coarse) {
  html { scrollbar-width: auto; }
  .ag-sb { display: none !important; }
}
/* Desktop-only flourish: at/under 900 (mobile+tablet), restore native scroll — no rail, no bubble */
@media (max-width: 900px) {
  html { scrollbar-width: auto; }
  html::-webkit-scrollbar { width: auto; height: auto; }
  .ag-sb { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-sb, .ag-sb__thumb, .ag-sb__label, .ag-sb__tick { transition: none; }
}