/* List box — LISTBOX (INVENTORY L1; SPEC.md §4.13), measured on win2k-pro_dialog_font.png. A scroll area with the
   2px client edge; 13px items, text 2px in; selection Hilight across the item. Built by js/components/listbox.js. */
.w2k-listbox {
  padding: var(--metric-client-edge);
  background: var(--sys-window);
  box-shadow: var(--edge-sunken);
  color: var(--sys-window-text);
  outline: none;
  user-select: none;
}
.w2k-listbox > .w2k-scrollarea__viewport { scroll-snap-type: y mandatory; }
.w2k-listbox [role="option"] {
  position: relative;
  height: var(--metric-list-item-height);
  padding: 0 var(--metric-list-text-left);
  line-height: var(--metric-list-item-height);
  white-space: pre;
  overflow: hidden;
  scroll-snap-align: start;
}
/* A check-box list (data-checks — Regional Options' language groups): --metric-checklist-item-height rows, each item's
   check box (.w2k-check__box[data-list]) 4px in, the text 20px in, both placed in the row by --checklist-valign (win2k:
   at its foot, measured). */
.w2k-listbox:where([data-checks]) { --metric-list-item-height: var(--metric-checklist-item-height); }
.w2k-listbox:where([data-checks]) [role="option"] {
  box-sizing: border-box;
  padding-left: 20px;
  padding-top: round(down, (var(--metric-list-item-height) - var(--metric-checkbox-size)) * var(--checklist-valign), 1px);
  line-height: var(--metric-checkbox-size);
}
:where(.w2k-listbox[data-checks] [role="option"]) > .w2k-check__box { left: 4px; top: round(down, (100% - var(--metric-checkbox-size)) * var(--checklist-valign), 1px); }
.w2k-listbox [role="option"][aria-selected="true"] { background: var(--color-row-hilight, var(--sys-hilight)); color: var(--color-row-hilight-text, var(--sys-hilight-text)); }
.w2k-listbox [role="option"][aria-disabled="true"], .w2k-listbox[aria-disabled="true"] [role="option"] { color: var(--sys-gray-text); }
.w2k-listbox[aria-disabled="true"] [role="option"][aria-selected="true"] { background: var(--color-surface); }
/* Focus rectangle on the caret item: DrawFocusRect inverts the dots, so they read black on Window and light on
   Hilight (knowledge for the selected case). */
.w2k-listbox:is(:focus, .is-focus) [role="option"][data-caret]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--focus-rect-image);
  filter: invert(1);
  mix-blend-mode: difference;
  pointer-events: none;
}
html[data-cues="hidden"] .w2k-listbox:not(.is-focus) [role="option"][data-caret]::after { display: none; }