/*
 * Window frame (INVENTORY §3): sizable, dialog, and tool frames; caption with icon, title, gradient, and caption
 * buttons. Measurements: SPEC.md §2.2–2.4 and §4.2. The caption gradient image is drawn by js/wm.js with the
 * measured formula (a CSS gradient renders colors one level off — TODO.md R12); the CSS gradient is the fallback.
 *
 * Markup:
 *   <section class="w2k-window" data-frame="sizable|dialog|tool" data-active aria-labelledby="…">
 *     <header class="w2k-window__caption">
 *       <img class="w2k-window__icon" src="…/16-shell.png" alt="">
 *       <span class="w2k-window__title" id="…">Title</span>
 *       <span class="w2k-window__buttons">
 *         <button class="w2k-caption-button" data-action="minimize" aria-label="Minimize">0</button> …
 *       </span>
 *     </header>
 *     <div class="w2k-window__body">…</div>
 *   </section>
 */

.w2k-window {
  --frame: var(--metric-frame-width);
  --caption-h: var(--metric-caption-height);
  --border-color: var(--sys-inactive-border);
  --caption-left-color: var(--sys-inactive-title);
  --caption-right-color: var(--sys-gradient-inactive-title);
  --caption-text: var(--sys-inactive-title-text);
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: var(--frame);
  background: var(--border-color);
  box-shadow: var(--edge-window);
  color: var(--sys-window-text);
  font: var(--font-ui);
}
.w2k-window[data-active], .w2k-window.is-active {
  --border-color: var(--sys-active-border);
  --caption-left-color: var(--sys-active-title);
  --caption-right-color: var(--sys-gradient-active-title);
  --caption-text: var(--sys-title-text);
}
.w2k-window.is-inactive {
  --border-color: var(--sys-inactive-border);
  --caption-left-color: var(--sys-inactive-title);
  --caption-right-color: var(--sys-gradient-inactive-title);
  --caption-text: var(--sys-inactive-title-text);
}

/* Dialog frame (WS_DLGFRAME / DS_MODALFRAME): raised edge + 1px ButtonFace = 3px, not sizable. */
.w2k-window[data-frame="dialog"] {
  --frame: var(--metric-dialog-frame-width);
  background: var(--color-surface);
}
/* Tool window (WS_EX_TOOLWINDOW): small caption. knowledge (metrics to confirm, QUESTIONS Q5) */
.w2k-window[data-frame="tool"] { --caption-h: var(--metric-small-caption-height); }
.w2k-window[data-frame="tool"] > .w2k-window__caption { font: var(--font-small-caption); }

.w2k-window[data-state="maximized"]:not([data-maxframe]) { --frame: 0px; box-shadow: none; }

/* While a window is moved or resized (js/wm.js: data-dragging on the desktop), the iframes in the windows do not take
   the pointer, so the drag keeps every pointer event and its release (gui/lean#10). */
[data-dragging] iframe { pointer-events: none; }

/* Display Properties › Effects › Show shadows under windows (js/effects.js: html[data-window-shadow]): the frame edges
   plus a drop shadow; not for maximized windows nor the Appearance preview. Demo effect — win2k had no window shadows. */
html[data-window-shadow="true"] .w2k-window:not([data-state="maximized"], .dp__preview *) { box-shadow: var(--edge-window), var(--shadow-window); }

/* ── Caption ─────────────────────────────────────────────────────────────────────────────────────── */
.w2k-window__caption {
  position: relative;
  flex: none;
  height: var(--caption-h);
  margin-bottom: var(--metric-caption-line);
  background-color: var(--caption-left-color);
  /* js/wm.js replaces this with the exact gradient image (--caption-gradient); fallback is a CSS gradient. */
  background-image: var(--caption-gradient, linear-gradient(to right, var(--caption-left-color), var(--caption-right-color)));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--caption-text);
  font: var(--font-caption);
  white-space: pre;
  overflow: hidden;
  user-select: none;
}
.w2k-window__icon {
  position: absolute;
  left: var(--metric-caption-icon-left);
  top: var(--metric-caption-icon-top);
  width: 16px;
  height: 16px;
}
.w2k-window__title {
  position: absolute;
  left: var(--metric-caption-text-left);
  top: var(--metric-caption-text-top);
  right: var(--caption-buttons-width, 0);
  overflow: hidden;
  text-overflow: ellipsis;
}
.w2k-window__icon ~ .w2k-window__title { left: calc(var(--metric-caption-icon-left) + 16px + var(--metric-caption-text-left)); }

.w2k-window__buttons {
  position: absolute;
  top: var(--metric-caption-button-top);
  right: var(--metric-caption-button-gap);
  display: flex;
}
/* Close (and help) are separated from the others by 2px; minimize and maximize touch. */
.w2k-window__buttons > [data-action="close"],
.w2k-window__buttons > [data-action="help"] { margin-left: var(--metric-caption-button-gap); }
.w2k-window__buttons > [data-action="help"] + [data-action="close"] { margin-left: var(--metric-caption-button-gap); }

