/* Journey page. Colours come from the site tokens in styles.css / site-theme.css. */
.journey-page{padding-bottom:40px}
.journey-hero{max-width:820px}
.journey-page b{color:var(--ink)}
.journey-page a:not(.j-chip):not(.hear-button){text-decoration:underline;text-underline-offset:3px}
.scale-subnav a,.roadmap a{text-decoration:none!important}

/* quiz */
.quiz{padding:24px;border:1px solid var(--line);background:var(--white);margin:6px 0 40px}
.quiz-progress{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.quiz-progress button{border:1px solid var(--line);background:transparent;color:var(--muted);font:12px var(--mono);padding:6px 10px;cursor:pointer;text-transform:capitalize}
.quiz-progress button b{color:var(--coral);margin-right:6px}
.quiz-progress button.is-current{border-color:var(--ink);color:var(--ink)}
.quiz-progress button.is-done:not(.is-current){border-color:var(--green-dark);color:var(--ink)}
.quiz-progress button:disabled{opacity:.45;cursor:default}
.quiz h2{font:600 clamp(26px,3.4vw,36px) var(--serif);margin:0}
.quiz-hint{margin:4px 0 18px;color:var(--muted)}
.quiz-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.quiz-genre{grid-template-columns:repeat(4,minmax(0,1fr))}
.quiz-option{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:14px 16px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;transition:border-color .15s,transform .15s,background .15s}
.quiz-option:hover{border-color:var(--coral);transform:translateY(-2px)}
.quiz-option.is-selected{border-color:var(--green-dark);background:rgba(200,237,92,.14)}
.qo-icon{grid-row:1/3;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:#182019;font:700 20px var(--serif)}
.quiz-option b{font:600 17px var(--serif)}
.quiz-option small{font-size:12.5px;color:var(--muted)}
.quiz-nav{display:flex;justify-content:space-between;margin-top:18px}
.quiz-nav .hear-button{margin:0}
.quiz-nav .hear-button:disabled{opacity:.35;cursor:default}

/* shared */
.j-figure{margin:0;padding:16px;border:1px solid var(--line);background:var(--white);min-width:0}
.j-figure figcaption,.j-caption{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.j-svg{display:block;width:100%;height:auto}
.j-note{margin:0 0 12px;padding:12px 16px;border-left:3px solid var(--green);background:var(--white);font-size:14px;color:var(--muted)}
.scale-toolbar .hear-button{margin:0}

/* 01 sound */
.sound-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px;margin-bottom:12px}
.sound-card{padding:16px 18px;border:1px solid var(--line);background:var(--white)}
.sound-card ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.sound-card li{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px}
.sound-card li>span{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:#182019;font:700 17px var(--serif)}
.sound-card li small{display:block;font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sound-card li b{font:600 16px var(--serif)}
.sound-card li button,.sound-keys button,.arp-chip{border:1px solid var(--line);background:transparent;color:var(--ink);font:11px var(--mono);padding:4px 9px;cursor:pointer}
.sound-card li button:hover,.sound-keys button:hover,.arp-chip:hover{border-color:var(--coral);color:var(--coral)}
.sound-keys{margin:14px 0 0;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sound-keys button.is-selected,.arp-chip.is-selected{background:var(--coral);border-color:var(--coral);color:#fff}
.ms-title{font:10px var(--mono);letter-spacing:.1em;fill:var(--muted)}
.ms-cell rect{fill:transparent;stroke:var(--line);stroke-dasharray:3 3}
.ms-cell text{font:700 13px var(--mono);text-anchor:middle;fill:var(--muted)}
.ms-cell.is-on rect{fill:var(--soft-blue);stroke:var(--line);stroke-dasharray:none}
.ms-cell.is-on text{fill:var(--ink)}
.ms-cell.is-root rect{fill:var(--green);stroke:var(--green)}
.ms-cell.is-root text{fill:#182019}
.ms-cell.is-colour rect{fill:var(--coral);stroke:var(--coral)}
.ms-cell.is-colour text{fill:#fff}
.ms-cell text.ms-note{font:600 13px var(--serif);fill:var(--ink)}

/* 02 chords */
.j-chips{display:flex;flex-wrap:wrap;gap:10px}
.j-chip{width:156px;padding:10px;border:1px solid var(--line);background:var(--white);text-align:center;transition:border-color .15s,background .15s,transform .15s}
.j-chip:hover{border-color:var(--coral)}
.j-chip.is-now{border-color:var(--green-dark);background:rgba(200,237,92,.2);transform:translateY(-3px)}
.j-chip .cd{width:100%;height:auto;display:block}
.j-chip-num{display:block;font:12px var(--mono);color:var(--coral)}
.j-chip b{display:block;font:700 16px var(--mono)}
.j-chip small{font:10px var(--mono);color:var(--muted)}
.alt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.alt-card{padding:14px 16px;border:1px solid var(--line);background:var(--white);display:flex;flex-direction:column}
.alt-card h3{margin:0;font:600 17px var(--serif)}
.alt-card p{margin:6px 0 0;font-size:13px;color:var(--muted);flex:1}
.alt-card .alt-chords{flex:none;font:700 14px var(--mono);color:var(--coral)}
.alt-card .hear-button{align-self:flex-start;margin-top:12px}

/* 03 strum */
.sg-cell rect{fill:var(--paper);stroke:var(--line);transition:fill .08s}
.sg-cell.is-off rect{fill:transparent}
.sg-count{font:700 14px var(--mono);text-anchor:middle;fill:var(--muted)}
.sg-glyph{font:700 30px var(--sans);text-anchor:middle;fill:var(--line)}
.sg-cell.is-D .sg-glyph,.sg-cell.is-U .sg-glyph{fill:var(--ink)}
.sg-cell.is-B .sg-glyph,.sg-cell.is-A .sg-glyph{fill:var(--coral);font-family:var(--mono);font-size:24px}
.sg-cell.is-x .sg-glyph{fill:var(--blue)}
.sg-cell.is-playing rect{fill:var(--green);stroke:var(--green)}
.sg-cell.is-playing .sg-glyph,.sg-cell.is-playing .sg-count{fill:#182019}
.sg-legend{display:block;margin-top:6px;font:11.5px var(--mono);color:var(--muted)}

/* 05 scale */
.where-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.where-grid article{padding:14px 16px;border:1px solid var(--line);background:var(--white)}
.where-grid h3{margin:0 0 4px;font:600 16px var(--serif)}
.where-grid p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.pos-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.pos-card{padding:10px;border:1px solid var(--line);background:var(--white);color:var(--ink);cursor:pointer;text-align:left;transition:border-color .15s}
.pos-card:hover{border-color:var(--coral)}
.pos-card.is-selected{border-color:var(--green-dark);background:rgba(200,237,92,.12)}
.pos-card span{display:block;margin-top:6px;font:12px var(--mono)}
.mb-fret{stroke:var(--line);stroke-width:1}
.mb-fret.is-nut{stroke:var(--ink);stroke-width:3}
.mb-string{stroke:var(--muted);stroke-width:.8}
.mb-dot{fill:var(--ink)}
.mb-dot.is-root{fill:var(--coral)}

/* 06 arps */
.arp-chips{display:flex;flex-wrap:wrap;gap:6px}
.arp-chip{font-size:13px;padding:7px 12px;font-weight:700}
.arp-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.arp-info article{padding:14px 16px;border:1px solid var(--line);background:var(--white);min-width:0}
.arp-info h3{margin:0 0 4px;font:600 16px var(--serif)}
.arp-info p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.arp-info .tab-scroll{margin-top:8px}

/* 07 lead */
#leadTab{padding:6px 0}
#leadBoard{margin-top:0}
.journey-page .neck-scroll{margin-top:10px}

/* 08 roadmap */
.roadmap{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.roadmap li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid var(--line);background:var(--white)}
.roadmap li.is-done{background:rgba(200,237,92,.1);border-color:var(--green-dark)}
.roadmap label{display:flex;align-items:center;gap:12px;cursor:pointer;flex:1}
.roadmap input{width:18px;height:18px;accent-color:var(--green-dark)}
.rm-num{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--coral);color:#fff;font:700 13px var(--mono)}
.roadmap li.is-done .rm-num{background:var(--green);color:#182019}
.roadmap h3{margin:0;font:600 16px var(--serif)}
.roadmap li.is-done h3{text-decoration:line-through;text-decoration-color:var(--green-dark)}
.roadmap p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.roadmap a{font:600 12px var(--sans);white-space:nowrap}
.roadmap a:hover{color:var(--coral)}
.roadmap .roadmap-meter{display:grid;grid-template-columns:auto 1fr;gap:14px}
.meter{height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:var(--green);transition:width .3s}

@media(max-width:900px){
  .quiz-options,.quiz-genre{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sound-grid,.alt-grid,.arp-info{grid-template-columns:1fr}
  .where-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .quiz{padding:16px}
  .quiz-options,.quiz-genre,.where-grid{grid-template-columns:1fr}
  .j-chip{width:calc(50% - 5px)}
}