/* ======================================================
c030-layout.css — APP LAYOUT (LEFT ICON RAIL + TRUE CENTER REEL)
FULL REPLACE

Fix:
- Reel is centered to the viewport (true center)
- Left rail stays next to it
- Uses a "ghost" right column equal to left rail width to balance centering
====================================================== */

:root{
  --bmRailW: 72px;
  --bmGap: 24px;
  --bmReelW: 760px;
}

.bm-app{
  width: 100%;
  display: grid;

  /* LEFT rail + CENTER reel + RIGHT ghost rail (same width as left) */
  grid-template-columns:
    var(--bmRailW)
    minmax(0, var(--bmReelW))
    var(--bmRailW);

  gap: var(--bmGap);

  /* center the grid tracks inside the page */
  justify-content: center;

  padding: 20px clamp(16px, 3vw, 40px);
  min-width: 0;
}

/* LEFT ICON RAIL */
#bmLeftRail{
  grid-column: 1;
}

/* MAIN COLUMN (reel lives here) */
.bm-main{
  grid-column: 2;
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* (Column 3 is intentionally empty — it's the balancing ghost column) */

/* If left rail collapses to 0, remove its width so reel stays centered */
#bmLeftRail.bm-rail--collapsed{
  width: 0;
  min-width: 0;
  max-width: 0;
}

/* When rail is collapsed, also collapse the left + ghost columns */
.bm-app:has(#bmLeftRail.bm-rail--collapsed){
  grid-template-columns:
    0
    minmax(0, var(--bmReelW))
    0;
}

/* ======================================================
RESPONSIVE
====================================================== */

@media (max-width: 980px){
  .bm-app{
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  #bmLeftRail{ grid-column: auto; }
  .bm-main{ grid-column: auto; }
}