/* Calculator demo app — measured on win2k-pro_window_calculator.png (client origin (3, 22) under the dialog frame). */
.calc { position: relative; flex: 1; }   /* the client in the template's MS Shell Dlg: wm.create({ font: 'dialog' }) */
.calc > * { position: absolute; }
.calc > .calc__menu { left: 0; top: -1px; right: 0; }
.calc > input.calc__display.w2k-edit { left: 8px; top: 19px; width: 239px; height: 26px; text-align: right; background: var(--sys-window); padding-right: 5px; }   /* the text ends 4px inside the edge (measured) */   /* allow: the read-only display stays white (measured) */
.calc > .calc__memory { left: 12px; top: 58px; width: 27px; height: 26px; --client-edge-padding: 0; text-align: center; line-height: 26px; }
.calc > .calc__key { width: 36px; height: 29px; min-width: 0; padding: 0; --metric-button-label-top: 8px; }   /* captions centred in 29px (measured) */
/* The keys are drawn with EDGE_RAISED (data-edge="raised" — button.css; measured): 3D Light outside, invisible on
   ButtonFace — a standard push button has the colours the other way round on the top-left. */
.calc > .calc__key[data-color="red"] { color: var(--color-calc-red); }   /* allow: the keys' semantic colours */
.calc > .calc__key[data-color="blue"] { color: var(--color-calc-blue); }   /* allow: the keys' semantic colours */
.calc > .calc__backspace { left: 54px; top: 56px; width: 63px; }
.calc > .calc__ce { left: 120px; top: 56px; width: 62px; }
.calc > .calc__c { left: 185px; top: 56px; width: 62px; }
.calc > .calc__pad { left: calc(15px + var(--col) * 39px); }
.calc > .calc__pad[style*="--col: 0"] { left: 8px; }
.calc > .calc__pad[style*="--row: 0"] { top: 92px; }
.calc > .calc__pad[style*="--row: 1"] { top: 125px; }
.calc > .calc__pad[style*="--row: 2"] { top: 157px; }
.calc > .calc__pad[style*="--row: 3"] { top: 190px; }

/* The Scientific view (knowledge — no reference): 475×313; three etched groups (radix, angle or word size, Inv / Hyp),
   the parentheses and memory indicators, Backspace / CE / C, then five rows of eleven keys (columns 8, 56–134, 182,
   230–425; rows 120–251). */
.calc.calc--sci > input.calc__display.w2k-edit { width: 453px; }
.calc.calc--sci > .calc__memory { left: 186px; top: 86px; }
.calc.calc--sci > .calc__backspace { left: 266px; top: 86px; }
.calc.calc--sci > .calc__ce { left: 332px; top: 86px; }
.calc.calc--sci > .calc__c { left: 397px; top: 86px; }
.calc > .calc__key[data-color="purple"] { color: var(--color-calc-purple); }   /* allow: the keys' semantic colours */
.calc > .calc__key:disabled { color: var(--sys-gray-text); }   /* allow: disabled keys flat GrayText (measured) */
.calc > .calc__g-radix { left: 8px; top: 50px; width: 218px; height: 30px; }
.calc > .calc__g-angle { left: 232px; top: 50px; width: 229px; height: 30px; }
.calc > .calc__g-inv { left: 8px; top: 84px; width: 87px; height: 30px; }
.calc > .calc__opt { top: 58px; }
.calc > .calc__opt--inv { top: 92px; }
.calc[data-radix="dec"] > .calc__word, .calc:not([data-radix="dec"]) > .calc__angle { display: none; }
.calc > .calc__paren { left: 140px; top: 86px; width: 36px; height: 26px; --client-edge-padding: 0; text-align: center; line-height: 26px; }
/* The Statistics Box (knowledge). */
.calc-stats { position: relative; flex: 1; }
.calc-stats > * { position: absolute; }
.calc-stats__list { left: 8px; top: 8px; width: 150px; height: 120px; }
.calc-stats > .w2k-button { left: 166px; width: 70px; }
.calc-stats__ret { top: 8px; }
.calc-stats__load { top: 36px; }
.calc-stats__cd { top: 64px; }
.calc-stats__cad { top: 92px; }
.calc-stats__n { left: 8px; top: 136px; }