/* Chrome: panel-trail — unified's merged tree; the site menu always stays,
   and once you scroll, the article outline collapses to just the reader's
   trail (title → active heading chain). The full outline returns at the
   top of the page or on hover over the sidebar.

   How the collapse presents is a choice (data-trail-anim, set by the
   design preset's `trailAnim`):
     fold — per-node height+opacity animation (the most "animated")
     fade — no motion: entries dissolve, then one clean layout snap
     none — instant
   In every mode, hidden entries end at display:none / visibility:hidden —
   truly gone (no tab stops, no screen-reader ghosts). */

@import url("/theme/css/chrome-panel-unified.css");

/* ------------------------------------------------------------ fold-once
   Fold when the collapse state itself toggles (leaving/returning to the
   top of the page — site.js pulses data-trail-animating on that boundary);
   everything else (active-section swaps while reading, hover reveal) is
   instant. */

html[data-chrome="panel-trail"][data-trail-anim="fold-once"] {
  interpolate-size: allow-keywords;
}
html[data-chrome="panel-trail"][data-trail-anim="fold-once"] .pu-toc-body .tree-node {
  height: auto;
  overflow: clip;
}
html[data-chrome="panel-trail"][data-trail-anim="fold-once"][data-trail-animating] .pu-toc-body .tree-node {
  transition:
    height 240ms ease,
    opacity 160ms ease,
    padding 240ms ease,
    visibility 0s;
}
html[data-chrome="panel-trail"][data-trail-anim="fold-once"]:not([data-near-top="true"]):not([data-nav-hover="true"]):not(:has(.control-panel:focus-within))
  .pu-toc-body .tree-node:not(:has(.is-active, .is-active-parent)) {
  height: 0;
  opacity: 0;
  padding-block: 0;
  visibility: hidden;
}
html[data-chrome="panel-trail"][data-trail-anim="fold-once"][data-trail-animating]:not([data-near-top="true"]):not([data-nav-hover="true"]):not(:has(.control-panel:focus-within))
  .pu-toc-body .tree-node:not(:has(.is-active, .is-active-parent)) {
  transition:
    height 240ms ease,
    opacity 160ms ease,
    padding 240ms ease,
    visibility 0s 240ms;
}

/* ---------------------------------------------------------------- fold */

html[data-chrome="panel-trail"][data-trail-anim="fold"] {
  interpolate-size: allow-keywords;
}
html[data-chrome="panel-trail"][data-trail-anim="fold"] .pu-toc-body .tree-node {
  height: auto;
  overflow: clip;
  transition:
    height 240ms ease,
    opacity 160ms ease,
    padding 240ms ease,
    visibility 0s;
}
html[data-chrome="panel-trail"][data-trail-anim="fold"]:not([data-near-top="true"]):not([data-nav-hover="true"]):not(:has(.control-panel:focus-within))
  .pu-toc-body .tree-node:not(:has(.is-active, .is-active-parent)) {
  height: 0;
  opacity: 0;
  padding-block: 0;
  visibility: hidden;
  transition:
    height 240ms ease,
    opacity 160ms ease,
    padding 240ms ease,
    visibility 0s 240ms;
}

/* ---------------------------------------------------------------- fade */

html[data-chrome="panel-trail"][data-trail-anim="fade"] .pu-toc-body .tree-node {
  transition: opacity 130ms ease, display 130ms allow-discrete;
  @starting-style {
    opacity: 0;
  }
}
html[data-chrome="panel-trail"][data-trail-anim="fade"]:not([data-near-top="true"]):not([data-nav-hover="true"]):not(:has(.control-panel:focus-within))
  .pu-toc-body .tree-node:not(:has(.is-active, .is-active-parent)) {
  opacity: 0;
  display: none;
}

/* ---------------------------------------------------------------- none */

html[data-chrome="panel-trail"][data-trail-anim="none"]:not([data-near-top="true"]):not([data-nav-hover="true"]):not(:has(.control-panel:focus-within))
  .pu-toc-body .tree-node:not(:has(.is-active, .is-active-parent)) {
  display: none;
}

/* Panel collapse (the chevron) must actually hide everything. */
html[data-chrome="panel-trail"][data-cp="collapsed"] .cp-sections {
  display: none;
}