/* Outlook Express demo app — measured on win2k-pro_window_outlook-express.png (client origin (4, 23)). */
.oe { position: relative; flex: 1; }
.oe > * { position: absolute; }
.oe > .oe__rebar { left: 0; right: 0; top: 0; }
.oe__throbber { display: block; width: 22px; height: 22px; }
.oe__rebar > .oe__tb-row, .oe__tb-row > .w2k-rebar__band { height: 40px; }   /* the toolbar row: 40px (measured) */
/* The toolbar's buttons over the second band: images over text, drop-down arrows apart, etched separators. */
.oe > .oe__toolbar { left: 0; top: 0; right: 0; height: 66px; pointer-events: none; --toolbar-image-top: 29px; --toolbar-text-top: 50px; --toolbar-dropdown-top: 35px; }
.oe__toolbar > * { pointer-events: auto; }
.oe__toolbar > .oe__sep { position: absolute; top: 28px; height: 36px; }
/* The Outlook bar: the folder's icon and name on ButtonShadow (its large raster font is missing — TODO R35). */
.oe > .oe__bar { left: 0; right: 2px; top: 71px; }
/* The Folders and Contacts panes: side panes with their own title bar (css/components/pane.css — the pattern every
   side pane follows, TODO X-6g47). Two splitters (--metric-splitter-size, draggable, remembered — user, 2026-10-10,
   TODO X-eqrc): one beside the panes (their width, --oe-pane-width), one between them (the Contacts pane's height,
   --oe-contacts-height — kept 40px clear of the Folders pane's title in a short window). */
.oe { --oe-pane-width: 197px; --oe-contacts-height: 87px; --oe-ch: min(var(--oe-contacts-height), 100% - 98px - 20px - var(--metric-splitter-size) - 66px); }
.oe > :is(.oe__folders, .oe__contacts, .oe__hsplit) { left: 0; width: var(--oe-pane-width); }
.oe > .oe__split { position: absolute; left: var(--oe-pane-width); top: 98px; bottom: 20px; }
/* Sizing the window: the Folders pane takes the height, the Contacts pane keeps to the bottom and the message page
   takes the rest (knowledge). */
.oe > .oe__folders { top: 98px; bottom: calc(20px + var(--oe-ch) + var(--metric-splitter-size)); }
.oe > .oe__hsplit { position: absolute; bottom: calc(20px + var(--oe-ch)); }
.oe > .oe__contacts { bottom: 20px; height: var(--oe-ch); overflow: hidden; }
/* A closed pane gives its room to the other; with both closed the page takes the width. */
.oe[data-nofolders] > .oe__folders, .oe[data-nocontacts] > .oe__contacts, .oe:is([data-nofolders], [data-nocontacts]) > .oe__hsplit { display: none; }
.oe[data-nocontacts] > .oe__folders { bottom: 20px; }
.oe[data-nofolders] > .oe__contacts { top: 98px; height: auto; }
.oe[data-nofolders][data-nocontacts] > .oe__page { left: 0; }
.oe[data-nofolders][data-nocontacts] > .oe__split { display: none; }
.oe__contacts-menu > img { position: absolute; left: 49px; top: 4px; }
.oe__tree { --metric-tree-row-height: 18px; --metric-tree-joint-y: 10px; --metric-tree-text-top: 2px; }   /* content 1px below the middle (measured) */
.oe__tree .w2k-tree__icon { top: 1px; }   /* the 16px icons centred in 18px rows */
.oe__unread { margin-left: 1px; color: var(--color-unread-count); }   /* 1px further than the bold space (measured) */   /* allow: the unread count's colour */
.oe__tree b { font-weight: 700; }   /* allow: unread folders in bold (content) */
.oe__empty { left: 0; top: 13px; }
.oe__empty > span { position: absolute; left: 7px; white-space: pre; }
.oe__empty > span + span { top: 13px; left: 8px; }
/* The start page in the browser's client edge, its scroll bar at the right. */
.oe > .oe__page { left: calc(var(--oe-pane-width) + var(--metric-splitter-size)); top: 98px; right: 0; bottom: 20px; --client-edge-padding: 0; }
.oe__page > .oe__page-scroll { position: absolute; right: 2px; top: 2px; bottom: 2px; }
/* The status bar: an empty part, Working Online, No new messages; the grip. */
.oe > .oe__status { left: 0; right: 0; bottom: 0; }
.oe__status > .w2k-statusbar__panel:first-child { flex: 1; min-width: 0; }   /* 291px at the default size */
.oe__status > .oe__status-online { flex: none; width: 126px; white-space: pre; }
.oe__status > .oe__status-mail { flex: none; width: 171px; }
.oe__status > .oe__status-mail { white-space: pre; }
.oe .oe__status-online > img { left: calc(var(--metric-statusbar-text-left) - 1px); }   /* this icon 1px further left (measured) */
.oe .oe__status-online > img + span { margin-left: 20px; }   /* 2px further than a panel icon's usual 18, as Explorer's zone (measured) */
.oe .oe__status-mail > img + span { margin-left: 20px; }