/* wider shell for tools */
.guide-shell:has(.planner){max-width:1120px}
.btn.sm{height:36px;padding:0 14px;font-size:13px}

/* planner */
.planner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:start;margin-top:24px}
.inv-panel,.out-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.inv-panel{position:sticky;top:76px;max-height:calc(100vh - 96px);overflow:auto}
.inv-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.guide-shell .planner h2{font-size:22px;margin:0}
.out-panel h2{margin:22px 0 10px!important}
.inv-actions{display:flex;align-items:center;gap:14px}
.inv-group{border:0;padding:0;margin:16px 0 0}
.inv-group legend{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.inv-grid{display:flex;flex-wrap:wrap;gap:6px}
.inv{cursor:pointer}
.inv input{position:absolute;opacity:0;width:1px;height:1px}
.inv span{display:inline-block;font-size:13px;padding:5px 11px;border:1px solid var(--line2);border-radius:99px;transition:background .12s,border-color .12s}
.inv:hover span{border-color:var(--gold)}
.inv input:checked+span{background:var(--gold);border-color:var(--gold);color:#13241d;font-weight:600}
.inv.implied span{border-style:dashed;border-color:var(--green);color:var(--green)}
.inv input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.summary div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px}
.summary b{display:block;font:500 28px/1 var(--serif);color:var(--gold)}
.summary span{font-size:12px;color:var(--muted)}
.out-list{display:grid;gap:6px}
.out-list h3{font:600 12px var(--sans)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 4px!important}
.out-list h3 span{color:var(--gold)}
.out-row{display:grid;grid-template-columns:30px minmax(0,1fr);gap:2px 10px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg)}
.out-row:hover{border-color:var(--line2)}
.out-row b{grid-row:span 2;font:500 15px var(--serif);color:var(--muted)}
.out-name{font-weight:600;font-size:15px}
.out-name small{font-weight:400;color:var(--muted);font-size:11px;margin-left:6px}
.out-status{font-size:13px;color:var(--muted)}
.out-row.ready{border-color:#3d6b5c}.out-row.ready b,.out-row.ready .out-status{color:var(--green)}
.out-row.done{opacity:.55}.out-row.done .out-status{color:var(--green)}
.out-row.blocked .out-status{color:var(--orange)}
.coll-row{grid-template-columns:1fr}
.out-filter{font-size:13px;color:var(--muted);margin-bottom:6px}
.out-filter input{accent-color:var(--gold)}

/* songs */
.key-legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--muted);margin:20px 0}
.key-legend>span{display:inline-flex;align-items:center;gap:6px}
.songs{display:grid;gap:10px}
.song{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.guide-shell .song h2{font:500 21px var(--serif);margin:0 0 4px}
.song p{margin:2px 0;font-size:14px!important}
.song-use{color:#cfd9d1}.song-where{color:var(--muted)}
.song-input{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.keys{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.btn-key{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;font:700 13px var(--sans);color:#0c1d19;transition:transform .1s,box-shadow .1s}
.btn-key.kL,.btn-key.kR{border-radius:8px;width:34px;background:#cfd6d1}
.btn-key.kA{background:#e1bd65}.btn-key.kX{background:#8fc7e8}.btn-key.kY{background:#9fd9a8}
.btn-key.lit{transform:scale(1.2);box-shadow:0 0 0 3px rgba(225,189,101,.5)}
.n64{font-size:12px!important;color:var(--muted)}
.play{background:none;border:1px solid var(--line2);border-radius:8px;color:var(--gold);padding:5px 12px;font-size:13px;cursor:pointer}
.play:hover{border-color:var(--gold)}.play:disabled{opacity:.5;cursor:default}

@media(max-width:860px){.planner{grid-template-columns:1fr}.inv-panel{position:static;max-height:none}}
@media(max-width:600px){.song{grid-template-columns:1fr}.song-input{align-items:flex-start}.keys{justify-content:flex-start}.summary b{font-size:22px}}