/* Screen styles the site needs that aren't in app.css / chrome.css:
   the Tune room's own parts, the pendulum canvas, and .msk — the Manuscript
   override layer that repaints a skin room in chrome tokens. Lifted verbatim
   from Minuet Recording Resolved and the V1.1 design. All scoped inside
   .w-phone so nothing can reach the page around it. */

.w-phone .pendsvg{position:absolute;left:0;top:0;width:390px;height:400px}
.w-phone .playbtn{width:72px;height:72px;border-radius:16px;border:2.5px solid #C9A84C;box-shadow:0 0 10px rgba(201,168,76,.45);display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);color:#E0C872;font-size:22px}
.w-phone .playbtn.lit{background:rgba(201,168,76,.16);box-shadow:0 0 16px rgba(201,168,76,.5)}
.w-phone .pitchpill{padding:8px 16px;border-radius:999px;border:1px solid rgba(201,168,76,.4);background:rgba(201,168,76,.1);display:flex;align-items:center;gap:6px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;color:#E0C872}
.w-phone .pitchpill em{color:rgba(201,168,76,.7);font-size:10px;font-weight:600;font-style:normal}
.w-phone .notereadout{font-family:'Playfair Display',serif;font-weight:700;font-size:68px;line-height:1;color:#E0C872}
.w-phone .concertlbl{font-family:'Playfair Display',serif;font-style:italic;font-size:11px;color:rgba(245,240,232,.55)}
.w-phone .acc{--sw:21;display:inline-block;height:.78em;vertical-align:baseline;position:relative;top:.06em;margin-left:.02em}
.w-phone .acc.flat{width:.46em}
.w-phone .acc.sharp{width:.48em}

/* Tune, traced from TuneView.swift @ main (2026-08-10) — the gauge, mode row
   and drone block the app actually draws. Unscoped like the base wave rule so
   app.css's own .droneblk overrides stay out of the way. */
.dev .content{position:relative}
.gsvg{display:block}
.gend{font-family:'DM Sans',sans-serif;font-size:15px;fill:#F5F0E8;fill-opacity:.55}
.gzero{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:500}
.notereadout{font-family:'Playfair Display',serif;font-weight:700;font-size:68px;line-height:1}
.notereadout .acc{width:.30em;height:.56em;margin-left:.06em;vertical-align:-.02em}
.concap{font-family:'DM Sans',sans-serif;font-size:14px;color:#F5F0E8;display:flex;align-items:baseline}
.concap .acc{width:.40em;height:.72em;margin-left:.10em;align-self:center;position:relative;top:.06em}
.intunelbl{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:3px;color:#5BAD6F}
.hairline{position:absolute;left:24px;width:342px;height:.5px;background:rgba(201,168,76,.22)}
.locklbl{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:3px;color:#C9A84C;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.locklbl.amber{color:#D4A030}
.locklbl .acc{width:.42em;height:.75em;margin-left:.06em;vertical-align:-.09em}
.dronecap{font-family:'DM Sans',sans-serif;font-size:9px;font-weight:500;letter-spacing:2px;color:#C9A84C;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.dronecap .acc{width:.42em;height:.75em;margin-left:.06em;vertical-align:-.09em}
.droneblk{box-sizing:border-box;flex:1;height:80px;display:flex;align-items:center;gap:12px;padding:0 11px;border-radius:12px;border:1px solid rgba(155,127,48,.55);background:rgba(0,0,0,.22)}
.droneblk.live{border:1.5px solid #E0C872;background:linear-gradient(rgba(224,200,114,.10),rgba(224,200,114,.10)),rgba(0,0,0,.22)}
.dsq{width:40px;height:40px;flex:none;border-radius:10px;border:2px solid #C9A84C;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center}
.dsq.playing{border-color:#C44B3F}
.stopsq{width:12px;height:12px;border-radius:1.5px;background:#C44B3F}
.playtri{font-style:normal;font-size:14px;color:#E0C872;margin-left:1px}
.droneblk .wave{flex:1;height:60px;display:flex;align-items:center;gap:4px}
.droneblk .wave i{width:3px;flex:none;border-radius:1.5px;background:rgba(224,200,114,.85)}
.modecell{box-sizing:border-box;flex:1;height:56px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid rgba(155,127,48,.55);background:linear-gradient(180deg,#241509,#150C05);font-family:'DM Sans',sans-serif;font-size:19px;font-weight:500;color:#E0C872}
.modecell.on{border:1.5px solid #E0C872;background:linear-gradient(rgba(201,168,76,.10),rgba(201,168,76,.10)),linear-gradient(180deg,#241509,#150C05);color:#E8C35A;box-shadow:0 0 6px rgba(224,200,114,.25)}
.modecell .acc{width:.40em;height:.72em;margin-left:.07em;vertical-align:-.10em}
.pitchpill .acc{width:.42em;height:.75em}

/* the drone's waveform — app.css carries the .droneblk overrides but not the base,
   so these stay unscoped and at low specificity for that rule to win */
.wave{display:flex;align-items:center;justify-content:center;gap:4px;height:38px}
.wave i{width:3px;border-radius:1.5px;background:rgba(232,195,90,.75);flex:none}

/* Manuscript over a skin room */
.w-phone .msk .walnut{background:var(--bg)}
.w-phone .msk .grain{display:none}
.w-phone .msk .pcrumb{border-color:var(--acc);background:var(--accsoft);color:var(--accink)}
.w-phone .msk .pcrumb em{color:var(--accink)}
.w-phone .msk .fp{background:var(--surf);border-color:var(--acc);box-shadow:inset 0 1px 2px rgba(58,36,18,.06)}
.w-phone .msk .fp-n{text-shadow:none}
.w-phone .msk .fp-b{color:var(--ink2)}
.w-phone .msk .fp-rec{color:var(--ink)}
.w-phone .msk .stepbtn,.w-phone .msk .subbtn,.w-phone .msk .gearbtn{border-color:var(--line);background:var(--surf);color:var(--accink);box-shadow:none}
.w-phone .msk .subbtn.on{border-color:var(--acc);background:var(--accsoft);color:var(--accink);box-shadow:none}
.w-phone .msk .playbtn{border-color:var(--acc);background:var(--accsoft);color:var(--accink);box-shadow:none}
.w-phone .msk .bpmslider .tk{background:var(--line)}
.w-phone .msk .bpmslider .tk u{background:var(--acc)}
.w-phone .msk .bpmslider .th{background:var(--acc);border-color:var(--acc)}
.w-phone .msk .tabbar{background:var(--tabbg);border-top-color:var(--line)}
.w-phone .msk .tabbar .tb{color:var(--ink3)}
.w-phone .msk .tabbar .tb.on{color:var(--accink)}
.w-phone .msk .recbtn{border-color:rgba(166,58,46,.7);background:transparent;color:#A63A2E}
.w-phone .msk .recbtn.on{background:rgba(166,58,46,.12);border-color:#A63A2E;color:#A63A2E;box-shadow:0 0 12px rgba(166,58,46,.22)}
.w-phone .msk .pcrumb.rec{border-color:#A63A2E;background:rgba(166,58,46,.10);color:#A63A2E}
.w-phone .msk .pcrumb.rec em{color:#A63A2E}
.w-phone .msk .recdot{background:#A63A2E;box-shadow:none}

/* Manuscript Tune — ruled 2026-08-10. Chrome is print: the recess becomes a
   card, the needle becomes ink, the dark pool goes away. */

.paper{position:relative;height:762px;background:var(--bg);overflow:hidden}
.gendp{font-family:'DM Sans',sans-serif;font-size:15px;fill:#3A2412;fill-opacity:.6}
.gzerop{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:500}
.notereadoutp{font-family:'Playfair Display',serif;font-weight:700;font-size:68px;line-height:1}
.notereadoutp .acc{width:.30em;height:.56em;margin-left:.06em;vertical-align:-.02em}
.concapp{font-family:'DM Sans',sans-serif;font-size:14px;color:var(--ink2);display:flex;align-items:baseline}
.concapp .acc{width:.40em;height:.72em;margin-left:.10em;align-self:center;position:relative;top:.06em}
.intunelblp{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:3px;color:#2F6B47}
.hairlinep{position:absolute;left:24px;width:342px;height:1px;background:var(--line)}
.locklblp{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:3px;color:var(--accink);display:inline-flex;align-items:baseline}
.locklblp .acc{width:.40em;height:.72em;margin-left:.08em;align-self:center;position:relative;top:.06em}
.pitchpillp{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;background:var(--accsoft);border:1px solid var(--acc);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;color:var(--accink);line-height:1}
.pitchpillp em{font-style:normal;font-size:10px;font-weight:600;color:var(--acc);line-height:1}
.modecellp{box-sizing:border-box;flex:1;height:56px;display:flex;align-items:center;justify-content:center;border-radius:var(--rad);border:1px solid var(--line);background:var(--surf);font-family:'DM Sans',sans-serif;font-size:19px;font-weight:500;color:var(--ink)}
.modecellp.on{border:1.5px solid var(--acc);background:var(--accsoft);color:var(--accink)}
.modecellp .acc{width:.40em;height:.72em;margin-left:.07em;vertical-align:-.10em}
.dronecapp{font-family:'DM Sans',sans-serif;font-size:9px;font-weight:500;letter-spacing:2px;color:var(--ink3);display:inline-flex;align-items:baseline}
.dronecapp .acc{width:.42em;height:.75em;margin-left:.08em;align-self:center;position:relative;top:.06em}
.droneblkp{box-sizing:border-box;flex:1;height:80px;display:flex;align-items:center;gap:12px;padding:0 11px;border-radius:var(--rad);border:1px solid var(--line);background:var(--surf)}
.droneblkp.live{border:1.5px solid var(--acc)}
.dsqp{width:40px;height:40px;flex:none;border-radius:10px;border:2px solid var(--acc);background:var(--accsoft);display:flex;align-items:center;justify-content:center}
.dsqp.playing{border-color:var(--cdink)}
.stopsqp{width:12px;height:12px;border-radius:1.5px;background:var(--cdink)}
.playtrip{font-style:normal;font-size:14px;color:var(--accink);margin-left:1px}
.droneblkp .wavep{flex:1;height:60px;display:flex;align-items:center;gap:4px}
.droneblkp .wavep i{width:3px;flex:none;border-radius:1.5px;background:#9B7F30}

/* Status bar follows the room dressing. app.css declares ivory unscoped, which
   is invisible on paper — chrome devices take their own ink. */
.chrome-light .status,.chrome-dark .status{color:var(--ink2)}