.w2k-caption-button {
  position: relative;
  width: var(--metric-caption-button-width);
  height: var(--metric-caption-button-height);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--color-control-face);
  box-shadow: var(--edge-control);
  color: var(--sys-btn-text);
  font: inherit;
  font-size: 0;      /* the glyph lives in ::before so the button's text can stay as an accessible fallback */
  outline: none;
  cursor: inherit;
  -webkit-appearance: none;
  appearance: none;
}
/* Marlett glyph at 10 ppem: pen x 3, baseline 12 inside the 16×14 button (all glyphs, measured). */
.w2k-caption-button::before {
  position: absolute;
  left: var(--metric-caption-glyph-left);
  top: var(--metric-caption-glyph-top);
  font: var(--font-glyph-caption);
  white-space: pre;
}
.w2k-caption-button[data-action="minimize"]::before { content: "0"; }
.w2k-caption-button[data-action="maximize"]::before { content: "1"; }
.w2k-caption-button[data-action="restore"]::before { content: "2"; }
.w2k-caption-button[data-action="close"]::before { content: "r"; }
.w2k-caption-button[data-action="help"]::before { content: "s"; }

/* Pressed: sunken, glyph +1,+1. knowledge (QUESTIONS Q5) */
.w2k-caption-button[data-pressed], .w2k-caption-button.is-active {
  box-shadow:
    inset -1px -1px var(--sys-btn-hilight), inset 1px 1px var(--sys-btn-dk-shadow),
    inset -2px -2px var(--sys-btn-light), inset 2px 2px var(--sys-btn-shadow);
}
.w2k-caption-button[data-pressed]::before, .w2k-caption-button.is-active::before { transform: translate(1px, 1px); }
.w2k-caption-button:disabled::before {
  color: var(--color-disabled-text);
  text-shadow: 1px 1px 0 var(--color-disabled-emboss);
}

/* ── Body ────────────────────────────────────────────────────────────────────────────────────────── */
/* The client clips its children, as Windows clips child windows to the parent's client area (a narrow window cuts its
   rebar and status bar instead of letting them spill over the frame). Popups live in their own layer. */
.w2k-window__body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  color: var(--sys-btn-text);
}
/* The client's font: the window's (Tahoma), or its dialog template's MS Shell Dlg (wm.create({ font: 'dialog' }) sets
   data-font — calculators, MFC and HTML Help windows, measured; base.css). Property sheets set theirs (tabs.css). */
.w2k-window__client {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.w2k-window__client[data-edge="client"] {
  background: var(--sys-window);
  box-shadow: var(--edge-sunken);
  padding: 2px;
}

/* Size cursors on the frame (js/wm.js sets data-hit while hovering the frame). */
.w2k-window[data-hit="left"], .w2k-window[data-hit="right"] { cursor: var(--cursor-horizontal-resize, ew-resize); }
.w2k-window[data-hit="top"], .w2k-window[data-hit="bottom"] { cursor: var(--cursor-vertical-resize, ns-resize); }
.w2k-window[data-hit="top-left"], .w2k-window[data-hit="bottom-right"] { cursor: var(--cursor-diagonal-resize-1, nwse-resize); }
.w2k-window[data-hit="top-right"], .w2k-window[data-hit="bottom-left"] { cursor: var(--cursor-diagonal-resize-2, nesw-resize); }
/* Ctrl+Shift held anywhere, or Shift+Alt over the middle third: the window moves (js/wm.js modifierDragMode, gui/lean#16). */
.w2k-window[data-hit="move"] { cursor: var(--cursor-move, move); }

/* Outline drag (Effects › "Show window contents while dragging" off): a frame-wide checkerboard ring, like the
   inverted drag frame of Windows 2000 (knowledge; black dots instead of XOR — browsers cannot invert). */
.w2k-drag-outline {
  position: absolute;
  z-index: 100000;
  padding: var(--metric-frame-width);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.w2k-drag-outline > div {
  position: absolute;
  inset: 0;
  background: var(--sys-window-frame);
  -webkit-mask: var(--pattern-dither-mask) 0 0 / var(--pattern-dither-size) repeat;
  mask: var(--pattern-dither-mask) 0 0 / var(--pattern-dither-size) repeat;
}

/* ── MDI (INVENTORY W11) ──────────────────────────────────────────────────────────────────────────
   The client area (AppWorkspace) holds child windows managed by their own WindowManager (js/wm.js, options.mdi).
   A child's active caption looks inactive while its frame window is inactive. Minimized children are 160px-wide
   title bars along the bottom; a maximized child loses its caption (its buttons move to the frame's menu bar and its
   title joins the frame's). Child sizes are knowledge (SM_CXMINIMIZED 160) except the frame and caption. */
.w2k-mdi {
  position: relative;
  overflow: hidden;
  background: var(--sys-app-workspace);
}
/* An MDI client inside a scroll area (TODO T1): it scrolls when children extend beyond it. */
.w2k-scrollarea > .w2k-mdi.w2k-scrollarea__viewport { overflow: auto; }
.w2k-window:not([data-active]):not(.is-active) .w2k-mdi > .w2k-window[data-active] {
  --border-color: var(--sys-inactive-border);
  --caption-left-color: var(--sys-inactive-title);
  --caption-right-color: var(--sys-gradient-inactive-title);
  --caption-text: var(--sys-inactive-title-text);
}
.w2k-mdi > .w2k-window[data-state="minimized"] { width: 160px; height: auto; }
.w2k-mdi > .w2k-window[data-state="minimized"] > .w2k-window__body { display: none; }
.w2k-mdi > .w2k-window[data-state="maximized"] > .w2k-window__caption { display: none; }
/* Holder for a maximized child's caption buttons at the end of the frame's menu bar. */
.w2k-mdi-buttons { display: flex; align-items: center; }
.w2k-mdi-buttons > .w2k-window__buttons { position: static; }
/* Maximized MDI child: its icon at the left of the frame's menu bar (knowledge: 16×16, 1px in, centered). */
.w2k-mdi-icon { flex: none; width: 16px; height: 16px; margin: 0 auto 0 var(--metric-mdi-icon-left); }