/* PLAYBACK_COMPACT_LAYOUT_V1
   Fixes:
   - Preview column never stretches when jobs grow
   - Recent Jobs becomes a scrollable dock
   - Reduces empty gap + keeps console dense
*/

:root{
  --pbTopOffset: 140px; /* header + top padding */
  --pbRailW: 380px;
  --pbGap: 16px;
}

/* The main 2-col grid (works with your rebuilt playback.html) */
.grid{
  align-items: start !important;
  gap: var(--pbGap) !important;
}

/* Lock both sides to viewport height so internal panes can scroll */
#pbPreviewCard,
#pbRightRail{
  height: calc(100vh - var(--pbTopOffset)) !important;
  min-height: 520px !important;
}

/* Right rail should not expand the page */
#pbRightRail{
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Recent Jobs container (make it the scroller) */
#pbRightRail .jobsDock,
#pbRightRail .tableWrap,
#pbRightRail .recentCards{
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

#pbRightRail .tableWrap,
#pbRightRail .recentCards{
  overflow: auto !important;
  padding-right: 4px;
}

/* Card density tweaks (works with your recent.cards renderer) */
.pb-job-card{
  padding: 10px 12px !important;
  border-radius: 12px !important;
}

.pb-job-title{
  font-size: 13px !important;
  line-height: 1.2 !important;
}

.pb-job-updated{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 11px !important;
  opacity: .75 !important;
}

/* Make sure the preview stage is stable inside the preview card */
.pb-preview-stage{
  width: 100% !important;
  max-height: 100% !important;
}

/* Mobile: stack and allow natural height */
@media (max-width: 980px){
  #pbPreviewCard, #pbRightRail{
    height: auto !important;
    min-height: 0 !important;
  }
  #pbRightRail{
    overflow: visible !important;
  }
  #pbRightRail .tableWrap,
  #pbRightRail .recentCards{
    max-height: 360px !important;
  }
}