/* Rebar and toolbars (INVENTORY T1, T2, T4; SPEC.md §4.22), measured on win2k-pro_window_my-computer.png.
   <div class="w2k-rebar"> <div class="w2k-rebar__row"> <div class="w2k-rebar__band" [data-title="Address"]
   [data-nogripper]> child </div> … </div> … </div>  — rows of bands, each 22px high, separated by etched lines; bands in a
   row are separated by etched vertical lines; the whole rebar has an etched frame. */
.w2k-rebar {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  padding: 2px;
  background: var(--color-surface);
  box-shadow: var(--edge-etched);
  font: var(--font-ui);
  color: var(--sys-btn-text);
  overflow: hidden;   /* bands pushed past the right edge are cut off */
}
.w2k-rebar__row { display: flex; height: var(--metric-rebar-band-height); }
.w2k-rebar__row { position: relative; }
/* Rows are separated by a horizontal etched line (ButtonShadow over ButtonHilight). */
.w2k-rebar__row + .w2k-rebar__row { margin-top: 2px; }
.w2k-rebar__row + .w2k-rebar__row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 2px;
  box-shadow: inset 0 1px var(--sys-btn-shadow), inset 0 -1px var(--sys-btn-hilight);
}
.w2k-rebar__band {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: min-content;   /* a band shrinks no further than its gripper, title and chevron (its child is clipped) */
  height: var(--metric-rebar-band-height);
  padding-left: var(--metric-rebar-child-left);
}
.w2k-rebar__band[data-fixed] { flex: none; }
.w2k-rebar__band + .w2k-rebar__band { margin-left: 2px; }
/* Etched vertical line before a band that follows another in the same row; it also crosses the first row of the
   etched line below (measured). */
.w2k-rebar__band + .w2k-rebar__band::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  bottom: -1px;
  width: 2px;
  z-index: 1;
  box-shadow: inset 1px 0 var(--sys-btn-shadow), inset -1px 0 var(--sys-btn-hilight);
}
/* …except in the last of several rows, where it stops at the band (Internet Explorer's Links band). */
.w2k-rebar__row + .w2k-rebar__row:last-child > .w2k-rebar__band + .w2k-rebar__band::after,
.w2k-rebar__row:only-child > .w2k-rebar__band + .w2k-rebar__band::after { bottom: 0; }   /* …and in a one-row rebar (MMC) */
/* Gripper: a 3px raised bar (ButtonHilight left/top, ButtonShadow right/bottom). */
.w2k-rebar__band:not([data-nogripper])::before {
  content: "";
  position: absolute;
  left: var(--metric-rebar-gripper-left);
  top: var(--metric-rebar-gripper-inset);
  bottom: var(--metric-rebar-gripper-inset);
  width: 3px;
  box-shadow: var(--edge-raised-inner);
}
.w2k-rebar__band[data-nogripper] { padding-left: 0; }
.w2k-rebar__title {
  flex: none;
  margin: var(--metric-rebar-text-top) var(--metric-rebar-title-gap) 0 0;
  white-space: pre;
}
.w2k-rebar__band > .w2k-menubar {
  /* IE's menu band is a toolbar of text buttons: 8px padding, text 4px down (Explorer); the buttons 18px from 2px down,
     as the toolbar's and the band's gripper — their hot frame as tall (user, 2026-10-11). */
  --metric-menubar-item-padding: 8px;
  --metric-menubar-item-top: 2px;
  --metric-menubar-item-height: 18px;
  --metric-menubar-text-top: 2px;
  height: var(--metric-rebar-band-height);
  background: transparent;
}
/* The child is clipped to its band, as a child window (knowledge: comctl32). */
.w2k-rebar__child { flex: 1 1 0; width: 0; min-width: 0; overflow: hidden; }
.w2k-rebar__band[data-fixed] > .w2k-rebar__child { flex: none; width: auto; }

/* Chevron (RBBS_USECHEVRON, js/components/rebar.js): at the band's right end while its toolbar does not fit; two
   5-row ">" glyphs as Internet Explorer's Links chevron (measured), raised when hot, sunken while its menu is open. */
.w2k-rebar__chevron {
  display: none;
  position: relative;
  flex: none;
  width: 13px;
  height: var(--metric-rebar-band-height);
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--sys-btn-text);
  outline: none;
}
.w2k-rebar__band[data-overflow] > .w2k-rebar__chevron { display: block; }
.w2k-rebar__chevron::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: var(--rebar-chevron-mask) no-repeat;
  mask: var(--rebar-chevron-mask) no-repeat;
}
.w2k-rebar__chevron:hover { box-shadow: var(--edge-raised-inner); }
.w2k-rebar__chevron[data-pressed] { box-shadow: var(--edge-sunken-outer); }
.w2k-rebar__chevron[data-pressed]::before { transform: translate(1px, 1px); }
.w2k-rebar {
  --rebar-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'%3E%3Cpath d='M1 5h2v1H1zM5 5h2v1H5zM2 6h2v1H2zM6 6h2v1H6zM3 7h2v1H3zM7 7h2v1H7zM2 8h2v1H2zM6 8h2v1H6zM1 9h2v1H1zM5 9h2v1H5z'/%3E%3C/svg%3E");
}

