/* Feature-branch UI refinements for the free looper work.
   Keep visual rules here rather than injecting style tags from behaviour modules. */

/* Transport layout */
.transport-shell{
  grid-template-columns:minmax(180px,1fr) auto auto!important;
  align-items:center!important;
  column-gap:18px!important;
}
.transport-shell>.project-label{grid-column:1!important;justify-self:start!important;min-width:0!important}
.transport-shell>.transport-buttons{grid-column:2!important;grid-row:1!important;justify-self:end!important;flex-wrap:nowrap!important}
.transport-shell>.switch-bank{grid-column:3!important;grid-row:1!important;justify-self:end!important;justify-content:flex-end!important;align-items:center!important;flex-wrap:nowrap!important;min-width:0!important}
.transport-shell>.step-readout{display:none!important}
.transport-shell .pill{display:inline-grid!important;place-items:center!important;min-height:38px!important;line-height:1!important}
#snapBtn{display:none!important}

/* Compact BPM menu */
.bpm-menu-wrap{position:relative!important;display:inline-grid!important;place-items:center!important}
.bpm-menu-button{min-width:94px!important;padding-left:14px!important;padding-right:14px!important}
.bpm-popover{
  position:absolute!important;
  top:calc(100% + 10px)!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:80!important;
  display:grid!important;
  gap:10px!important;
  width:min(230px,calc(100vw - 28px))!important;
  padding:12px!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  background:color-mix(in srgb,var(--paper) 94%,var(--panel))!important;
  box-shadow:var(--shadow)!important;
}
.bpm-popover[hidden]{display:none!important}
.bpm-popover .bpm-control{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 88px!important;
  align-items:center!important;
  gap:10px!important;
  min-height:auto!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  transform:none!important;
}
.bpm-popover .bpm-control .tiny-label{margin:0!important;text-align:left!important;line-height:1!important;transform:none!important}
.bpm-popover .bpm-control input{width:88px!important;height:38px!important;min-height:38px!important;text-align:center!important;padding:4px 6px!important}
.bpm-popover .bpm-popover-detect{width:100%!important;max-width:none!important;min-height:40px!important;margin:0!important}

/* Top-bar volume controls */
.transport-volume-stack{padding-left:14px!important;padding-right:14px!important}
.transport-volume-stack .numeric-control{padding-left:6px!important;padding-right:6px!important}
.transport-volume-stack input[type=range],
.metronome-volume-control input[type=range],
.master-volume-control input[type=range]{width:calc(100% - 12px)!important;margin-left:6px!important;margin-right:6px!important}

