/* Songwriter Suite v6 – capture, notes, tags, metronome, spark, export; mobile polish */
.hero-btns{display:flex;flex-direction:column;gap:.55rem;width:100%}.hero-btns>*{width:100%}
.big-cta2{min-height:50px;border-radius:14px;justify-content:center;font-weight:600;background:linear-gradient(135deg,#f5b33533,var(--glass2));border:1px solid #f5b33599}
.big-cta2 .ic{color:var(--gold)}
@media(min-width:700px){.hero-btns{flex-direction:row}.hero-btns>*{flex:1}}
.s-spark .ic{background:linear-gradient(135deg,#f5b335,#d07a00)}.s-metro .ic{background:linear-gradient(135deg,#7a5cff,#4a2fd0)}
.tagbar{margin:.2rem 0 .7rem;gap:.4rem}.tagbar[hidden]{display:none}
.tagbar .chip[aria-pressed=true],#rClick[aria-pressed=true],#notesBtn[aria-pressed=true]{background:linear-gradient(135deg,var(--b),#0057b8);color:#fff;border-color:transparent}
.tagbar small{opacity:.7}
.backup{margin-top:1rem;gap:.5rem}.backup .muted{font-size:.82rem;flex-basis:100%}
.tagrow{gap:.4rem;margin:-.1rem 0 .6rem;flex-wrap:wrap}.tagrow>.ic{color:var(--gold);flex:none}
#tagIn{flex:1;min-width:150px;min-height:44px}
.tagchips{display:flex;gap:.35rem;flex-wrap:wrap}.tagchips .chip{min-height:36px;font-size:.82rem}
#notesCard textarea{width:100%;min-height:170px;font:inherit;line-height:1.6;background:repeating-linear-gradient(transparent 0 1.55em,var(--line) 1.55em calc(1.55em + 1px));background-attachment:local}
#notesCard .row:first-child{gap:.6rem;margin-bottom:.5rem;flex-wrap:wrap}#notesCard .row:first-child .muted{font-size:.85rem}
.metro{display:flex;flex-direction:column;gap:.7rem}
.m-top{display:flex;align-items:center;justify-content:center;gap:1rem}
.m-top .icon-btn{width:52px;height:52px;font-size:1.5rem;border-radius:50%}
.m-bpm{display:flex;flex-direction:column;align-items:center;min-width:110px}
.m-bpm output{font-size:2.8rem;font-weight:800;line-height:1;background:linear-gradient(135deg,var(--b2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.m-bpm span{font-size:.75rem;letter-spacing:.15em;color:var(--s)}
.metro input[type=range]{width:100%;accent-color:var(--b);min-height:32px}
.m-dots{display:flex;justify-content:center;gap:.6rem}
.m-dots i{width:22px;height:22px;border-radius:50%;background:var(--glass2);border:1px solid var(--line2);transition:transform .08s,background .08s}
.m-dots i.on{background:var(--b2);transform:scale(1.25);box-shadow:0 0 14px var(--b2)}.m-dots i.on.acc{background:var(--gold);box-shadow:0 0 16px var(--gold)}
.m-row{justify-content:center;gap:.5rem}.m-row button{min-height:48px}.m-row select{min-height:44px}
.m-hint{font-size:.82rem;text-align:center;margin:0}
.spark{position:relative;padding:1.2rem 1.1rem;border-radius:18px;background:linear-gradient(135deg,#007efc22,#f5b33522);border:1px solid var(--line2);margin-bottom:.8rem;transform:perspective(700px) rotateX(4deg);animation:spkIn .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes spkIn{from{transform:perspective(700px) rotateY(-70deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.spark{animation:none}}
.spk-cat,.spk-lvl{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .6rem;border-radius:999px;background:var(--b);color:#fff;margin-right:.35rem}
.spk-lvl{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.spk-t{font-size:1.2rem;font-weight:600;line-height:1.4;margin:.7rem 0 0}
.spk-cats{margin-top:.7rem;gap:.35rem}
.exgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:.55rem}
.exgrid button{flex-direction:column;align-items:flex-start;text-align:left;gap:.15rem;padding:.8rem;border-radius:14px;min-height:84px}
.exgrid span{font-size:.8rem;color:var(--s)}
#ideaTxt{width:100%;font:inherit;font-size:1.05rem;min-height:110px}
/* compact weekly prompt on phones */
html.wkmini #weekly{max-height:64px;overflow:hidden;position:relative;cursor:pointer;padding-top:.6rem;padding-bottom:.6rem}
html.wkmini #weekly::after{content:'Tap to open this week\'s prompt ▾';position:absolute;right:.8rem;bottom:.45rem;font-size:.75rem;color:var(--gold);background:var(--glass2);padding:.1rem .5rem;border-radius:999px}
html.wkmini #weekly>*:not(:first-child){visibility:hidden}
/* tap-target fixes found in the v5 mobile audit */
#pathOpen2{padding:.55rem .2rem;display:inline-block;min-height:44px}
label.sw{min-height:44px;display:inline-flex;align-items:center;gap:.45rem;cursor:pointer}label.sw input{width:22px;height:22px}
footer a{display:inline-block;padding:.6rem .25rem}
#tab-suno a[href*="suno"]{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:699px){
 #tab-write .toolbar{position:sticky;top:0;z-index:5;background:var(--glass2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);margin:0 -.4rem;padding:.35rem .4rem;border-radius:12px}
 .tagrow input{font-size:16px} #ideaTxt,#notesTxt,#tagIn{font-size:16px}
}
@media(min-width:1100px){#tab-write .grid.w.with-notes #notesCard{position:sticky;top:.8rem}}
@media(max-width:699px){input,textarea,select{font-size:16px!important}} /* stops iOS zoom-on-focus */
.consent a,.esv-notice a{display:inline-block;padding:.55rem .15rem}.metro input[type=range]{min-height:44px}
html{scroll-padding-top:84px;scroll-padding-bottom:84px}
/* v6.0.1 – QA fix 03: desktop header fit 900–1279px (at 1024 the row needed 1128px and pushed #prefsBtn/#authBtn off-screen).
   Suno/Gemini links go icon-only (text stays for screen readers), tabs/gaps tighten, tab icons hide below 1000px; wrap is a last-resort safety net (e.g. admin + long name). */
@media(min-width:900px) and (max-width:1279px){
 header{gap:.5rem;flex-wrap:wrap}nav.tabs{margin-left:.25rem}nav.tabs button{padding:.4rem .55rem}
 .ai a{padding:.4rem .5rem}.ai a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(min-width:900px) and (max-width:999px){nav.tabs button .ic{display:none}}
/* v6.1.0 Ezoic ad slots. The wrapper (.ez-res) reserves the space so nothing jumps (no CLS); the Ezoic
   placeholder div inside it is left unstyled, as Ezoic's docs require. Light + dark via theme variables. */
.ez-slot{display:block;width:100%;max-width:728px;margin:1.75rem auto 2rem;text-align:center;clear:both;box-sizing:border-box}
.ez-slot .ez-lbl{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--s);margin-bottom:.35rem}
.ez-slot .ez-res{min-height:280px;display:flex;justify-content:center;align-items:flex-start;border-radius:14px;background:color-mix(in srgb,var(--s) 6%,transparent);max-width:100%}
.ez-slot .ez-ph{max-width:100%}
@media(min-width:768px){.ez-slot .ez-res{min-height:250px}}
html.ez-off .ez-slot,html.ez-offline .ez-slot,.ez-slot.ez-empty{display:none}
@media print{.ez-slot{display:none}}

/* v6.1.1: on wide screens let the Write toolbar wrap so Notes, Click and Export aren't hidden off the right edge */
@media (min-width:900px){#tab-write .toolbar{flex-wrap:wrap;overflow-x:visible}}