/* The set-the-controls compression exercises (ex/compmatch.js): Space's console (space.css on
   claude/space-module-adf6c8), its faces copied here until that branch is on main, and the scope glass's
   canvas. Transport, keys, feedback, results, level chips and reward moments come from app.css. */
.comp-match [hidden] { display:none !important; }
/* The shell's channel meters must not show the reference's hits before a check. */
.comp-match:not(.cm-revealed) #lvl { visibility:hidden; }
.comp-match .eqt__bar { flex-wrap:wrap; }
.comp-match .eqt__io { margin-left:auto; }
.comp-match .eqt__stat b { overflow-wrap:anywhere; }
.comp-match #signal-led { background:var(--ink-faint); box-shadow:none; }
.comp-match.live #signal-led { background:var(--signal); box-shadow:0 0 8px var(--signal); }
.match-workbench { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0; margin:24px 0 0; padding:20px; border-radius:10px; border:1px solid #080605; position:relative;
 background:linear-gradient(180deg,#1d1915,#0f0c0a); box-shadow:inset 0 1px 0 rgba(255,236,210,.08),0 12px 24px -18px #000; }
.match-workbench::before,.match-workbench::after { content:''; width:5px; height:5px; border-radius:50%; background:linear-gradient(135deg,#42382b 42%,#080705 45% 55%,#42382b 58%); box-shadow:0 1px 1px #000; position:absolute; top:7px; }
.match-workbench::before { left:8px; } .match-workbench::after { right:8px; }
.console-display { min-width:0; align-self:center; padding-right:24px; }
.scope-glass { position:relative; overflow:hidden; border:1px solid #060a08; border-radius:5px; padding:14px 16px 12px; background:radial-gradient(ellipse at 50% 45%,#101e19,#080e0b 75%); box-shadow:inset 0 2px 8px #000,0 1px 0 rgba(255,236,210,.07); }
.scope-glass::after { content:''; pointer-events:none; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,rgba(199,255,225,.025),transparent 40%),repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.08) 3px 4px); }
.scope-caption { display:flex; justify-content:space-between; gap:10px; color:#96b5a6; font:400 10px/1.5 'Space Mono',monospace; letter-spacing:.1em; }
.scope-caption--bottom { color:#8ca99a; font-size:9px; margin-top:10px; }
.console-controls { display:flex; gap:0; align-items:stretch; border-left:1px solid rgba(0,0,0,.7); box-shadow:-1px 0 0 rgba(255,236,210,.04); padding-left:16px; }
.console-channel { width:140px; display:flex; flex-direction:column; align-items:center; gap:12px; padding:12px 10px; justify-content:center; }
.console-channel .strip__ch { font-size:9px; text-transform:uppercase; color:var(--ink-dim); letter-spacing:.1em; }
.console-channel .lcd { max-width:110px; padding:8px 4px; text-transform:none; }
.console-channel .strip__read { font-size:17px; line-height:1.3; }
.console-pot { position:relative; width:112px; height:112px; margin:3px 0; touch-action:none; cursor:ns-resize; }
.pot-ticks { position:absolute; inset:0; border-radius:50%; background:repeating-conic-gradient(from -138deg,rgba(241,219,181,.45) 0deg 1deg,transparent 1deg 27deg); mask:radial-gradient(circle,transparent 0 66%,#000 67% 70%,transparent 71%),conic-gradient(from 225deg,#000 0 270deg,transparent 270deg); mask-composite:intersect; }
.pot-body { position:absolute; inset:16px; border-radius:50%; transform:rotate(var(--angle,0deg)); background:radial-gradient(circle at 40% 30%,#4d463d,#28231d 65%,#13100d 70%); border:1px solid #070504; box-shadow:0 3px 0 2px #070605,0 7px 10px 2px rgba(0,0,0,.65),inset 0 1px 1px rgba(255,236,210,.25); }
.pot-body::before { content:''; position:absolute; inset:5px; border-radius:50%; background:radial-gradient(circle at 45% 30%,#3c372f,#201c17); border:1px solid rgba(255,236,210,.09); box-shadow:inset 0 0 0 3px rgba(0,0,0,.15); }
.pot-pointer { position:absolute; z-index:1; top:7px; left:calc(50% - 1.5px); width:3px; height:19px; background:#eee2c9; border-radius:1px; box-shadow:0 0 4px rgba(255,236,210,.25); }
.console-pot:focus-within .pot-body,.console-pot.is-drag .pot-body { outline:2px solid rgba(var(--signal-rgb),.65); outline-offset:5px; }
.console-pot:focus-within .pot-pointer,.console-pot.is-drag .pot-pointer { background:var(--signal); box-shadow:0 0 7px var(--signal); }
/* the face takes the pointer (compmatch/controls.js); the input under it keeps the keyboard and screen readers */
.console-controls input[type=range] { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; pointer-events:none; }
.console-controls [data-control] { touch-action:none; }
.console-controls [data-control].disabled { opacity:.4; cursor:default; }
.console-scale { display:flex; justify-content:space-between; width:100%; color:var(--ink-dim); font:10px/1 'Space Mono',monospace; }
.console-fader { height:112px; width:100px; margin:14px 0; }
.console-fader .fader__cap { pointer-events:none; }
.console-fader:focus-within .fader__cap { box-shadow:0 0 0 2px rgba(var(--signal-rgb),.65),0 8px 12px -4px #000; }
.console-channel--fader .console-scale { visibility:hidden; }
.console-fader .fader__scale { color:var(--ink-dim); }
.console-fader .fader__scale i { right:22px; }
.match-fixed { font:9px/1.5 'Space Mono',monospace; color:var(--ink-faint); margin:0; min-height:27px; max-width:110px; text-align:center; }
.control-hint { margin:12px 0 18px; font:11px/1.7 'Space Mono',monospace; color:var(--ink-dim); }
.match-listen-hint { min-height:18px; color:var(--ink-faint); font-size:12px; margin:12px 0 0; }
.match-reset { margin-left:auto; align-self:center; }
.match-values { font-family:'Space Mono',monospace; font-size:11px!important; color:var(--level)!important; }
.match-teaching { flex-basis:100%; grid-column:1 / -1; width:100%; }
.match-teaching .bank { flex-wrap:wrap; }
.comp-match .eqt__help { margin-top:14px; }
.comp-match .eqt__result { border-top:1px solid var(--line-soft); }
.comp-match .about__next { display:flex; flex-wrap:wrap; gap:12px 24px; }
@media(max-width:740px) { .match-workbench { grid-template-columns:1fr; padding:16px; } .console-display { padding:0; } .console-controls { justify-content:center; margin-top:20px; padding:18px 0 0; border-left:0; box-shadow:none; border-top:1px solid var(--line-soft); } .console-channel { width:160px; } .console-channel .lcd { max-width:110px; } }
@media(max-width:480px) { .comp-match .eqt__id { display:none; } .comp-match .eqt__nm { font-size:1rem; } .match-workbench { padding:12px; } .scope-glass { padding:12px 10px; } .scope-caption { font-size:9px; letter-spacing:.02em; } .scope-caption--bottom { font-size:8px; letter-spacing:0; flex-wrap:wrap; } .console-channel { width:120px; padding:0 5px; } .comp-match .key { padding:0 10px; font-size:12px; gap:7px; } .comp-match .match-reset { min-height:38px; font-size:11px; padding:0 10px; margin-left:0; } .match-teaching .bank { display:grid; grid-template-columns:1fr 1fr; width:100%; } .match-teaching .key { white-space:normal; height:auto; min-height:46px; } }
.comp-match .rst__act:has(> #feedback[hidden]) { display:flex; }
.comp-match .rst__act > .match-teaching { grid-column:1 / -1; }
.comp-match .rst__act > #feedback { max-width:100%; }
@media(prefers-reduced-motion:reduce) { .comp-match .eqt__result.show,.comp-match .eqt__help.show { animation:none; } }
@media(max-width:600px) {
  .comp-match #transport { display:grid; grid-template-columns:50px minmax(0,1fr); gap:10px; }
  .comp-match #transport > .bank { width:100%; }
  .comp-match #transport > .bank .key { white-space:normal; line-height:1.2; min-height:44px; height:auto; padding:8px 6px; }
  .comp-match #transport .match-reset { grid-column:2; justify-self:end; margin:0; }
}

/* Keep the teaching and completion moments on the same shared panel rhythm. */
.comp-match .match-teaching { border-top:1px solid var(--line-soft); padding-top:16px; }
.comp-match #btn-help[aria-expanded=true] { color:var(--level); border-color:rgba(var(--level-rgb),.45); }
.comp-match .eqt__result .eqt__transport { justify-content:center; }
.comp-match .console-channel + .console-channel { box-shadow:inset 1px 0 0 rgba(0,0,0,.55),inset 2px 0 0 rgba(255,236,210,.04); }
.comp-match .console-channel:has(input:disabled) .match-fixed { color:var(--level); }
.comp-match .match-values { line-height:1.8; }
@media(max-width:740px) { .comp-match .console-controls { align-items:stretch; } }

/* Listen first (compmatch/support.js): Identify's listening-practice panel, its styles as app.css has them on
   claude/identify-curriculum (drop these once that's on main). While it's up the console plays the labelled setting;
   the comparison keys, Reset and Check wait for the level. */
.identify-support{padding:24px;margin:20px 0}
.identify-support[hidden]{display:none}
.identify-support h3{font:800 24px/1.15 'Saira Condensed','Saira Fallback',sans-serif;text-transform:uppercase;margin:0 0 12px}
.identify-support p{line-height:1.6}
.identify-support__sounds,.identify-support__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.identify-support__status{min-height:2em;color:var(--ink-dim)}
.identify-support__sounds .tbtn[aria-pressed=true]{border-color:rgba(var(--signal-rgb),.6);color:var(--signal)}
.cm-listening .rst__listen .bank,.cm-listening #btn-reset,.cm-listening #heard,.cm-listening .control-hint{display:none}
.comp-match #cm-post{margin-top:14px}




/* the scope glass: one canvas the exercise draws on (compmatch/views.js) */
#cm-view { display:block; width:100%; height:230px; }
.cm-fixed { margin:10px 0 0; font:10px/1.6 'Space Mono',monospace; color:var(--ink-dim); letter-spacing:.04em; }
.comp-match .console-channel { width:118px; }
.comp-match[data-drill=match] .console-channel--fader .console-fader,.comp-match[data-drill=parallel] .console-channel--fader .console-fader { height:132px; }
@media(max-width:740px) { .comp-match .console-channel { width:auto; flex:1; min-width:0; } }
/* phones: the channels share the console's width; pots and faders shrink to fit, captions wrap */
@media(max-width:520px) {
  .comp-match .console-controls { flex-wrap:wrap; justify-content:center; padding-left:0; }
  .comp-match .console-channel { width:33.3%; flex:0 0 33.3%; min-width:0; padding:6px 2px; gap:8px; }
  .comp-match[data-drill=shape] .console-channel,.comp-match[data-drill=parallel] .console-channel { width:50%; flex:0 0 50%; }
  .comp-match .console-pot { width:84px; height:84px; }
  .comp-match .pot-body { inset:12px; }
  .comp-match .console-fader { width:72px; height:110px; }
  .comp-match .console-channel .lcd { max-width:100%; padding:6px 2px; }
  .comp-match .console-channel .strip__read { font-size:14px; }
  .comp-match .console-scale { font-size:9px; }
  .comp-match .scope-caption { flex-wrap:wrap; }
  #cm-view { height:210px; }
}