/* Explorer demo app — measured on win2k-pro_window_my-computer.png; client origin (4, 23). */
.ex { position: relative; flex: 1; }
.ex > .ex__rebar, .ex > .ex__view, .ex > .ex__status { position: absolute; left: 0; right: 0; }
.ex > .ex__rebar { top: 1px; }   /* 2px under the caption and 2px over the view (Win2k: 1px and 3px; TODO.md) */
.ex__throbber { display: block; width: 38px; height: 22px; }
.ex__address-child { display: flex; gap: 1px; }   /* combo 495, Go from 497 (measured) */
.ex__address { flex: 1; margin-right: 1px; }
.ex__go { flex: none; margin-right: 2px; }   /* the hot frame is 2px from the band's right edge, as it is from its top and bottom */
.ex__go > img, .ex__go > .w2k-toolbar__text { position: relative; left: 1px; }   /* the Go button's contents sit 1px right (measured) */
/* The view: a client edge around the Web view pane and the list. */
.ex > .ex__view { top: 77px; bottom: 20px; display: flex; }
/* The Web view pane (css/components/webview.css) beside the list, or across the top of the view (Search Results). */
.ex:has(.w2k-webview__banner[data-icon-theme]) { --webview-shift: var(--webview-art-shift, 0px); }   /* the band above the list grows with it */
.ex__list { flex: 1; min-width: 0; }
.ex > .ex__status { bottom: 0; }
.ex > .ex__status > .ex__status-count { flex: 1; }   /* the count takes what the size and zone parts leave */
.ex__status-gap { width: 76px; }   /* the size part (empty except in the Recycle Bin — measured) */
.ex > .ex__status > .ex__status-zone { flex: none; width: 153px; white-space: pre; }
.ex .ex__status-zone > img + span { margin-left: 20px; }   /* the zone's text 2px further than a panel icon's usual 18 (measured) */
/* The Address combo is an editable ComboBoxEx: its icon 3px in, the text 23px in and 1px lower (measured). */
.ex :is(.ex__address, .ex__sb-look) > .w2k-combo__field > .w2k-combo__icon { left: 0; }
.ex :is(.ex__address, .ex__sb-look) > .w2k-combo__field > span { left: 20px; margin-top: 1px; }   /* Look in draws the same way */
/* A one-part status bar (Control Panel): the count fills it. */
.ex__status[data-parts="1"] > .ex__status-count { width: auto; flex: 1; }
.ex__status[data-parts="1"] > :is(.ex__status-gap, .ex__status-zone) { display: none; }

/* The Explorer bars — Search (Search Results), Folders and History (knowledge) — on the left, 251 wide, the view to
   their right: side panes with their own title bar (css/components/pane.css, TODO X-6g47). */
