/*
 * Side panes (TODO X-6g47, user 2026-10-10): one pattern for every pane with a title — Explorer's Folders, History and
 * Search bars, Business Manager's Navigator, Outlook Express's Folders and Contacts. Built by js/components/pane.js.
 *
 * The head is a one-band rebar (css/components/rebar.css): its size, colour, gripper and title position are the
 * window's Address band's. The close cross lies flat in the band, in a cell as wide as the scroll bar — centred over
 * the body's vertical scroll bar. The body
 * overlaps the band's 2px bottom edge (user, 2026-10-10): in a client edge, as the view beside it; a tree or list in it draws no edge of its own.
 */
.w2k-pane { box-sizing: border-box; display: flex; flex-direction: column; font: var(--font-ui); color: var(--sys-btn-text); }
.w2k-pane__head { margin-bottom: -2px; }   /* the body overlaps the band's etched bottom (user, 2026-10-10) */
.w2k-pane__head > .w2k-rebar__row { flex: 1; }
/* A button title (Outlook Express's Contacts drop-down) drawn as the text. */
button.w2k-pane__title { position: relative; height: auto; border: 0; padding: 0; background: none; font: inherit; color: inherit; text-align: left; }
.w2k-pane__close {
  position: absolute;
  right: var(--metric-pane-close-right);   /* win2k: over the body's vertical scroll bar */
  top: calc(2px + round(down, (var(--metric-rebar-band-height) - var(--metric-scrollbar-size)) / 2, 1px));   /* centred in the band */
  width: var(--metric-scrollbar-size);
  height: var(--metric-scrollbar-size);   /* a square: its hover and pressed edges stay round the cross (user) */
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
}
/* The cross: Outlook Express's 8×7 bitmap, centred (floor). */
.w2k-pane__close::before {
  content: "";
  position: absolute;
  left: round(down, (100% - 8px) / 2, 1px);
  top: round(down, (100% - 7px) / 2, 1px);
  width: 8px;
  height: 7px;
  background: url("../../assets/apps/oe-close.png");
}
.w2k-pane__body {
  position: relative;
  flex: 1;
  min-height: 0;
  box-shadow: var(--edge-sunken);
  background: var(--sys-window);
}
/* A tree (or list) filling the body inside its client edge. */
.w2k-pane__body > .w2k-tree { position: absolute; inset: var(--metric-client-edge); padding: 0; box-shadow: none; --metric-tree-inset: 2px; }   /* its items 2px off the edge (user, 2026-10-10) */

/* View title bar (AUDYT.md B5 — Outlook Express's bar over its folders, measured): the view's icon and name in
   ButtonHilight on ButtonShadow. <div class="w2k-viewbar"><img src="…" alt=""><span>Outlook Express</span></div>;
   a theme's tokens: --viewbar-icon-top, --viewbar-text-left, --viewbar-line-height. */
.w2k-viewbar { position: relative; height: 23px; background: var(--sys-btn-shadow); color: var(--sys-btn-hilight); }
.w2k-viewbar > img { position: absolute; left: 5px; top: var(--viewbar-icon-top, 3px); }
.w2k-viewbar > span { position: absolute; left: var(--viewbar-text-left, 25px); top: 2px; font-size: 18px; line-height: var(--viewbar-line-height, 21px); white-space: pre; }   /* its large raster font is missing — TODO R35 */

/* A body on the dialog face without a client edge (data-edge="none" — Explorer's Search bar, its form in its own). */
.w2k-pane__body:where([data-edge="none"]) { box-shadow: none; background: var(--color-surface); }