/* column-accordions.css — shared accordion pattern for both side
 * panels (#hud-left-panel + #hud-right-panel).
 *
 * Each column is a flex column where:
 *
 *   1. The TOP child is the always-on log section (events on the
 *      left, player-actions on the right). It uses `flex: 1 1 0`
 *      so it shares column space equally with any expanded
 *      accordion siblings below it.
 *
 *   2. Each ACCORDION section below it is `flex: 0 0 auto` when
 *      collapsed (just the header strip, ~30-36px) and switches to
 *      `flex: 1 1 0` when expanded (claims an equal share of the
 *      remaining space). The body is `display: none` when
 *      collapsed; `display: block; overflow-y: auto` when expanded.
 *
 * Sharing math (because every flexible item uses `flex: 1 1 0`):
 *   - 0 accordions expanded → log takes 100% of the column
 *   - 1 expanded            → log + 1 = 50/50
 *   - 2 expanded            → log + 2 = 33/33/33
 *   - N expanded            → log + N = (100/(N+1))% each
 * No section can dominate; the log is never starved. min-height: 0
 * everywhere lets each section's body scrollbar take over when the
 * share is tight.
 *
 * ───── HOW TO ADD A NEW ACCORDION SECTION ────────────────────────
 *
 * 1. HTML — add a `<section class="apex-<name>-section">` inside the
 *    `.hud-side-panel-inner` of the column you want (left or right),
 *    AFTER the always-on log section.
 *
 * 2. CSS — add a rule pair in a dedicated file (e.g.
 *    missions.css for missions, right-column-overrides.css for
 *    glossary/keybindings) following this template:
 *
 *      .apex-<name>-section {
 *        flex: 0 0 auto;
 *        display: flex;
 *        flex-direction: column;
 *        overflow: hidden;
 *        margin: 8px -10px 0;       (full-width edge-to-edge)
 *        border-top: 1px solid rgba(120, 150, 175, 0.18);
 *      }
 *      .apex-<name>-section[data-expanded="true"] {
 *        flex: 1 1 0;
 *        min-height: 0;
 *      }
 *
 *    Plus body show/hide rules driven by [data-expanded="true"] —
 *    see the right-column-overrides.css template for sticky panels.
 *
 * 3. JS — whatever toggles the section's open/closed state must set
 *    `section.dataset.expanded = 'true' | 'false'` so the CSS rules
 *    take effect. The header inside the section should be a click
 *    target that toggles this flag.
 *
 * 4. Body scrollbar — body needs `scrollbar-width: thin` +
 *    `scrollbar-color` for Firefox, `::-webkit-scrollbar-*` rules
 *    for Chromium. Do NOT use `ApexScrollbar.attach()` on a body
 *    that may be `display: none` at mount time — the helper hides
 *    the native scrollbar and its custom one fails to render. */

/* ── Inner-container flex override ────────────────────────────────
 * Both side panels override their base block-with-overflow-y:auto
 * inner so the column can split into independently-scrollable
 * sub-sections. */

#hud-left-panel  .hud-side-panel-inner,
#hud-right-panel .hud-side-panel-inner {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* ── Always-on log sections (top of each column) ─────────────────
 * flex: 1 1 0 so they share space equally with any expanded
 * accordion siblings below. min-height: 0 lets the body scroller
 * compress when accordions claim space. */

.apex-events-section,
.apex-actions-section {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Native thin teal-grey scrollbar (Firefox + Chromium) for both
 * always-on log bodies. The bodies themselves are created by their
 * respective modules (hud-events.js, hud-player-actions.js) and
 * get `overflow-y: auto` from those modules. */

.apex-events-section  .apex-events-body,
.apex-actions-section .apex-actions-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 150, 175, 0.45) transparent;
}
.apex-events-section  .apex-events-body::-webkit-scrollbar,
.apex-actions-section .apex-actions-body::-webkit-scrollbar         { width: 6px; }
.apex-events-section  .apex-events-body::-webkit-scrollbar-track,
.apex-actions-section .apex-actions-body::-webkit-scrollbar-track   { background: transparent; }
.apex-events-section  .apex-events-body::-webkit-scrollbar-thumb,
.apex-actions-section .apex-actions-body::-webkit-scrollbar-thumb   { background: rgba(120, 150, 175, 0.4); border-radius: 3px; }
.apex-events-section  .apex-events-body::-webkit-scrollbar-thumb:hover,
.apex-actions-section .apex-actions-body::-webkit-scrollbar-thumb:hover { background: rgba(120, 150, 175, 0.65); }