/* =====================================================================
   WAVERA hardware pass: rack faceplate, ears, screws, jacks, patch
   cables, glass screens and physical keys. Loads after styles.css and
   overrides it.
   ===================================================================== */
:root{
  --glass:#050608;
  --bevel:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.65);
  --screen:0 1px 0 rgba(255,255,255,.06),inset 0 6px 18px rgba(0,0,0,.75);
  --screw:radial-gradient(circle at 35% 30%,#9aa0ab 0 1px,#555b66 2.4px,#1f2227 3.4px,transparent 4.2px);
  --screws:var(--screw) 8px 8px/9px 9px no-repeat,var(--screw) calc(100% - 8px) 8px/9px 9px no-repeat,var(--screw) 8px calc(100% - 8px)/9px 9px no-repeat,var(--screw) calc(100% - 8px) calc(100% - 8px)/9px 9px no-repeat;
  --brushed:repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 1px,rgba(0,0,0,.025) 1px 3px);
}

/* rack + faceplate */
.rack{position:relative}
.console{border:1px solid #2b2f38;
  background:var(--brushed),linear-gradient(180deg,#1f222a,#15171d 38%,#111318);
  box-shadow:0 0 0 1px #040506,inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.7),0 60px 110px -50px #000}
@media (min-width:760px){.console{padding-inline:58px}}

/* rack ears with screws and patch jacks */
.ear{display:none}
@media (min-width:760px){
  .ear{display:flex;flex-direction:column;justify-content:space-between;align-items:center;position:absolute;top:0;bottom:0;width:30px;padding:12px 0;
    background:var(--brushed),linear-gradient(90deg,#16181d,#22252c 50%,#16181d)}
  .ear-l{left:10px;border-inline:1px solid #0a0b0d;box-shadow:1px 0 0 rgba(255,255,255,.04)}
  .ear-r{right:10px;border-inline:1px solid #0a0b0d;box-shadow:-1px 0 0 rgba(255,255,255,.04)}
}
.screw{position:relative;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#a3a9b4,#4b505a 55%,#1b1d22);box-shadow:0 1px 1px rgba(0,0,0,.9),inset 0 0 0 1px rgba(0,0,0,.35)}
.screw::after{content:"";position:absolute;left:2px;right:2px;top:5.5px;height:2px;border-radius:1px;background:#121418;transform:rotate(38deg)}
.ear .screw:last-child::after{transform:rotate(-24deg)}
.jack{position:absolute;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:radial-gradient(circle,#000 0 3.6px,#30343c 4.2px 5.4px,#6b717d 6px 7px,#2a2d34 7.6px 8.4px,#0d0e11 9px)}

/* patch cables looping between the jacks, shown only where there is room outside the rack */
.cables{display:none;position:absolute;top:0;height:100%;width:100px;pointer-events:none;z-index:3;overflow:visible}
.cables-l{left:-70px}
.cables-r{right:-70px}
@media (min-width:1300px){.cables{display:block}}
.cable path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cable .cs{stroke:#000;stroke-opacity:.5;stroke-width:10px;transform:translate(3px,7px);filter:blur(2px)}
.cable .cb{stroke:var(--c);stroke-width:7px}
.cable .ch{stroke:#fff;stroke-opacity:.3;stroke-width:1.6px;transform:translate(-1.4px,-1.6px)}

/* glass screens */
.spec{position:relative;background:var(--glass);border:1px solid #000;box-shadow:var(--screen)}
.spec::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(168deg,rgba(255,255,255,.07),rgba(255,255,255,0) 34%),repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px)}
.meter .bars{padding:6px;background:var(--glass);border:1px solid #000;border-radius:6px;box-shadow:var(--screen)}
.meter .ch::after{background:repeating-linear-gradient(to top,transparent 0 3px,var(--glass) 3px 4px)}
.meter .cover{background:var(--glass)}
.stats{padding:9px 11px;background:var(--glass);border:1px solid #000;border-radius:7px;box-shadow:var(--screen);color:#5f7a77}
.stats b{color:#a6f5ec;text-shadow:0 0 6px rgba(63,224,207,.55)}
.pill{background:var(--glass);border-color:#000;box-shadow:var(--screen);color:#a6f5ec}
.chip{background:var(--glass);border-color:#000;box-shadow:var(--screen)}
.linkrow{background:linear-gradient(180deg,#121419,#0e1014);border-color:#000;box-shadow:var(--bevel)}
.linkrow input{background:var(--glass);border-color:#000;box-shadow:var(--screen)}

/* the orb sits in a machined bezel */
.ringbox{box-shadow:0 0 0 9px #0e1014,0 0 0 10px #2b2f38,0 0 0 11px #07080a,0 24px 60px -24px #000}

/* physical keys */
.seg,.toggle{background:#08090c;border-color:#000;box-shadow:inset 0 2px 5px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.05)}
.seg button{position:relative;border:1px solid #0a0b0e;background:linear-gradient(180deg,#2c3039,#1b1e24);box-shadow:var(--bevel);color:var(--muted)}
.seg button[aria-pressed="true"],.toggle button[aria-pressed="true"]{background:linear-gradient(180deg,#121419,#1a1d23);box-shadow:inset 0 2px 5px rgba(0,0,0,.8)}
.seg button[aria-pressed="true"]::after{content:"";position:absolute;top:4px;right:5px;width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent)}
.play,.btn,.app,.mod{border:1px solid #0a0b0e;background:linear-gradient(180deg,#2a2e37,#191b21);box-shadow:var(--bevel)}
.play:active,.btn:active,.app:active,.mod:active,.seg button:active{transform:translateY(1px)}
.btn,.app{position:relative}
.btn::before,.app::before{content:"";position:absolute;top:10px;right:10px;width:6px;height:6px;border-radius:50%;background:#2a2d34;box-shadow:inset 0 1px 1px rgba(0,0,0,.8)}
.btn[aria-pressed="true"],.app[aria-pressed="true"]{border-color:#0a0b0e;background:linear-gradient(180deg,#14161b,#1b1e24);box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 0 0 1px rgba(63,224,207,.35)}
.btn[aria-pressed="true"]::before,.app[aria-pressed="true"]::before{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.play[aria-pressed="true"]{background:linear-gradient(180deg,#14161b,#1b1e24);box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 0 0 1px rgba(63,224,207,.45),0 0 18px -6px var(--accent)}
.power{border:1px solid #000;background:radial-gradient(circle at 50% 32%,#454a55,#1a1c21 62%,#0e0f12);
  box-shadow:0 0 0 4px #0b0c0f,0 0 0 5px #2e323b,0 4px 10px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.14)}

/* knobs: value readout on a small LCD */
.knob{width:112px;gap:4px}
.kval{font-size:11px;color:#a6f5ec;background:var(--glass);border:1px solid #000;border-radius:4px;padding:0 10px;min-width:40px;text-align:center;
  box-shadow:var(--screen);text-shadow:0 0 6px rgba(63,224,207,.55)}
.knobs,.chain{border-top:1px solid #0a0b0e;box-shadow:0 -1px 0 rgba(255,255,255,.04)}

/* signal chain: fits without sideways scrolling */
.chain-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;overflow:visible;padding:2px 0 4px}
.mod{position:relative;min-width:0;border-radius:9px}
.mod b,.mod small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod+.mod::before{content:"";position:absolute;left:-13px;top:50%;width:12px;height:3px;margin-top:-1.5px;border-radius:2px;background:linear-gradient(180deg,#5a606c,#1b1e24)}
.mod[aria-pressed="false"]{background:linear-gradient(180deg,#14161b,#111317);box-shadow:inset 0 2px 5px rgba(0,0,0,.7)}
@media (max-width:1000px){.chain-row{grid-template-columns:repeat(4,minmax(0,1fr))}.mod:nth-child(4n+1)::before{display:none}}
@media (max-width:520px){.chain-row{grid-template-columns:repeat(2,minmax(0,1fr))}.mod:nth-child(2n+1)::before{display:none}}

/* rack-module panels with corner screws */
.panel,.guide-group{border:1px solid #2b2f38;box-shadow:0 0 0 1px #040506,inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -40px #000;
  background:var(--screws),var(--brushed),linear-gradient(180deg,#1c1f26,#131519)}
.panel{padding:18px 22px}
.mini{background:var(--glass);border-color:#000;box-shadow:var(--screen)}

/* guide & FAQ */
.guide{display:grid;gap:18px}
.guide-head h2{margin:0;font-weight:300;font-size:26px;letter-spacing:.04em}
.guide-head p{margin:4px 0 0;color:var(--muted)}
.guide-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.guide-group{display:grid;gap:8px;padding:20px 22px;border-radius:16px}
.guide-group>.label{padding:0 2px 6px}
.guide details{border:1px solid #0a0b0e;border-radius:10px;background:linear-gradient(180deg,#1b1e24,#15171c);box-shadow:var(--bevel)}
.guide details[open]{background:linear-gradient(180deg,#16181d,#121418)}
.guide summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 14px;font-size:14px;color:var(--fg)}
.guide summary::-webkit-details-marker{display:none}
.guide summary::after{content:"";margin-left:auto;flex:0 0 22px;height:22px;border-radius:50%;transition:transform .25s ease;
  background:linear-gradient(var(--accent),var(--accent)) center/10px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) center/2px 10px no-repeat,radial-gradient(circle at 50% 32%,#30343d,#14161b);
  box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.1)}
.guide details[open] summary::after{transform:rotate(45deg)}
.guide summary:hover{color:#fff}
.step{font-size:11px;color:var(--accent);border:1px solid #000;background:var(--glass);border-radius:4px;padding:0 6px;box-shadow:var(--screen)}
.ans{padding:0 14px 14px;color:var(--soft);font-size:13px;line-height:1.65}
.ans p{margin:0;max-width:68ch}
.ans b{color:var(--fg);font-weight:500}
.spec-list{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 16px;margin:0}
.spec-list dt{color:var(--fg);font-weight:500}
.spec-list dd{margin:0}
@media (max-width:820px){.guide-cols{grid-template-columns:1fr}}
@media (max-width:600px){.spec-list{grid-template-columns:1fr;gap:2px}.spec-list dd{margin-bottom:8px}}

/* steady readouts: live numbers never change the width of anything around them */
.stage-row{grid-template-columns:92px minmax(0,1fr) 180px 92px}
@media (max-width:820px){.stage-row{grid-template-columns:1fr 1fr}}
.meter{grid-template-columns:100%;justify-items:center}
.meter .bars{justify-self:center}
.meter .pill{width:88px;text-align:center;overflow:hidden;font-variant-numeric:tabular-nums}
.stats b{display:inline-block;min-width:5.5ch;text-align:right;font-variant-numeric:tabular-nums}
#intText{display:inline-block;min-width:4.2ch;text-align:center}
#miniInt{display:inline-block;min-width:4.2ch}
#freeLeft{display:inline-block;min-width:4ch;text-align:center}

/* WAVERA Pro early-access lightbox */
.promo{padding:0;border:1px solid #2b2f38;border-radius:18px;color:var(--fg);width:min(860px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;
  display:none;grid-template-columns:minmax(0,44%) minmax(0,1fr);
  background:var(--brushed),linear-gradient(180deg,#1c1f26,#111318);box-shadow:0 0 0 1px #040506,inset 0 1px 0 rgba(255,255,255,.08),0 60px 120px -30px #000}
.promo[open]{display:grid;animation:promoIn .45s cubic-bezier(.2,.7,.2,1)}
.promo::backdrop{background:rgba(5,6,8,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@keyframes promoIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.promo-media{position:relative;background:#000;min-height:100%}
.promo-media img{display:block;width:100%;height:100%;object-fit:cover}
.promo-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 70%,rgba(17,19,24,.9))}
.promo-body{display:grid;align-content:center;gap:12px;padding:40px 36px 30px}
.promo-body h2{margin:0;font-weight:300;font-size:clamp(28px,4vw,40px);letter-spacing:.02em;line-height:1.1;text-wrap:balance}
.promo-body .label{color:var(--accent)}
.promo-lede{margin:0;color:var(--soft);max-width:40ch}
.promo-field{display:flex;gap:8px;flex-wrap:wrap}
.promo-field input{flex:1 1 200px;min-width:0;font:inherit;font-size:14px;color:var(--fg);background:var(--glass);border:1px solid #000;border-radius:9px;padding:11px 14px;box-shadow:var(--screen)}
.promo-field input::placeholder{color:var(--dim)}
.promo-field .play{flex:0 0 auto;padding:10px 18px}
.promo-field .play:disabled{opacity:.6;cursor:progress}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--muted);line-height:1.5;cursor:pointer}
.consent input{margin-top:2px;accent-color:var(--accent)}
.promo-msg{margin:0;min-height:1.2em;font-size:12px;color:var(--hot)}
.promo-done b{display:block;font-size:18px;font-weight:500;color:var(--accent)}
.promo-done p{margin:4px 0 0;color:var(--soft)}
.promo-later{justify-self:start;border:0;background:none;padding:0;font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.promo-later:hover{color:var(--fg)}
.promo-fine{font-size:11px;color:var(--dim);line-height:1.5}
.promo-x{position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;border-radius:50%;border:1px solid #000;font-size:18px;line-height:1;
  color:var(--muted);background:radial-gradient(circle at 50% 32%,#30343d,#14161b);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.promo-x:hover{color:var(--fg)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.linkish{border:0;background:none;padding:0;font:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
@media (max-width:700px){
  .promo{grid-template-columns:1fr}
  .promo-media{min-height:0;height:230px}
  .promo-media img{object-position:50% 38%}
  .promo-media::after{background:linear-gradient(180deg,transparent 60%,rgba(17,19,24,.95))}
  .promo-body{padding:22px 20px 22px}
}
@media (prefers-reduced-motion:reduce){.promo[open]{animation:none}}

/* footer */
.foot{display:grid;gap:8px;padding-top:22px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
.foot-brand{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.foot-brand img{display:block}
.foot-brand b{color:var(--fg);font-weight:500}
.foot p{margin:0;max-width:110ch;line-height:1.6}
@media (prefers-reduced-motion:reduce){.guide summary::after{transition:none}}