/* WordPad demo app — measured on win2k-pro_window_wordpad.png (client origin (4, 23) under the sizable frame's
   caption; the menu bar starts right under the caption). */
.wp {
  --wp-ruler-face: var(--color-surface);
  --wp-ruler-shadow: var(--sys-btn-shadow);
  --wp-ruler-dark: var(--color-wordpad-ruler-ink);
  --wp-ruler-strip: var(--sys-window);
  position: relative;
  flex: 1;   /* the client in MFC's DEFAULT_GUI_FONT, MS Sans Serif (combos, status bar): wm.create({ font: 'dialog' }) */
}
.wp > * { position: absolute; }
.wp > .wp__menu { left: 0; top: -1px; right: 0; }
/* Control bars: an etched line above each (the first runs the full width, under the menu bar) and one at its right
   end; the Format bar's top line spans that bar only. */
.wp > .wp__rule { left: 0; right: 0; }
.wp > .wp__rule--menu { top: 19px; }
.wp > .wp__rule--ruler { top: 79px; }
.wp__bar { left: 0; height: 28px; }
.wp__bar > .wp__bar-end { position: absolute; top: 0; right: 0; bottom: 0; }
.wp__bar > .wp__bar-top { position: absolute; left: 0; right: 0; top: 0; }
.wp__bar--standard { top: 21px; width: 299px; }
.wp__bar--format { top: 49px; width: 568px; height: 30px; }
.wp__bar--format > .wp__bar-end { top: 2px; }
.wp__bar > * { position: absolute; }
/* Classic (non-flat) toolbars: rebar.css [data-style="raised"]. */
.wp .wp__toolbar { height: 22px; }
.wp__bar--standard > .wp__toolbar { left: 6px; top: 3px; }
.wp__bar--format > .wp__format { left: 360px; top: 5px; }
.wp__bar--format > .w2k-combo { top: 5px; }
.wp__bar--format > .wp__font { left: 6px; width: 160px; }
.wp__bar--format > .wp__size { left: 174px; width: 50px; }
.wp__bar--format > .wp__script { left: 232px; width: 120px; }
/* Ruler (drawn by wordpad.js): the white strip from the text's left edge, numbers at whole inches. */
.wp > .wp__ruler { left: 0; right: 0; top: 81px; height: 25px; overflow: hidden; }
.wp__ruler > canvas { position: absolute; left: 0; top: 0; }
.wp__ruler-numbers > span { position: absolute; top: 4px; transform: translateX(-50%); font: var(--font-dialog); color: var(--wp-ruler-dark); }   /* allow: the ruler (a one-off, measured) */
.wp__ruler-left { position: absolute; left: 12px; top: 1px; }
.wp__ruler-right { position: absolute; right: 0; top: 12px; }
/* The text area: a client edge; Arial 10 pt, the text 14px in (at the ruler's zero) and 4px down. */
.wp > .wp__edit { left: 0; right: 0; top: 106px; bottom: 18px; }
/* Its top-right corner shows ButtonFace — two pixels of the top edge and one of the right edge (measured). */
.wp > .wp__edit::after { content: ""; position: absolute; right: 0; top: 0; width: 2px; height: 1px; background: var(--color-surface); box-shadow: 1px 1px var(--color-surface); }   /* allow: a measured corner pixel */
.wp__text {   /* allow: the document */
  box-sizing: border-box;
  height: 100%;
  padding: 4px 4px 0 14px;
  overflow: auto;
  background: var(--sys-window);
  color: var(--sys-window-text);
  font: var(--font-wordpad);
  outline: none;
  white-space: pre-wrap;
  caret-color: var(--sys-window-text);
}
.wp > .wp__status { left: 0; right: 0; bottom: 0; }
.wp__status > .w2k-statusbar__panel { flex: none; }
.wp__status > .wp__status-help { flex: 1; }
.wp__status > .wp__status-a { width: 26px; }
.wp__status > .wp__status-b { width: 28px; margin-right: 18px; }
/* With MS Sans Serif the drop-down list's text sits 1px higher and 1px further left than the Tahoma metrics place it
   (measured). */
.wp__script > .w2k-combo__field > span { left: 0; top: 0; }