/* right-column-overrides.css — strip the floating chrome off the
 * Glossary + Keybindings sticky panels when they mount inline inside
 * #hud-right-panel, and drive their expand/collapse via the section
 * data-expanded attribute (matches the missions accordion pattern —
 * see column-accordions.css for the shared framework).
 *
 * The panel modules (hud-glossary-sticky.js, hud-keybindings-sticky.js)
 * still own the data-collapsed attribute on the panel itself; their
 * setCollapsed() mirrors that flag onto the parent section as
 * data-expanded so these rules take effect.
 *
 *   data-expanded="false" (default) — section is content-sized
 *     (just the header strip). Body display:none.
 *
 *   data-expanded="true" — section claims an equal share of the
 *     column height (flex: 1 1 0). Body display:block; scrollable.
 *
 * If you add a new sticky-style accordion section to this column,
 * add it here following the same pattern. */

/* ── Section base (collapsed default) ────────────────────────────
 * Full-width edge-to-edge — `margin: 8px -10px 0` pulls past the
 * inner container's 10px horizontal padding. */

.apex-glossary-section,
.apex-keybindings-section {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
  margin: 8px -10px 0;
  border-top: 1px solid rgba(120, 150, 175, 0.18);
}

/* Expanded: section claims a share of the column. */
#hud-right-panel .apex-keybindings-section[data-expanded="true"],
#hud-right-panel .apex-glossary-section[data-expanded="true"] {
  flex: 1 1 0 !important;
  min-height: 0;
}

/* ── Sticky panel chrome strip (when mounted inline) ─────────────
 * The panels were originally position:fixed floaters with their own
 * width / max-height / box-shadow etc. — none of that applies
 * inside the column. Strip everything; let the column flow control
 * geometry. */

#hud-right-panel #apexKeybindingsSticky,
#hud-right-panel #apexGlossarySticky {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-height: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto;
}

/* When expanded, the panel inside the section ALSO needs flex-fill,
 * otherwise it stays at its natural content size (60+ keybindings
 * rows = ~660px) and overflows the section's smaller share, getting
 * clipped by overflow:hidden. flex: 1 1 0 makes the panel match the
 * section's height; the body inside takes panel - head and scrolls. */

#hud-right-panel .apex-keybindings-section[data-expanded="true"] #apexKeybindingsSticky,
#hud-right-panel .apex-glossary-section[data-expanded="true"] #apexGlossarySticky {
  flex: 1 1 0 !important;
  min-height: 0 !important;
}

/* Header full-width inside the panel. */
#hud-right-panel #apexKeybindingsSticky .kbs-head,
#hud-right-panel #apexGlossarySticky .gls-head {
  width: 100%;
  box-sizing: border-box;
}

/* ── Body show/hide via section's data-expanded ──────────────────
 * Collapsed (or no flag): display:none so the body doesn't
 * contribute to layout. Expanded: display:block + overflow-y:auto
 * + full panel-height flex so it scrolls internally when content
 * exceeds the section's share. */

#hud-right-panel .apex-keybindings-section:not([data-expanded="true"]) #apexKeybindingsSticky .kbs-body,
#hud-right-panel .apex-glossary-section:not([data-expanded="true"]) #apexGlossarySticky .gls-body {
  display: none !important;
}

#hud-right-panel .apex-keybindings-section[data-expanded="true"] #apexKeybindingsSticky .kbs-body,
#hud-right-panel .apex-glossary-section[data-expanded="true"] #apexGlossarySticky .gls-body {
  display: block !important;
  max-height: none !important;
  height: auto !important;
  padding: 6px 10px 8px 10px !important;
  opacity: 1 !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Native thin teal-grey scrollbar (Firefox + Chromium). The panel
 * modules' own ::-webkit-scrollbar rules also exist but we win on
 * specificity. */

#hud-right-panel #apexKeybindingsSticky .kbs-body,
#hud-right-panel #apexGlossarySticky .gls-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 150, 175, 0.45) transparent;
}
#hud-right-panel #apexKeybindingsSticky .kbs-body::-webkit-scrollbar,
#hud-right-panel #apexGlossarySticky .gls-body::-webkit-scrollbar         { width: 6px; }
#hud-right-panel #apexKeybindingsSticky .kbs-body::-webkit-scrollbar-track,
#hud-right-panel #apexGlossarySticky .gls-body::-webkit-scrollbar-track   { background: transparent; }
#hud-right-panel #apexKeybindingsSticky .kbs-body::-webkit-scrollbar-thumb,
#hud-right-panel #apexGlossarySticky .gls-body::-webkit-scrollbar-thumb   { background: rgba(120, 150, 175, 0.4); border-radius: 3px; }
#hud-right-panel #apexKeybindingsSticky .kbs-body::-webkit-scrollbar-thumb:hover,
#hud-right-panel #apexGlossarySticky .gls-body::-webkit-scrollbar-thumb:hover { background: rgba(120, 150, 175, 0.65); }