/* Scroll bars and scroll areas (INVENTORY R1; SPEC.md §4.11) — measured on win2k-pro_window_notepad.png.
   Built by js/components/scrollbar.js. */
.w2k-scrollbar {
  position: relative;
  display: flex;
  flex: none;
  background: var(--color-control-face);
  user-select: none;
  touch-action: none;
}
.w2k-scrollbar[aria-orientation="vertical"] { flex-direction: column; width: var(--metric-scrollbar-size); }
.w2k-scrollbar[aria-orientation="horizontal"] { flex-direction: row; height: var(--metric-scrollbar-size); }

.w2k-scrollbar__arrow {
  position: relative;
  flex: none;
  width: var(--metric-scrollbar-size);
  height: var(--metric-scrollbar-size);
  background: var(--color-control-face);
  box-shadow: var(--edge-control-raised);
  color: var(--sys-btn-text);
}
/* Marlett arrows at 13 ppem (12–14 render identically), placed as measured. */
.w2k-scrollbar__arrow::before {
  position: absolute;
  left: var(--metric-scrollbar-glyph-left);
  top: var(--metric-scrollbar-glyph-top);
  font: var(--font-glyph-scroll);
  white-space: pre;
}
.w2k-scrollbar[aria-orientation="vertical"] > [data-part="dec"]::before { content: "5"; }
.w2k-scrollbar[aria-orientation="vertical"] > [data-part="inc"]::before { content: "6"; }
.w2k-scrollbar[aria-orientation="horizontal"] > [data-part="dec"]::before { content: "3"; }
.w2k-scrollbar[aria-orientation="horizontal"] > [data-part="inc"]::before { content: "4"; }
/* Pressed arrow: flat, a ButtonShadow frame, glyph moved 1px (knowledge — QUESTIONS Q5). */
.w2k-scrollbar__arrow[data-pressed], .w2k-scrollbar__arrow.is-active { box-shadow: inset 0 0 0 1px var(--sys-btn-shadow); }
.w2k-scrollbar__arrow:is([data-pressed], .is-active)::before { transform: translate(1px, 1px); }
/* Disabled bar: embossed arrows, no thumb. */
.w2k-scrollbar:is([data-inactive], [aria-disabled="true"]) > .w2k-scrollbar__arrow::before {
  color: var(--color-disabled-text);
  text-shadow: 1px 1px 0 var(--color-disabled-emboss);
}

.w2k-scrollbar__track { flex: 1; min-width: 0; min-height: 0; }
.w2k-scrollbar__thumb {
  position: absolute;
  background: var(--color-control-face);
  box-shadow: var(--edge-control-raised);
}
.w2k-scrollbar[aria-orientation="vertical"] .w2k-scrollbar__thumb { left: 0; width: 100%; }
.w2k-scrollbar[aria-orientation="horizontal"] .w2k-scrollbar__thumb { top: 0; height: 100%; }
/* Pressed track part: the dither inverted (knowledge). */
.w2k-scrollbar__pressed { position: absolute; background: var(--sys-btn-hilight); mix-blend-mode: difference; pointer-events: none; }
.w2k-scrollbar__pressed[hidden] { display: none; }

/* Size box: ButtonFace, with the Marlett size grip (o in ButtonHilight, p in ButtonShadow) at a sizable window's corner. */
.w2k-sizebox {
  position: relative;
  width: var(--metric-scrollbar-size);
  height: var(--metric-scrollbar-size);
  background: var(--color-control-face);
}
.w2k-sizebox[data-grip]::before, .w2k-sizebox[data-grip]::after {
  position: absolute;
  left: var(--metric-sizegrip-glyph-left);
  top: var(--metric-sizegrip-glyph-top);
  font: var(--font-glyph-grip);
  white-space: pre;
}
.w2k-sizebox[data-grip]::before { content: "o"; color: var(--sys-btn-hilight); }
.w2k-sizebox[data-grip]::after { content: "p"; color: var(--sys-btn-shadow); }

/* Scroll area: a natively scrolling viewport (own bars hidden) with Windows bars at the right and bottom. */
.w2k-scrollarea {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}
.w2k-scrollarea__viewport { grid-area: 1 / 1; overflow: auto; scrollbar-width: none; }
.w2k-scrollarea__viewport::-webkit-scrollbar { display: none; }
.w2k-scrollarea__v { grid-area: 1 / 2; }
.w2k-scrollarea__h { grid-area: 2 / 1; }
.w2k-scrollarea > .w2k-sizebox { grid-area: 2 / 2; }
.w2k-scrollarea:not([data-v]) > .w2k-scrollarea__v,
.w2k-scrollarea:not([data-h]) > .w2k-scrollarea__h,
.w2k-scrollarea:not([data-v][data-h]) > .w2k-sizebox { display: none; }