/* guitar.css — Guitar Lab. Same palette as the Worship Night page, plus one colour per scale degree. */
:root{
  --bg:#14121c; --panel:#1c1927; --panel-2:#211d30; --ink:#ece5d8; --gold:#e3b15f; --gold-soft:#caa05c;
  --dim:#9b93ae; --line:#2e2940;
  --disp:"Fraunces", Georgia, serif; --body:"Source Serif 4", Georgia, serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --d1:#e3b15f; --d2:#5ec8c0; --d3:#ef8a62; --d4:#8fd18b; --d5:#6aa5f0; --d6:#b48be8; --d7:#f07ab8; --db:#ff6b6b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.55;
  background-image:radial-gradient(1200px 600px at 70% -10%, rgba(227,177,95,.07), transparent 60%)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* header */
header{padding:34px 0 0;border-bottom:1px solid var(--line)}
.site-tabs{display:flex;gap:8px;margin-bottom:26px}
.site-tabs a{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  padding:7px 14px;border:1px solid var(--line);border-radius:999px}
.site-tabs a.active{color:var(--gold);border-color:rgba(227,177,95,.6)}
.site-tabs a:hover{color:var(--ink)}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
h1{font-family:var(--disp);font-weight:600;font-size:clamp(2.2rem,6vw,3.8rem);line-height:1.04;letter-spacing:-.01em}
h1 em{font-style:italic;color:var(--gold)}
.menu{display:flex;gap:4px;margin-top:26px;overflow-x:auto}
.menu button{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  padding:12px 16px 14px;border-bottom:2px solid transparent;white-space:nowrap}
.menu button:hover{color:var(--ink)}
.menu button.on{color:var(--gold);border-bottom-color:var(--gold)}

main{padding:0 20px 80px}
footer{padding:0 20px 60px;color:var(--dim);font-size:.9rem;max-width:1180px}

/* control bars */
.bar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:flex-end;
  padding:14px 0 12px;margin:0 0 6px;background:linear-gradient(var(--bg) 85%, transparent);}
.bar.sub{position:static;padding-top:4px;background:none}
.ctl{display:flex;flex-direction:column;gap:5px}
.ctl>span{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);min-height:.9em}
select{font-family:var(--mono);font-size:.82rem;letter-spacing:.03em;color:var(--ink);background-color:var(--panel-2);
  border:1px solid rgba(227,177,95,.45);border-radius:8px;padding:8px 34px 8px 12px;cursor:pointer;-webkit-appearance:none;appearance:none;max-width:min(78vw,420px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23e3b15f' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
select:hover{border-color:var(--gold)}
.seg{display:inline-flex;flex-wrap:wrap;gap:3px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:3px}
.seg button,.tog{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--dim);padding:6px 11px;border-radius:6px;white-space:nowrap}
.seg button:hover,.tog:hover{color:var(--ink)}
.seg button.on,.tog.on{background:rgba(227,177,95,.16);color:var(--gold)}
.subtabs{display:flex;gap:4px;margin:4px 0 14px;border-bottom:1px solid var(--line);overflow-x:auto}
.subtabs button{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:10px 14px 12px;border-bottom:2px solid transparent;white-space:nowrap}
.subtabs button.on{color:var(--gold);border-bottom-color:var(--gold)}

/* headings and text */
.h{font-family:var(--disp);font-weight:600;font-size:1.5rem;letter-spacing:-.01em;margin:10px 0 8px}
.h small{font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-left:10px}
.h3{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);margin:26px 0 10px;display:flex;align-items:center;gap:12px}
.h3::after{content:"";height:1px;flex:1;background:var(--line)}
.section-h{margin-top:34px}
.h3.fold button{display:flex;align-items:center;gap:12px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;padding:2px 0}
.h3.fold button:hover{color:var(--ink)}
.h3.fold .chev{color:var(--gold);font-size:.8rem}
.tip{color:var(--dim);font-size:.95rem;max-width:72ch;margin:10px 0 0}
.tip b{color:var(--ink);font-weight:600}
.ideas{list-style:none;display:grid;gap:8px;max-width:76ch}
.ideas li{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 16px 12px 42px;position:relative;font-size:.97rem}
.ideas li::before{content:"♪";position:absolute;left:16px;top:11px;color:var(--gold);font-family:var(--mono)}
.badge{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--gold);border:1px solid rgba(227,177,95,.45);border-radius:6px;padding:3px 9px;white-space:nowrap}
.song-title{margin:6px 0 10px}
.feel{color:var(--dim);font-size:.9rem;font-style:italic}