/* Side panel names and theme-safe details */
.sample-name,#selectedPadSample{display:none!important}
body[data-theme=field] .transport-shell{border:1px solid #ff7a3d!important}
.selected-pad-load-button,.selected-pad-load-button span{color:#111!important}

/* FX and waveform accordions */
.side-panel details.sound-control-panel,
.side-panel details.trim-panel{
  box-sizing:border-box!important;
  display:block!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:18px!important;
  background:color-mix(in srgb,var(--paper) 78%,var(--panel))!important;
}
.side-panel details.sound-control-panel:not([open]),
.side-panel details.trim-panel:not([open]){
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
}
.side-panel details.sound-control-panel>summary,
.side-panel details.trim-panel>summary{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  margin:0!important;
  padding:0 16px!important;
  line-height:1!important;
}
.side-panel details.sound-control-panel[open]>summary,
.side-panel details.trim-panel[open]>summary{
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0 16px!important;
}
.side-panel details.sound-control-panel>summary::after,
.side-panel details.trim-panel>summary::after{
  float:none!important;
  display:grid!important;
  place-items:center!important;
  width:20px!important;
  height:20px!important;
  margin-left:auto!important;
  line-height:1!important;
}
.sound-control-panel label{padding:0 12px 12px!important;gap:6px!important}
.sound-control-panel label:has(#padPitchInput){padding-bottom:16px!important}
.sound-control-panel input[type=range]{display:block;width:100%!important;height:22px!important;padding:0!important;margin:0!important}
.fx-button-row{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;padding:4px 16px 18px!important;gap:10px!important;margin:0!important}
.fx-button-row .panel-button{width:100%!important;max-width:none!important;min-width:0!important;min-height:48px!important;margin:0!important;padding:12px 16px!important;border-radius:24px!important}

/* Advanced FX modal */
.advanced-fx-help{display:none!important}
.advanced-fx-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(0,0,0,.4);padding:20px}
.advanced-fx-modal[hidden]{display:none!important}
.advanced-fx-card{width:min(440px,100%);display:grid;gap:12px;border:1px solid var(--line);border-radius:28px;background:color-mix(in srgb,var(--paper) 90%,white 10%);box-shadow:var(--shadow);padding:18px}
.advanced-fx-heading{display:flex;align-items:start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.advanced-fx-heading h2{margin:0;font-size:2rem;line-height:.95;letter-spacing:-.05em}
.advanced-fx-heading .panel-button{width:auto!important;max-width:none!important}
.advanced-fx-slider,.advanced-fx-sustain{display:grid;gap:7px;color:var(--muted);font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.advanced-fx-slider input{width:100%;padding:0;accent-color:var(--hot)}
.advanced-fx-sustain{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
.advanced-fx-sustain>span{grid-column:1/-1}
.sustain-toggle{width:auto!important;min-width:78px!important;max-width:none!important;justify-self:start!important;padding:7px 14px!important}
.sustain-toggle:not(.active){background:color-mix(in srgb,var(--paper) 88%,white 12%)!important;color:var(--ink)!important}

/* Settings menu alignment */
.settings-card .select-control,
.settings-card .record-key-setting,
.settings-card .play-key-setting{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 176px!important;
  align-items:center!important;
  gap:14px!important;
}
.settings-card .select-control .tiny-label,
.settings-card .record-key-setting .tiny-label,
.settings-card .play-key-setting .tiny-label{margin:0!important;text-align:left!important;justify-self:start!important}
.settings-card .select-control select,
.settings-card .record-key-setting button,
.settings-card .play-key-setting button{box-sizing:border-box!important;width:176px!important;min-width:176px!important;max-width:176px!important;justify-self:end!important;text-align:center!important}
.record-key-setting .record-key-button,
.play-key-setting .play-key-button{width:176px!important;max-width:176px!important;text-align:center!important;text-transform:none!important;letter-spacing:.04em!important}
.record-key-setting .record-key-button.capturing,
.play-key-setting .play-key-button.capturing{background:var(--hot)!important;color:var(--paper)!important;box-shadow:0 0 0 5px color-mix(in srgb,var(--hot) 20%,transparent)!important}

/* Free looper/sequencer pane chevrons */
.collapsible-pane>summary{cursor:default!important;user-select:none!important}
.pane-chevron{display:grid!important;place-items:center!important;width:38px!important;height:38px!important;min-width:38px!important;border:1px solid var(--line)!important;border-radius:999px!important;background:color-mix(in srgb,var(--paper) 82%,var(--panel))!important;cursor:pointer!important;font-size:1.1rem!important}
.pane-chevron:hover{border-color:var(--hot)!important;color:var(--hot)!important}

/* Footer */
.app-footer{
  margin:22px auto 0!important;
  padding:10px 0 0!important;
  color:var(--muted)!important;
  font-size:.68rem!important;
  font-weight:800!important;
  letter-spacing:.14em!important;
  text-align:center!important;
  text-transform:uppercase!important;
}

@media(max-width:1040px){
  .transport-shell{grid-template-columns:1fr!important;row-gap:12px!important}
  .transport-shell>.project-label,
  .transport-shell>.transport-buttons,
  .transport-shell>.switch-bank{grid-column:1!important;grid-row:auto!important;justify-self:start!important}
  .transport-shell>.switch-bank{flex-wrap:wrap!important;justify-content:flex-start!important}
}