/* Flat toolbar (TBSTYLE_FLAT | TBSTYLE_LIST): buttons raise 1px when hot, sink when pressed or checked. */
.w2k-toolbar { display: flex; align-items: flex-start; height: var(--metric-toolbar-button-height); }
.w2k-toolbar__button {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex: none;
  box-sizing: border-box;
  height: var(--metric-toolbar-button-height);
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 1px var(--metric-toolbar-pad) 0;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: pre;
  outline: none;
  cursor: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.w2k-toolbar__button > img:not([width]) { width: var(--metric-toolbar-image); height: var(--metric-toolbar-image); }   /* an image sized by its attributes (a theme's icon: js/icons.js) keeps them */
.w2k-toolbar__button > .w2k-toolbar__text { padding: calc(var(--metric-rebar-text-top) - 1px - var(--toolbar-band-offset, 0px) - var(--toolbar-text-drop, 0px)) var(--metric-toolbar-text-after) 0 0; }
/* In a rebar band: buttons shorter than the band (a theme's --metric-toolbar-button-height) centred in it, their text
   kept where the band puts it (--toolbar-band-offset). */
.w2k-rebar__band { --toolbar-band-offset: round(down, (var(--metric-rebar-band-height) - var(--metric-toolbar-button-height)) / 2, 1px); }
.w2k-rebar__child > :is(.w2k-toolbar, .w2k-toolbar__button) { margin-top: var(--toolbar-band-offset); }
.w2k-toolbar__button > img + .w2k-toolbar__text { margin-left: var(--toolbar-image-gap, 0px); }   /* a theme's room between a smaller icon and its text */
/* A text-only button (Business Manager's toolbar): as tall as the band's gripper (2px off its top and bottom — the hot
   and pressed frame hugs the text; user, 2026-10-10), centred on the image buttons, the text where it was. */
.w2k-toolbar__button:not(:has(> img)) {
  --toolbar-text-drop: calc((var(--metric-toolbar-button-height) - var(--metric-rebar-band-height) + 4px) / 2);
  height: calc(var(--metric-rebar-band-height) - 4px);
  margin-top: var(--toolbar-text-drop);
}
.w2k-toolbar__button:not(:disabled):hover, .w2k-toolbar__button.is-hot { box-shadow: var(--edge-raised-inner); }
.w2k-toolbar__button:not(:disabled)[data-pressed], .w2k-toolbar__button.is-active, .w2k-toolbar__button[aria-pressed="true"] { box-shadow: var(--edge-sunken-outer); }
.w2k-toolbar__button:not(:disabled):is([data-pressed], .is-active) > * { transform: translate(1px, 1px); }
/* Checked (TBSTYLE_CHECK down): sunken with the ButtonFace/ButtonHilight checkerboard 1px inside the edge (measured on
   MMC's Show/Hide Console Tree; its phase follows the brush origin, so a toolbar may shift it — WordPad, MMC). */
.w2k-toolbar__button[aria-pressed="true"]:not(:hover):not([data-pressed])::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  background: var(--sys-btn-hilight);
  -webkit-mask: var(--pattern-dither-mask) var(--toolbar-dither-phase, 0 0) / var(--pattern-dither-size) repeat;
  mask: var(--pattern-dither-mask) var(--toolbar-dither-phase, 0 0) / var(--pattern-dither-size) repeat;
}
.w2k-toolbar__button { isolation: isolate; }
.w2k-toolbar__button:disabled { color: var(--sys-gray-text); text-shadow: 1px 1px 0 var(--color-disabled-emboss); }
.w2k-toolbar__button:disabled > img { filter: grayscale(1) opacity(0.5); }
/* Drop-down part (BTNS_DROPDOWN): its own hot/pressed frame and a 5×3 arrow. */
.w2k-toolbar__dropdown {
  position: relative;
  flex: none;
  width: var(--metric-toolbar-dropdown);
  height: var(--metric-toolbar-button-height);
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
}
.w2k-toolbar__dropdown::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 5px;
  height: 3px;
  background: var(--glyph-drop-arrow);
}
.w2k-toolbar__dropdown:disabled::before { color: var(--color-disabled-text); filter: drop-shadow(1px 1px 0 var(--color-disabled-emboss)); }
.w2k-toolbar__dropdown:not(:disabled):hover, .w2k-toolbar__dropdown.is-hot { box-shadow: var(--edge-raised-inner); }
.w2k-toolbar__dropdown:not(:disabled)[data-pressed] { box-shadow: var(--edge-sunken-outer); }
.w2k-toolbar__separator {
  flex: none;
  position: relative;
  width: var(--metric-toolbar-separator);
  height: var(--metric-toolbar-button-height);
}
.w2k-toolbar__separator::before {
  content: "";
  position: absolute;
  left: 3px;
  top: calc(2px - var(--toolbar-band-offset, 0px));      /* as tall as the band's gripper in a rebar */
  bottom: calc(2px - var(--toolbar-band-offset, 0px));
  width: 2px;
  background: var(--edge-etched-v);
}

