/* Two guitar bodies, one accessible playing surface.
   Colours come from style.css tokens. The wood, the fret wire and the strings
   are physical materials rather than UI, so they get their own tokens here —
   defined light-first, then overridden for both dark paths. */
:root{
  --fretboard:#302b29;
  --fret-wire:#b5b0aa;
  --neck-edge:#bcb2a5;
  --nut:#eee8dc;
  --fret-ink:#ffffff;
  --string-high:#d4d4d8;
  --string-low:#71717a;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fretboard:#1f1b1a;
    --fret-wire:#6b655e;
    --neck-edge:#4a443d;
    --nut:#8a8378;
    --fret-ink:#ffffff;
    --string-high:#a1a1aa;
    --string-low:#52525b;
  }
}
:root[data-theme="dark"]{
  --fretboard:#1f1b1a;
  --fret-wire:#6b655e;
  --neck-edge:#4a443d;
  --nut:#8a8378;
  --fret-ink:#ffffff;
  --string-high:#a1a1aa;
  --string-low:#52525b;
}

.guitar-controls{padding:12px 18px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:18px;flex-wrap:wrap;flex:0 0 auto}
.guitar-models{display:flex;gap:8px}
.guitar-models button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1px solid var(--border);border-radius:9px;padding:7px 11px;background:var(--surface-2);font-size:12px;font-weight:600}
.guitar-models button small{font-size:10px;color:var(--muted);font-weight:400}
.guitar-models button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.guitar-chords{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0}
.guitar-chords button{min-width:40px;min-height:32px;background:var(--surface);border:1px solid var(--border);border-radius:7px;font-size:12px}
.guitar-chords button[aria-pressed=true]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.guitar-chords kbd{margin-left:5px;font-size:10px;color:var(--faint)}
.guitar-chords label{font-size:11px;margin-left:auto;display:flex;gap:7px;align-items:center;color:var(--muted)}
.guitar-chords select{font-size:11px}

/* The stage keeps the app's fixed-height contract: no min-height in pixels,
   so a short viewport shrinks the guitar instead of scrolling the page. */
.stage.guitar{aspect-ratio:1.55;background:var(--surface)}
.guitar .pads{position:absolute;inset:0}
.guitar-readout{position:absolute;top:3%;left:4%;right:4%;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;z-index:4}
.guitar-readout strong{font-size:clamp(20px,2.4vw,30px);font-weight:500;letter-spacing:-1px}
.guitar-readout span{font-size:clamp(10px,1vw,13px);color:var(--muted);line-height:1.6;display:block}
.guitar-readout .guitar-tracking{text-align:right;max-width:34%;padding-top:4px}

/* "Four chords, any song": a status strip above the strings. Purely a
   readout (pointer-events:none) — the pinch targets stay in .guitar-air-chords
   below the neck so this never competes for a click or a strum gesture. */
