/* Keyboard Properties demo applet — page coordinates (the page's origin is screen (9, 49) in the references). */
.kb { position: absolute; inset: 0; }
.kb > * { position: absolute; }
.kb > span { white-space: pre; }

/* Speed */
.kb__g-repeat { left: 15px; top: 13px; width: 356px; height: 237px; box-sizing: border-box; }
.kb__delay-icon { left: 36px; top: 41px; }
.kb__delay { left: 88px; top: 41px; }
.kb__long { left: 88px; top: 64px; }
.kb__short { left: 319px; top: 64px; }
.kb > .kb__delay-tb { left: 117px; top: 66px; width: 201px; }
.kb__rate-icon { left: 36px; top: 115px; }
.kb__rate { left: 88px; top: 116px; }
.kb__slow { left: 88px; top: 139px; }
.kb__fast { left: 319px; top: 139px; }
.kb > .kb__rate-tb { left: 117px; top: 141px; width: 201px; }
.kb__test-label { left: 36px; top: 189px; }
.kb > .kb__test { left: 36px; top: 205px; width: 314px; height: 23px; }
.kb__g-blink { left: 15px; top: 257px; width: 356px; height: 80px; box-sizing: border-box; }
.kb__caret { left: 48px; top: 295px; width: 2px; height: 13px; background: var(--sys-window-text); }   /* allow: the test area's caret (preview) */
.kb__slow2 { left: 88px; top: 288px; }
.kb__fast2 { left: 319px; top: 288px; }
.kb > .kb__blink-tb { left: 117px; top: 290px; width: 201px; }

/* Input Locales */
.kb__g-installed { left: 15px; top: 13px; width: 357px; height: 164px; box-sizing: border-box; }
.kb__h-lang { left: 25px; top: 30px; }
.kb__h-layout { left: 258px; top: 30px; }
.kb > :is(.kb__locales, .kb__hotkeys) { left: 25px; width: 336px; box-sizing: border-box; --metric-list-row-height-icon: 20px; --metric-list-row-height: 20px; }
.kb > .kb__locales { top: 46px; height: 64px; }
.kb > .kb__hotkeys { top: 265px; height: 44px; }
.kb > .kb__locales.w2k-listview[data-fullrow] { --lv-select-left: 0px; --metric-list-label-left: 6px; }
.kb__locales .w2k-listview__label { padding-left: 2px; }
.kb__hotkeys .w2k-listview__label { padding-left: 0; }
.kb > :is(.kb__locales, .kb__hotkeys) .w2k-listview__cell[data-align="right"] { padding-right: 2px; }
/* 20px rows: the text 1px lower than the component's 17px-row placement (measured). */
.kb > :is(.kb__locales, .kb__hotkeys) :is(.w2k-listview__label, .w2k-listview__cell:not(.w2k-listview__cell--label)) { padding-top: calc(var(--metric-list-cell-top-icon) + 1px); }
/* The focused row's ring (base.css, data-focus="xor"): the whole row, its dots where x + y is odd on the screen
   (measured). */
.kb > .kb__locales { --focus-ring-x: 1px; }
.kb > .kb__locales.w2k-listview[data-fullrow]:is(:focus, .is-focus) .w2k-listview__item[data-caret]::before,
.kb > .kb__locales.w2k-listview[data-fullrow]:is(:focus, .is-focus) .w2k-listview__item[data-caret]::after { inset: 0; width: auto; }
/* The hot-key list shows its selection in Hilight across the row even without the focus (measured). */
.kb > .kb__hotkeys .w2k-listview__item[aria-selected="true"] { background: var(--sys-hilight); color: var(--sys-hilight-text); }   /* allow: the hot-key list shows its selection unfocused (measured quirk) */
.kb > .kb__hotkeys.w2k-listview .w2k-listview__item[aria-selected="true"] .w2k-listview__label { background: none; color: inherit; }   /* allow: the hot-key list shows its selection unfocused (measured quirk) */
.kb > .kb__add { left: 25px; top: 116px; width: 104px; }
.kb > .kb__remove { left: 142px; top: 116px; width: 104px; }
.kb > .kb__props { left: 258px; top: 116px; width: 104px; }
.kb > .kb__default { left: 258px; top: 145px; width: 104px; }
.kb__g-caps { left: 15px; top: 184px; width: 357px; height: 42px; box-sizing: border-box; }
.kb__caps { left: 26px; top: 201px; }
.kb__shift { left: 191px; top: 201px; }
.kb > .w2k-radio > .w2k-check__text { position: relative; top: 1px; }   /* centred apart from the circle (see Mouse) */
.kb__g-hotkeys { left: 15px; top: 231px; width: 357px; height: 122px; box-sizing: border-box; }
.kb__h-item { left: 25px; top: 249px; }
.kb__h-keys { left: 291px; top: 249px; }
.kb > .kb__change { left: 232px; top: 324px; width: 129px; }
.kb__indicator { left: 15px; top: 362px; }
.kb__indicator > .w2k-check__text { position: relative; top: -1px; }