/* Color common dialog (INVENTORY DL6) — client coordinates from comdlg32's DLG_COLOR template (MS Sans Serif 8 dialog
   units, MulDiv rounding), checked against win2k-pro_dialog_color.png. Built by js/components/colordialog.js. */
.w2k-colordlg { position: relative; flex: 1; font: var(--font-dialog); color: var(--sys-btn-text); }
.w2k-colordlg > * { position: absolute; }
.w2k-colordlg > label, .w2k-colordlg > span { white-space: pre; }
.w2k-colordlg__basic-label { left: 6px; top: 7px; }
.w2k-colordlg__basic { left: 6px; top: 23px; width: 210px; height: 140px; outline: none; }
.w2k-colordlg__custom-label { left: 6px; top: 172px; }
.w2k-colordlg__custom { left: 6px; top: 189px; width: 210px; height: 46px; outline: none; }
/* Swatches: 20×17 sunken, 25×22 apart from (3, 3); the selected one framed in black, the focused one (while the grid
   has the focus) inside a 26×23 focus rectangle 3px out. */
.w2k-colordlg__cell {
  position: absolute;
  margin: 3px 0 0 3px;
  width: 20px;
  height: 17px;
  box-sizing: border-box;
  background: var(--swatch);
  box-shadow: var(--edge-sunken);
}
.w2k-colordlg__cell[aria-selected="true"] { outline: 1px solid var(--sys-window-frame); }
/* comdlg32's focus rectangle really inverts (ButtonFace → #2B2F37), unlike the black dots of buttons and lists: white
   dots blended by difference; dots where x + y is even in the grid's coordinates (--focus-phase per cell). */
.w2k-colordlg__grid:focus .w2k-colordlg__cell[data-focus]::after {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 26px;
  height: 23px;
  box-sizing: border-box;
  border: 1px solid transparent;
  background: var(--sys-btn-hilight);
  mix-blend-mode: difference;
  -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;
}
.w2k-colordlg__define { left: 6px; top: 244px; width: 210px; }
.w2k-colordlg__ok, .w2k-colordlg__cancel { top: 270px; width: 66px; }
.w2k-colordlg__ok { left: 6px; }
.w2k-colordlg__cancel { left: 78px; }

/* The custom part (expanded): SS_SUNKEN boxes have a 1px ButtonShadow / ButtonHilight edge. */
.w2k-colordlg-window:not([data-expanded]) .w2k-colordlg > :is(.w2k-colordlg__rainbow, .w2k-colordlg__lum, .w2k-colordlg__arrow,
  .w2k-colordlg__current, .w2k-colordlg__color-label, .w2k-colordlg__solid-label, .w2k-colordlg__label, .w2k-colordlg__edit, .w2k-colordlg__add) { display: none; }
.w2k-colordlg__rainbow, .w2k-colordlg__lum, .w2k-colordlg__current {
  box-sizing: border-box;
  padding: 1px;
  box-shadow: inset -1px -1px var(--sys-btn-hilight), inset 1px 1px var(--sys-btn-shadow);   /* hilight owns the far corners */
}
.w2k-colordlg__rainbow { left: 228px; top: 7px; width: 177px; height: 189px; outline: none; }
.w2k-colordlg__lum { left: 420px; top: 7px; width: 12px; height: 189px; outline: none; }
.w2k-colordlg__rainbow > canvas, .w2k-colordlg__lum > canvas { display: block; }
/* The crosshair: four 5×3 / 3×5 black arms around a 9px gap, centred in a 19×19 box (measured). */
.w2k-colordlg__cross {
  position: absolute;
  width: 19px;
  height: 19px;
  pointer-events: none;
  background:
    linear-gradient(var(--sys-window-frame), var(--sys-window-frame)) 0 8px / 5px 3px no-repeat,
    linear-gradient(var(--sys-window-frame), var(--sys-window-frame)) 14px 8px / 5px 3px no-repeat,
    linear-gradient(var(--sys-window-frame), var(--sys-window-frame)) 8px 0 / 3px 5px no-repeat,
    linear-gradient(var(--sys-window-frame), var(--sys-window-frame)) 8px 14px / 3px 5px no-repeat;
}
/* The luminosity arrow: a 5×9 black triangle pointing left at the bar, its tip 1px right of the bar. */
.w2k-colordlg__arrow {
  left: 433px;
  width: 5px;
  height: 9px;
  background:
    linear-gradient(var(--sys-btn-text), var(--sys-btn-text)) 4px 0 / 1px 1px no-repeat,
    linear-gradient(var(--sys-btn-text), var(--sys-btn-text)) 3px 1px / 2px 1px no-repeat,
    linear-gradient(var(--sys-btn-text), var(--sys-btn-text)) 2px 2px / 3px 1px no-repeat,
    linear-gradient(var(--sys-btn-text), var(--sys-btn-text)) 1px 3px / 4px 1px no-repeat,
    linear-gradient(var(--sys-btn-text), var(--sys-btn-text)) 0 4px / 5px 1px no-repeat,
    linear-gradient(var(--sys-btn-text), var(--sys-btn-text)) 1px 5px / 4px 1px no-repeat,
    linear-gradient(var(--sys-btn-text), var(--sys-btn-text)) 2px 6px / 3px 1px no-repeat,
    linear-gradient(var(--sys-btn-text), var(--sys-btn-text)) 3px 7px / 2px 1px no-repeat,
    linear-gradient(var(--sys-btn-text), var(--sys-btn-text)) 4px 8px / 1px 1px no-repeat;
}
.w2k-colordlg__current { left: 228px; top: 202px; width: 60px; height: 42px; display: flex; }
.w2k-colordlg__current > span { flex: 1; }
.w2k-colordlg__color-label { left: 228px; top: 245px; width: 30px; text-align: right; }
.w2k-colordlg__solid-label { left: 258px; top: 245px; }
.w2k-colordlg__label { width: 30px; text-align: right; }
.w2k-colordlg__hue-label { left: 291px; top: 205px; }
.w2k-colordlg__sat-label { left: 291px; top: 228px; }
.w2k-colordlg__lum-label { left: 291px; top: 250px; }
.w2k-colordlg__red-label, .w2k-colordlg__green-label, .w2k-colordlg__blue-label { left: 365px; width: 36px; }
.w2k-colordlg__red-label { top: 205px; }
.w2k-colordlg__green-label { top: 228px; }
.w2k-colordlg__blue-label { top: 250px; }
.w2k-colordlg__edit { width: 27px; height: 20px; }
.w2k-colordlg__edit--hue, .w2k-colordlg__edit--sat, .w2k-colordlg__edit--lum { left: 324px; }
.w2k-colordlg__edit--red, .w2k-colordlg__edit--green, .w2k-colordlg__edit--blue { left: 404px; }
.w2k-colordlg__edit--hue, .w2k-colordlg__edit--red { top: 202px; }
.w2k-colordlg__edit--sat, .w2k-colordlg__edit--green { top: 224px; }
.w2k-colordlg__edit--lum, .w2k-colordlg__edit--blue { top: 247px; }
.w2k-colordlg__add { left: 228px; top: 270px; width: 213px; }