/* Space adds instruments to the shared console; transport, keys, feedback,
   results, level chips and reward moments come from app.css. */
.space-preview [hidden] { display:none !important; }
.space-note { color:var(--ink-dim); font-size:.85rem; line-height:1.7; margin:16px 0 24px; }
.space-note a { color:var(--signal); }
.space-intro { padding:32px 0 40px; }
.space-intro h1 { font-size:clamp(3.4rem,8vw,6.5rem); line-height:.98; margin:18px 0 24px; }
.space-intro .lede { max-width:650px; }
.space-check { padding:24px 0; max-width:720px; }
.space-check h2 { font-size:1.1rem; margin-bottom:10px; }
.space-check p { color:var(--ink-dim); line-height:1.65; }
/* The shell's channel meters must not reveal the reference's pan/width. */
.space-preview:not(.space-revealed) #lvl { visibility:hidden; }
.space-match .eqt__bar { flex-wrap:wrap; }
.space-match .eqt__io { margin-left:auto; }
.space-match .eqt__stat b { overflow-wrap:break-word; }   /* whole words: "Guitar", never "Guita r" */
.space-match #signal-led { background:var(--ink-faint); box-shadow:none; }
.space-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; }
#width-scope { display:block; width:100%; height:210px; }
.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 (space-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; }
.space-match[data-drill=reverb] .console-pot { 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:10px/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; }
.space-match .eqt__help { margin-top:14px; }
.space-match .eqt__result { border-top:1px solid var(--line-soft); }
.space-match .about__next { display:flex; flex-wrap:wrap; gap:12px 24px; }
.width-stage { position:relative; height:25px; margin:0 12px; }
.width-axis { position:absolute; height:1px; background:#304338; left:0; right:0; top:12px; }
.width-centre { position:absolute; top:27px; left:50%; transform:translateX(-50%); font:9px 'Space Mono',monospace; color:#8ca99a; }
.width-spread,.width-reference { position:absolute; left:50%; transform:translateX(-50%); top:6px; height:13px; border:1px solid rgba(var(--signal-rgb),.6); }
.width-spread { width:66.6667%; display:flex; justify-content:space-between; align-items:center; color:#7cd4b4; background:rgba(var(--signal-rgb),.08); font:9px 'Space Mono',monospace; box-shadow:0 0 8px rgba(var(--signal-rgb),.09); }
.width-spread span { padding:0 3px; } .width-reference { height:23px; top:1px; border-color:var(--level); border-style:dashed; pointer-events:none; }
.width-view .scope-caption--bottom { margin-top:24px; }
.pan-stage { position:relative; height:198px; margin:0 20px; background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#25342c calc(10% - 1px) 10%) center/100% 15px no-repeat; }
.pan-axis { position:absolute; top:95px; left:0; right:0; height:1px; background:#3b5043; }
.pan-axis::after { content:''; position:absolute; left:50%; top:-45px; height:90px; width:1px; background:#3b5043; }
.pan-left,.pan-right,.pan-centre { position:absolute; top:40px; color:#96b5a6; font:10px 'Space Mono',monospace; }
.pan-left { left:0; } .pan-right { right:0; } .pan-centre { left:50%; transform:translateX(-50%); }
.pan-dot,.pan-target { position:absolute; top:82px; transform:translateX(-50%); white-space:nowrap; font:10px 'Space Mono',monospace; text-align:center; }
.pan-dot { left:50%; color:var(--signal); padding-top:37px; }
.pan-dot::before { content:''; position:absolute; top:7px; left:calc(50% - 5px); width:10px; height:10px; border:1px solid #a6ffe5; border-radius:50%; background:var(--signal); box-shadow:0 0 8px var(--signal),0 0 24px rgba(var(--signal-rgb),.25); }
.pan-target { top:160px; color:var(--level); }
.pan-target::before { content:''; position:absolute; top:-67px; left:50%; height:52px; width:1px; background:var(--level); }
.room-view svg { display:block; width:100%; height:198px; }
.room-grid { fill:none; stroke:#25362c; stroke-width:1; }
#tail-shape { fill:rgba(var(--signal-rgb),.07); stroke:#74d5b6; stroke-width:1.5; filter:drop-shadow(0 0 3px rgba(var(--signal-rgb),.25)); }
.room-view text { fill:#96b5a6; font:14px 'Space Mono',monospace; }
@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) { .match-workbench { padding:12px; } .scope-glass { padding:12px 10px; } .scope-caption { font-size:10px; letter-spacing:.02em; } .scope-caption--bottom { font-size:10px; letter-spacing:0; flex-wrap:wrap; } #width-scope { height:180px; } .console-channel { width:120px; padding:0 5px; } .space-match .key { padding:0 10px; font-size:12px; gap:7px; } .space-match .match-reset { min-height:44px; 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; } .pan-stage { margin-inline:10px; height:175px; } .room-view svg { height:170px; } }
.space-match .rst__act:has(> #feedback[hidden]) { display:flex; }
.space-match .rst__act > .match-teaching { grid-column:1 / -1; }
.space-match .rst__act > #feedback { max-width:100%; }
@media(prefers-reduced-motion:reduce) { .space-match .eqt__result.show,.space-match .eqt__help.show { animation:none; } }
@media(max-width:600px) {
  .space-match #transport { display:grid; grid-template-columns:50px minmax(0,1fr); gap:10px; }
  .space-match #transport > .bank { width:100%; }
  .space-match #transport > .bank .key { white-space:normal; line-height:1.2; min-height:44px; height:auto; padding:8px 6px; }
  .space-match #transport .match-reset { grid-column:2; justify-self:end; margin:0; }
}

/* Keep the teaching and completion moments on the same shared panel rhythm. */
.space-match .match-teaching { border-top:1px solid var(--line-soft); padding-top:16px; }
.space-match #btn-help[aria-expanded=true] { color:var(--level); border-color:rgba(var(--level-rgb),.45); }
.space-match .eqt__result .eqt__transport { justify-content:center; }
.space-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); }
.space-match .console-channel:has(input:disabled) .match-fixed { color:var(--level); }
.space-match .match-values { line-height:1.8; }
@media(max-width:740px) { .space-match .console-controls { align-items:stretch; } }

/* Listen first (space-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)}
.space-listening .rst__listen .bank,.space-listening #btn-reset,.space-listening #heard,.space-listening .control-hint{display:none}
.space-match #sp-post{margin-top:14px}

/* Place the Band: the stage, a chip per part (dragged left and right), and the reference's places after a check. The chips
   start in the centre (every pot reads Centre before Start); band.js draw() places them from then on. */
.band-stage { position:relative; height:198px; margin:0 20px; background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#25342c calc(10% - 1px) 10%) center/100% 15px no-repeat; touch-action:none; }
.band-chip { position:absolute; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:4px; cursor:ew-resize; touch-action:none; user-select:none; -webkit-user-select:none; z-index:2; }
.band-chip--0 { top:22px; } .band-chip--1 { top:78px; } .band-chip--2 { top:134px; }
.band-chip i { width:16px; height:16px; border-radius:50%; border:1px solid #a6ffe5; background:var(--signal); box-shadow:0 0 8px var(--signal),0 0 24px rgba(var(--signal-rgb),.25); }
.band-chip b { font:400 10px/1.2 'Space Mono',monospace; color:var(--signal); white-space:nowrap; letter-spacing:.04em; }
.band-chip.is-drag i,.band-chip:hover i { transform:scale(1.2); }
.band-chip[hidden] { display:none; }
.band-ref { position:absolute; top:4px; bottom:4px; transform:translateX(-50%); border-left:1px dashed var(--level); color:var(--level); font:9px 'Space Mono',monospace; padding-left:4px; white-space:nowrap; pointer-events:none; z-index:1; }
.space-match[data-drill=band] .console-channel { width:118px; }
@media(max-width:740px) { .band-stage { margin:0 10px; } .space-match[data-drill=band] .console-channel { width:33%; } }
@media(prefers-reduced-motion:reduce) { .band-chip i { transition:none; } }

/* Front to Back: the room from above, the part's dot (higher is further back), the room around it, the reference after a check */
.depth-view svg { display:block; width:100%; height:198px; }
.depth-room { fill:rgba(var(--signal-rgb),.02); stroke:#2b4237; stroke-width:1; }
.depth-grid { fill:none; stroke:#203329; stroke-width:1; stroke-dasharray:2 4; }
.depth-view text { fill:#8ca99a; font:11px 'Space Mono',monospace; }
.depth-dot { fill:var(--signal); stroke:#a6ffe5; stroke-width:1; filter:drop-shadow(0 0 6px rgba(var(--signal-rgb),.6)); }
.depth-wash { fill:rgba(var(--signal-rgb),.08); stroke:rgba(var(--signal-rgb),.25); stroke-width:1; }
.depth-ref { fill:none; stroke:var(--level); stroke-width:1.5; stroke-dasharray:3 3; }
.depth-band { stroke:#5a7a69; stroke-width:4; stroke-linecap:round; }
.space-match[data-drill=depth] .console-channel { width:112px; }
@media(max-width:740px) { .space-match[data-drill=depth] .console-channel { width:auto; flex:1; min-width:0; } }

/* Echo: one bar of the song's beats, the part's hit and its echoes as taps fading away; the reference's after a check */
.echo-view svg { display:block; width:100%; height:198px; }
.echo-grid { fill:none; stroke:#22362b; stroke-width:1; }
.echo-floor { stroke:#3b5043; stroke-width:1; }
.echo-taps line { stroke:var(--signal); stroke-width:3; stroke-linecap:round; filter:drop-shadow(0 0 4px rgba(var(--signal-rgb),.5)); }
.echo-taps circle { fill:#a6ffe5; }
.echo-ref line { stroke:var(--level); stroke-width:1.5; stroke-dasharray:3 3; }
.echo-ref circle { fill:none; stroke:var(--level); stroke-width:1.5; }
.echo-ref[hidden] { display:none; }
.echo-view text { fill:#8ca99a; font:11px 'Space Mono',monospace; }
.space-match[data-drill=echo] .console-channel { width:112px; }
@media(max-width:740px) { .space-match[data-drill=echo] .console-channel { width:auto; flex:1; min-width:0; } }

/* phones: three or four channels share the console's width; pots and faders shrink to fit, captions wrap */
@media(max-width:520px) {
  .space-match .console-controls { flex-wrap:wrap; justify-content:center; padding-left:0; }
  .space-match[data-drill=band] .console-channel,.space-match[data-drill=depth] .console-channel,.space-match[data-drill=echo] .console-channel { width:33.3%; flex:0 0 33.3%; min-width:0; padding:6px 2px; gap:8px; }
  .space-match[data-drill=depth] .console-channel[hidden],.space-match[data-drill=echo] .console-channel[hidden] { display:none; }
  .space-match .console-pot { width:84px; height:84px; }
  .space-match .pot-body { inset:12px; }
  .space-match .console-fader { width:72px; height:100px; }
  .space-match .console-channel .lcd { max-width:100%; padding:6px 2px; }
  .space-match .console-channel .strip__read { font-size:14px; }
  .space-match .console-scale { font-size:9.5px; padding:0 8px; box-sizing:border-box; }
  .space-match .scope-caption { flex-wrap:wrap; }
}

/* /space: the line under its button that says the module is Pro (space-module.js) */
.space-pro { display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin:16px 0 0; color:var(--ink-dim); font-size:15px; line-height:1.5; }
.space-pro[hidden] { display:none; }