/* Spectra Viewer: collapse controls
   Purpose: explicit CSS home for Browse path and Workspaces collapse UI.
   JS may create controls and toggle state classes, but should not inject these layout rules.
*/

#browser{
  --sv-panel-title-control-h:calc(var(--sp-3,1rem) + var(--sp-1,.25rem));
  --sv-panel-title-radius:var(--sp-radius-1,.65rem);
  --sv-panel-title-gap:var(--sp-1,.25rem);
  --sv-panel-title-pad-x:var(--sp-1,.25rem);
  --sv-browser-header-pad-y:var(--sp-1,.25rem);
  --sv-browser-header-pad-x:var(--sp-3,1rem);
  --sv-browser-path-pad-y:var(--sp-1,.25rem);
  --sv-browser-collapsed-header-h:calc(var(--sp-4,2rem) + var(--sp-2,.5rem) + var(--sp-1,.25rem));
  --sv-workspace-gap:var(--sp-1,.25rem);
  --sv-workspace-control-h:calc(var(--sp-3,1rem) + var(--sp-1,.25rem));
  --sv-workspace-row-h:calc(var(--sv-workspace-control-h) + var(--sv-workspace-control-h) + var(--sv-workspace-gap) + var(--sp-1,.25rem));
}

#browser .sv-panel__header{
  padding:var(--sv-browser-header-pad-y) var(--sv-browser-header-pad-x)!important;
  box-sizing:border-box!important;
}

#browser .sv-browserHeader{
  gap:0!important;
  align-items:center;
  min-height:0!important;
  height:auto!important;
  box-sizing:border-box!important;
}

#browser .sv-browserTitle{
  display:flex;
  align-items:center;
  gap:var(--sv-panel-title-gap) var(--sp-3,1rem);
  width:100%;
  min-height:0;
}

#browser .sv-panelTitleBtn,
#browser .sv-browseTitleBtn,
#browser .sv-workspacesToggle{
  display:inline-flex;
  align-items:center;
  gap:var(--sv-panel-title-gap);
  flex:0 0 auto;
  width:max-content;
  min-height:var(--sv-panel-title-control-h);
  margin:0;
  border:0;
  border-radius:var(--sv-panel-title-radius);
  padding:var(--sp-0,0) var(--sv-panel-title-pad-x) var(--sp-0,0) 0;
  background:transparent;
  color:var(--sp-text);
  cursor:pointer;
  user-select:none;
  font-family:inherit!important;
  font-size:var(--sv-panel-heading-fs,var(--sp-fs-3,1rem))!important;
  font-weight:var(--sv-panel-heading-weight,750)!important;
  line-height:var(--sv-panel-heading-lh,1)!important;
  letter-spacing:var(--sp-letter-normal,0)!important;
  text-align:left;
  appearance:none;
  transition:color var(--sp-duration-2) var(--sp-ease-standard), background var(--sp-duration-2) var(--sp-ease-standard);
}

#browser .sv-panelTitleBtn:hover,
#browser .sv-panelTitleBtn:focus-visible,
#browser .sv-browseTitleBtn:hover,
#browser .sv-browseTitleBtn:focus-visible,
#browser .sv-workspacesToggle:hover,
#browser .sv-workspacesToggle:focus-visible{
  color:color-mix(in srgb,var(--sp-text),var(--sv-link-accent-hover) 22%);
  background:color-mix(in srgb,var(--sv-link-accent),transparent 96%);
  outline:none;
}

#browser .sv-browsePathIndicator,
#browser .sv-workspacesToggleIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--sp-3,1rem);
  height:var(--sp-3,1rem);
  color:var(--sv-link-accent);
  font-size:calc(var(--sp-fs-1,.875rem) - .135rem);
  line-height:1;
  transform:rotate(90deg);
  transition:transform var(--sp-duration-2) var(--sp-ease-standard), color var(--sp-duration-2) var(--sp-ease-standard);
}

#browser .sv-browseTitleBtn:hover .sv-browsePathIndicator,
#browser .sv-browseTitleBtn:focus-visible .sv-browsePathIndicator,
#browser .sv-workspacesToggle:hover .sv-workspacesToggleIcon,
#browser .sv-workspacesToggle:focus-visible .sv-workspacesToggleIcon{
  color:var(--sv-link-accent-hover);
}

