/* Help (HTML Help viewer) demo app — measured on win2k-pro_window_help_contents.png (client origin (4, 23)). */
.hh { position: relative; flex: 1; }
.hh > * { position: absolute; }
/* The toolbar right under the caption, an etched line under it (client y 40). */
.hh > .hh__toolbar { left: 0; right: 0; top: 0; height: 42px; --toolbar-image-top: 3px; --toolbar-text-top: 24px; }
.hh > .hh__rule { left: 0; right: 0; top: 40px; }
/* The navigation pane: a tab control 246 wide (--hh-nav-width: the splitter's, dragged and remembered — TODO X-eqrc);
   the Contents tree in a client edge inside its page. */
.hh { --hh-nav-width: 246px; }
.hh > .hh__nav { left: 0; top: 48px; width: var(--hh-nav-width); bottom: 0; }   /* the panes take the height the window gains */
.hh__tree { position: absolute; left: 9px; top: 7px; right: 9px; bottom: 9px; }
/* The splitter between the panes (TODO X-eqrc: 2px, --metric-splitter-size — Windows: an etched frame round the topic,
   8px between the tab control and the page); the topic's page right after it. */
.hh > .hh__split { position: absolute; left: var(--hh-nav-width); top: 48px; bottom: 0; }
.hh > .hh__topic { left: calc(var(--hh-nav-width) + var(--metric-splitter-size)); top: 40px; right: 0; bottom: 0; }
.hh__page { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }   /* the browser's client edge, over the frame's top and right */
.hh__page > .hh__page-scroll { position: absolute; right: 2px; top: 2px; bottom: 2px; }
.hh[data-hidden-nav] > :is(.hh__nav, .hh__split) { display: none; }
.hh[data-hidden-nav] > .hh__topic { left: 0; }
/* The Index, Search and Favorites pages (knowledge): a label over a full-width edit, the list, the buttons at the right.
   The lists take the height the window gains; what is under them keeps to the bottom (positions from the 355px page);
   the full-width parts and the right-hand buttons follow the pane's width. */
.hh__nav .w2k-tabpanel > * { position: absolute; }
.hh__label { left: 9px; white-space: pre; }
.hh__nav .hh__wide { left: 9px; right: 9px; width: auto; }
.hh__index-list { top: 50px; bottom: 39px; }
.hh__nav .hh__display { right: 9px; top: calc(100% - 33px); width: 75px; }
.hh__list-topics { left: 9px; top: 53px; width: 75px; }
.hh__search-list { top: 100px; bottom: 65px; }
.hh__opt { left: 9px; }
.hh__fav-list { top: 23px; bottom: 98px; }
.hh__remove { left: 9px; top: calc(100% - 92px); width: 75px; }
.hh__current { left: 9px; top: calc(100% - 42px); right: calc(9px + 75px + 6px); width: auto; }
.hh__add { right: 9px; top: calc(100% - 42px); width: 75px; }
/* A topic: the title in bold over its text (knowledge — the topic pages' HTML is not reproduced). */
.hh__article { position: absolute; left: 12px; top: 10px; right: 30px; margin: 0; color: var(--sys-window-text); font: var(--font-ui); }   /* allow: the topic (document content) */
.hh__article > h1 { margin: 0 0 8px; font: var(--font-ui-bold); }   /* allow: the topic (document content) */
.hh__article > p { margin: 0; }