/* drawer-panels.css — placeholders under header row, no layout impact */


:root{
  --tb-open-height: 200px;
  --tb-pad: 6px;
  --panels-inset-x: 20px;
  --panels-gap: 16px;

  --panels-gap-top: 8px;             /* space below header row */
  --panels-gap-bottom: 0px;          /* fill to the bottom by default */
  --panel-border: 3px;
  --tb-open-bottom-pad: 0px;         /* if open state uses bottom padding, set it here */
  --panels-top: 56px;
}



 /* anchor abs children */



.topbar .drawer-panels{
  position: absolute;
  left: var(--panels-inset-x);
  right: var(--panels-inset-x);
  top: calc(var(--panels-top) + var(--panels-gap-top));
  height: calc(
    var(--tb-open-height)
    - var(--panels-top)
    - var(--panels-gap-top)
    - var(--tb-open-bottom-pad)
    - var(--panels-gap-bottom)
    - (2 * var(--panel-border))
  );
  display: none;
  gap: var(--panels-gap);
  pointer-events: none;
  z-index: 1;
}



/* Show instantly when open (no slide) */
.topbar.is-open .drawer-panels{
  display: flex;
  pointer-events: auto;
}

.topbar .drawer-panels .panel{
  flex: 1 1 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,0.9);
}
:root[data-theme="dark"] .topbar .drawer-panels .panel{
  background: rgba(0,0,0,0.5);
}


/* 051: Anchor panels to .topbar-inner so sticky header isn't affected */
.topbar .topbar-inner{ position: relative; }

/* place panels absolutely within the inner container */


.topbar .drawer-panels{
  position: absolute;
  left: var(--panels-inset-x);
  right: var(--panels-inset-x);
  top: calc(var(--panels-top) + var(--panels-gap-top));
  height: calc(
    var(--tb-open-height)
    - var(--panels-top)
    - var(--panels-gap-top)
    - var(--tb-open-bottom-pad)
    - var(--panels-gap-bottom)
    - (2 * var(--panel-border))
  );
  display: none;
  gap: var(--panels-gap);
  pointer-events: none;
  z-index: 1;
}



/* prevent any accidental margin/padding collapse from affecting layout */
.topbar .drawer-panels .panel{ box-sizing: border-box; }


/* 052: Layering — make header content (title + icons) above panels, panels above background */
.topbar .topbar-inner{ position: relative; z-index: 0; }
.topbar .topbar-inner .title,
.topbar .topbar-inner .icons{ position: relative; z-index: 2; }  /* header on top */


.topbar .drawer-panels{
  position: absolute;
  left: var(--panels-inset-x);
  right: var(--panels-inset-x);
  top: calc(var(--panels-top) + var(--panels-gap-top));
  height: calc(
    var(--tb-open-height)
    - var(--panels-top)
    - var(--panels-gap-top)
    - var(--tb-open-bottom-pad)
    - var(--panels-gap-bottom)
    - (2 * var(--panel-border))
  );
  display: none;
  gap: var(--panels-gap);
  pointer-events: none;
  z-index: 1;
}

                              /* panels in the middle */

/* Guarantee panels start below header and never cover it even if measurement fails */


.topbar .drawer-panels{
  position: absolute;
  left: var(--panels-inset-x);
  right: var(--panels-inset-x);
  top: calc(var(--panels-top) + var(--panels-gap-top));
  height: calc(
    var(--tb-open-height)
    - var(--panels-top)
    - var(--panels-gap-top)
    - var(--tb-open-bottom-pad)
    - var(--panels-gap-bottom)
    - (2 * var(--panel-border))
  );
  display: none;
  gap: var(--panels-gap);
  pointer-events: none;
  z-index: 1;
}




/* --- Equal split for TOC + Annotations panels --- */
.topbar .drawer-panels{
  display:flex;
  align-items:stretch;
}
.topbar .drawer-panels .panel{
  flex:0 0 50%;
  max-width:50%;
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}


/* --- Fix drawer closed-state leakage and keep 50/50 split --- */
.topbar .drawer-panels{
  display:none;
}
.topbar.is-open .drawer-panels{
  display:flex;
  pointer-events:auto;
  align-items:stretch;
}
.topbar .drawer-panels .panel{
  flex:0 0 50%;
  max-width:50%;
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}