/* The rules of the device pf-dispatch (src/devices/pf-dispatch.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 dispatch (pf-dispatch.js), after the top view of its concept: light warm gray plastic, a deep case lit from the top
   left, keys of soft-touch plastic in dark wells, an OLED, a dial of spun aluminum with an orange dot, and the light of each
   line: orange while it works, red while it asks and white when it is done. */
pf-dispatch { --color: #cac0bf; --radius-device: 1.6; --height: 3.2; --slab: .1; --grain: .35; --shadow-alpha: .95; --shadow-blur: 1; --keybed: #281d1a; }
pf-dispatch :is(.name, .code) { --mark: #574d4a; }
pf-dispatch :is(.speaker, .vent) { --pattern-margin: 0; --keybed: #5b514f; }
pf-dispatch .speaker { --pattern-pitch: .49; }
pf-dispatch .vent { --pattern-pitch: .478 .463; }
pf-dispatch .window { --gap: .06; --edge-width: .06; }   /* the corner of the glass plus the gap, .41 = .35 + .06 */
/* The OLED: pixels too fine to see, so its text stays smooth at each zoom, as on pf-lcd, in the lines of a legend. Its text
   has the light of the ink of pf-lcd (#f9f8f8 at .86 over the glass), its black is the glass as pf-lcd showed it, and the
   rim of the window shades it. The inks are the colors of pf-lcd at that light, taken out of --ink and the black level. */
pf-dispatch .screen[variant] { --color: #0f0e0e; --ink: #dddddd; --radius: .35; --resolution: 317 164; --subpixels: smooth; --black-level: .063; --sink: .35;
  --label-size: 1.72; --legend-line: 2.06; --legend-inset: 1.35; --legend-y: .29; --legend-weight: 530; }
pf-dispatch .screen[data-ink=bypass] { --ink-colors: #ff4939; }   /* bypass permissions: all the text in red */
pf-dispatch .screen[data-ink=ultrathink] { --ink-colors: #f47b6c #ffb781 #fadf9b #c9f2b8 #a8c8f7 #a490d8 #ce8dbf; }   /* ultrathink: the last line in a rainbow */
pf-dispatch .effort { --color: #d4c9c5; --mark: #5d514d; --radius: 99; --label-size: .62; --gap: .08; }   /* a pill under the dial */
pf-dispatch .dial > .cap { --color: #f4f2f2; --radius-device: 99; --spun: .06; --bevel: .1 .9 .9 30; --knurl: .04; --height: 2.4; --shadow-alpha: .95; --shadow-blur: 1; }   /* spun aluminum with a fine knurl round its rim */
pf-dispatch .dial .dot { --mark: #f0661c; }
pf-dispatch .well { --gap: 0; --radius: .32; }   /* the corner of a cap plus the band round it, two margins: .32 = .151 + .168 */
pf-dispatch pf-keycap { --color: #d4c9c5; --ink: #7d7471; --label-size: 1.3; --legend-y: .52; }
pf-dispatch pf-keycap > .cap { --margin: .084; --skirt: .3; --skirt-rise: .14; --top-round: .1; --top-radius: .45; --grain: .1; }   /* soft-touch: a wide top on a low skirt */
pf-dispatch pf-keycap pf-led { --keybed: #8f8784; --milk: var(--keybed); --diffuser-white: 0; }   /* the light of a line that is free: a gray dot in a gray cut */
pf-dispatch pf-keycap[data-state=works] { --ink: #ef9a37; } pf-dispatch pf-keycap[data-state=works] pf-led { --color: #ff9a2a; }
pf-dispatch pf-keycap[data-state=asks] { --color: #dcc3c0; --ink: #f0473b; } pf-dispatch pf-keycap[data-state=asks] pf-led { --color: #ff3b2e; }
pf-dispatch pf-keycap[data-state=done] { --color: #d3cfd5; --ink: #fbfbfb; } pf-dispatch pf-keycap[data-state=done] pf-led { --color: #ffffff; }
pf-dispatch pf-keycap.yes { --color: #dedbdc; --ink: #5d5857; }
pf-dispatch pf-keycap.no { --color: #514848; --ink: #ece8e6; }
pf-dispatch pf-keycap.esc { --color: #d06f2d; --ink: #5a2108; }
pf-dispatch pf-keycap.mode { --color: #afa4a0; --ink: #5d514d; }
pf-dispatch pf-keycap:is(.yes, .no, .esc, .mode) { --label-size: 1; }
pf-dispatch pf-key[label=power] { --color: #cbc1bf; --travel: .06; }