/* Music theory page. Colours come from the site tokens in styles.css / site-theme.css. */
.theory-page{padding-bottom:40px}
.theory-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.theory-hero p{max-width:520px}
.theory-credit{font-size:12.5px;color:var(--muted);border-left:3px solid var(--coral);padding-left:12px;margin-top:14px}
.theory-credit a,.th-note a,.song-try a{text-decoration:underline;text-underline-offset:3px}
.theory-page b{color:var(--ink)}
/* Card headings in the plain sans face: the display serif is hard to read at this size. */
.theory-page .fb-facts h3{font:700 18px/1.3 var(--sans);letter-spacing:0;margin-bottom:6px}

.th-figure{margin:0;padding:16px;border:1px solid var(--line);background:var(--white);min-width:0;display:flex;flex-direction:column}
.th-figure figcaption{margin-top:10px;font-size:13px;line-height:1.55;color:var(--muted)}
.th-figure .hear-button{align-self:flex-start;margin-top:12px}
.th-hero-art{background-color:#202a25;background-image:radial-gradient(#39473f 1px,transparent 1px);background-size:14px 14px}
body[data-theme="light"] .th-hero-art{background-color:#dfe9e4;background-image:radial-gradient(#b9c9c1 1px,transparent 1px)}
.th-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px;align-items:start}
.th-stack{display:grid;gap:12px}
.th-scroll{overflow-x:auto}
.th-toolbar{margin:14px 0 10px}
.th-note{margin:14px 0 0;padding:12px 16px;border-left:3px solid var(--green);background:var(--white);font-size:14px;line-height:1.65;color:var(--muted)}
.th-svg{display:block;width:100%;height:auto}
.th-circle-fig{max-width:560px;margin:14px auto 0}
.th-check{display:flex!important;flex-direction:row!important;align-items:center;gap:6px}
.th-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.th-pair-label{margin:0 0 4px;font:12px var(--mono);color:var(--muted)}
.lg-zone{background:var(--soft-blue);border:1px solid var(--line);border-radius:3px!important}
.lg-chrom{background:var(--blue)}
.lg-end{background:var(--green)}

/* step colours shared by keyboard, ladder and staircase */
.step-T{stroke:var(--ink);fill:var(--ink)}
.step-S{stroke:var(--coral);fill:var(--coral)}
.step-jump{stroke:var(--muted);fill:var(--muted)}
.kb-step{fill:none!important;stroke-width:2}
.kb-step-label,.st-step{font:700 13px var(--mono);text-anchor:middle;stroke:none!important}

/* keyboard: real piano colours in both themes */
.kb-white{fill:#faf8f0;stroke:#3a3f3a;stroke-width:1}
.kb-black{fill:#1f2420;stroke:#1f2420}
.kb-white.is-on,.kb-black.is-on{fill:#c8ed5c}
.kb-white.is-root,.kb-black.is-root{fill:#ec7056}
.kb-label{font:700 11px var(--mono);text-anchor:middle;fill:#20231f}
.kb-on-black{font-size:8px;fill:#eff2e9}
.kb-label.is-root{fill:#fff}
.kb-on-black.is-on{fill:#20231f}

/* A-string ladder */
.ld-string{stroke:var(--muted);stroke-width:2}
.ld-fret{stroke:var(--line);stroke-width:2}
.ld-note{cursor:pointer}
.ld-note circle{fill:var(--line)}
.ld-note text{font:700 10px var(--mono);text-anchor:middle;fill:var(--muted)}
.ld-note.is-natural circle{fill:var(--ink)}
.ld-note.is-natural text{fill:var(--paper)}
.ld-note.is-root circle{fill:var(--coral)}
.ld-note.is-root text{fill:#fff}
.ld-note:hover circle{fill:var(--green)}
.ld-num{font:10px var(--mono);text-anchor:middle;fill:var(--muted)}

/* staircase */
.st-bar{fill:var(--soft-blue);stroke:var(--line)}
.st-bar.is-root{fill:var(--coral);stroke:var(--coral)}
.st-name{font:700 15px var(--serif);text-anchor:middle;fill:var(--ink)}
.st-name.is-root{fill:#fff}
.st-deg{font:11px var(--mono);text-anchor:middle;fill:var(--muted)}
.st-base{stroke:var(--ink);stroke-width:1.5}

/* chord numbers */
.np-cell rect{stroke:var(--line);stroke-width:1}
.np-cell.is-major rect{fill:var(--green)}
.np-cell.is-minor rect{fill:var(--blue)}
.np-cell.is-diminished rect{fill:var(--coral)}
.np-cell.is-base rect{stroke:var(--ink);stroke-width:2}
.np-num{font:700 20px var(--serif);text-anchor:middle;fill:#182019}
.np-q,.np-tone{font:700 11px var(--mono);text-anchor:middle;fill:#182019}
.np-tone{font-size:13px}
.np-title{font:10px var(--mono);letter-spacing:.1em;fill:var(--muted)}
.np-chord{font:700 14px var(--mono);text-anchor:middle;fill:var(--ink)}
.np-numeral{font:600 14px var(--serif);text-anchor:middle;fill:var(--coral)}
.np-foot{font:11px var(--sans);fill:var(--muted)}
.num-table th{text-align:center}
.num-table th small{display:block;font-size:8.5px;opacity:.8}
.num-table td{text-align:center;font:600 13px var(--mono);white-space:nowrap}
.num-table td a:hover{color:var(--coral)}
.num-table td:first-child{text-align:left}
.num-table td button{border:1px solid var(--line);background:transparent;color:var(--ink);font:700 12px var(--mono);padding:4px 8px;cursor:pointer}
.num-table td button:hover{border-color:var(--coral);color:var(--coral)}
.num-table .is-prog{background:rgba(200,237,92,.14)}
.num-table th.is-prog{color:var(--green-dark)}
.num-table tr.is-selected td{background:rgba(236,112,86,.13)}
.num-table tr.is-selected td.is-prog{background:rgba(236,112,86,.28)}
.num-result{margin:14px 0;padding:14px 16px;border:1px solid var(--line);background:var(--white)}
.num-result-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.num-result-head p{margin:0;font:13px var(--mono);color:var(--muted)}
.num-result-head .hear-button{margin:0}
.chord-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.num-chip{width:150px;padding:8px;border:1px solid var(--line);background:var(--paper);text-align:center;transition:border-color .15s,background .15s}
.num-chip span{display:block;font:600 16px var(--serif);color:var(--coral)}
.num-chip b{font:700 13px var(--mono)}
.num-chip:hover,.num-chip.is-playing{border-color:var(--green-dark)}
.num-chip.is-playing{background:rgba(200,237,92,.18)}
.num-chip .cd,.bass-chip .cd,.song-chip .cd,.walk-boxes .cd{width:100%;height:auto;display:block}

/* circle of fifths */
.cf-ring{fill:none;stroke:var(--line);stroke-dasharray:3 4}
.cf-node{cursor:pointer}
.cf-node circle{fill:var(--white);stroke:var(--line);stroke-width:1.5;transition:fill .15s}
.cf-node text{font:700 13px var(--mono);text-anchor:middle;fill:var(--ink);pointer-events:none}
.cf-minor text{font-size:10.5px;fill:var(--muted)}
.cf-node:hover circle{stroke:var(--coral)}
.cf-node.is-home circle{fill:var(--coral);stroke:var(--coral)}
.cf-node.is-home text,.cf-node.is-rel text{fill:#fff}
.cf-node.is-near circle{fill:var(--green);stroke:var(--green)}
.cf-node.is-near text{fill:#182019}
.cf-node.is-minor-near text{fill:var(--ink)}
.cf-node.is-rel circle{fill:var(--blue);stroke:var(--blue)}
.cf-node.is-minor-near circle{fill:var(--soft-blue);stroke:var(--blue)}
.cf-center{font:700 26px var(--serif);text-anchor:middle;fill:var(--ink)}
.cf-center-sub{font:11px var(--mono);text-anchor:middle;fill:var(--muted)}

/* compact bass-zone neck */
.tn{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
.tn-hero{max-width:640px}
.tn-wide{max-width:680px}
.tn-zone{fill:var(--soft-blue);opacity:.75}
.tn-fret{stroke:var(--line);stroke-width:1.5}
.tn-nut{stroke:var(--ink);stroke-width:5}
.tn-inlay{fill:var(--line)}
.tn-string{stroke:var(--muted)}
.tn-name,.tn-num{font:11px var(--mono);fill:var(--muted);text-anchor:middle}
.tn-arrow{fill:none;stroke:var(--coral);stroke-width:2.4;stroke-linecap:round}
.tn-head{fill:var(--coral)}
.tn-pt .tn-dot{fill:var(--ink);transition:fill .12s}
.tn-pt .tn-label{font:700 10px var(--mono);fill:var(--paper);text-anchor:middle;pointer-events:none}
.tn-pt .tn-label.is-long{font-size:8.5px}
.tn-pt.is-start .tn-dot{fill:var(--coral)}
.tn-pt.is-start .tn-label,.tn-pt.is-chrom .tn-label{fill:#fff}
.tn-pt.is-end .tn-dot{fill:var(--green)}
.tn-pt.is-end .tn-label{fill:#182019}
.tn-pt.is-chrom .tn-dot{fill:var(--blue)}
.tn-pt.is-wrong .tn-dot{fill:var(--white);stroke:var(--coral);stroke-width:2;stroke-dasharray:3 2}
.tn-pt.is-wrong .tn-label{fill:var(--coral)}
.tn-pt.is-playing .tn-dot{fill:var(--green)!important;stroke:var(--ink);stroke-width:2}
.tn-pt.is-playing .tn-label{fill:#182019!important}
.tn-order,.tn-tag{font:700 10px var(--mono);text-anchor:middle;fill:var(--ink);paint-order:stroke;stroke:var(--white);stroke-width:4px;stroke-linejoin:round}
.tn-tag{fill:var(--coral);text-anchor:start;font-size:11px}
.th-hero-art .tn-order,.th-hero-art .tn-tag{stroke:#202a25}
body[data-theme="light"] .th-hero-art .tn-order{stroke:#dfe9e4}
.neck-zone{fill:var(--soft-blue);opacity:.8}

/* flow chart */
.fl-box rect{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.fl-box text{font:700 14px var(--sans);text-anchor:middle;fill:var(--ink)}
.fl-box text.fl-small{font:11.5px var(--mono);fill:var(--muted)}
.fl-box.is-scale rect{stroke:var(--green-dark);stroke-width:2.5}
.fl-box.is-chrom rect{stroke:var(--blue);stroke-width:2.5}
.fl-box.is-trim rect{stroke:var(--muted);stroke-width:2.5;stroke-dasharray:5 3}
.fl-box.is-land rect{fill:var(--green);stroke:var(--green)}
.fl-box.is-land text{fill:#182019}
.fl-arrow{stroke:var(--coral);stroke-width:2;fill:none}
.fl-tag rect{fill:var(--coral)}
.fl-tag text{font:700 11px var(--mono);text-anchor:middle;fill:#fff}

/* walk cards */
.walk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
#builderOut .walk-card{max-width:720px}
.walk-card{padding:16px 18px;border:1px solid var(--line);background:var(--white);min-width:0;display:flex;flex-direction:column}
.walk-card>header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.walk-card h3{font:600 24px var(--serif);margin:0}
.walk-card h3 span{color:var(--coral)}
.walk-kind{padding:2px 8px;font:700 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;border-radius:20px;background:var(--green);color:#182019}
.walk-kind.is-chromatic{background:var(--blue);color:#fff}
.walk-kind.is-trimmed{background:var(--line);color:var(--ink)}
.walk-kind.is-direct{background:transparent;border:1px solid var(--line);color:var(--muted)}
.walk-key{margin-left:auto;font:11px var(--mono);color:var(--muted)}
.walk-boxes{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;max-width:340px;margin:10px auto 0}
.walk-arrow{font:600 22px var(--serif);color:var(--coral)}
.walk-neck{margin-top:8px}
.walk-chain{margin:10px 0 0;font:700 16px var(--mono);display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.walk-chain span{padding:3px 9px;border-radius:14px;background:var(--ink);color:var(--paper)}
.walk-chain span.is-start{background:var(--coral);color:#fff}
.walk-chain span.is-end{background:var(--green);color:#182019}
.walk-chain span.is-chrom{background:var(--blue);color:#fff}
.walk-chain i{font:700 10px var(--mono);font-style:normal;padding:0 2px;background:none!important}
.walk-chain i.step-T{color:var(--ink)}
.walk-chain i.step-S{color:var(--coral)}
.walk-chain i.step-jump{color:var(--muted)}
.walk-frets{margin:6px 0 0;font:11px var(--mono);color:var(--muted)}
.walk-card .tab-scroll{margin-top:10px;border:1px solid var(--line);background:var(--paper);padding:4px 0}
.walk-text{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted);flex:1}
.walk-text span{display:block;margin-top:4px;font-size:12.5px}
.walk-card .hear-button{align-self:flex-start;margin-top:12px}

/* bass chips */
.bass-chip{margin:0;width:150px;padding:8px;border:1px solid var(--line);background:var(--white);text-align:center}
.bass-chip figcaption{font:11px var(--mono);color:var(--muted)}
.bass-chip figcaption b{display:block;font-size:13px}
#bassBoxes{margin-bottom:6px}
#bassMap{margin-top:12px}

/* rhythm grids */
.rg-beat{font:700 12px var(--mono);text-anchor:middle;fill:var(--muted)}
.rg-cell rect{stroke:var(--line);transition:fill .1s}
.rg-chord rect{fill:var(--soft-blue)}
.rg-walk rect{fill:var(--ink)}
.rg-land rect{fill:var(--green);stroke:var(--green)}
.rg-main{font:700 15px var(--mono);text-anchor:middle;fill:var(--ink)}
.rg-sub{font:10px var(--mono);text-anchor:middle;fill:var(--muted)}
.rg-walk .rg-main,.rg-walk .rg-sub{fill:var(--paper)}
.rg-land .rg-main,.rg-land .rg-sub{fill:#182019}
.rg-cell.is-playing rect{fill:var(--coral);stroke:var(--coral)}
.rg-cell.is-playing text{fill:#fff}
.rg-bar{stroke:var(--ink);stroke-width:2.5}

/* song */
.song-chips{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.song-chip{width:150px;padding:8px;border:1px solid var(--line);background:var(--white);text-align:center;transition:border-color .15s,background .15s}
.song-chip span{font:600 16px var(--serif);color:var(--coral)}
.song-chip.is-playing{border-color:var(--green-dark);background:rgba(200,237,92,.18)}
.th-tab-box{border:1px solid var(--line);background:var(--white);padding:6px 0}
.song-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.song-links article{padding:12px 14px;border:1px solid var(--line);background:var(--white)}
.song-links h3{margin:0;font:600 16px var(--serif);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.song-links .walk-chain{font-size:13px}
.song-links p{font-size:12.5px;color:var(--muted);line-height:1.55;margin:8px 0 0}

/* practice */
.th-plan{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:1.7;color:var(--muted)}
.th-plan li{margin-bottom:6px}

@media(max-width:900px){
  .theory-hero,.th-grid-2,.walk-grid{grid-template-columns:1fr}
  .song-links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .th-pair,.song-links{grid-template-columns:1fr}
  .num-chip,.bass-chip,.song-chip{width:calc(50% - 5px)}
  .walk-card h3{font-size:20px}
}