/* Windows Task Manager demo app — measured on win2k-pro_window_task-manager_*.png. Body coordinates: the client below
   the caption (frame 4px); page coordinates: the tab control's origin (screen 9, 47). */
.tm { position: relative; flex: 1; }
.tm > .tm__menu, .tm > .tm__tabs, .tm > .tm__status { position: absolute; }
.tm__menu { left: 0; top: -1px; right: 0; }   /* the menu bar starts right under the caption (screen y 22) */
/* Task Manager's dialog draws an etched line under the menu bar (measured: ButtonShadow over ButtonHilight). */
.tm > .tm__rule { position: absolute; left: 0; right: 0; top: 19px; }
/* Sizing the window stretches the tab control and the lists; the buttons keep to the bottom right (knowledge). */
.tm__tabs { left: 5px; top: 24px; right: 5px; bottom: 25px; }
.tm .tm__page { position: static; flex: 1; }   /* children are placed in the tab control's coordinates */
.tm .tm__page > * { position: absolute; }
.tm__apps, .tm__procs { left: 18px; top: 37px; right: 16px; bottom: 45px; box-sizing: border-box; }
.tm__end-task, .tm__switch, .tm__new-task { bottom: 16px; width: 80px; }
.tm__end-task { right: 184px; }
.tm__switch { right: 100px; }
.tm__new-task { right: 16px; }
.tm__end-process { right: 16px; bottom: 16px; width: 99px; }
.tm__status { left: 0; right: 0; bottom: 0; }

/* Performance page (tab-control coordinates, measured). Groups: etched frames 6px below their caption line. */
.tm__group { box-sizing: border-box; }
.tm__g-cpu { left: 16px; top: 30px; width: 90px; height: 90px; }
.tm__g-cpuh { left: 121px; top: 30px; width: 249px; height: 90px; }
.tm__g-mem { left: 16px; top: 124px; width: 90px; height: 90px; }
.tm__g-memh { left: 121px; top: 124px; width: 249px; height: 90px; }
.tm__g-totals, .tm__g-commit { left: 16px; width: 170px; height: 63px; }
.tm__g-phys, .tm__g-kernel { left: 199px; width: 171px; height: 63px; }
.tm__g-totals, .tm__g-phys { top: 221px; }
.tm__g-commit, .tm__g-kernel { top: 292px; }
/* Meters and graphs: a sunken edge around the black canvas. */
.tm__graph > canvas { display: block; }
.tm__cpu-meter { left: 24px; }
.tm__mem-meter { left: 25px; }   /* 1px right of the CPU meter (measured) */
.tm__cpu-history, .tm__mem-history { left: 129px; }
.tm__cpu-meter, .tm__cpu-history { top: 50px; }
.tm__mem-meter, .tm__mem-history { top: 144px; }
/* Figures: labels at x 25 / 208, values right-aligned to 175 / 359, rows 15px apart. */
.tm__fig-label, .tm__fig-value { white-space: pre; }
.tm__g-totals-label, .tm__g-commit-label { left: 25px; }
.tm__g-phys-label, .tm__g-kernel-label { left: 208px; }
.tm__fig-value { text-align: right; width: 100px; }
.tm__g-totals-value, .tm__g-commit-value { left: 75px; }
.tm__g-phys-value, .tm__g-kernel-value { left: 259px; }
:is(.tm__g-totals-label, .tm__g-totals-value, .tm__g-phys-label, .tm__g-phys-value).tm__row0 { top: 237px; }
:is(.tm__g-totals-label, .tm__g-totals-value, .tm__g-phys-label, .tm__g-phys-value).tm__row1 { top: 252px; }
:is(.tm__g-totals-label, .tm__g-totals-value, .tm__g-phys-label, .tm__g-phys-value).tm__row2 { top: 266px; }   /* 15 then 14px (measured) */
:is(.tm__g-commit-label, .tm__g-commit-value, .tm__g-kernel-label, .tm__g-kernel-value).tm__row0 { top: 308px; }
:is(.tm__g-commit-label, .tm__g-commit-value, .tm__g-kernel-label, .tm__g-kernel-value).tm__row1 { top: 323px; }
:is(.tm__g-commit-label, .tm__g-commit-value, .tm__g-kernel-label, .tm__g-kernel-value).tm__row2 { top: 338px; }