/* SIGNAL 2002, SOUND D: the meters and the equaliser. Same tokens, radii and LCD treatment as the home (stage.css). */
.sface{position:absolute;left:0;top:0;transform-origin:0 0;z-index:1;background:var(--sskin) 0 0/var(--sw) var(--sh) no-repeat;color:var(--lcd);font-family:var(--dot)}
.sface[hidden]{display:none}
.sface .sh{position:absolute;overflow:hidden;background:var(--hole);border-radius:var(--r-well)}
.sface .sh::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px)}
.sface .sh canvas{position:absolute;left:0;top:0;image-rendering:pixelated}
.sface .sk{position:absolute;border:0;padding:0;background:transparent no-repeat;background-size:var(--sw) var(--sh);cursor:pointer;border-radius:var(--r-key);display:block}
.sface .sk:hover,.sface .sk:focus-visible,.sface .sk[aria-current="page"],.sface .sk[aria-pressed="true"]{background-image:var(--slit)}
.sface .sk:active,.sface .sk.is-down{background-image:var(--sdown)}
.sface .sk:focus-visible,.sface .sl:focus-visible,.sface .band:focus-visible{outline:2px dotted var(--amber);outline-offset:2px}

/* now playing, one long readout */
.np{display:flex;align-items:center;gap:16px;padding:0 16px}
.np__el{font-size:50px;flex:none}
.np__txt{flex:1;min-width:0}
.np__top{display:flex;align-items:center;gap:12px;font:400 9px var(--px);color:var(--lcd-dim)}
.np__words{display:flex;gap:8px;margin-left:auto}
.np__words b{font-weight:400;color:var(--lcd-ghost)}
.np__words b.on{color:var(--lcd)}
.np__flag{padding:2px 6px;border-radius:2px;background:var(--lcd-ghost);color:var(--lcd-dim)}
.np[data-state="playing"] .np__flag{background:#ff3b2f;color:#fff}
.np__line{margin-top:4px;white-space:nowrap;overflow:hidden;font:400 14px var(--px);color:#fff;letter-spacing:1px}
.np__line span{display:inline-block}
.np__sub{font-size:16px;color:var(--lcd-dim);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* spectrum */
.spec__h{position:absolute;left:18px;right:18px;top:10px;display:flex;justify-content:space-between;font:400 10px var(--px);color:var(--lcd-dim);z-index:1}
.spec__h span:first-child{color:var(--amber)}

/* band, slim */
.band{cursor:ew-resize;touch-action:none}
.band__s{position:absolute;inset:0}
.band__s i{position:absolute;bottom:6px;width:1px;height:6px;background:#1f5566}
.band__s i.b{height:11px;background:var(--lcd-dim)}
.band__s b{position:absolute;top:4px;transform:translateX(-50%);font:400 8px var(--px);color:var(--lcd-dim)}
.band__s em{position:absolute;top:16px;bottom:6px;width:3px;margin-left:-1px;background:#6b5216}
.band__s em.on{background:var(--amber);box-shadow:0 0 5px var(--amber)}
.band__needle{position:absolute;top:2px;bottom:2px;width:3px;background:#ff3b2f;box-shadow:0 0 6px #ff3b2f}

/* MHz readout */
.mz{display:flex;align-items:center;justify-content:space-between;padding:0 10px}
.mz__f{font-size:30px}
.mz__s{font:400 8px var(--px);color:var(--lcd-dim)}
.mz[data-locked="true"] .mz__s{color:#ff3b2f}

/* sliders: the slot is in the render, the cap is a rendered sprite */
.sl{position:absolute;touch-action:none;cursor:ns-resize;border-radius:6px}
.sl--h{cursor:ew-resize}
.sl__cap{position:absolute;background:var(--c0) 0 0/100% 100% no-repeat;pointer-events:none;margin:-4px 0 0 -4px;box-sizing:content-box;padding:4px}
.sl:hover .sl__cap,.sl:focus-visible .sl__cap{background-image:var(--c1)}
.sl.is-down .sl__cap{background-image:var(--c2)}

/* the handheld face */
.sface.is-phone .seg--title{font-size:22px;left:10px;top:7px}
.sface.is-phone .lcd__sub{font-size:9px;gap:10px;left:10px;right:10px;bottom:4px}
.sface.is-phone .lcd__sub span:nth-child(n+2):not(:last-child){display:none}
.sface.is-phone .np{gap:10px;padding:0 10px}
.sface.is-phone .np__el{font-size:34px}
.sface.is-phone .np__words{display:none}
.sface.is-phone .np__line{font-size:11px}
.sface.is-phone .np__sub{font-size:14px}
.sface.is-phone .spec__h{left:10px;right:10px;top:6px;font-size:8px}
.sface.is-phone .spec__h span:last-child{display:none}
.sface.is-phone .mz__f{font-size:24px}
.sface.is-phone .mz{padding:0 8px}
.mz{position:absolute}
.mz__s{position:absolute;right:8px;top:4px}
.mz__f{margin-top:6px}

/* SOUND E: the boombox. The knob sprite sits in its rendered seat; the phone has no band strip, the knob is its dial */
.knob{position:absolute;cursor:grab;touch-action:none;border-radius:50%;user-select:none}
.knob:active{cursor:grabbing}
.knob img{width:100%;height:100%;display:block;pointer-events:none}
.knob:focus-visible{outline:2px dotted var(--amber);outline-offset:6px}
.band.is-off{display:none}
.sface--e .seg--title{font-size:30px}
.sface--e .lcd__sub span:nth-child(2),.sface--e .lcd__sub span:nth-child(3){display:none}
.sface--e:not(.is-phone) .seg--title{font-size:27px}
.sface--e:not(.is-phone) .lcd__sub span:not(:first-child){display:none}

/* SILVER: royal blue displays with a fine dot grid and white segments (57); orange only on peaks (54) */
.sface{--hole:#1a3a9e;--lcd:#ffffff;--lcd-ghost:rgba(255,255,255,.12);--lcd-dim:#9fb6ff;--amber:#ff8a1e}
.sface .sh{background:linear-gradient(180deg,#2448b8 0,#173193 100%)}
.sface .sh::after{background:radial-gradient(circle,rgba(0,8,50,.45) 0 .7px,transparent 1px) 0 0/3px 3px}
.sface .sh::before{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,40,.6);border-radius:inherit;z-index:2}
.sface .seg__lit{text-shadow:0 0 4px rgba(200,220,255,.6)}
.sface .band__s i{background:#5d79d6}
.sface .band__s em{background:#3b55a8}
.sface .band__s em.on{background:#ffffff;box-shadow:none}
.sface .band__needle{background:#ff8a1e;box-shadow:none}
.sface .np[data-state="playing"] .np__flag{background:#ff8a1e;color:#081a5e}
.sface .mz[data-locked="true"] .mz__s{color:#ff8a1e}
.sface .np__line{color:#fff}
.sface .spec__h span:first-child{color:#fff}