/*
 * Base rules: reset, pixel rendering, typography defaults, shared state patterns (focus rectangle, disabled emboss,
 * dither). Values come only from tokens.css.
 */

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` always hides: component rules that set a display (a window's flex) must not show a hidden element — a
   minimized window kept on screen (the user's Show Desktop report). An element that keeps its place while hidden
   (data-keep-place: the wizard's hidden Cancel) is styled by its component. */
[hidden]:not([data-keep-place]) { display: none !important; }

html {
  /* One design pixel = an N×N block of device pixels; js/scaling.js sets the zoom (PROMPT.md §2 Rendering). */
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  margin: 0;
  background: var(--sys-background);
  color: var(--sys-window-text);
  font: var(--font-ui);
  font-kerning: none;
  font-variant-ligatures: none;
  font-synthesis: style;   /* an italic a face lacks is slanted (a scheme's Italic — css/fonts-sf.css); bold is never synthesized */
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: none;
  cursor: var(--cursor-normal-select, default);
}

img, canvas, .w2k-pixelated { image-rendering: pixelated; }
img[data-icon-theme] { image-rendering: auto; object-fit: contain; }   /* a theme's icon (js/icons.js): drawn larger, scaled smoothly, kept square */
/* A theme's 16px icon drawn at --icon-scale of its box, centred, the box kept (captions, task buttons, combos, trees,
   lists, status bars — user, 2026-10-11: one token for all). */
img[data-icon-theme][width="16"] { box-sizing: border-box; padding: calc(16px * (1 - var(--icon-scale)) / 2); }
img[data-icon-disabled] { opacity: 0.35; }   /* a theme's icon for a disabled bitmap (a grey win2k image) */

/* Only content selects: the UI chrome (captions, menus, toolbars, labels, lists, grids) never takes a text selection
   from a drag or Ctrl+A — edits, editors and areas marked .w2k-selectable (a document's text) do (extension; Windows
   draws no selection on its controls). Ctrl+A outside them is stopped by js/keyboard.js installSelectAllGuard(). */
body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable]:not([contenteditable="false"]), .w2k-selectable { -webkit-user-select: text; user-select: text; }

button, input, select, textarea { font: inherit; color: inherit; margin: 0; }

::selection { background: var(--sys-hilight); color: var(--sys-hilight-text); }

/* ── Focus rectangle (DrawFocusRect) — SPEC.md §2.5 ────────────────────────────────────────────────
   A 1px dotted frame (--focus-rect-image) on a positioned element; components place it with --focus-inset or their
   own pseudo-elements. Hidden while keyboard cues are hidden (html[data-cues="hidden"], js/effects.js). */
.w2k-focus-rect {
  position: absolute;
  inset: var(--focus-inset, 0);
  pointer-events: none;
  background: var(--focus-rect-image);
}
html[data-cues="hidden"] .w2k-focus-rect { display: none; }
/* DrawFocusRect is a PatBlt with a 50% brush aligned to the control's origin: a dot where x + y is odd in control
   coordinates. Elements that know their offset from the control set --focus-phase (0 0 when their own x + y is even,
   1px 0 when odd) and use this ring-shaped checkerboard instead of --focus-rect-image. */
.w2k-focus-checker {
  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;
}
/* The ring XORed over a focused selection (data-focus="xor" on a tree or a full-row list view — Help's and MMC's trees,
   Keyboard's locales; measured): its dots invert the Hilight under them, the gaps between show --color-focus-gap.
   --focus-ring-x (0 or 1px) is the dots' phase from the brush origin. */
.w2k-tree[data-focus="xor"]:is(:focus, .is-focus) .w2k-tree__row[aria-selected="true"] > .w2k-tree__label::before,
.w2k-tree[data-focus="xor"]:is(:focus, .is-focus) .w2k-tree__row[aria-selected="true"] > .w2k-tree__label::after,
.w2k-listview[data-focus="xor"][data-fullrow]:is(:focus, .is-focus) .w2k-listview__item[data-caret]::before,
.w2k-listview[data-focus="xor"][data-fullrow]:is(:focus, .is-focus) .w2k-listview__item[data-caret]::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1px solid transparent;
  -webkit-mask:
    var(--pattern-dither-mask) var(--ring-phase) / 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(--ring-phase) / var(--pattern-dither-size) repeat border-box,
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000) border-box;
  mask-composite: intersect, exclude;
}
.w2k-listview[data-focus="xor"][data-fullrow]:is(:focus, .is-focus) .w2k-listview__item[data-caret]::before,
.w2k-listview[data-focus="xor"][data-fullrow]:is(:focus, .is-focus) .w2k-listview__item[data-caret]::after { left: var(--lv-select-left); width: calc(var(--lv-total) - var(--lv-select-left)); }
.w2k-tree[data-focus="xor"]:is(:focus, .is-focus) .w2k-tree__row[aria-selected="true"] > .w2k-tree__label::before,
.w2k-listview[data-focus="xor"][data-fullrow]:is(:focus, .is-focus) .w2k-listview__item[data-caret]::before { --ring-phase: calc(var(--focus-ring-x, 0px) + 1px) 0; background: var(--color-focus-gap); }
.w2k-tree[data-focus="xor"]:is(:focus, .is-focus) .w2k-tree__row[aria-selected="true"] > .w2k-tree__label::after,
.w2k-listview[data-focus="xor"][data-fullrow]:is(:focus, .is-focus) .w2k-listview__item[data-caret]::after { --ring-phase: var(--focus-ring-x, 0px) 0; background: var(--color-focus-dot); filter: invert(1); mix-blend-mode: difference; }
html[data-cues="hidden"] .w2k-mnemonic { text-decoration: none; }
/* data-always: an access key shown even while the cues are hidden (a static outside a dialog's UI state — Address
   Book's "T&ype name"). */
html[data-cues="hidden"] .w2k-mnemonic[data-always] { text-decoration: underline; }
/* Mnemonic underline in the second row below the glyphs (baseline + 1), over the glyph advance — measured on the Setup
   wizard's < Back / Next > (MS Sans Serif). */
.w2k-mnemonic { text-decoration: underline; text-underline-offset: 1px; text-decoration-thickness: 1px; text-decoration-skip-ink: none; }

/* ── A control's font (WM_SETFONT): data-font="dialog" — the dialog template's MS Shell Dlg — on a list, a tree, a
   view, over the component's own Tahoma (measured per instance: Display's lists, Help's tree, Keyboard's lists…). ── */
:is(.w2k-tree, .w2k-listview, .w2k-listbox, .w2k-client-edge, .w2k-window__body)[data-font="dialog"] { font: var(--font-dialog); }
:is(.w2k-toolbar, .w2k-view-text)[data-font="ui"] { font: var(--font-ui); }   /* Tahoma in a dialog-font window (Phone Dialer's toolbar and message) */

/* ── A view's message (an empty list's text, a server being queried — Explorer, Outlook Express, Phone Dialer): in
   WindowText, not hit by the pointer; placed by the application. ── */
.w2k-view-text { position: absolute; margin: 0; white-space: pre; color: var(--sys-window-text); pointer-events: none; }

/* ── Hyperlink (a Web view's or a bar's link — AUDYT.md A9): LinkColor, underlined through the descenders. ───────── */
.w2k-link { color: var(--color-link); text-decoration: underline; text-decoration-skip-ink: none; }
.w2k-link:where(.is-disabled, [aria-disabled="true"]) { color: var(--sys-gray-text); pointer-events: none; }

/* ── Disabled emboss (DrawState DSS_DISABLED) — SPEC.md §2.5 ───────────────────────────────────────
   ButtonHilight copy at (+1,+1) under the ButtonShadow shape. */
.w2k-embossed {
  color: var(--color-disabled-text);
  text-shadow: 1px 1px 0 var(--color-disabled-emboss);
}

/* ── Checkerboard dither (ButtonFace / ButtonHilight) — SPEC.md §2.5 ──────────────────────────────── */
.w2k-dither { position: relative; background-color: var(--color-control-face); }
.w2k-dither::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sys-btn-hilight);
  -webkit-mask: var(--pattern-dither-mask) var(--dither-phase, 0 0) / var(--pattern-dither-size) repeat;
  mask: var(--pattern-dither-mask) var(--dither-phase, 0 0) / var(--pattern-dither-size) repeat;
  image-rendering: pixelated;
  pointer-events: none;
}

/* ── Effects switches (js/effects.js) ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { --effects-motion: off; }
}