/* Collapsible side rails — index-v3. Rails slide away; edge tabs bring them back. */
body.rails-ready .atlas-shell { transition: grid-template-columns .55s cubic-bezier(.22, 1, .36, 1); }
.side-rail, .info-rail { overflow: hidden; }
.side-rail > *, .info-rail > * { transition: opacity .25s ease; }

body.rail-left-collapsed .side-rail { padding-inline: 0; border-right: 0; }
body.rail-left-collapsed .side-rail > * { opacity: 0; pointer-events: none; }
body.rail-right-collapsed .info-rail { padding-inline: 0; border-left: 0; }
body.rail-right-collapsed .info-rail > * { opacity: 0; pointer-events: none; }

@media (min-width: 1500px) {
  body.rail-left-collapsed .atlas-shell { grid-template-columns: 0 minmax(0, 1fr) 288px; }
  body.rail-right-collapsed .atlas-shell { grid-template-columns: 184px minmax(0, 1fr) 0; }
  body.rail-left-collapsed.rail-right-collapsed .atlas-shell { grid-template-columns: 0 minmax(0, 1fr) 0; }
}

@media (max-width: 1499px) and (min-width: 768px) {
  body.rail-left-collapsed .atlas-shell { grid-template-columns: 0 minmax(0, 1fr); }
  /* .rail-toggle.rail-toggle--right beats the later `.rail-toggle { display: grid }` base rule */
  .rail-toggle.rail-toggle--right { display: none; }
}

.rail-toggle { position: fixed; z-index: 60; top: 50%; transform: translateY(-50%); width: 26px; height: 64px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(40, 45, 60, .1); background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); color: #737986; box-shadow: 0 6px 18px rgba(40, 45, 65, .08); cursor: pointer; transition: color .2s ease, box-shadow .2s ease; }
.rail-toggle:hover { color: var(--text-primary); box-shadow: 0 8px 22px rgba(40, 45, 65, .16); }
.rail-toggle svg { width: 14px; height: 14px; transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
.rail-toggle--left { left: 0; border-left: 0; border-radius: 0 12px 12px 0; }
.rail-toggle--right { right: 0; border-right: 0; border-radius: 12px 0 0 12px; }
body:not(.rail-left-collapsed) .rail-toggle--left svg { transform: rotate(180deg); }
body.rail-right-collapsed .rail-toggle--right svg { transform: rotate(180deg); }

@media (max-width: 767px) { .rail-toggle { display: none; } }