.guitar-chord-strip{position:absolute;top:14%;left:4%;right:4%;display:flex;align-items:center;gap:14px;z-index:4;pointer-events:none}
.guitar-finger-count{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);min-width:1.4em;text-align:center;border:1px solid var(--border);border-radius:6px;padding:2px 5px;background:var(--surface)}
.guitar-chord-strip-boxes{display:flex;gap:6px;flex:1 1 auto;min-width:0}
.guitar-chord-strip .chord-box{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);border:1px solid var(--border);border-radius:7px;padding:3px 8px;background:var(--surface)}
.guitar-chord-strip .chord-box b{font-size:10px;color:var(--faint);font-weight:600}
.guitar-chord-strip .chord-box-capo{font-size:9px;color:var(--accent);font-weight:600}
.guitar-chord-strip .chord-box.current{color:var(--ink);border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.guitar-chord-strip-name{font-size:clamp(24px,3.4vw,40px);font-weight:500;letter-spacing:-1px;margin-left:auto;flex:0 0 auto}
@media(max-width:600px){
  .guitar-chord-strip{top:12%;gap:8px}
  .guitar-chord-strip-boxes{gap:4px}
  .guitar-chord-strip .chord-box{font-size:10px;padding:2px 6px}
  .guitar-chord-strip-name{font-size:clamp(18px,5vw,28px)}
}
.guitar-scene{position:absolute;left:0;right:0;top:22%;height:60%;isolation:isolate}
.guitar-body{position:absolute;width:43%;height:100%;right:0;top:0;object-fit:contain;pointer-events:none;user-select:none;z-index:0}
.guitar-neck{position:absolute;left:8%;width:59%;top:35%;height:30%;background:var(--fretboard);border:2px solid var(--neck-edge);border-left:5px solid var(--nut);border-radius:2px;box-shadow:0 5px 10px color-mix(in srgb,var(--ink) 8%,transparent);z-index:1}
.guitar-frets{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));position:absolute;inset:0;z-index:3;touch-action:none}
.guitar-fret{position:relative;border:0;border-right:2px solid var(--fret-wire);background:transparent;border-radius:0;padding:0;min-width:0;color:var(--fret-ink);touch-action:none;isolation:isolate}
.guitar-fret[data-fret="0"]{border-right-color:var(--nut)}
.guitar-fret::after{content:'';position:absolute;width:clamp(10px,1.4vw,18px);height:clamp(10px,1.4vw,18px);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:transparent;z-index:-1}
.guitar-fret.chosen::after{background:var(--accent);box-shadow:0 0 0 1px var(--surface)}
.guitar-fret span{font-size:11px;line-height:1;position:relative;visibility:hidden}
.guitar-fret.chosen span{visibility:visible}
.guitar-fret.lesson-target{outline:2px solid var(--accent-border);outline-offset:-2px;background:var(--accent-soft)}
.guitar-fret.active::after,.guitar-fret.demo-playing::after{background:var(--surface);box-shadow:0 0 0 3px var(--accent)}
.guitar-fret.active span,.guitar-fret.demo-playing span{color:var(--ink);visibility:visible}
.guitar-fret.lesson-dim{opacity:.7}
.guitar-fret-numbers{position:absolute;left:0;right:0;top:-24px;display:grid;grid-template-columns:repeat(13,minmax(0,1fr));text-align:center;font-size:11px;color:var(--muted)}
/* One fret-column wide, positioned by JS (capoBarStyle in guitar-ui.mjs) to
   match the same 13-column grid guitar-frets uses. z-index 2 sits behind the
   fret markers (z-index 3, above) but in front of the plain fretboard. */
.guitar-capo-bar{position:absolute;top:-4%;bottom:-4%;border-radius:5px;background:var(--ink);box-shadow:0 2px 5px color-mix(in srgb,var(--ink) 35%,transparent);z-index:2}
.guitar-capo-bar::after{content:'';position:absolute;right:-5px;top:50%;width:9px;height:15px;transform:translateY(-50%);border-radius:3px;background:var(--ink)}
.guitar-string-lines{position:absolute;left:8%;right:12%;top:35%;height:30%;z-index:2;pointer-events:none;display:grid;grid-template-rows:repeat(6,1fr)}
.guitar-string-lines i{display:block;align-self:center;height:var(--thickness);background:linear-gradient(var(--string-high),var(--string-low));box-shadow:0 1px 1px color-mix(in srgb,var(--ink) 33%,transparent);transform-origin:left center}
.guitar-string-lines i.ringing{background:var(--accent);animation:guitar-string-ring .35s ease-out}
@keyframes guitar-string-ring{0%,100%{transform:translateY(0)}20%,60%{transform:translateY(2px)}40%,80%{transform:translateY(-2px)}}
.guitar-string-labels{position:absolute;left:1%;width:6%;top:35%;height:30%;display:grid;grid-template-rows:repeat(6,1fr);z-index:4}
.guitar-string-labels button{padding:0;border:0;background:transparent;font-size:11px;color:var(--muted);text-align:center;line-height:1}
.guitar-pick-zone{position:absolute;left:68%;width:20%;top:29%;height:43%;z-index:5;touch-action:none;cursor:crosshair;border-radius:12px}
.guitar-pick-zone:focus-visible{outline:2px solid var(--accent)}
.guitar-pick-zone::after{content:'STRUM HERE';position:absolute;top:100%;left:0;right:0;text-align:center;font-size:10px;color:var(--muted);letter-spacing:.06em;white-space:nowrap;padding-top:10px}
.guitar-pick-marker{position:absolute;width:12px;height:12px;border:2px solid var(--accent);background:var(--surface);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:6}
.guitar-air-chords{position:absolute;bottom:5%;left:4%;display:flex;align-items:center;gap:6px;z-index:5}
.guitar-air-chords>span{font-size:10px;letter-spacing:.05em;color:var(--muted);margin-right:3px}
.guitar-air-chords button{min-height:30px;min-width:40px;border:1px solid var(--border);border-radius:7px;background:var(--surface);font-size:12px}
.guitar-air-chords button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

