/* List view and header (INVENTORY L5, L7; SPEC.md §4.23), measured on Task Manager. Built by js/components/listview.js. */
.w2k-listview {
  padding: var(--metric-table-edge);   /* inside the client edge: the header and rows start here */
  background: var(--sys-window);
  box-shadow: var(--edge-sunken);
  color: var(--sys-window-text);
  font: var(--font-ui);
  outline: none;
  user-select: none;
}
.w2k-listview__content { min-width: 100%; width: max(100%, var(--lv-total, 0px)); }
.w2k-listview:not([data-view="report"]) .w2k-header, .w2k-listview[data-header="none"] .w2k-header { display: none; }   /* LVS_NOCOLUMNHEADER */

/* Header: push-button items, text 6px in (aligned per column), a button-looking filler after the last item. */
.w2k-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  height: var(--metric-header-height);
  background: var(--color-control-face);
  color: var(--sys-btn-text);
}
.w2k-header__item, .w2k-header__filler {
  position: relative;
  flex: none;
  box-sizing: border-box;
  height: var(--metric-header-height);
  padding: var(--metric-header-text-top) var(--metric-header-text-pad) 0;
  box-shadow: var(--edge-control);
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
}
.w2k-header__filler {
  flex: 1;
  padding: 0;
  /* The filler runs past the right edge: its right-side lines are never seen (measured). */
  box-shadow: var(--edge-control-filler);
}
/* Flat header (no HDS_BUTTONS): 16px, items without edges, a ButtonShadow + white divider at each item's right end and
   a ButtonShadow line along the bottom (measured on Mouse › Hardware). */
.w2k-listview[data-header="flat"] { --metric-header-height: 16px; }
.w2k-listview[data-header="flat"] :is(.w2k-header__item, .w2k-header__filler) {
  box-shadow: inset -1px 0 var(--sys-btn-hilight), inset -2px 0 var(--sys-btn-shadow), inset 0 -1px var(--sys-btn-shadow);
}
.w2k-listview[data-header="flat"] .w2k-header__filler { box-shadow: inset 0 -1px var(--sys-btn-shadow); }
.w2k-listview[data-header="flat"] .w2k-header__item { padding: var(--metric-header-text-top) var(--metric-header-text-pad) 0; }
.w2k-header__item[data-align="right"] { text-align: right; }
.w2k-header__item[data-align="center"] { text-align: center; }
.w2k-header__item[data-pressed], .w2k-header__item.is-active { box-shadow: inset 0 0 0 1px var(--sys-btn-shadow); }
.w2k-header__item:is([data-pressed], .is-active) > .w2k-header__text { position: relative; left: 1px; top: 1px; }
/* Sort arrow (extension X1, ListView sortIndicator): an 8×7 embossed outline triangle after the header text, in
   ButtonShadow and ButtonHilight (as Address Book's, measured on win2k-pro_window_address-book.png); one pixel per
   shadow so the system colours apply. */
.w2k-header__item[data-sort] > .w2k-header__text::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1px;
  margin-left: 8px;
  vertical-align: top;
  position: relative;
  top: 3px;
}
.w2k-header__item[data-sort="asc"] > .w2k-header__text::after { box-shadow: 3px 1px var(--sys-btn-shadow), 4px 1px var(--sys-btn-hilight), 2px 2px var(--sys-btn-shadow), 5px 2px var(--sys-btn-hilight), 2px 3px var(--sys-btn-shadow), 5px 3px var(--sys-btn-hilight), 1px 4px var(--sys-btn-shadow), 6px 4px var(--sys-btn-hilight), 1px 5px var(--sys-btn-shadow), 6px 5px var(--sys-btn-hilight), 0px 6px var(--sys-btn-shadow), 7px 6px var(--sys-btn-hilight), 0px 7px var(--sys-btn-hilight), 1px 7px var(--sys-btn-hilight), 2px 7px var(--sys-btn-hilight), 3px 7px var(--sys-btn-hilight), 4px 7px var(--sys-btn-hilight), 5px 7px var(--sys-btn-hilight), 6px 7px var(--sys-btn-hilight), 7px 7px var(--sys-btn-hilight); }
.w2k-header__item[data-sort="desc"] > .w2k-header__text::after { box-shadow: 0px 1px var(--sys-btn-shadow), 1px 1px var(--sys-btn-shadow), 2px 1px var(--sys-btn-shadow), 3px 1px var(--sys-btn-shadow), 4px 1px var(--sys-btn-shadow), 5px 1px var(--sys-btn-shadow), 6px 1px var(--sys-btn-shadow), 7px 1px var(--sys-btn-hilight), 0px 2px var(--sys-btn-shadow), 7px 2px var(--sys-btn-hilight), 1px 3px var(--sys-btn-shadow), 6px 3px var(--sys-btn-hilight), 1px 4px var(--sys-btn-shadow), 6px 4px var(--sys-btn-hilight), 2px 5px var(--sys-btn-shadow), 5px 5px var(--sys-btn-hilight), 2px 6px var(--sys-btn-shadow), 5px 6px var(--sys-btn-hilight), 3px 7px var(--sys-btn-shadow), 4px 7px var(--sys-btn-hilight); }
.w2k-header__divider { position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: var(--cursor-horizontal-resize, col-resize); }