#browser.is-browsePathCollapsed .sv-browsePathIndicator,
#browser.is-workspacesCollapsed .sv-workspacesToggleIcon{
  transform:rotate(0deg);
}

#browser #browseTitlePath{
  order:20;
  flex:0 0 100%;
  display:block;
  width:100%;
  max-width:100%;
  max-height:none;
  opacity:1;
  overflow:visible;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-overflow:clip;
  line-height:var(--sp-lh-2,1.25);
  padding:var(--sv-browser-path-pad-y) 0 var(--sp-0,0);
  transition:opacity var(--sp-duration-2) var(--sp-ease-standard), padding var(--sp-duration-2) var(--sp-ease-standard), transform var(--sp-duration-2) var(--sp-ease-standard);
}

#browser.is-browsePathCollapsed #browseTitlePath{
  flex-basis:0;
  width:0;
  max-height:0;
  opacity:0;
  overflow:hidden;
  padding-top:0;
  padding-bottom:0;
  transform:translateY(calc(0rem - var(--sp-1,.25rem)));
  pointer-events:none;
}

#browser .sv-browserActions{
  margin-top:var(--sp-0,0);
  width:100%;
}

#browser .sv-areaNav{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-rows:var(--sv-workspace-control-h) var(--sv-workspace-control-h)!important;
  grid-auto-flow:row!important;
  grid-auto-columns:auto!important;
  grid-auto-rows:var(--sv-workspace-control-h)!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  gap:var(--sv-workspace-gap)!important;
  width:100%;
  max-width:100%;
  max-height:var(--sv-workspace-row-h);
  margin:0;
  padding:var(--sp-1,.25rem) 0 0;
  opacity:1;
  overflow:hidden;
  transform:translateY(0);
  box-sizing:border-box;
  transition:max-height var(--sp-duration-3) var(--sp-ease-standard), opacity var(--sp-duration-2) var(--sp-ease-standard), transform var(--sp-duration-2) var(--sp-ease-standard), margin var(--sp-duration-2) var(--sp-ease-standard), padding var(--sp-duration-2) var(--sp-ease-standard);
}

#browser .sv-areaNav .sv-areaBtn{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:var(--sv-workspace-control-h)!important;
  justify-content:center;
  padding:var(--sp-1,.25rem) var(--sp-2,.5rem)!important;
  border-radius:var(--sp-radius-1,.68rem)!important;
  font-size:calc(var(--sp-fs-1,.875rem) - .095rem)!important;
  font-weight:660!important;
  line-height:1!important;
  letter-spacing:calc(0em - var(--sp-letter-tight,.025em))!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-sizing:border-box!important;
}

#browser #areaWorkbenchBtn{ grid-column:1!important; grid-row:1!important; }
#browser #areaHollowverseBtn{ grid-column:2!important; grid-row:1!important; }
#browser #areaSpectraportalBtn{ grid-column:1!important; grid-row:2!important; }
#browser #areaCodecrunchersBtn{ grid-column:2!important; grid-row:2!important; }

#browser .sv-statusToggle,
#browser .sv-statusPanel--header{
  display:none!important;
}

#browser.is-workspacesCollapsed .sv-areaNav{
  max-height:0;
  opacity:0;
  transform:translateY(calc(0rem - var(--sp-1,.25rem)));
  margin:0;
  padding-top:0;
  padding-bottom:0;
  pointer-events:none;
  overflow:hidden;
}

#browser.is-browsePathCollapsed.is-workspacesCollapsed .sv-browserActions,
#browser.is-browsePathCollapsed.is-workspacesCollapsed .sv-statusPanel--header{
  display:none;
}

@media/* --sp-bp-md: 52rem */
 (max-width:52rem){
  #browser.is-browsePathCollapsed.is-workspacesCollapsed .sv-panel__header{
    min-height:auto!important;
    max-height:none!important;
    height:auto!important;
    display:block!important;
    overflow:visible!important;
  }

  #browser.is-browsePathCollapsed.is-workspacesCollapsed .sv-browserHeader,
  #browser.is-browsePathCollapsed.is-workspacesCollapsed .sv-browserTitle{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
}