/* Viewer panel HTML cleanup bridge
   Browser/Preview now use sv-panel anatomy, not framework card/panel-fill anatomy.
   This file is CSS-only. JS should not inject or own these layout/visual rules. */

.sv-panel{
  position:relative;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:var(--sp-border-1);
  border-radius:var(--sp-radius-3,1rem);
  box-sizing:border-box;
}

.sv-panel__header{
  flex:0 0 auto;
  min-height:0;
  box-sizing:border-box;
}

.sv-panel__body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  box-sizing:border-box;
}

#browser.sv-panel{
  background:var(--sv-browser-bg);
  border-color:var(--sv-browser-border);
  box-shadow:var(--sv-browser-shadow);
}

#browser .sv-panel__header{
  padding:var(--sp-3,1rem);
  padding-bottom:var(--sp-2,.5rem);
  background:var(--sv-browser-header-bg);
  border-bottom:var(--sp-border-w-1,1px) solid var(--sv-browser-header-border);
  box-shadow:var(--sv-browser-header-shadow);
}

#browser .sv-panel__body{
  padding:var(--sp-3,1rem);
  background:var(--sv-browser-body-bg);
}

#preview.sv-panel{
  background:var(--sv-preview-shell-bg);
  border-color:var(--sv-preview-shell-border);
  box-shadow:var(--sv-preview-shell-shadow);
}

/* Preview header geometry.
   Use framework spacing primitives through Viewer semantic aliases, and let
   content determine the row height instead of a fixed/minimum panel band. */
body.sp-app-shell.sv-viewer #preview{
  --sv-preview-header-pad-block:var(--sp-2,.5rem);
  --sv-preview-header-pad-inline:var(--sp-3,1rem);
  --sv-preview-header-row-min-block-size:0rem;
  --sv-preview-header-gap:var(--sp-2,.5rem);
}

body.sp-app-shell.sv-viewer #preview > .sv-panel__header{
  flex:0 0 auto!important;
  block-size:auto!important;
  height:auto!important;
  min-block-size:0!important;
  min-height:0!important;
  margin:0!important;
  padding-block:var(--sv-preview-header-pad-block)!important;
  padding-inline:var(--sv-preview-header-pad-inline)!important;
  background:var(--sv-preview-header-bg);
  border-bottom:var(--sp-border-w-1,1px) solid var(--sv-preview-header-border);
  box-shadow:var(--sv-preview-header-shadow);
}

body.sp-app-shell.sv-viewer #preview > .sv-panel__header > .sv-previewHeader{
  block-size:auto!important;
  height:auto!important;
  min-block-size:var(--sv-preview-header-row-min-block-size)!important;
  min-height:var(--sv-preview-header-row-min-block-size)!important;
  margin:0!important;
  padding:0!important;
  gap:var(--sv-preview-header-gap)!important;
  align-items:center!important;
}

body.sp-app-shell.sv-viewer #preview > .sv-panel__header .sv-previewHeading,
body.sp-app-shell.sv-viewer #preview > .sv-panel__header .sv-previewActionRow{
  min-block-size:0!important;
  min-height:0!important;
  margin-block:0!important;
}

#preview .sv-panel__body{
  display:flex;
  flex-direction:column;
  padding:0;
  background:var(--sv-preview-body-bg);
}

#previewContent{
  flex:1 1 auto;
  min-height:0;
  height:auto;
  overflow:auto;
  margin:0;
}

#previewContent.sv-preview{
  border-radius:0 0 var(--sp-radius-2,.8rem) var(--sp-radius-2,.8rem);
}

@media/* --sp-bp-md: 52rem */
 (max-width:52rem){
  #browser .sv-panel__header{
    padding:var(--sp-3,1rem);
  }

  body.sp-app-shell.sv-viewer #preview{
    --sv-preview-header-pad-block:var(--sp-2,.5rem);
    --sv-preview-header-pad-inline:var(--sp-3,1rem);
  }

  #browser .sv-panel__body{
    padding:var(--sp-3,1rem);
  }
}