/* =========================================================
   WIN98 PRIMITIVES — reusable by every future app
   ========================================================= */
.btn98 {
  background: var(--face);
  border: 0;
  border-radius: 0;
  box-shadow: var(--sh-raised);
}
.btn98:active,
.btn98.is-pressed { box-shadow: var(--sh-pressed); }
.btn98:focus-visible { outline: 1px dotted #000; outline-offset: -0.5rem; }

/* Etched vertical separator */
.etched-v {
  width: 0.4rem;
  box-shadow: inset 1px 0 var(--shadow), inset -1px 0 var(--white);
  flex: none;
}
/* Etched horizontal separator */
.etched-h {
  height: 0.2rem;
  border-top: 1px solid var(--shadow);
  border-bottom: 1px solid var(--white);
}
/* Rebar grip (the little raised bar at the start of IE bands) */
.grip {
  width: 0.4rem;
  box-shadow: var(--sh-thin-out);
  flex: none;
}

/* Win98 scrollbars (Chromium/WebKit). Firefox falls back below. */
.scroll98::-webkit-scrollbar { width: 2.2rem; height: 2.2rem; }
.scroll98::-webkit-scrollbar-track { background: var(--checker); }
.scroll98::-webkit-scrollbar-thumb { background: var(--face); box-shadow: var(--sh-raised); }
.scroll98::-webkit-scrollbar-corner { background: var(--face); }
.scroll98::-webkit-scrollbar-button:single-button {
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  background-color: var(--face);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.9rem 0.9rem;
  box-shadow: var(--sh-raised);
}
.scroll98::-webkit-scrollbar-button:single-button:active { box-shadow: var(--sh-pressed); }
.scroll98::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v1h1v1h1v1h1v1H0V3h1V2h1V1h1z'/%3E%3C/svg%3E");
}
.scroll98::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z'/%3E%3C/svg%3E");
}
.scroll98::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 7' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v7H3V6H2V5H1V4H0V3h1V2h1V1h1z'/%3E%3C/svg%3E");
}
.scroll98::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h1v1h1v1h1v1H3v1H2v1H1v1H0z'/%3E%3C/svg%3E");
}
@supports (-moz-appearance: none) {
  .scroll98 { scrollbar-color: var(--face) var(--face-light); }
}