/* Shared styles for the 2026-10 additions: sync pill, map, progress, tools, glossary, song filters.
   Fluid from 320px phones to 5120x1440 ultrawide (content capped and laid out in columns). */
.syncpill{white-space:nowrap}
.syncpill[data-state="synced"]{color:var(--ok)!important}
.syncpill[data-state="offline"]{color:var(--accent2)!important}
.syncpick{position:fixed;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom));z-index:50;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:0 10px 40px rgba(0,0,0,.5);width:min(560px,calc(100vw - 24px));font-size:15px}
.syncpick .pickrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.syncpick .btn{font-size:16px;padding:9px 14px;min-height:44px}
.btn.ghost{background:transparent}
.muted{color:var(--muted)}
/* nav: never wrap into a mess on phones; scroll sideways instead */
.navlinks{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{white-space:nowrap}
@media (max-width:720px){.topnav{gap:10px;padding:10px 12px}.navlinks a{padding:6px 9px;font-size:14px}}

/* generic page frame for the new pages */
.npage{max-width:min(2400px,100%);margin:0 auto;padding:18px clamp(12px,3vw,48px) 60px}
.npage h1{font-size:clamp(26px,3.2vw,44px);margin:.2em 0 .1em}
.npage h1 span{color:var(--accent)}
.npage h2{font-size:clamp(19px,1.6vw,26px);margin:1.2em 0 .5em}
.npage .lede{color:var(--muted);max-width:75ch;font-size:16px;line-height:1.5}
.ngrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
@media (min-width:2200px){.ngrid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}.npage{font-size:17px}}
.ncard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;min-width:0}
.ncard h3{margin:.1em 0 .4em;font-size:17px}
.ncard p{margin:.4em 0;line-height:1.45}
.ncard .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ncard .acts .btn,.ncard .acts a.btn{min-height:40px;display:inline-flex;align-items:center}
.ncard.here{border-color:rgba(60,207,145,.55);background:linear-gradient(180deg,rgba(60,207,145,.08),var(--panel) 60%)}
.ncard.next{border-color:rgba(255,176,60,.55)}
.ncard.gap{border-style:dashed}
.est{color:var(--accent2);font-weight:700}
.pbar{height:8px;border-radius:99px;background:var(--panel2);overflow:hidden;margin:6px 0}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:99px}
.kpis{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.kpis div{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-width:120px}
.kpis b{display:block;font-size:22px}
table.ntable{width:100%;border-collapse:collapse;font-size:14px}
table.ntable th,table.ntable td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:top}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.plan{counter-reset:pl;list-style:none;padding:0;margin:0;display:grid;gap:8px}
.plan li{counter-increment:pl;display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.plan li::before{content:counter(pl);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--panel);border:2px solid var(--accent2);font-weight:800}
.plan li .min{font-weight:800;color:var(--accent2);white-space:nowrap}
.plan li.done{opacity:.6}.plan li.done::before{content:'✓';border-color:var(--ok)}
@media (max-width:520px){.plan li{grid-template-columns:36px 1fr}.plan li .min{grid-column:2}}
/* map */
.mapcols{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:1100px){.mapcols{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}}
@media (min-width:2600px){.mapcols{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr)}}
.chipline{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
/* tools */
.toolnav{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px;position:sticky;top:0;z-index:3;background:var(--bg);padding:6px 0}
.toolnav a{padding:8px 12px;border:1px solid var(--line);border-radius:99px;color:var(--text);min-height:40px;display:inline-flex;align-items:center}
.metro{display:grid;gap:12px}
.metro .bpm{font-size:clamp(48px,9vw,96px);font-weight:900;line-height:1;text-align:center;font-variant-numeric:tabular-nums}
.metro .beats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.metro .beats i{width:clamp(18px,4vw,30px);height:clamp(18px,4vw,30px);border-radius:50%;background:var(--panel2);border:2px solid var(--line);display:block}
.metro .beats i.on{background:var(--accent2);border-color:var(--accent2)}
.metro .beats i.acc{border-color:var(--accent)}
.metro .beats i.acc.on{background:var(--accent)}
.metro .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.metro input[type=range]{width:min(520px,90%);height:34px}
.metro .btn{min-height:44px;min-width:44px;font-size:16px}
.metro .btn.big{font-size:20px;padding:10px 26px;background:var(--accent);border-color:var(--accent);color:#111;font-weight:800}
.metro select,.metro input[type=number]{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px;color:var(--text);font-size:16px}
.fbwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
svg.nfb{width:100%;min-width:640px;height:auto;display:block}
/* v2.5.0: the neck is a GPBoard frame (js/fretmap.js + js/fingers.js): colours are SVG attributes there */
svg.nfb .boxlab{fill:var(--accent2);font-size:14px;font-weight:800;text-anchor:middle}
svg.nfb .win{fill:rgba(60,207,145,.10);stroke:rgba(60,207,145,.5);stroke-dasharray:6 6}
svg.nfb .box{fill:rgba(255,176,60,.08);stroke:rgba(255,176,60,.55)}
.ctrls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.ctrls select,.ctrls button{min-height:40px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--text);font-size:15px}
.ctrls button[aria-pressed="true"]{border-color:var(--accent2);background:rgba(255,176,60,.15)}
.ear .answers{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:10px 0}
.ear .answers button{min-height:48px;font-size:16px}
.ear .answers button.right{border-color:var(--ok);background:rgba(60,207,145,.15)}
.ear .answers button.wrong{border-color:var(--accent);background:rgba(255,90,60,.15)}
/* glossary */
.gloss{columns:1;column-gap:24px}
@media (min-width:1000px){.gloss{columns:2}}
@media (min-width:2000px){.gloss{columns:3}}
@media (min-width:3600px){.gloss{columns:4}}
.gloss dt{font-weight:800;margin-top:12px;break-after:avoid}
.gloss dd{margin:3px 0 0;color:#cfd5df;line-height:1.45;break-inside:avoid}
.gloss dt .cat{font-weight:600;font-size:12px;color:var(--muted);margin-left:6px}
.gloss :target{background:rgba(255,176,60,.12);border-radius:6px}
/* song list difficulty */
.diff{font-size:12px;padding:1px 7px;border-radius:99px;border:1px solid var(--line);background:var(--panel2);white-space:nowrap}
.diff[data-d="1"],.diff[data-d="2"]{color:var(--ok)}
.diff[data-d="3"]{color:var(--accent2)}
.diff[data-d="4"],.diff[data-d="5"]{color:var(--accent)}
.romans{font-size:13px;color:var(--accent2);font-weight:700;letter-spacing:.2px}
/* tuner */
.tuner .tdial{position:relative;height:clamp(110px,22vw,180px);margin:10px auto;max-width:520px;border-radius:260px 260px 0 0;background:conic-gradient(from -90deg at 50% 100%,rgba(255,90,60,.25),rgba(60,207,145,.35) 50%,rgba(255,90,60,.25) 100%,transparent 0);overflow:hidden}
.tuner .tneedle{position:absolute;left:calc(50% - 2px);bottom:0;width:4px;height:92%;background:var(--text);transform-origin:50% 100%;transition:transform .08s linear;border-radius:2px}
.tuner[data-ok="1"] .tneedle{background:var(--ok)}
.tuner .tread{text-align:center;font-size:20px}.tuner .tread b{font-size:clamp(44px,8vw,80px)}
.tuner .tag.on{border-color:var(--accent2);color:var(--accent2)}
.songfacts{padding:2px 12px;font-size:13px}
/* v2.5.0 big monitors: Tools in two columns (the small tools side by side, the neck boards across the full width) */
@media (min-width:2400px){
  .toolspage .npage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:row dense;column-gap:22px;max-width:2560px}
  .toolspage .npage > *{grid-column:1 / -1;min-width:0}
  .toolspage .npage > #metronome,.toolspage .npage > #ear{grid-column:auto}
}