/* Up-down (spin) control with a buddy edit (INVENTORY E6; SPEC.md §4.15) — measured on the Date/Time year. */
.w2k-spin { position: relative; display: inline-flex; vertical-align: top; }
.w2k-spin > .w2k-edit { flex: 1; min-width: 0; }
.w2k-updown {
  display: flex;
  flex-direction: column;
  flex: none;
  width: var(--metric-updown-width);
  height: calc(var(--metric-edit-height) - 1px);   /* 20 beside a 21px edit, top-aligned (measured) */
}
.w2k-updown__button {
  position: relative;
  flex: 1;
  background: var(--color-control-face);
  box-shadow: var(--edge-control-raised);
  color: var(--sys-btn-text);
}
.w2k-updown__button::before {
  position: absolute;
  left: var(--metric-updown-glyph-left);
  top: var(--metric-updown-glyph-top);
  font: var(--font-glyph-updown);
}
.w2k-updown__button[data-dir="up"]::before { content: "5"; }
.w2k-updown__button[data-dir="down"]::before { content: "6"; }
.w2k-updown__button[data-pressed], .w2k-updown__button.is-active { box-shadow: inset 0 0 0 1px var(--sys-btn-shadow); }
.w2k-updown__button:is([data-pressed], .is-active)::before { transform: translate(1px, 1px); }
.w2k-spin:has(> input:disabled) .w2k-updown__button::before { color: var(--color-disabled-text); text-shadow: 1px 1px 0 var(--color-disabled-emboss); }
/* An up-down inside its buddy's client edge (Print's Number of copies, Display Properties' Wait and Size — measured):
   15px wide, right inside the edit's edge (--metric-client-edge: 2px in win2k). An odd height leaves its middle row
   between two equal buttons (Display's Size: 8 + 1 + 8 beside a 21px edit). */
.w2k-spin[data-inside] > .w2k-updown {
  position: absolute;
  right: var(--metric-client-edge);
  top: var(--metric-client-edge);
  bottom: var(--metric-client-edge);
  width: 15px;
  height: auto;
  justify-content: space-between;
}
.w2k-spin[data-inside] .w2k-updown__button { flex: none; height: round(down, 50%, 1px); }
.w2k-spin[data-inside] .w2k-updown__button::before { top: calc(var(--metric-updown-glyph-top) - 1px); }   /* 8px buttons: the arrows 1px higher (measured) */