/* Songwriter Suite v5.1 – visual + intuitive layer (blue + gold, frosted) */
html.light{--gold:#9a6200;--gold2:#7d4f00;--s:#44546f}
/* touch targets >=44px */
button,select,input:not([type=checkbox]):not([type=range]),textarea{min-height:44px}
.chip{min-height:44px;padding:.35rem .8rem}.icon-btn{min-width:44px}.keyctl select,.keyctl button{min-height:42px;min-width:40px}
.toolbar button{min-height:44px}
nav.tabs button{min-height:60px}
@media(min-width:900px){nav.tabs button{min-height:44px}}
.sech{font-size:1rem;margin:.2rem 0;color:var(--t)}
.lbl{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gold)}
/* HOME */
.hero{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:linear-gradient(120deg,#007efc33,var(--glass) 55%,#f5b33522)}
.hero-txt{flex:1;min-width:220px}.eyebrow{margin:0;font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.hero-h{font-size:clamp(1.3rem,3.2vw,2rem)!important;text-transform:none!important;letter-spacing:0!important;color:var(--t)!important;margin:.15rem 0 .2rem!important}
.big-cta{font-size:1.08rem;padding:.8rem 1.4rem;min-height:56px;border-radius:14px}
.starts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:.7rem;margin-bottom:1.1rem}
.start{flex-direction:column;align-items:flex-start;text-align:left;gap:.2rem;padding:1rem;border-radius:16px;min-height:112px;background:var(--glass);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.start .ic{width:30px;height:30px;padding:6px;border-radius:10px;box-sizing:content-box;margin-bottom:.3rem;color:#fff}
.start b{font-size:1rem}.start span{font-size:.85rem;color:var(--s)}
.s-scr .ic{background:linear-gradient(135deg,#f5b335,#c27c00);color:#1b1100}.s-prog .ic{background:linear-gradient(135deg,#2a6fdc,#163f8a)}.s-ex .ic{background:linear-gradient(135deg,#8b5cf6,#5b2fc2)}.s-train .ic{background:linear-gradient(135deg,#16a3b8,#0c6a7a)}
.start:hover{border-color:var(--gold)}
.hrow{margin-bottom:.6rem}
.songcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:.8rem}
.songcard{flex-direction:column;align-items:stretch;text-align:left;gap:.45rem;padding:.9rem;border-radius:16px;min-height:150px;
 background:linear-gradient(155deg,hsl(var(--hue) 70% 45% / .35),var(--glass) 60%);border:1px solid hsl(var(--hue) 70% 60% / .35);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.songcard.current{box-shadow:0 0 0 2px var(--gold)}.songcard:hover{transform:translateY(-3px);border-color:hsl(var(--hue) 80% 65%)}
.sc-top{display:flex;gap:.4rem;align-items:center}.keyb{font-weight:800;font-size:.9rem;min-width:2.2rem;text-align:center;padding:.15rem .5rem;border-radius:8px;background:hsl(var(--hue) 75% 55%);color:#fff;text-shadow:0 1px 1px #0006}
.refb{font-size:.75rem;color:var(--s);display:inline-flex;gap:.25rem;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sc-title{font-size:1.05rem;line-height:1.25}.sc-meta{font-size:.78rem;color:var(--s);margin-top:auto}
.minibars{display:flex;gap:3px;height:12px}.minibars i{border-radius:3px;min-width:6px}
.minibars i[data-k=verse]{background:#3b82f6}.minibars i[data-k=chorus]{background:#f5b335}.minibars i[data-k=bridge]{background:#8b5cf6}.minibars i[data-k=pre]{background:#16a3b8}.minibars i[data-k=other]{background:#64748b}.minibars i[data-k=none]{background:var(--line2)}
.empty{display:grid;justify-items:center;text-align:center;gap:.35rem;padding:1.6rem;grid-column:1/-1}.empty span{color:var(--s);max-width:34ch}
.illo{width:120px;height:80px;color:var(--b2)}
/* WRITE: song map header + timeline */
.maphead{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;margin-top:.5rem}.maphead .muted{font-size:.78rem}
.secmap{border-radius:12px;background:color-mix(in srgb,var(--bg) 45%,transparent);border:1px dashed var(--line2);margin-top:.3rem;padding:.55rem}
.secmap:not(:empty){border-style:solid;border-color:var(--line)}
.secmap:empty::before{content:'No sections yet – tap + Verse or + Chorus below and they appear here as coloured blocks.'}
.sblock{min-height:44px;min-width:5.2rem}
[data-tag]{font-weight:600}[data-tag]::before{content:'';width:.6rem;height:.6rem;border-radius:3px;background:#64748b;display:inline-block}
[data-tag="[Verse]"]::before{background:#3b82f6}[data-tag="[Chorus]"]::before{background:#f5b335}[data-tag="[Bridge]"]::before{background:#8b5cf6}[data-tag="[Pre-Chorus]"]::before{background:#16a3b8}
/* chord chips */
.chordstrip{display:flex;gap:.4rem;align-items:center;overflow-x:auto;padding:.15rem 0 .6rem;scrollbar-width:thin}.chordstrip>*{flex:0 0 auto}.chordstrip .lbl{margin-right:.2rem}
.cchip{flex-direction:column;gap:0;padding:.3rem .5rem .25rem;min-width:56px;border-radius:12px;line-height:1.1}
.cchip b{font-size:.95rem;color:var(--b2)}.cchip small{font-size:.68rem;color:var(--s)}
.mini{width:34px;height:32px}.mini .grid line{stroke:var(--s);stroke-width:.6;opacity:.7}.mini .grid.nut line:first-of-type{stroke-width:.6}
.mini .f{fill:var(--gold)}.mini .o{fill:none;stroke:var(--s);stroke-width:.7}.mini text{font-size:4.5px;fill:var(--s);text-anchor:middle}.mini .bf{font-size:5px;text-anchor:end}
/* empty editor */
.editor{position:relative}
.empty-ed{position:absolute;inset:3.4rem 0 auto 3.4rem;margin:auto;display:grid;justify-items:center;gap:.35rem;text-align:center;padding:1.2rem;pointer-events:none;top:6.5rem}
.empty-ed>*{pointer-events:auto}.empty-ed span{color:var(--s);font-size:.9rem}.empty-ed b{font-size:1.05rem}
/* syllable meter */
#gut{opacity:1;width:3.8rem}#gut .m{display:inline-block;min-width:1.6em;text-align:center;border-radius:5px;font-weight:700;padding:0 .15em;line-height:1.35}
#gut .m-ok{color:#5fd38d;background:#5fd38d1f}#gut .m-near{color:var(--gold2);background:#f5b3351f}#gut .m-off{color:#ff8a8a;background:#ff7a7a24}
html.light #gut .m-ok{color:#11733a}html.light #gut .m-off{color:#b42318}
/* rhymes */
.rgroup{margin-bottom:.55rem}.rlbl{display:flex;gap:.4rem;align-items:center;font-size:.75rem;color:var(--s);margin:.2rem 0 .3rem}
.syl{font-style:normal;font-weight:800;font-size:.72rem;width:1.4rem;height:1.4rem;display:inline-grid;place-items:center;border-radius:50%;background:var(--b);color:#fff}
.syl.s2{background:#16a3b8}.syl.s3{background:#8b5cf6}.syl.s4{background:#b97a08}
.chip.strong{border-color:var(--gold);font-weight:600}
/* scripture cards: big obvious action */
.verse{position:relative;overflow:hidden;border-left:4px solid var(--gold)}
.verse p{font-size:1.04rem;line-height:1.55}
.verse [data-start]{order:-1;flex:1 1 100%;justify-content:center;min-height:50px;font-size:1rem;border-radius:12px}
.verse .row{margin-top:.3rem}
/* guided path progress */
.pprog{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:.7rem}.pprog i{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--b),var(--gold));transition:width .35s}
.pcount{margin:.35rem 0 0;font-size:.8rem}
/* coach marks */
.coach{position:fixed;z-index:60;border-radius:16px;padding:.9rem;box-shadow:0 20px 50px -14px #000d;animation:pop .2s}
.coach p{margin:.3rem 0 .6rem;color:var(--s);font-size:.9rem}.coach-dots{display:flex;gap:4px;margin-bottom:.4rem}.coach-dots i{width:18px;height:4px;border-radius:2px;background:var(--line2)}.coach-dots i.on{background:var(--gold)}
.coach-target{outline:3px solid var(--gold)!important;outline-offset:4px;border-radius:12px;position:relative;z-index:22}
/* mobile polish */
@media(max-width:620px){.hero{padding:1rem}.big-cta{width:100%;justify-content:center}.empty-ed{top:5rem;left:3.6rem;right:.4rem}.starts{grid-template-columns:1fr 1fr}.start{min-height:104px}}
@media(prefers-reduced-motion:reduce){.songcard:hover{transform:none}.pprog i{transition:none}.coach{animation:none}}
html.no3d .songcard:hover{transform:none}
.editor:has(.empty-ed:not(.hidden)) #lyrics::placeholder{color:transparent}
.empty-ed{top:1.2rem!important;inset:auto 0 auto 3.8rem}
@media(max-width:620px){.empty-ed{top:1rem!important;left:3.8rem}
 .weekly .wtxt q{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.weekly{gap:.6rem}}
.keyctl select{min-height:44px}
.sheet-handle{min-height:44px!important;height:44px!important}
body:has(#coach:not(.hidden)) .fab,body:has(#coach:not(.hidden)) .fabmenu{display:none}