.ex__bar, .ex__fbar { display: none; }
/* The bar's width is the splitter's (--ex-bar-width, dragged and remembered — user, 2026-10-10); the view follows. */
.ex { --ex-bar-width: 251px; }
/* The bar never takes the view below --ex-view-min (the splitter stops there too, and so does a narrower window). */
.ex { --ex-view-min: 100px; --ex-bar: max(0px, min(var(--ex-bar-width), 100% - var(--metric-splitter-size) - var(--ex-view-min))); }
/* Beside a Web view pane that keeps its width (a theme's --webview-min-width), the view keeps the pane and 100px. */
.ex:not([data-layout="top"], [data-browser]) { --ex-view-min: calc(100px + var(--webview-min-width, 0px)); }
.ex[data-bar="search"] > .ex__bar, .ex[data-bar="folders"] > .ex__fbar:not(.ex__hbar), .ex[data-bar="history"] > .ex__hbar { display: flex; position: absolute; left: 0; top: 77px; width: var(--ex-bar); bottom: 20px; }
.ex > .ex__split { display: none; }
.ex:is([data-bar="search"], [data-bar="folders"], [data-bar="history"]) > .ex__split { display: block; position: absolute; left: var(--ex-bar); top: 77px; bottom: 20px; }
.ex:is([data-bar="search"], [data-bar="folders"], [data-bar="history"]) > .ex__view { left: calc(var(--ex-bar) + var(--metric-splitter-size)); }   /* the bar, the splitter */
/* The Search bar's body: its New / Search for files tools on the surface over the form, the form in a client edge. */
.ex__bar > .w2k-pane__body > * { position: absolute; }
.ex__bar > .w2k-pane__body > .ex__sb-tools { left: 0; top: 0; right: 0; }   /* New and Search for files, placed as measured */
.ex__sb-tools > * { position: absolute; }
.ex__sb-tools > .w2k-toolbar__button { top: 0; padding: 0; }
.ex__sb-tools > .w2k-toolbar__button > img { position: absolute; left: 0; top: 0; }
.ex__sb-tools > .ex__sb-new { left: 6px; width: 50px; }
.ex__sb-new > .w2k-toolbar__text { position: absolute; left: 21px; top: 3px; padding: 0; }
.ex__sb-tools > .ex__sb-files { left: 67px; width: 20px; }
.ex__sb-tools > .ex__sb-sep { left: 59px; top: 1px; height: 18px; }
/* The form: Window background under a ButtonShadow line. */
.ex__sb-form { left: 0; top: 24px; right: 0; bottom: 0; --client-edge-padding: 0; }
.ex__sb-form > * { position: absolute; white-space: pre; }
.ex__sb-icon { left: 11px; top: 5px; }
.ex__sb-heading { left: 37px; top: 6px; letter-spacing: 1px; text-shadow: 1px 0 0 currentColor; }   /* GDI's synthesized bold: overstruck 1px right, advances +1 */   /* allow: GDI's synthesized bold heading (measured) */
.ex__sb-underline { left: 12px; top: 26px; width: 225px; height: 2px; background: var(--color-surface); }   /* allow: the Search form's drawing (measured) */
.ex__sb-label { left: 12px; margin-top: 1px; }
.ex__sb-form > .ex__sb-edit { left: 12px; width: 225px; }
.ex__sb-form > .ex__sb-look { left: 12px; top: 154px; width: 225px; }
.ex__sb-form > .ex__sb-go { left: 12px; top: 190px; }
.ex__sb-form > .ex__sb-stop { left: 105px; top: 190px; }
.ex__sb-line { left: 12px; width: 225px; height: 1px; background: var(--color-surface); }   /* allow: the Search form's drawing (measured) */
.ex__sb-link { white-space: pre; left: 12px; margin-top: 1px; }
/* The Web view across the top (Search Results' template): banner, title and rule over the list. */
.ex[data-layout="top"] > .ex__view { flex-direction: column; }
.ex__empty { left: 6px; top: calc(151px + var(--webview-shift, 0px)); }
.ex__list .w2k-header__item:not([data-align="right"]) { padding-right: 9px; }   /* the header text ends in "..." 3px earlier than a list cell's (Search Results: "Releva...") */

/* Internet Explorer (about:blank): the Links band, the page with its scroll bar, a four-part status bar. */
.ex__links-band { width: 48px; }
.ex__page { display: none; }
.ex[data-browser] .ex__page { display: block; position: absolute; inset: 2px; background: var(--sys-window); }   /* allow: the browser's page */
.ex[data-browser] :is(.ex__webview, .ex__list, .ex__empty) { display: none; }
.ex__page > .ex__page-scroll { position: absolute; right: 0; top: 0; bottom: 0; }
.ex__page > .ex__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--sys-window); }   /* allow: the browser's page */
.ex__page[data-live] > .ex__page-scroll { display: none; }   /* the site's frame scrolls itself */
/* An inactive window's frame lets the click through to the window, so it activates (a frame's clicks never reach it). */
.w2k-window:not([data-active]) .ex__frame { pointer-events: none; }
.ex__status-gap2 { display: none; }
.ex__status[data-parts="4"] > .ex__status-gap { width: 22px; }
.ex__status[data-parts="4"] > .ex__status-gap2 { display: block; width: 22px; }
.ex__status[data-parts="4"] > .ex__status-zone { width: 151px; }
.ex .ex__status-count > img + span { margin-left: 20px; }   /* Done's text 2px further than a panel icon's usual 18, as the zone's (measured) */
/* Drag and drop (knowledge): the dragged icons under the pointer, the drop target drawn selected, the unavailable
   cursor where nothing can be dropped. */
.ex__drag { position: absolute; z-index: 1000; display: flex; gap: 2px; pointer-events: none;   /* allow: the drag image (knowledge) */
  -webkit-mask: var(--pattern-dither-mask) 0 0 / var(--pattern-dither-size) repeat; mask: var(--pattern-dither-mask) 0 0 / var(--pattern-dither-size) repeat; }   /* drawn through a 50% checkerboard, as the drag image of the original (knowledge) */
.ex__drag > img { width: 32px; height: 32px; }
html[data-nodrop], html[data-nodrop] * { cursor: var(--cursor-unavailable, no-drop) !important; }