/* Report rows: one line + 1 high (17 with small icons); cells clip horizontally only (descenders may pass below). */
.w2k-listview__item {
  display: grid;
  grid-template-columns: var(--lv-columns);
  height: var(--metric-list-row-height);
  white-space: pre;
}
.w2k-listview[data-icons] { --metric-list-cell-top: var(--metric-list-cell-top-icon); }
.w2k-listview[data-icons] .w2k-listview__item { height: var(--metric-list-row-height-icon); }
.w2k-listview__cell {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  text-overflow: ellipsis;   /* subitems end in "..." (Mouse › Hardware) */
  padding: var(--metric-list-cell-top) var(--metric-header-text-pad) 0;
  line-height: var(--line-height-ui);
}
.w2k-listview__cell[data-align="right"] { text-align: right; }
.w2k-listview__cell--label { display: flex; padding: 0 0 0 var(--metric-list-label-left); }
.w2k-listview__iconbox { flex: none; width: 16px; height: 16px; margin-top: round(down, (var(--metric-list-row-height-icon) - 16px) / 2, 1px); }   /* 0 in a 17px row (Display › Background) */
.w2k-listview__iconbox > img { display: block; width: 16px; height: 16px; }
.w2k-listview__label {
  display: block;
  min-width: 0;   /* may shrink to the column: the text then ends in "..." (Keyboard › Hardware) */
  height: 100%;
  padding: var(--metric-list-cell-top) var(--metric-list-label-pad-right) 0 var(--metric-list-label-pad);
  overflow-x: clip;
  text-overflow: ellipsis;
}
.w2k-listview__item[aria-selected="true"] .w2k-listview__label { background: var(--sys-hilight); color: var(--sys-hilight-text); }
.w2k-listview:not(:focus):not(.is-focus) .w2k-listview__item[aria-selected="true"] .w2k-listview__label { background: var(--color-list-selection-unfocused); color: var(--sys-window-text); }
.w2k-listview[data-fullrow] .w2k-listview__item[aria-selected="true"] { background: var(--sys-hilight); color: var(--sys-hilight-text); }
/* Full-row select: the selection and the focus rectangle run from the row's left (with icons: from the label — the
   icon stays outside, measured on Mouse › Hardware) to the last column's end; the label has no box of its own. */
.w2k-listview[data-fullrow] { --lv-select-left: 0px; }
.w2k-listview[data-fullrow][data-icons] { --lv-select-left: calc(var(--metric-list-label-left) + 16px); }
.w2k-listview[data-fullrow] .w2k-listview__item { position: relative; }
.w2k-listview[data-fullrow][data-icons] .w2k-listview__item[aria-selected="true"] {
  background: linear-gradient(var(--sys-hilight), var(--sys-hilight)) var(--lv-select-left) 0 / calc(var(--lv-total) - var(--lv-select-left)) 100% no-repeat;
}
.w2k-listview[data-fullrow][data-icons]:not(:focus):not(.is-focus) .w2k-listview__item[aria-selected="true"] { background-image: linear-gradient(var(--color-list-selection-unfocused), var(--color-list-selection-unfocused)); color: var(--sys-window-text); }
.w2k-listview[data-fullrow] .w2k-listview__item[aria-selected="true"] > .w2k-listview__cell > .w2k-listview__label { background: none; color: inherit; }
.w2k-listview[data-fullrow] .w2k-listview__item[data-caret] > .w2k-listview__cell > .w2k-listview__label::after { display: none; }
.w2k-listview[data-fullrow]:is(:focus, .is-focus) .w2k-listview__item[data-caret]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--lv-select-left);
  width: calc(var(--lv-total) - var(--lv-select-left));
  background: var(--focus-rect-image);
  filter: invert(1);
  mix-blend-mode: difference;
}
html[data-cues="hidden"] .w2k-listview[data-fullrow]:not(.is-focus) .w2k-listview__item[data-caret]::after { display: none; }
/* Focus rectangle on the caret item's label (inverting dots; knowledge). */
.w2k-listview:is(:focus, .is-focus) .w2k-listview__item[data-caret] .w2k-listview__label { position: relative; }
.w2k-listview:is(:focus, .is-focus) .w2k-listview__item[data-caret] .w2k-listview__label::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--focus-rect-image);
  filter: invert(1);
  mix-blend-mode: difference;
}
html[data-cues="hidden"] .w2k-listview:not(.is-focus) .w2k-listview__item[data-caret] .w2k-listview__label::after { display: none; }

/* Large-icon view (LVS_ICON): the desktop's cell metrics (SPEC.md §4.5) — 75×75 cells, icon at (21, 2), label lines
   centred from 38px down; selection on the label lines, the focus rectangle around them. */
