/* Talkback contact gate (v6, touch fixes v10). Matches the FOH desk: dark panels, amber LEDs, scribble-strip tape. */
.gate{--go:#7FD66B;--hot:#FF5A36;width:min(52rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);margin:auto;padding:1.4rem clamp(1rem,3vw,2rem) 1.25rem;background:var(--desk);color:var(--panel);border:1px solid var(--hair);border-radius:6px;box-shadow:0 0 0 1px var(--desk-lo),0 30px 80px rgb(0 0 0 / .6);font:400 1rem/1.55 var(--body);overflow:auto;overscroll-behavior:contain}
.gate::backdrop{background:rgb(8 8 9 / .78)}
.gate-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.gate-head .silk{margin:0}
.gate-head .silk b{color:var(--amber)}
.gate-x{display:grid;place-items:center;width:40px;height:40px;background:transparent;border:1px solid var(--hair);border-radius:2px;color:var(--panel);cursor:pointer}
.gate-x svg{width:18px;height:18px}
.gate-steps{display:flex;gap:4px;list-style:none;margin:.9rem 0 1rem;padding:0}
.gate-steps li{display:flex;align-items:center;gap:.45rem;padding:.4rem .65rem;border:1px solid var(--hair);border-radius:2px;font:600 .74rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--panel-2)}
.gate-steps i{width:7px;height:7px;border-radius:50%;background:var(--amber-off)}
.gate-steps li.on{border-color:rgb(255 176 31 / .5);color:var(--panel)}
.gate-steps li.on i{background:var(--amber)}
.gate-steps li.done i{background:var(--go)}
.gate h2{font-size:clamp(2.2rem,5vw,3.4rem);outline:none}
.gate-hint{margin:.6rem 0 1.1rem;color:var(--panel-2);font-size:.9rem;max-width:40rem}
.gate-status{min-height:1.5em;margin:.9rem 0 0;font-size:.88rem;color:var(--panel)}
.gate-status[data-kind="err"]{color:var(--hot)}
.gate-status[data-kind="ok"]{color:var(--go)}
.gate-bar{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.gate-bar .more,.gate-again .more{margin:0}
.gate-bar[hidden],.gate-view[hidden],.gate-hint[hidden],.gate-score[hidden]{display:none}
.gate-snd{display:inline-flex;align-items:center;gap:.5rem}
.gate-snd i{width:7px;height:7px;border-radius:50%;background:var(--amber-off)}
.gate-snd[aria-pressed="true"] i{background:var(--amber)}
.is-shake{animation:gate-shake .32s ease}
@keyframes gate-shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* Level 1: patch */
.pb{position:relative;display:grid;gap:1rem}
.pb-l{margin:0 0 .55rem}
.pb-tray,.pb-desk{background:var(--well);border:1px solid var(--hair);border-radius:4px;padding:.8rem}
.pb-cables{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem}
.cable{display:flex;flex-direction:column;align-items:center;gap:.4rem;min-height:68px;padding:.55rem .3rem .5rem;background:var(--desk-hi);border:1px solid rgb(230 224 208 / .16);border-radius:3px;color:var(--panel);font:700 .86rem/1.05 var(--display);letter-spacing:.06em;text-transform:uppercase;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.cable .plug{width:14px;height:22px;border-radius:3px 3px 6px 6px;background:linear-gradient(var(--panel) 0 30%,#8b877d 30% 38%,var(--panel-2) 38%);box-shadow:0 -6px 0 -4px var(--panel-2)}
.cable.is-sel{border-color:var(--amber);box-shadow:0 0 0 2px rgb(255 176 31 / .35);color:var(--amber)}
.cable.is-used{opacity:1;cursor:default;color:var(--panel-2);border-color:var(--wc,var(--hair));background:var(--desk)}
.cable.is-used .plug{opacity:.5}
.pb.is-drag .cable{cursor:grabbing}
.pb-jacks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem}
.jack{position:relative;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.55rem .25rem .6rem;background:var(--desk);border:1px solid var(--hair);border-radius:3px;color:var(--panel);cursor:pointer;font:inherit}
.jack .jn{font:600 .7rem/1 var(--display);letter-spacing:.16em;color:var(--panel-2)}
.jack .led{width:8px;height:8px;border-radius:50%;background:var(--amber-off)}
.jack .tape{display:block;width:100%;background:var(--panel);color:var(--desk);font:800 .84rem/1 var(--display);text-transform:uppercase;letter-spacing:.03em;padding:.32rem .15rem .28rem;transform:rotate(-1.2deg);border-radius:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jack .hole{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,var(--desk-lo) 0 34%,#3a3b3e 36% 62%,var(--desk-hi) 64%);box-shadow:0 0 0 2px var(--hair)}
.jack .got{min-height:1em;font:600 .68rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--go)}
.pb.has-sel .jack:not(.is-on){border-color:rgb(255 176 31 / .35)}
.jack.is-hover{border-color:var(--amber);background:var(--desk-hi)}
.jack.is-on{border-color:rgb(127 214 107 / .5);cursor:default}
.jack.is-on .led{background:var(--go);box-shadow:0 0 8px rgb(127 214 107 / .7)}
.jack.is-on .hole{background:radial-gradient(circle,var(--panel) 0 30%,#8b877d 32% 40%,var(--desk-hi) 42%)}
.jack.is-bad{border-color:var(--hot)}
.jack.is-bad .led{background:var(--hot)}
.pb-wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;display:none}
.pb.is-drag .pb-wire{display:block}
.pb-wire path{fill:none;stroke:var(--amber);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 2px 0 #0b0b0c)}
.pb-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pb-wires path{fill:none;stroke-width:4;stroke-linecap:round;opacity:.92}
.pb-wires path.sh{stroke:#0b0b0c;stroke-width:8;opacity:.85}
.pb-wires circle{stroke:#0b0b0c;stroke-width:2}
.pb-wire circle{fill:var(--amber);stroke:var(--desk-lo);stroke-width:3}

/* Level 2: monitor mixes */
.mon{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;background:var(--well);border:1px solid var(--hair);border-radius:4px;padding:.8rem}
.mon-p{background:var(--desk);border:1px solid var(--hair);border-radius:3px;padding:.7rem .7rem .55rem}
.mon-p.is-ok{border-color:rgb(127 214 107 / .55)}
.mon-top{display:flex;align-items:center;gap:.8rem}
.mon-who{display:flex;flex-direction:column;align-items:center;gap:.3rem;flex:none;color:var(--panel-2)}
.mon-who svg{width:38px;height:25px}
.mon-p.is-ok .mon-who{color:var(--go)}
.mon-who .tape{background:var(--panel);color:var(--desk);font:800 .78rem/1 var(--display);text-transform:uppercase;letter-spacing:.04em;padding:.3rem .45rem .26rem;transform:rotate(-1.2deg);border-radius:1px}
.mon-say{position:relative;flex:1;margin:0;padding:.5rem .7rem;background:var(--panel);color:var(--desk);border-radius:10px;font:700 .95rem/1.15 var(--display);letter-spacing:.02em}
.mon-say::before{content:"";position:absolute;left:-7px;top:50%;margin-top:-7px;border:7px solid transparent;border-left:0;border-right-color:var(--panel)}
.mon-ok{display:none;align-items:center;gap:.35rem}
.mon-ok svg{width:18px;height:18px}
.mon-p.is-ok .mon-say{background:var(--go)}
.mon-p.is-ok .mon-say::before{border-right-color:var(--go)}
.mon-p.is-ok .mon-q{display:none}
.mon-p.is-ok .mon-ok{display:inline-flex}
.mon-sends{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.3rem;margin-top:.7rem}
.snd{--v:.5;--s:.5;display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.4rem 0 .35rem;border:1px solid transparent;border-radius:3px;cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none}
.snd:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.snd .sl{font:700 .7rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--panel-2)}
.snd .st{position:relative;width:6px;height:84px;margin:9px 0;background:var(--desk-lo);border-radius:3px;box-shadow:0 0 0 1px var(--hair)}
.snd .s0{position:absolute;left:-11px;right:-11px;bottom:calc(var(--s) * 100%);height:2px;margin-bottom:-1px;background:var(--amber-off)}
.snd .cap{position:absolute;left:50%;bottom:calc(var(--v) * 100%);width:30px;height:18px;margin:0 0 -9px -15px;background:var(--desk-hi);border:1px solid rgb(230 224 208 / .25);border-radius:3px}
.snd .cap::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:2px;margin-top:-1px;background:var(--panel)}
.snd.is-moved .cap{border-color:rgb(255 176 31 / .6)}
.snd .sv{font:700 .78rem/1 var(--display);color:var(--panel)}

/* Level 3: mix */
.mx{background:var(--well);border:1px solid var(--hair);border-radius:4px;padding:.9rem}
.mx-strips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.mx-ch{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:.8rem .4rem;background:var(--desk);border:1px solid var(--hair);border-radius:3px}
.mx-ch .tape{background:var(--panel);color:var(--desk);font:800 1rem/1 var(--display);text-transform:uppercase;letter-spacing:.04em;padding:.36rem .6rem .3rem;transform:rotate(-1.2deg);border-radius:1px}
.mx-ch.is-ok{border-color:rgb(127 214 107 / .5)}
.mx-body{display:flex;align-items:stretch;gap:1.1rem;height:200px}
.mx-meter{position:relative;display:flex;flex-direction:column-reverse;gap:3px;width:16px;margin:15px 0}
.mx-meter i{flex:1;background:var(--amber-off);border-radius:1px}
.mx-meter i.lit{background:var(--amber)}
.mx-meter i.go{background:var(--go)}
.mx-meter .zone{position:absolute;left:-6px;right:-6px;border:1px solid var(--go);border-radius:2px;background:rgb(127 214 107 / .12);pointer-events:none}
.mx-fader{--v:0;position:relative;width:48px;cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:3px}
.mx-fader .track{position:absolute;left:50%;top:15px;bottom:15px;width:6px;margin-left:-3px;background:var(--desk-lo);border-radius:3px;box-shadow:0 0 0 1px var(--hair)}
.mx-fader .cap{position:absolute;left:50%;bottom:calc(var(--v) * (100% - 30px));width:40px;height:30px;margin-left:-20px;background:var(--desk-hi);border:1px solid rgb(230 224 208 / .25);border-radius:3px}
.mx-fader .cap::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;margin-top:-1px;background:var(--panel)}
.mx-st{font:700 .74rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--panel-2)}
.mx-ch.is-ok .mx-st{color:var(--go)}
.mx-hold{position:relative;margin-top:.8rem;height:28px;border:1px solid var(--hair);border-radius:2px;overflow:hidden;display:flex;align-items:center;padding:0 .7rem}
.mx-hold i{position:absolute;left:0;top:0;bottom:0;width:0;background:rgb(127 214 107 / .28)}
.mx-hold.is-holding i{width:100%;transition:width 1s linear}
.mx-hold .lbl{position:relative}

/* Reveal */
.gate-score{margin:0 0 1rem;font:700 1rem/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--go)}
.gate-card{margin:0 0 1.2rem;border-top:1px solid var(--hair)}
.gate-card div{display:grid;grid-template-columns:6rem minmax(0,1fr);gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--hair)}
.gate-card dt{font:600 .78rem/1.6 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--panel-2)}
.gate-card dd{margin:0;font-size:1.05rem;overflow-wrap:anywhere}
.gate-acts{display:flex;flex-wrap:wrap;gap:.6rem;margin:0}
.gate-acts .btn{cursor:pointer;background-color:transparent}
.gate-acts .btn.amber{background:var(--amber)}
.gate-copied{min-height:1.4em;margin:.6rem 0 .4rem;font-size:.82rem;color:var(--go)}
.gate-again{display:flex;flex-wrap:wrap;gap:.6rem;margin:0}

/* Touch: buttons answer the first tap (no double-tap-zoom wait), and hover looks only apply to real hover pointers
   so a tap never leaves a sticky hover state behind. */
.gate-x,.gate .more,.gate-acts .btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (hover:hover){
  .gate-x:hover{border-color:rgb(255 176 31 / .55)}
  .cable:not(.is-used):not(.is-sel):hover{border-color:rgb(255 176 31 / .55)}
  .jack:hover:not(.is-on){border-color:var(--amber);background:var(--desk-hi)}
  .snd:hover{border-color:rgb(255 176 31 / .4)}
}
@media (hover:none){
  .gate .more:hover{border-color:var(--hair)}
  .gate-acts .btn:hover{border-color:var(--panel-2)}
  .gate-acts .btn.amber:hover{background:var(--amber);border-color:var(--amber)}
}
@media (prefers-reduced-motion:reduce){
  .is-shake{animation:none}
  .mx-hold.is-holding i{transition:none}
}
@media (max-width:720px){
  .gate{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;margin:0;border-radius:0;border:0;padding:1rem 1rem 1.25rem}
  .gate-steps li{padding:.35rem .5rem;font-size:.68rem}
  .pb-cables,.pb-jacks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cable{min-height:62px;font-size:.82rem}
  .mon{grid-template-columns:minmax(0,1fr);padding:.6rem}
  .snd .st{height:72px}
  .mx-body{height:170px;gap:.7rem}
  .mx-fader{width:44px}
  .gate-acts .btn{flex:1 1 calc(33% - .6rem);justify-content:center}
  .gate-acts [data-copy]{flex-basis:100%}
}