/* Shared controls; musical colours, playback geometry and lyrics are unchanged. */
:root{--pg-accent:#cee780;--pg-surface:#202e38;--pg-line:#51616f;--pg-radius:7px;--pg-text:#eaf0f4;--pg-muted:#b8c7cf}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--pg-accent);outline-offset:3px}
button.secondary,nav button,.btn,.song-cloud-refresh,#workbenchProfiles button{border-radius:var(--pg-radius);box-shadow:none;background:var(--pg-surface);border:1px solid var(--pg-line);color:var(--pg-text);font-family:inherit}
button,select,input{border-radius:var(--pg-radius)}
button:disabled{cursor:not-allowed;opacity:.4}
nav .tab.active,nav button.active,nav button[aria-pressed=true],#wbEditSong{background:var(--pg-accent);border-color:var(--pg-accent);color:#101c22;box-shadow:none}
nav .tab,nav button,#midiConnectButton{min-height:34px;padding:7px 13px;font-size:13px;border-radius:var(--pg-radius);box-shadow:none}
.logo{font-size:clamp(22px,3.7vw,37px);letter-spacing:1.4px}
#wbSongTitle #labelRight{font-size:18px;line-height:1.35;overflow-wrap:anywhere}
#wbEditSong{font-size:13px;padding:7px 12px;flex-shrink:0}
#wbOffline{font:700 11px/1.3 system-ui,sans-serif;letter-spacing:.08em;color:#edcf86;border:1px solid #756442;border-radius:5px;padding:4px 7px;white-space:nowrap}
#wbOffline[hidden]{display:none!important}
#barRightRight{min-width:0;max-width:100%;overflow:hidden}
#barRightRight .wb-next-title{display:block;width:100%;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:500;line-height:1.3;text-transform:none;padding:0 5px;box-sizing:border-box}
body.role-drummer.master-focus-lost::after{top:44%;max-width:calc(100vw - 72px);white-space:normal;font-size:clamp(14px,1.4vw,20px);border-radius:var(--pg-radius);content:'CONTROLS INACTIVE — CLICK BACK INTO PLAYGROUNDS'}
#configView .cfg-block{background:#172330;border:1px solid #394b5d;box-shadow:none;border-radius:10px;padding:20px;margin-bottom:16px}
#configView .cfg-title{font-size:16px;letter-spacing:.04em;color:#d8e3ec;text-transform:none;margin:0 0 10px}
#configView .cfg-desc{font:13px/1.5 system-ui,sans-serif;letter-spacing:0;color:var(--pg-muted);margin:6px 0 14px}
#configView .cfg-options-row{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 20px}
#configView .cfg-options-row .tweak:has(input[type=checkbox]) label{display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 10px;background:#213040;border-radius:var(--pg-radius);cursor:pointer;margin:0;font-size:14px;letter-spacing:0;line-height:1.4}
#configView input[type=checkbox]{width:18px;height:18px;flex-shrink:0;accent-color:var(--pg-accent);margin:0}
#configView .cfg-sliders-row{grid-template-columns:minmax(0,1fr);gap:20px 28px}
#configView .cfg-sliders-row label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px;letter-spacing:0;line-height:1.5;margin:0 0 8px}
#configView .cfg-sliders-row label span{white-space:nowrap;color:var(--pg-accent);font-variant-numeric:tabular-nums}
#configView input[type=range]{width:100%;accent-color:var(--pg-accent);cursor:pointer}
#configView select{background:#101b27;border:1px solid var(--pg-line);border-radius:var(--pg-radius);color:var(--pg-text);padding:9px 11px;font:14px system-ui}
#configView .cfg-block.wb-profile-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:center;gap:28px}
#wbAccount{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:108px;width:100%;font-size:15px;background:#283b46;border:1px solid #73898d}
#wbAccount .wb-return-icon{font-size:38px;line-height:1}
.wb-config-actions{align-items:center}.wb-config-actions .tweak label{font-size:13px}
#wbAnalyzerSettings{border-top:1px solid #394b5d;padding-top:16px;margin-top:12px;grid-column:1/-1}
#wbAnalyzerSettings[hidden]{display:none!important}
#wbAnalyzerSettings .cfg-options-row{margin-bottom:16px}
#wbAnalyzerSettings .tweak .cfg-desc{font-size:12px;letter-spacing:0;margin-top:6px}
#helpView .wb-build-info{font-size:12px;color:var(--pg-muted);text-align:right}
.se-top,.se-bottom{background:#1b2935}.se-screen .se-status{background:#172330;color:#d4e78b}
.se-screen .se-top button,.se-tools button,.se-bank>button{border-radius:var(--pg-radius)}
.se-screen .se-chord-tools[hidden]{display:none!important}
.se-placement:empty{display:none}.se-placement{min-height:0}
@media(max-width:700px){#configView .cfg-block.wb-profile-layout{grid-template-columns:minmax(0,1fr)}.wb-config-return{justify-self:end;width:min(220px,100%)}#configView .cfg-options-row,#configView .cfg-sliders-row{grid-template-columns:minmax(0,1fr)}#configView .cfg-block{padding:16px}#wbSongTitle{gap:8px}#wbSongTitle #labelRight{font-size:17px}#barRightRight .wb-next-title{font-size:10px}}

/* Stable header geometry across Songs, Play and Config. */
body.role-drummer:has(#metroView.active)>.wrap{padding-top:16px}
body.role-drummer:has(#metroView.active) header{gap:16px}
/* One readable column; the home tile stays on the right inside Profiles & app. */
#configView>.view-stack{max-width:880px;margin-inline:auto}
#configView .cfg-grid,#configView .wb-midi-grid{grid-template-columns:minmax(0,1fr)}
#configView input[type=range]{appearance:none;height:28px;background:transparent;border:0;padding:0;margin:2px 0 0;box-shadow:none}
#configView input[type=range]::-webkit-slider-runnable-track{height:8px;border:1px solid #90a4b8;border-radius:8px;background:linear-gradient(to right,#cee780 0 var(--range-fill,0%),#72869a var(--range-fill,0%) 100%)}
#configView input[type=range]::-moz-range-track{height:6px;border:1px solid #90a4b8;border-radius:8px;background:linear-gradient(to right,#cee780 0 var(--range-fill,0%),#72869a var(--range-fill,0%) 100%)}
#configView input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;margin-top:-7px;border:2px solid #172330;border-radius:50%;background:#e4f5ab;box-shadow:0 0 0 1px #cee780}
#configView input[type=range]::-moz-range-thumb{width:16px;height:16px;border:2px solid #172330;border-radius:50%;background:#e4f5ab;box-shadow:0 0 0 1px #cee780}
#configView input[type=range]:focus-visible{outline:2px solid var(--pg-accent);outline-offset:3px}
/* Match the transport captions; shuffle has its own horizontal space. */
#barRight #barPlayOriginal{padding:8px 38px 8px 6px;gap:3px}
#barRight #barPlayOriginal .bar-primary{font-size:clamp(12px,1.15vw,18px)}
#barRight #barPlayOriginal .bar-secondary{font-size:clamp(9px,.85vw,13px)}
#barRight .shuffle-toggle{align-self:center;margin:0 4px 0 0}