/* Browser-only layout. Shared desktop visuals and practice controls stay intact. */
:root{--transport-height:140px;color-scheme:dark}
html{scroll-padding-bottom:calc(var(--transport-height) + 20px)}
body{min-width:0}main{padding-bottom:calc(var(--transport-height) + 24px)}
button,a,input,select{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.web-mobile-only{display:none}.web-home{color:var(--mint);text-decoration:none;font-size:12px;margin-bottom:18px}
.web-notice{color:#bacabd;border:1px solid #35473b;padding:12px 16px;border-radius:10px;background:#142019;font-size:12px;line-height:1.6;margin:0 0 14px}
.web-notice[hidden]{display:none}.web-beta{font-size:10px;color:var(--mint);border:1px solid #3e5741;padding:5px 9px;border-radius:20px}
#web-help{font-size:11px;padding:8px 10px}.topbar{gap:12px}.topbar .breadcrumb{margin-right:auto}
.web-storage-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
#web-storage-status{font-size:12px;color:var(--mint)}
dialog{max-width:calc(100vw - 24px);max-height:85dvh;overflow:auto;overscroll-behavior:contain}
dialog::backdrop{backdrop-filter:blur(3px)}
#web-menu-scrim{display:none}.web-tip{font-size:11px;color:#98b49f;padding:0 16px 8px;margin:0}
.transport{padding-bottom:max(16px,env(safe-area-inset-bottom));bottom:0}
input[type=range]{min-height:24px}
.tab-tools button{min-width:38px;min-height:38px}
.web-mobile-only[hidden]{display:none}.web-tip{display:none}
.web-options>summary{display:none}
@media(max-width:900px){
  .web-options{margin-bottom:12px}.web-options>summary{display:list-item;padding:12px 14px;cursor:pointer;font-size:13px;color:var(--mint);list-style-position:inside}
  .web-options>summary span{display:block;font-size:10px;color:#97aa9f;margin:5px 0 0 15px}.web-options .listen-panel{margin-bottom:0}
  #web-listening{background:#14201e;border:1px solid #304239;border-radius:10px}#web-listening .listen-panel{border:0}
  .web-mobile-only{display:inline-flex}
  .web-tip{display:block}
  main,.anticipating main{margin:0;padding:0 14px calc(var(--transport-height) + 22px);height:auto;min-height:100dvh;overflow:visible;display:block}
  .sidebar{width:min(330px,88vw);z-index:30;transform:translateX(-105%);transition:transform .18s ease;padding:20px;box-shadow:12px 0 60px #0008}
  .menu-open .sidebar{transform:translateX(0)}
  .menu-open #web-menu-scrim{display:block;position:fixed;inset:0;z-index:29;border:0;border-radius:0;background:#0009}
  #web-close-menu{align-self:flex-end;font-size:22px;padding:4px 14px;min-height:44px}
  .sidebar .brand{grid-template-columns:70px 1fr;margin:0 0 18px;font-size:28px}
  .sidebar .brand-logo{width:70px;height:102px}.sidebar .brand small{font-size:11px}
  .nav-button{min-height:48px;font-size:14px}.recent-open{font-size:13px;min-height:44px}.recent-remove{min-height:44px;min-width:44px}
  .side-bottom{margin-top:20px}.side-bottom button{min-height:44px;font-size:12px}.side-label{font-size:11px}
  .topbar,.anticipating .topbar{height:auto;min-height:65px;gap:8px;flex-wrap:wrap;padding:10px 0}
  .topbar .breadcrumb{display:none}#web-menu{font-size:13px;min-height:44px}.web-beta{margin-right:auto}
  #web-help{min-height:44px;font-size:13px}.device-button{min-height:40px;max-width:100%;font-size:12px}
  .song-header,.anticipating .song-header{padding:20px 0;gap:12px;align-items:center}.song-header>div{min-width:0}
  .song-header h1{font-size:28px;margin:6px 0;overflow-wrap:anywhere}.song-header p,.anticipating .song-header p{display:block;font-size:12px}
  .song-header .eyebrow{display:block;font-size:8px}.song-header .primary{flex-shrink:0;min-height:46px;padding:10px}
  .toolbar,.anticipating .toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:14px;gap:14px;margin:0 0 12px}
  .track-field{min-width:0;max-width:none;grid-column:1/-1}.track-field select{min-height:42px;font-size:16px;width:100%}
  .toolbar .stat{padding:0;border:0}.toolbar .stat:nth-child(3),.toolbar .stat:nth-child(4){display:none}
  .toolbar label>span,.stat>span{font-size:10px}.toolbar strong{font-size:13px}.color-field{margin:0}
  .listen-panel,.anticipating .listen-panel{padding:12px;gap:8px;display:flex;flex-wrap:wrap;margin:0 0 14px}
  .listen-panel button{min-height:44px;font-size:12px;padding:9px}.input-source{flex:1 1 100%;font-size:10px}
  .input-source select{max-width:100%;width:100%;min-height:42px;font-size:16px}
  .listen-readout{flex-basis:90%;min-width:0}.listen-readout strong{font-size:12px}.listen-readout small{font-size:11px;white-space:normal;max-width:none;line-height:1.5}
  .fret-panel .panel-heading,.panel-heading{padding:14px;gap:10px;flex-wrap:wrap}
  .panel-heading>div{gap:8px;flex-wrap:wrap}.panel-heading h2{font-size:15px}.muted{font-size:11px}
  .fret-select{font-size:12px}.fret-select select{font-size:16px;min-height:44px}
  .finger-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0 14px 12px;gap:8px}
  .finger-tools .switch-label{font-size:12px!important;white-space:normal;min-height:40px}
  .switch-label input{width:36px;height:22px}.switch-label input:before{width:14px;height:14px;top:3px;left:3px}
  .switch-label input:checked:before{transform:translateX(14px)}
  .preview-settings{font-size:12px;min-height:40px;text-align:left}#clear-overlays{margin:0}
  .finger-tools>span{grid-column:1/-1;font-size:11px!important;line-height:1.5}
  .fret-panel #fretboard{min-height:276px;padding:0 10px;overflow:auto;overscroll-behavior-x:contain}
  .fret-panel #fretboard svg,.anticipating .fret-panel #fretboard svg{height:276px;width:auto;min-width:760px}
  body:not(.web-ghost) .fret-panel #fretboard{min-height:180px}
  body:not(.web-ghost) .fret-panel #fretboard svg{margin-top:-85px}
  .fret-footer{display:block;padding:10px 14px 14px}.legend{gap:9px;font-size:11px}#led-status{display:block;text-align:left;font-size:10px;margin-top:12px}
  #anticipation-plan{padding:0 14px 8px}#anticipation-summary{font-size:11px}.plan-event{min-height:40px;font-size:12px}
  .tab-panel,.anticipating .tab-panel{min-height:280px;margin-bottom:16px;display:flex}
  #score-scroll,.anticipating #score-scroll{min-height:220px;max-height:65dvh;padding:4px;overflow:auto}
  .tab-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px}.tab-tools>span:nth-child(2){display:none}
  #loop-this-bar{min-height:40px;font-size:12px}#status{font-size:12px;white-space:normal;overflow:visible;margin:0;line-height:1.6}
  .transport{left:0;padding:10px 14px max(10px,env(safe-area-inset-bottom));z-index:20}
  .progress-row{margin-bottom:6px}.transport-row{display:grid;grid-template-columns:1fr 120px auto;gap:12px}
  .play-controls{gap:5px}.play-controls>div{display:none}.play-controls button{min-width:44px;min-height:44px}.play-button{width:48px;height:48px}
  .tempo-controls{width:120px}.tempo-controls input{width:100%;margin:0}.tempo-controls label,.tempo-controls label strong{font-size:11px}.tempo-controls>span{font-size:10px;margin:0}
  #web-more-controls{align-items:center;justify-content:center;padding:8px;min-height:44px;font-size:12px}
  .transport .loop-controls,.transport .rhythm-controls{display:none}
  .transport.expanded .loop-controls{display:flex;grid-column:1/3;border:0;padding:0;gap:10px}
  .transport.expanded .rhythm-controls{display:flex;grid-column:3;gap:5px;flex-direction:column}
  .loop-controls .toggle{min-height:44px;font-size:13px}.loop-controls label{font-size:10px}.loop-controls input{font-size:16px;width:48px;min-height:32px}
  .rhythm-controls button{min-height:36px;padding:6px;font-size:10px}
  dialog{padding:20px;margin:auto;border-radius:14px}dialog h2{font-size:23px}dialog p{font-size:14px}dialog small{font-size:12px}
  dialog .icon-button{min-height:44px;min-width:44px}dialog select,dialog input{font-size:16px!important;max-width:100%}
  .audio-field{font-size:13px}.dialog-actions{flex-wrap:wrap}.dialog-actions button{min-height:44px}
  .audio-columns{flex-direction:column}.tuner-display{padding:12px 0}.tuner-targets button{min-height:44px}
  #legal-text{font-size:12px}.studio-about-content{display:block}.studio-about-content .creator-logo{max-width:160px}
}
@media(max-width:370px){.transport-row{grid-template-columns:1fr 94px auto;gap:6px}.tempo-controls{width:94px}.play-controls{gap:0}.play-controls button{min-width:38px}.song-header h1{font-size:24px}.web-beta{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

@media(max-width:900px){#chorded-options{padding:12px 14px}#chorded-options .switch-label{min-height:40px;font-size:12px!important;white-space:normal}#chorded-options p{font-size:12px}}