/* Keep the rail, fixed header, and page on the same animation timeline. */
@media(min-width:1080px) {
  body.in-app {
    --rail-motion:300ms cubic-bezier(.22,.61,.36,1);
    transition:padding-left var(--rail-motion);
  }
  html[data-theme] body.in-app #topbar {transition:left var(--rail-motion)}
  html[data-theme] #drawer {
    transition:width var(--rail-motion),padding-left var(--rail-motion),padding-right var(--rail-motion);
  }
  /* Stable left alignment prevents icons jumping when labels appear/disappear. */
  html[data-theme] #drawer .drawer-head,
  html[data-theme] body.rail-collapsed #drawer .drawer-head {
    justify-content:flex-start;
    padding-left:12px;
    padding-right:0;
  }
  html[data-theme] #drawer .drawer-item,
  html[data-theme] body.rail-collapsed #drawer .drawer-item {
    justify-content:flex-start;
    padding-left:12px;
    padding-right:0;
    gap:11px;
    overflow:hidden;
  }
  html[data-theme] #drawer .brand-name {display:block}
  html[data-theme] #drawer .drawer-item > span {display:flex}
  html[data-theme] #drawer :is(.brand-name,.drawer-item > span) {
    flex-shrink:0;
    white-space:nowrap;
    opacity:1;
    visibility:visible;
    transform:translateX(0);
    transition:opacity 180ms ease 60ms,transform var(--rail-motion),visibility 0s;
  }
  html[data-theme] body.rail-collapsed #drawer :is(.brand-name,.drawer-item > span) {
    opacity:0;
    visibility:hidden;
    transform:translateX(-6px);
    transition:opacity 120ms ease,transform var(--rail-motion),visibility 0s 300ms;
  }
  html[data-theme] #drawer .drawer-foot {
    display:flex;
    width:211px;
    height:76px;
    overflow:hidden;
    opacity:1;
    visibility:visible;
    transition:height var(--rail-motion),padding var(--rail-motion),opacity 180ms ease,border-width var(--rail-motion),visibility 0s;
  }
  html[data-theme] body.rail-collapsed #drawer .drawer-foot {
    height:0;
    padding-top:0;
    padding-bottom:0;
    border-top-width:0;
    opacity:0;
    visibility:hidden;
    transition:height var(--rail-motion),padding var(--rail-motion),opacity 120ms ease,border-width var(--rail-motion),visibility 0s 300ms;
  }
  html[data-theme] #railToggle > svg {transition:transform var(--rail-motion)}
}
@media(min-width:1080px) and (prefers-reduced-motion:reduce) {
  html[data-theme] body.in-app,
  html[data-theme] body.in-app #topbar,
  html[data-theme] #drawer,
  html[data-theme] #drawer * {transition:none !important}
}