/* ================================================================
   panel-swap.css — side-panel swap (panel-swap.js, CEO 2026-11-02).

   html[data-panels="swapped"] exchanges the two side panels of
   .main: the PE-MASTER VORTEX dock (244px) takes the left spot
   and the watchlist rail (var(--wl-width)) takes the right.
   Pure flex `order` — no width, flex-basis or internal layout
   changes anywhere, so each panel keeps its own size and the
   chart column (flex:1) is exactly as wide in both
   orientations; only the panels' outer 2px margins mirror so
   the edge gutters stay on the outside. The shell fills its
   box identically either way — no gaps, no overlaps.

   Desktop row layout only: below the 900px breakpoint .main
   stacks vertically and keeps its natural top-to-bottom order
   regardless of the preference (the swap is a left/right
   choice; there are no sides to exchange in the stack).
   ================================================================ */
@media (min-width: 901px) {
  html[data-panels="swapped"] .main .dock { order: 1; margin: 2px 0 2px 2px; }
  html[data-panels="swapped"] .main .chart-col { order: 2; }
  html[data-panels="swapped"] .main .watchlist { order: 3; margin: 2px 2px 2px 0; }

  /* The rail's resize handle (wl-resize.js) rides the edge next
     to the chart: right edge in the default layout, left edge
     once the rail sits on the right. */
  html[data-panels="swapped"] .wl-resize-handle { left: 0; right: auto; }
}

/* Pressed = the panels are currently swapped. Matches the
   house "on" treatment of the top-bar pane toggles. */
#panelSwapBtn[aria-pressed="true"] {
  background: var(--green);
  color: #03140a;
  border-color: var(--green);
}