/*
 * Taskbar (INVENTORY S4–S8): Start button, toolbar bands (Quick Launch, task list) with grippers and etched
 * separators, task buttons, notification area with clock. Measured on win2k-pro_toolbar_taskbar.png (SPEC.md §4.3).
 */

.w2k-taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--metric-taskbar-height);
  display: flex;
  align-items: flex-start;
  padding: var(--metric-taskbar-padding-top) var(--metric-taskbar-padding-x) 0;
  background: var(--color-surface);
  /* Top edge: ButtonLight row, then ButtonHilight row. */
  box-shadow: inset 0 1px var(--sys-btn-light), inset 0 2px var(--sys-btn-hilight);
  font: var(--font-ui);
  color: var(--sys-btn-text);
  z-index: 1000000;
  user-select: none;
}

/* ── Start button ────────────────────────────────────────────────────────────────────────────────── */
.w2k-start-button {
  position: relative;
  flex: none;
  width: var(--metric-start-button-width);
  height: var(--metric-start-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: var(--font-ui-bold);
  outline: none;
  cursor: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.w2k-start-button > img { position: absolute; left: 4px; top: 3px; width: 16px; height: 16px; }
.w2k-start-button > span { position: absolute; left: 22px; top: 4px; white-space: pre; }
/* Pressed / menu open: sunken like a pressed task button, contents +1,+1 (knowledge). */
.w2k-start-button[aria-expanded="true"], .w2k-start-button[data-pressed], .w2k-start-button.is-active {
  box-shadow: var(--edge-control-sunken);
}
.w2k-start-button:is([aria-expanded="true"], [data-pressed], .is-active) > * { transform: translate(1px, 1px); }
.w2k-start-button:focus::after, .w2k-start-button.is-focus::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--focus-rect-image);
}
html[data-cues="hidden"] .w2k-start-button:focus:not(.is-focus)::after { display: none; }

/* ── Bands: etched separator + gripper, then the band's content ─────────────────────────────────── */
.w2k-taskbar__band {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-start;
  height: var(--metric-start-button-height);
  /* separator (2px) + 2px + gripper (3px) + 4px before the content */
  padding-left: var(--metric-taskbar-band-lead);
  margin-left: var(--metric-taskbar-band-gap);
}
.w2k-taskbar__band::before {
  /* Etched separator line: ButtonShadow, then ButtonHilight. */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: var(--metric-start-button-height);
  background: var(--edge-etched-v);
}
.w2k-taskbar__band::after {
  /* Band gripper: 3×18 raised bar (W top-left, g bottom-right), 2px from the top. */
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 3px;
  height: 18px;
  box-shadow: inset -1px -1px var(--sys-btn-shadow), inset 1px 1px var(--sys-btn-hilight);
}
.w2k-quicklaunch { margin-right: 1px; }   /* the second separator sits 4px after Quick Launch (measured) */
.w2k-tasks { flex: 1; min-width: 0; }

/* Quick Launch: flat 23×22 buttons, 16×16 shell icons at (3, 3). Hot = 1px raised, pressed = 1px sunken. */
.w2k-quicklaunch__button {
  position: relative;
  width: 23px;
  height: var(--metric-start-button-height);
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  cursor: inherit;
}
.w2k-quicklaunch__button > img { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; }
.w2k-quicklaunch__button:hover, .w2k-quicklaunch__button.is-hot { box-shadow: var(--edge-raised-inner); }
.w2k-quicklaunch__button[data-pressed], .w2k-quicklaunch__button.is-active { box-shadow: var(--edge-sunken-outer); }
.w2k-quicklaunch__button:is([data-pressed], .is-active) > img { transform: translate(1px, 1px); }

/* ── Task buttons: up to 160px, 3px apart; active = pressed with dither and bold text ────────────────── */
.w2k-task-button {
  position: relative;
  flex: 0 1 var(--metric-task-button-width);
  min-width: 0;
  height: var(--metric-start-button-height);
  margin-right: var(--metric-task-button-gap);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--color-control-face);
  box-shadow: var(--edge-control);
  color: var(--sys-btn-text);
  font: var(--font-ui);
  text-align: left;
  outline: none;
  cursor: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.w2k-task-button > img { position: absolute; left: 4px; top: 3px; width: 16px; height: 16px; }
.w2k-task-button > img + span { left: 22px; }   /* text after the icon; 4px from the edge without one (measured) */
.w2k-task-button > span {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 4px;
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
}
.w2k-task-button[aria-pressed="true"], .w2k-task-button.is-active {
  /* Pressed edge, then a full ButtonHilight row under the inner top line (measured) — a theme's role (css/tokens.css). */
  box-shadow: var(--edge-control-task-checked);
  font: var(--font-ui-bold);
}
.w2k-task-button[aria-pressed="true"]::before, .w2k-task-button.is-active::before {
  /* Checkerboard from the row below, ButtonHilight at its top-left pixel (measured). */
  content: "";
  position: absolute;
  inset: var(--inset-task-checked);   /* inside the pressed edge (a theme's role, css/tokens.css) */
  background: var(--sys-btn-hilight);
  -webkit-mask: var(--pattern-dither-mask) 1px 0 / var(--pattern-dither-size) repeat;
  mask: var(--pattern-dither-mask) 1px 0 / var(--pattern-dither-size) repeat;
}
/* Pressed task button: contents move 1px down only (measured: same text pen x as a normal button). */
.w2k-task-button:is([aria-pressed="true"], .is-active) > * { transform: translate(0, 1px); }
.w2k-task-button[data-flashing] { background: var(--sys-hilight); color: var(--sys-hilight-text); }

/* ── Notification area: 1px sunken box; icons from (3, 3); clock centered in the rest ───────────────── */
.w2k-tray {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-start;
  height: var(--metric-start-button-height);
  margin-left: auto;
  padding: 3px 1px 0 4px;
  box-shadow: var(--edge-sunken-outer);
}
.w2k-tray__icon { width: 16px; height: 16px; margin-right: 2px; }
.w2k-tray__clock {
  position: relative;
  flex: none;
  width: var(--metric-tray-clock-width);
  height: var(--line-height-ui);
  margin-top: 2px;
  white-space: pre;
}
.w2k-tray__clock > span { position: absolute; left: var(--label-left, 0); top: 0; }