/* HyperTerminal demo app — measured on win2k-pro_window_hyperterminal.png (client origin (4, 23)). */
.ht { position: relative; flex: 1; }
.ht > * { position: absolute; }
.ht > .ht__menu { left: 0; top: -1px; right: 0; }
.ht > .ht__rule { left: 0; right: 0; top: 19px; }
/* The toolbar: classic raised buttons (rebar.css [data-style="raised"]), 23×22 from client y 23. */
.ht > .ht__toolbar { left: 0; top: 23px; }
/* The view: a client edge from y 47 down under the status bar (its bottom edge is hidden). */
.ht > .ht__view { left: 0; right: 0; top: 47px; bottom: 18px; --client-edge-padding: 0; }
.ht__view > * { position: absolute; }
/* The emulator's page: five nested 1px rings (hyperterm.js builds them; each ring's bottom and right lines own its
   corners, as DrawEdge), from outside in, two Window lines, ButtonFace, ButtonShadow, black (top and left) and black,
   ButtonShadow, two Window lines, ButtonShadow (bottom and right) around the Window text area. */
.ht__page {   /* allow: the terminal */
  left: 5px; top: 5px; right: 21px; bottom: 5px; box-sizing: border-box; padding: 5px 0 0 5px;
  background: var(--sys-window); color: var(--sys-window-text); outline: none; overflow: hidden;
  background: var(--ht-rings), var(--sys-window);
  font: var(--font-terminal);
  white-space: pre-wrap;
}
.ht__cursor { display: inline-block; width: 6px; height: 1px; vertical-align: baseline; background: currentColor; }   /* allow: the terminal's cursor */
.ht__view > .ht__scroll { right: 2px; top: 2px; bottom: 2px; }
.ht > .ht__status { left: 0; right: 0; bottom: 0; }
.ht__status > [data-off] { padding: 1px 0 0 3px; }
.ht__status > .w2k-statusbar__panel:last-of-type { min-width: 0; padding: 0; }   /* the 2px part under the grip */   /* MFC's indicator panes: text 1px further in and up */