/* The rules of the device pf-viewer (src/devices/pf-viewer.js). index.html loads this file after src/tokens.css, so at the same
   specificity a rule of this file wins over a rule of tokens.css. */
/* The viewer: a touch screen edge to edge in a thin frame of natural titanium with the continuous corners of a phone and a
   round outer edge, 2.4 units thick (5.8 mm at 2.4 mm to a unit), so the fingertips of the hand that holds it lie over its
   edges. The corners keep one band: the case 3.4 = 3.05 + .35 (the window, and the frame round it), the display body
   3.05 = 2.6 + .45 (the pixels, and the black border round them). */
pf-viewer { --color: #b9b4ab; --radius-device: 3.4; --corner-shape-device: continuous; --edge-shape: round; --edge-width: .2; --edge-depth: .3; --height: 2.4; }
pf-viewer[material] { --texture: grain; --texture-amount: .12; }   /* the grain of bead-blasted titanium */
pf-viewer .window { --gap: 0; --corner-shape-device: continuous; }
pf-viewer .display-body { --radius-device: 3.05; --corner-shape-device: continuous; }
pf-viewer .view { --radius: 2.6; --resolution: 480; --black-level: .01; --pixel-blend: 8; --glow-spill: calc(6 + 21 * var(--light-level)); }
/* 480 by 859 pixels: the rows follow the shape, and up to 8 device px to a pixel they blend into one clean picture, as the
   screen of a phone hides its pixels. At 320 the edge of a stroke stepped on the figure. Its light on the hand is 6 in a
   dark room and 27 in a lit room (--light-level 1), so the fingers keep a little of its color in daylight too. 10 and 45
   lit the desk too much. A reach of 6 units with 50 and 100 lit the fingers and left the desk dark, and looked fake. */
pf-viewer pf-key[side] { --color: #b9b4ab; --travel: .06; }