/* Desktop rail entrance: keep the page's right edge fixed while the rail claims space.
   A block with width:auto continuously fills the space left by its interpolated margin.
   This avoids transitioning from auto to calc(), which cannot interpolate reliably. */
@media (min-width: 821px) {
  :root {
    --rail-entrance-duration: 280ms;
    --rail-entrance-ease: cubic-bezier(0.23, 1, 0.32, 1);
  }

  .side-rail {
    transition:
      transform var(--rail-entrance-duration) var(--rail-entrance-ease),
      width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  main,
  .footer {
    width: auto;
    margin-left: 0;
    transition: margin-left var(--rail-entrance-duration) var(--rail-entrance-ease);
    will-change: margin-left;
  }

  body.has-rail main,
  body.has-rail .footer {
    width: auto;
    margin-left: var(--rail-w);
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 821px) {
  .side-rail,
  main,
  .footer {
    transition: none;
  }
}