/* Shared panel geometry: use available space and the actual header bottom. */
#main, .main-content { min-width: 0; }
.detail-content { container-type: inline-size; min-width: 0; }

/* Desktop/tablet drawers dock; phones (including touch landscape) use sheets. */
@media (min-width: 768px) and (min-height: 501px), (min-width: 768px) and (pointer: fine) {
  :root {
    --tree-panel-effective-width: min(var(--tree-panel-width), calc(100vw - 400px));
    --drawer-effective-width: min(var(--drawer-width), calc(100vw - 400px));
  }
  #tree-panel.open {
    width: var(--tree-panel-effective-width);
    min-width: var(--tree-panel-effective-width);
    max-width: var(--tree-panel-effective-width);
  }
  #filter-panel.open {
    width: var(--drawer-effective-width);
    min-width: var(--drawer-effective-width);
    max-width: var(--drawer-effective-width);
  }
  body.detail-active #tree-panel:not(.open),
  body.detail-active #filter-panel:not(.open) { display: none; }
  body.detail-active #tree-panel.open,
  body.detail-active #filter-panel.open {
    position: fixed;
    top: var(--detail-panel-top, 0px);
    bottom: 0;
    height: auto;
    z-index: var(--z-panel);
  }
  body.detail-active #tree-panel.open { left: 0; }
  body.detail-active #filter-panel.open { right: 0; }
  body.detail-active:has(#tree-panel.open) .main-content { margin-left: var(--tree-panel-effective-width); }
  body.detail-active:has(#filter-panel.open) .main-content { margin-right: var(--drawer-effective-width); }
  /* The detail bar (breadcrumb, actions) and the tab strip sit in the page header: the panel width is added
     to their own side padding, so their centred inner rows stay over the content while the bars and their
     bottom borders keep the full width (also above the panel). */
  body.detail-active:has(#tree-panel.open) .header-detail .detail-header { padding-left: calc(var(--page-gutter) + var(--tree-panel-effective-width)); }
  body.detail-active:has(#tree-panel.open) .header-detail .detail-tabs { padding-left: calc(var(--space-6) + var(--tree-panel-effective-width)); }
  body.detail-active:has(#filter-panel.open) .header-detail .detail-header { padding-right: calc(var(--page-gutter) + var(--drawer-effective-width)); }
  body.detail-active:has(#filter-panel.open) .header-detail .detail-tabs { padding-right: calc(var(--space-6) + var(--drawer-effective-width)); }
  body.detail-active #tree-panel.open + .panel-resize-handle,
  body.detail-active .panel-resize-handle:has(+ #filter-panel.open) {
    position: fixed;
    top: var(--detail-panel-top, 0px);
    bottom: 0;
    z-index: calc(var(--z-panel) + 1);
  }
  body.detail-active #tree-panel.open + .panel-resize-handle { left: var(--tree-panel-effective-width); }
  body.detail-active .panel-resize-handle:has(+ #filter-panel.open) { right: var(--drawer-effective-width); }
}

/* A drawer can make a large viewport's content as narrow as a phone. */
@container (max-width: 850px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
}