/* The rules of the device pf-camera (src/devices/pf-camera.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 camera (pf-camera.js), after a reference picture: bead-blasted silver aluminum, black glass, and a polished collar round
   the dial, its hub and each key. The corners keep one band: the plate of the screen .54 = .9 − .36 (the corner of the case
   less the inset of the plate), the OLED cut 1.35 = 1.28 + .07; the glass keeps the .225 of the photo. */
pf-camera { --color: #cdced0; --radius-device: .9; --keybed: #19191a; }
pf-camera[material], pf-camera .bezel { --texture: grain; --texture-amount: .2; }   /* the grain of bead-blasted metal */
pf-camera .bezel { --color: #cdced0; --radius-device: .54; --height: .02; --hairline: .5; }   /* the plate of the screen, flush, with a seam */
pf-camera .window { --gap: 0; }
pf-camera .glass { --color: #0b0b0c; --radius-device: .225; --grid-margin: .515; }   /* one band of black flush glass round the live view */
pf-camera .view { --color: #0b0b0c; --radius: 0; --resolution: 320; }   /* the rows follow the shape of the view */
pf-camera .oled { --gap: .07; --edge-width: .07; }
pf-camera .screen[variant] { --color: #050506; --ink: #dcdcdc; --radius: 1.28; --resolution: 128 52; --subpixels: smooth; --black-level: .005; --sink: .35; }   /* the OLED: pixels too fine to see, so its text stays smooth at each zoom, as on pf-lcd; the ink of pf-lcd (#f7f7f7 at .86), the glass as pf-lcd showed it (its dot grid made #050506 1 of 255), and the rim of the window shading it */
pf-camera .screen[material] { --spec: .25; }   /* black glass with little glare */
pf-camera .ring { --bevel: .22 -.45 .9 30; }   /* the polished collar of the hole of the dial */
pf-camera .dial > .face { --color: #aaabad; --spun: 0; --bevel: 0; --height: .1; --hairline: 0; --pattern-pitch: .436; --pattern-margin: 0; }
pf-camera .pyramid { --color: #aaabad; --radius-device: 0; --edge-width: .218; --edge-depth: .12; --height: 0; --hairline: 0; --rim-light: 0; }   /* the knurl: a grid of square pyramids, each a solid with a chamfer to its middle */
pf-camera .dial .hub { --bevel: .35 -.5 .9 30; }
pf-camera .ok { --color: #d2d3d5; --radius: 99; --gap: 0; --height: 0; }   /* flush with the case, as the other keys; a press sinks it in the hub */
pf-camera .dot { --keybed: #2a2a2b; }
pf-camera .rocker { --color: #dcdde0; --radius-device: 99; --height: .5; --shadow-alpha: .8; --edge-shape: round; --edge-width: .15; --edge-depth: .15; --texture: grain; --texture-amount: .2; --groove: 0; }   /* the rocker: a trough (its mask) between two raised sides, and no groove */
pf-camera .well { --gap: .3; --bevel: .25 -.75 .9 30; }   /* the hole of a key, with its collar */
pf-camera .key { --color: #b4b5b7; --radius: 99; --mark: #141415; --icon-size: .33; --height: 0; }   /* flush in its hole, so it casts no shadow */
pf-camera .key[icon=more] { --icon-size: .675; }
pf-camera pf-key[side] { --color: #d6d7d9; --travel: .06; }