.w2k-listview[data-view="icon"] .w2k-listview__items { position: relative; }
.w2k-listview[data-view="icon"] .w2k-listview__item {
  position: absolute;
  width: var(--metric-desktop-icon-spacing);
  height: var(--metric-desktop-icon-spacing);
}
.w2k-listview[data-view="icon"] .w2k-listview__icon {
  position: absolute;
  left: var(--metric-desktop-icon-left);
  top: var(--metric-desktop-icon-top);
  width: 32px;
  height: 32px;
}
.w2k-listview__iconlabel { position: absolute; top: var(--metric-desktop-label-top); left: 0; width: 100%; white-space: pre; }
.w2k-listview__iconlabel > span { position: absolute; left: var(--line-left, 0); }
.w2k-listview[data-view="icon"] .w2k-listview__item[aria-selected="true"] .w2k-listview__iconlabel > span { background: var(--color-list-selection-unfocused); }
.w2k-listview[data-view="icon"]:is(:focus, .is-focus) .w2k-listview__item[aria-selected="true"] .w2k-listview__iconlabel > span { background: var(--sys-hilight); color: var(--sys-hilight-text); }
.w2k-listview[data-view="icon"]:is(:focus, .is-focus) .w2k-listview__item[data-caret] .w2k-listview__iconlabel::after {
  /* The checkerboard ring of DrawFocusRect, phased from the list's origin (js sets --focus-phase per item). */
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: var(--focus-left, 0);
  top: 0;
  width: var(--focus-width, 0);
  height: calc(var(--label-lines, 1) * var(--line-height-ui) + 2px);
  border: 1px solid transparent;
  background: var(--color-focus-dot);
  -webkit-mask:
    var(--pattern-dither-mask) var(--focus-phase, 0 0) / var(--pattern-dither-size) repeat border-box,
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000) border-box;
  -webkit-mask-composite: source-in, xor;
  mask:
    var(--pattern-dither-mask) var(--focus-phase, 0 0) / var(--pattern-dither-size) repeat border-box,
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000) border-box;
  mask-composite: intersect, exclude;
}
html[data-cues="hidden"] .w2k-listview[data-view="icon"]:not(.is-focus) .w2k-listview__iconlabel::after { display: none; }

/* Small-icon and list views: absolutely placed first-column items (js/components/listview.js). */
.w2k-listview:is([data-view="list"], [data-view="smallicon"]) .w2k-listview__items { position: relative; }
.w2k-listview:is([data-view="list"], [data-view="smallicon"]) .w2k-listview__item { position: absolute; display: block; height: var(--metric-list-row-height-icon); }
.w2k-listview:is([data-view="list"], [data-view="smallicon"]) .w2k-listview__cell--label { height: 100%; }
/* In the list and small-icon views the icon starts at the item's left (Open dialog), unlike a report's first column. */
.w2k-listview:is([data-view="list"], [data-view="smallicon"]) { --metric-list-label-left: 0px; }
/* Selected and focused (with the focus shown): the Hilight fills the focus rectangle's area — the dots are not drawn
   (measured on Display › Effects' desktop icons). */
.w2k-listview[data-view="icon"]:is(:focus, .is-focus) .w2k-listview__item[aria-selected="true"][data-caret] .w2k-listview__iconlabel { isolation: isolate; }
.w2k-listview[data-view="icon"]:is(:focus, .is-focus) .w2k-listview__item[aria-selected="true"][data-caret] .w2k-listview__iconlabel::after {
  z-index: -1;
  border: 0;
  background: var(--sys-hilight);
  -webkit-mask: none;
  mask: none;
}
/* Label edit (LVS_EDITLABELS — knowledge): a WS_BORDER edit in WindowFrame over the label; under the icon it is a
   centred multi-line box as wide as the label area. */
.w2k-listview__edit {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0 1px;
  border: 1px solid var(--sys-window-frame);
  border-radius: 0;
  background: var(--sys-window);
  color: var(--sys-window-text);
  font: inherit;
  outline: none;
  box-sizing: border-box;
  resize: none;
  height: calc(var(--line-height-ui) + 2px);
  min-width: 60px;
}
.w2k-listview[data-view="icon"] .w2k-listview__edit {
  left: 2px;
  right: 2px;
  top: calc(var(--metric-desktop-label-top) - 1px);
  height: calc(2 * var(--line-height-ui) + 2px);
  text-align: center;
  overflow: hidden;
}
.w2k-listview__item[data-editing] .w2k-listview__iconlabel, .w2k-listview__item[data-editing] .w2k-listview__label { visibility: hidden; }

/* Inside another frame (data-edge="none" — Explorer's and Phone Dialer's views): no client edge of its own. */
.w2k-listview:where([data-edge="none"]) { box-shadow: none; padding: 0; }
/* A drop target while dragging (LVIS_DROPHILITED — Explorer): drawn selected. */
.w2k-listview__item[data-drophilite] :is(.w2k-listview__iconlabel > span, .w2k-listview__label) { background: var(--sys-hilight); color: var(--sys-hilight-text); }