/* fretboard */
.fb-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px 6px;margin:8px 0}
.fretboard{display:block;width:100%;min-width:760px;height:auto}
.fb-nut{stroke:var(--ink);stroke-width:5}
.fb-fret{stroke:#4a4460;stroke-width:1.5}
.fb-string{stroke:#8d87a4}
.fb-marker{fill:#3a3450}
.fb-num{fill:var(--dim);font:600 10px var(--mono)}
.fb-sname{fill:var(--dim);font:600 10px var(--mono)}
.fb-x{fill:var(--dim);font:700 13px var(--mono)}
.fb-box{fill:rgba(227,177,95,.06);stroke:rgba(227,177,95,.35);stroke-width:1;stroke-dasharray:3 3}
.fb-boxlabel{fill:var(--gold-soft);font:600 9px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.fb-link{stroke:rgba(236,229,216,.35);stroke-width:2}
.fb-pill{fill:rgba(236,229,216,.06);stroke:rgba(236,229,216,.3);stroke-width:1.4}
.fb-pill.d1{fill:rgba(227,177,95,.16);stroke:rgba(227,177,95,.75)} .fb-pill.d5{fill:rgba(106,165,240,.16);stroke:rgba(106,165,240,.75)} .fb-pill.db{fill:rgba(255,107,107,.16);stroke:rgba(255,107,107,.8)}
.read{margin:10px 0 0;font-size:1.02rem;max-width:72ch}
.read b{color:var(--gold);font-weight:600}
.fb-link.d1{stroke:var(--d1);opacity:.8;stroke-width:3} .fb-link.d5{stroke:var(--d5);opacity:.8;stroke-width:3} .fb-link.db{stroke:var(--db);opacity:.8;stroke-width:3}
.fb-dot text,.cd-dot text{fill:#1b1826;font:700 10px var(--mono)}
.fb-dot.small text{font-size:7.5px}
.cd-dot text{font-size:7px}
.fb-dot.d1 circle,.cd-dot.d1 circle{fill:var(--d1)} .fb-dot.d2 circle,.cd-dot.d2 circle{fill:var(--d2)} .fb-dot.d3 circle,.cd-dot.d3 circle{fill:var(--d3)}
.fb-dot.d4 circle,.cd-dot.d4 circle{fill:var(--d4)} .fb-dot.d5 circle,.cd-dot.d5 circle{fill:var(--d5)} .fb-dot.d6 circle,.cd-dot.d6 circle{fill:var(--d6)}
.fb-dot.d7 circle,.cd-dot.d7 circle{fill:var(--d7)} .fb-dot.db circle,.cd-dot.db circle{fill:var(--db)}
.fb-dot.hollow circle{fill:var(--panel);stroke-width:2}
.fb-dot.hollow.d1 circle{stroke:var(--d1)} .fb-dot.hollow.d2 circle{stroke:var(--d2)} .fb-dot.hollow.d3 circle{stroke:var(--d3)} .fb-dot.hollow.d4 circle{stroke:var(--d4)}
.fb-dot.hollow.d5 circle{stroke:var(--d5)} .fb-dot.hollow.d6 circle{stroke:var(--d6)} .fb-dot.hollow.d7 circle{stroke:var(--d7)} .fb-dot.hollow.db circle{stroke:var(--db)}
.fb-dot.hollow.d1 text{fill:var(--d1)} .fb-dot.hollow.d2 text{fill:var(--d2)} .fb-dot.hollow.d3 text{fill:var(--d3)} .fb-dot.hollow.d4 text{fill:var(--d4)}
.fb-dot.hollow.d5 text{fill:var(--d5)} .fb-dot.hollow.d6 text{fill:var(--d6)} .fb-dot.hollow.d7 text{fill:var(--d7)} .fb-dot.hollow.db text{fill:var(--db)}
.fb-dot.d1 circle{stroke:#fff3d6;stroke-width:1.5}
.fb-dot.hollow.d1 circle{stroke:var(--d1)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:4px 2px 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--dim)}
.lg{display:inline-flex;align-items:center;gap:6px}
.lg i{width:11px;height:11px;border-radius:50%;display:inline-block}
.lg.hollow i{background:transparent !important;border:2px solid currentColor}
.lg.hollow.d1{color:var(--d1)} .lg.hollow.d2{color:var(--d2)} .lg.hollow.d3{color:var(--d3)} .lg.hollow.d4{color:var(--d4)} .lg.hollow.d5{color:var(--d5)} .lg.hollow.d6{color:var(--d6)} .lg.hollow.d7{color:var(--d7)} .lg.hollow.db{color:var(--db)}
.lg.d1 i{background:var(--d1)} .lg.d2 i{background:var(--d2)} .lg.d3 i{background:var(--d3)} .lg.d4 i{background:var(--d4)}
.lg.d5 i{background:var(--d5)} .lg.d6 i{background:var(--d6)} .lg.d7 i{background:var(--d7)} .lg.db i{background:var(--db)}

/* chord diagrams */
.chord-diagram{display:block;margin:4px auto 0}
.cd-line{stroke:#5a5472;stroke-width:1}
.cd-nut{fill:var(--ink)}
.cd-base{fill:var(--dim);font:600 8px var(--mono)}
.cd-x{fill:var(--dim);font:700 9px var(--mono)}
.cd-dot.open circle{fill:var(--panel);stroke-width:1.5}
.cd-dot.open.d1 circle{stroke:var(--d1)} .cd-dot.open.d2 circle{stroke:var(--d2)} .cd-dot.open.d3 circle{stroke:var(--d3)} .cd-dot.open.d4 circle{stroke:var(--d4)}
.cd-dot.open.d5 circle{stroke:var(--d5)} .cd-dot.open.d6 circle{stroke:var(--d6)} .cd-dot.open.d7 circle{stroke:var(--d7)}
.cd-dot.open.d1 text{fill:var(--d1)} .cd-dot.open.d2 text{fill:var(--d2)} .cd-dot.open.d3 text{fill:var(--d3)} .cd-dot.open.d4 text{fill:var(--d4)}
.cd-dot.open.d5 text{fill:var(--d5)} .cd-dot.open.d6 text{fill:var(--d6)} .cd-dot.open.d7 text{fill:var(--d7)}
.minis{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:flex-start}
.mini{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 8px 8px;width:124px;text-align:center}
button.mini:hover{border-color:rgba(227,177,95,.5)}
.mini.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.mini-title{font-family:var(--mono);font-size:.74rem;font-weight:600;color:var(--ink)}
.mini-sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--dim);margin-top:4px}
.mini-text{flex-basis:100%;color:var(--dim);font-size:.9rem;margin:-2px 0 6px 4px;max-width:70ch}

/* chord row + current chord */
.h3-note{font-weight:400;letter-spacing:.08em;text-transform:none;color:var(--dim)}
.form{display:grid;gap:6px;margin:4px 0 6px}
.form-sec{display:flex;gap:10px;align-items:flex-start}
.form-name{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);width:86px;flex:none;padding-top:10px;text-align:right}
.form-chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{font-family:var(--disp);font-size:1rem;line-height:1;padding:7px 9px 6px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);transition:border-color .12s}
.chip b{font-weight:600}
.chip small{font-family:var(--mono);font-size:.58rem;font-weight:600;color:var(--gold);margin-left:1px}
.chip:hover{border-color:rgba(227,177,95,.5)}
.chip.same{border-color:rgba(227,177,95,.45)}
.chip.on{background:rgba(227,177,95,.18);border-color:var(--gold);color:var(--gold)}
.chip.on small{color:var(--ink)}
.chip.has-mel{display:flex;flex-direction:column;align-items:center;gap:5px;padding-bottom:5px}
.chip-mel{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--dim);white-space:nowrap}
.chip.on .chip-mel{color:var(--gold-soft)}
.form-sec.order{margin-top:4px;padding-top:8px;border-top:1px solid var(--line)}
.form-sec.order .form-chips{align-items:center;gap:6px}
.ochip{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding:5px 9px;border:1px solid var(--line);border-radius:999px}
.oarrow{color:var(--dim);font-family:var(--mono);font-size:.8rem}
.palette{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 6px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 8px 8px;width:118px;text-align:center;transition:border-color .12s}
.card:hover{border-color:rgba(227,177,95,.5)}
.card.on{border-color:var(--gold);background:var(--panel-2);box-shadow:0 0 0 1px var(--gold) inset}
.card-num{font-family:var(--disp);font-size:1.3rem;font-weight:600;line-height:1.1;color:var(--ink)}
.card-num b{font-weight:600}
.card-num small{font-family:var(--mono);font-size:.68rem;font-weight:600;margin-left:1px;color:var(--gold)}
.card-name{font-family:var(--mono);font-size:.7rem;color:var(--dim);margin-top:2px;min-height:1em}
.card-shape{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;color:var(--dim);margin-top:4px;text-transform:uppercase}
.card-none{height:96px;display:flex;align-items:center;justify-content:center;color:var(--dim)}
.now{margin-top:8px}
.now-head{display:flex;align-items:center;gap:12px}
.now-head .h{flex:1;margin:4px 0}
.nav{font-family:var(--mono);font-size:1rem;color:var(--gold);border:1px solid rgba(227,177,95,.45);border-radius:999px;width:40px;height:40px;flex:none}
.nav:disabled{opacity:.3;cursor:default}

/* licks */
.licks{display:grid;gap:14px}
.lick{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px 10px}
.lick-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lick-head .h3{margin:0}
.lick-head .h3::after{display:none}
.lick .fb-wrap{background:var(--bg)}
.tab{font-family:var(--mono);font-size:.74rem;line-height:1.35;color:var(--ink);overflow-x:auto;padding:10px 8px 4px;margin-top:10px}

@media (max-width:640px){
  .form-sec{flex-direction:column;gap:4px}
  .form-name{width:auto;text-align:left;padding-top:4px}
  header{padding-top:22px}
  .site-tabs{margin-bottom:18px}
  .menu{margin-top:18px}
  .bar{gap:8px 14px}
  .card{width:104px}
  .mini{width:112px}
  .fretboard{min-width:720px}
  .h{font-size:1.3rem}
  .h small{display:block;margin:4px 0 0}
}
.fretboard.long{min-width:860px}