#guitar-extra{flex:0 0 auto;background:var(--surface)}
.guitar-playing-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:8px 18px 0}
.guitar-playing-actions>div{display:flex;gap:7px;flex-wrap:wrap}
.guitar-playing-actions button{background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:7px 11px;min-height:32px;font-size:12px}
.guitar-playing-actions button:first-child{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.guitar-playing-actions kbd{font-size:10px;opacity:.65;margin-left:6px}
.guitar-settings{padding:6px 18px 12px;font-size:12px}
.guitar-settings summary{cursor:pointer;width:fit-content;color:var(--muted);padding:5px 0}
.guitar-settings-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:12px 0 0}
.guitar-settings-grid label{font-size:11px;line-height:1.5;color:var(--muted);min-width:0}
.guitar-settings-grid select{display:block;width:100%;font-size:11px;margin-top:6px}
.guitar-settings-grid .check{align-self:center;white-space:normal}
.guitar-settings-note{font-size:11px;margin:12px 0 0}

.guitar.left-handed .guitar-scene{transform:scaleX(-1)}
.guitar.left-handed .guitar-fret span,.guitar.left-handed .guitar-fret-numbers span,.guitar.left-handed .guitar-string-labels button{transform:scaleX(-1)}
.guitar.left-handed .guitar-pick-zone::after{transform:scaleX(-1)}
.guitar.hide-labels .guitar-fret span,.guitar.hide-labels .guitar-fret-numbers{visibility:hidden}
.guitar .stage-caption{font-size:9px}
.guitar-frets.six-frets,.guitar-fret-numbers.six-frets{grid-template-columns:repeat(6,minmax(0,1fr))}
.guitar.readable-labels .guitar-neck{height:42%;top:29%}
.guitar.readable-labels .guitar-string-lines,.guitar.readable-labels .guitar-string-labels{height:42%;top:29%}
.guitar.readable-labels .guitar-fret:not(.chosen) span{visibility:visible;font-size:11px;opacity:.85}

@media(max-width:1100px){
  .guitar-neck{height:36%;top:32%}
  .guitar-string-lines,.guitar-string-labels{height:36%;top:32%}
  .guitar-settings-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .guitar-controls{padding:10px 12px;gap:10px}
  .guitar-models button{padding:6px 9px;font-size:11px}
  .guitar-chords label{margin-left:0}
  .guitar-readout .guitar-tracking{max-width:42%}
  .guitar-neck{left:9%;width:57%;height:43%;top:28%}
  .guitar-string-lines{left:9%;height:43%;top:28%}
  .guitar-string-labels{height:43%;top:28%;width:7%}
  .guitar-body{width:44%;height:90%;top:5%}
  .guitar-pick-zone{top:23%;height:54%}
  .guitar-playing-actions{padding:8px 12px 0}
  .guitar-playing-actions kbd{display:none}
  .guitar-settings{padding:6px 12px 12px}
  .guitar-settings-grid{grid-template-columns:1fr 1fr}
  .guitar-chords kbd{display:none}
}
@media(prefers-reduced-motion:reduce){.guitar-string-lines i.ringing{animation:none}}