/* Spectra Viewer panel layout
   Contract:
   - framework app_shell.css owns viewport math and active app-view slots.
   - this file owns only Viewer workspace sizing details.
   - JS toggles view state/classes only; JS does not inject layout CSS.
*/

body.sp-app-shell.sv-viewer .sv-main{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:var(--sp-shell-pad,var(--sp-2,.5rem))!important;
  box-sizing:border-box!important;
}

body.sp-app-shell.sv-viewer .sv-workspace{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views{
  display:grid!important;
}

body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views > .sp-app-view{
  min-width:0!important;
  min-height:0!important;
  box-sizing:border-box!important;
}

body.sp-app-shell.sv-viewer .sv-panel{
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  max-height:none!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

body.sp-app-shell.sv-viewer .sv-panel__header{
  flex:0 0 auto!important;
  min-height:0!important;
  box-sizing:border-box!important;
}

body.sp-app-shell.sv-viewer .sv-panel__body{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  box-sizing:border-box!important;
}

body.sp-app-shell.sv-viewer #preview .sv-panel__body{
  display:flex!important;
  flex-direction:column!important;
  padding:var(--sp-0,0)!important;
}

body.sp-app-shell.sv-viewer #previewContent{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  overflow:auto!important;
  margin:var(--sp-0,0)!important;
}

body.sp-app-shell.sv-viewer #previewContent.sv-preview{
  border-radius:0 0 var(--sp-radius-2,.8rem) var(--sp-radius-2,.8rem)!important;
}

body.sp-app-shell.sv-viewer .sv-scroll{
  min-height:0!important;
  overflow:auto!important;
}

body.sp-app-shell.sv-viewer #preview .sv-previewHeader{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:nowrap!important;
  gap:var(--sp-2,.5rem)!important;
  width:100%!important;
  min-width:0!important;
}

body.sp-app-shell.sv-viewer #preview .sv-previewHeading{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:var(--sp-2,.5rem)!important;
}

body.sp-app-shell.sv-viewer #previewTitle{
  margin:0!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

body.sp-app-shell.sv-viewer #preview .sv-previewMeta{
  display:none!important;
}

body.sp-app-shell.sv-viewer #preview .sv-previewActionRow{
  flex:0 0 auto!important;
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:var(--sp-1,.25rem)!important;
}

body.sp-app-shell.sv-viewer #preview .sv-previewActionRow .sp-btn[hidden]{
  display:none!important;
}

.sv-backToBrowseBtn{
  display:inline-flex;
}

/* Explicit local app-view display contract.
   This keeps file-click preview switching reliable even when framework app-view
   rules are stale, cached, or overridden by Viewer panel styles. */
@media/* --sp-bp-md: 52rem */
 (max-width:52rem){
  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views--single-mobile > .sp-app-view{
    grid-column:1!important;
    grid-row:1!important;
    display:none!important;
  }

  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views--single-mobile > .sp-app-view.is-active,
  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views--single-mobile > .sp-app-view[aria-hidden="false"]{
    display:flex!important;
    flex-direction:column!important;
  }
}

/* --sp-bp-md: 52rem */
@media (min-width:52.001rem){
  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views--split-desktop{
    --sp-app-views-cols:minmax(17rem,1fr) minmax(0,2fr);
    grid-template-columns:var(--sp-app-views-cols)!important;
    gap:var(--sp-shell-gap,var(--sp-3,1rem))!important;
  }

  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views--split-desktop > .sp-app-view{
    display:flex!important;
    flex-direction:column!important;
  }

  .sv-backToBrowseBtn{
    display:none!important;
  }
}

/* --sp-bp-md: 52rem */
@media (max-width:52rem){
  body.sp-app-shell.sv-viewer .sv-main{
    padding:var(--sp-shell-pad,var(--sp-2,.5rem))!important;
  }

  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views--single-mobile{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    gap:var(--sp-0,0)!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  body.sp-app-shell.sv-viewer .sv-panel{
    min-height:0!important;
    height:100%!important;
  }
}

/* Viewer tablet-landscape split override. */
@media (orientation:landscape) and (pointer:coarse) and (min-width:48rem) and (min-height:36rem){
  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views--single-mobile{
    --sp-app-views-cols:minmax(20rem,1fr) minmax(0,2fr);
    grid-template-columns:var(--sp-app-views-cols)!important;
    grid-template-rows:minmax(0,1fr)!important;
    gap:var(--sp-shell-gap,var(--sp-3,1rem))!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views--single-mobile > .sp-app-view{
    grid-row:1!important;
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
    min-height:0!important;
  }

  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views--single-mobile > #browser{
    grid-column:1!important;
  }

  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views--single-mobile > #preview{
    grid-column:2!important;
  }

  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views--single-mobile > #browser[aria-hidden="true"],
  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views--single-mobile > #preview[aria-hidden="true"]{
    display:flex!important;
  }

  body.sp-app-shell.sv-viewer .sv-backToBrowseBtn{
    display:none!important;
  }
}
/* End Viewer tablet-landscape split override. */

/* Viewer desktop split guard. */
@media (min-width:52.001rem) and (pointer:fine){
  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views{
    --sp-app-views-cols:minmax(17rem,1fr) minmax(0,2fr);
    grid-template-columns:var(--sp-app-views-cols)!important;
    grid-template-rows:minmax(0,1fr)!important;
    gap:var(--sp-shell-gap,var(--sp-3,1rem))!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views > .sp-app-view{
    grid-row:1!important;
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
    min-height:0!important;
  }

  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views > #browser{
    grid-column:1!important;
  }

  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views > #preview{
    grid-column:2!important;
  }

  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views > #browser[aria-hidden="true"],
  body.sp-app-shell.sv-viewer .sv-workspace.sp-app-views > #preview[aria-hidden="true"]{
    display:flex!important;
  }

  body.sp-app-shell.sv-viewer .sv-backToBrowseBtn{
    display:none!important;
  }
}
/* End Viewer desktop split guard. */