/* ============================================================
   PANEL STACK — container for open panels
   Anchored to the right, resizable width.
   Internal panels are flex children sharing this width.
   ============================================================ */

.panel-stack {
    position: absolute;
    top: var(--space-3);
    bottom: var(--space-3);
    right: calc(var(--rail-width) + var(--panel-gap));
    width: var(--panel-width);
    min-width: var(--panel-min-w);
    max-width: var(--panel-max-w);
    display: flex;
    flex-direction: column;
    z-index: 20;

    pointer-events: none;
    /* JS sets each panel's height as inline style (`--panel-h`) when
       dragging the divider and when restoring from localStorage. 0 = equal-share. */
}

/* ===== Lateral resize handle (pseudo-element per panel) =====
   ::before provides both the hit-zone (10px, cursor ew-resize)
   and the visual indicator (2px wide, with border-inline-start).
   JS does hit-test at 12px on each side of the left border. */

.floating-panel::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 10px;
    border-inline-start: 2px solid transparent;
    cursor: ew-resize;
    pointer-events: auto;
    z-index: 0;
    transition: border-color 160ms var(--ease-out);
}

.floating-panel:hover::before {
    border-inline-start-color: oklch(from var(--color-primary) l c h / 0.35);
}
.panel-stack.is-resizing .floating-panel::before {
    border-inline-start-color: var(--color-primary);
}

/* No open panels: no handles. With 1+ open: handle is active.
   Scales to N panels (previously broke at 4+). */
.panel-stack[data-open=""] .floating-panel::before {
    display: none;
}

/* While dragging width, lock cursor and disable selection */
body.is-resizing-panel,
body.is-resizing-panel * {
    cursor: ew-resize !important;
    user-select: none;
}

/* ===== Shared surface between .floating-panel and .help-popover ===== */

.panel-surface {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}