/*
 * Frames and separators (AUDYT.md A1, A2): the static edges a window's parts sit in — the client edge
 * (WS_EX_CLIENTEDGE), the static edge (WS_EX_STATICEDGE), the etched frame (EDGE_ETCHED) — and the etched line
 * (SS_ETCHEDHORZ / SS_ETCHEDVERT). Each draws through its theme role (--edge-*), so a theme restyles them all at once.
 *
 *   <div class="w2k-client-edge">…</div>                       a view: Window inside a 2px sunken edge, padded by it
 *   <div class="w2k-client-edge" data-face="surface">…</div>   on the dialog face (also workspace, desktop, none)
 *   <div class="w2k-static-edge">…</div>                       a 1px sunken edge (a static's SS_SUNKEN / STATICEDGE)
 *   <div class="w2k-etched">…</div>                            a 2px etched frame (a band, a group of keys)
 *   <div class="w2k-separator" role="separator"></div>          a 2px etched line; aria-orientation="vertical" stands it up,
 *                                                              data-static: an etched static's (shadow a pixel short)
 *
 * --client-edge-padding (default: the edge's width) is the room inside the edge; a box whose content is placed
 * absolutely or centred in the whole box sets it to 0.
 */
.w2k-client-edge {
  box-sizing: border-box;
  padding: var(--client-edge-padding, var(--metric-client-edge));
  box-shadow: var(--edge-sunken);
  background: var(--sys-window);
  color: var(--sys-window-text);
}
.w2k-client-edge:where([data-face="surface"]) { background: var(--color-surface); color: var(--sys-btn-text); }
.w2k-client-edge:where([data-face="workspace"]) { background: var(--sys-app-workspace); }
.w2k-client-edge:where([data-face="desktop"]) { background: var(--sys-background); }
.w2k-client-edge:where([data-face="none"]) { background: none; color: inherit; }

.w2k-static-edge { box-sizing: border-box; box-shadow: var(--edge-sunken-outer); }
/* The shadow lines owning the corners (data-corners="shadow" — Sound Recorder's boxes, measured). */
.w2k-static-edge:where([data-corners="shadow"]) { box-shadow: inset 1px 1px var(--sys-btn-shadow), inset -1px -1px var(--sys-btn-hilight); }
.w2k-etched { box-sizing: border-box; box-shadow: var(--edge-etched); }

.w2k-separator { flex: none; height: 2px; background: var(--edge-etched-h); }
.w2k-separator:where([aria-orientation="vertical"]) { width: 2px; height: auto; background: var(--edge-etched-v); }
/* An etched static (SS_ETCHEDHORZ / SS_ETCHEDVERT as an etched rectangle 2px across, measured on Power Options and
   Volume Control): the shadow line stops a pixel short, the highlight closes the end. */
.w2k-separator:where([data-static]) { background: linear-gradient(var(--sys-btn-shadow), var(--sys-btn-shadow)) 0 0 / calc(100% - 1px) 1px no-repeat, var(--sys-btn-hilight); }
.w2k-separator:where([data-static][aria-orientation="vertical"]) { background: linear-gradient(var(--sys-btn-shadow), var(--sys-btn-shadow)) 0 0 / 1px calc(100% - 1px) no-repeat, var(--sys-btn-hilight); }