/* Labels below the images (TBSTYLE_FLAT without TBSTYLE_LIST — Outlook Express, Address Book, Help, Phone Dialer):
   the application places each image and label (style left: measured positions — layout) and the toolbar sets their
   rows (--toolbar-image-top, --toolbar-text-top) and its drop-down parts' (--toolbar-dropdown-top). A button's hot /
   pressed frame spans its image and label, 3px round (toolbar.js measures them into --frame-*; knowledge — the
   references show no hot button). data-images="own": the disabled images are bitmaps of their own, not dimmed. */
.w2k-toolbar:where([data-labels="below"]) { display: block; position: relative; height: auto; }
:where(.w2k-toolbar[data-labels="below"]) > .w2k-toolbar__button { position: static; display: block; width: 0; height: 0; padding: 0; }
:where(.w2k-toolbar[data-labels="below"]) > .w2k-toolbar__button > * { position: absolute; }
:where(.w2k-toolbar[data-labels="below"]) > .w2k-toolbar__button > img { top: var(--toolbar-image-top); }
:where(.w2k-toolbar[data-labels="below"]) > .w2k-toolbar__button > img:not([width]) { width: auto; height: auto; }   /* each at its own size */
:where(.w2k-toolbar[data-labels="below"]) > .w2k-toolbar__button > .w2k-toolbar__text { top: var(--toolbar-text-top); padding: 0; }
:where(.w2k-toolbar[data-labels="below"]) > .w2k-toolbar__button::after {
  content: "";
  position: absolute;
  left: var(--frame-left, 0);
  top: var(--frame-top, 0);
  width: var(--frame-width, 0);
  height: var(--frame-height, 0);
  pointer-events: none;
}
:where(.w2k-toolbar[data-labels="below"]) > .w2k-toolbar__button:not(:disabled):is(:hover, .is-hot)::after { box-shadow: var(--edge-raised-inner); }
:where(.w2k-toolbar[data-labels="below"]) > .w2k-toolbar__button:not(:disabled):is([data-pressed], .is-active, [aria-pressed="true"])::after { box-shadow: var(--edge-sunken-outer); }
:where(.w2k-toolbar[data-labels="below"]) > .w2k-toolbar__dropdown { position: absolute; top: var(--toolbar-dropdown-top); }
.w2k-toolbar:where([data-images="own"]) > .w2k-toolbar__button:disabled > img { filter: none; }

/* Small images (data-size="small" — MMC's standard buttons): 23×22 round a 16×16 bitmap (comctl32: bitmap + 7), the
   image 3px in from the top left. */
:where(.w2k-toolbar[data-size="small"]) > .w2k-toolbar__button { padding: round(down, (var(--metric-toolbar-button-height) - 16px) / 2, 1px) 4px 0 3px; }
:where(.w2k-toolbar[data-size="small"]) > .w2k-toolbar__button > img:not([width]) { width: 16px; height: 16px; }

/* Raised buttons (data-style="raised" — a toolbar without TBSTYLE_FLAT: WordPad's MFC bars, HyperTerminal): 23×22
   buttons with the push-button edge at rest, sunk while pressed or checked, the image 3px in at its own size; the
   separators are blank. */
.w2k-toolbar[data-style="raised"] > .w2k-toolbar__button { width: 23px; height: 22px; padding: 0; background: var(--color-control-face); box-shadow: var(--edge-button); }
.w2k-toolbar[data-style="raised"] > .w2k-toolbar__button > img { position: absolute; left: 3px; top: 3px; }
.w2k-toolbar[data-style="raised"] > .w2k-toolbar__button > img:not([width]) { width: auto; height: auto; }
.w2k-toolbar[data-style="raised"] > .w2k-toolbar__button:is([data-pressed], .is-active, [aria-pressed="true"]) { box-shadow: var(--edge-task-pressed); }
.w2k-toolbar[data-style="raised"] > .w2k-toolbar__button:is([data-pressed], .is-active, [aria-pressed="true"]) > img { transform: translate(1px, 1px); }
.w2k-toolbar[data-style="raised"] > .w2k-toolbar__separator::before { display: none; }