/* How the rail opens.

   Four pages carry the same expanding sidebar — code, projects, deployments
   and security — with seventy near-identical rules each. The timing lives
   here so the four cannot disagree about it, and it is linked AFTER each
   page sheet on purpose: everything below overrides timing those copies
   already set, and it has to win.

   Nothing here changes what the rail looks like at rest or when open. It
   changes only how it gets between the two.

   ---- measured, not guessed -------------------------------------------
   Read off replit.com with the devtools equivalent of a ruler, because
   "like Replit" is a question with an actual answer:

     nav            transition: width 0.2s ease-in-out
     content column transition: padding-left 0.2s ease-in-out

   Two things worth taking from that. First, the curve is ease-in-out —
   symmetric, eased at both ends. That is the "steady" quality: it starts
   gently, holds one speed through the middle and settles. An expo-out,
   which is what was here before, front-loads the travel and then decays,
   so the panel lunges and then dawdles into place.

   Second, one duration for opening and closing, and the content column
   rides exactly the same clock as the rail — two properties moving as one
   movement rather than two animations that happen to overlap.

   What is deliberately NOT copied is the duration itself. 0.2s is quick,
   and the ask here was for something slower, so --sb-dur is one number
   above Replit's and one number to change. */

:root{
  --sb-ease: ease-in-out;   /* Replit's curve, exactly */
  --sb-dur: .3s;            /* Replit is .2s — change this, nothing else */
}

@media (min-width: 901px){

  /* One duration and one curve in both directions.

     What was here before ran .52s open against .28s closed on two different
     curves, which is a defensible thing to do and is not what the reference
     does. Asymmetry reads as two separate gestures; Replit's rail reads as
     one control moving, whichever way it is going.

     Only duration and timing are set. transition-property and the .16s
     close delay are left exactly as the page had them — that delay is what
     stops a pointer clipping the rail on its way past from flashing the
     panel open and shut. */
  .ag-history,
  .ag-history.on,
  .ag-history:not(.on):not(.hover-suppressed):hover,
  .ag-history.hover-open:not(.on):not(.hover-suppressed){
    transition-duration: var(--sb-dur) !important;
    transition-timing-function: var(--sb-ease) !important;
  }

  /* The labels ride the same clock, with no cascade.

     A staggered reveal was the wrong instinct: Replit does not do it, and
     the reason it does not is that a row arriving after the panel has
     stopped reads as the text being slow rather than as the panel being
     considered. The labels are simply uncovered by the width, at the width's
     own speed. */
  .ag-hist-tab .lbl,
  .ag-hist-brand-text,
  .ag-user-main .nm,
  .ag-ws .nm{
    transition:
      max-width var(--sb-dur) var(--sb-ease),
      opacity   var(--sb-dur) var(--sb-ease) !important;
    transform: none !important;
  }

  /* The content column moves with the rail when it is PINNED, which is the
     push Replit animates as padding-left on its content area.

     Only when pinned. On hover the rail is an overlay — the negative margin
     in the page sheet cancels all but the collapsed width — and that is not
     a style choice to undo: hovering is involuntary, and a layout that
     reflows every time the pointer crosses the left edge of the window is
     unusable. Replit can push on open because its rail opens on a click. */
  .ag-history ~ .ag-main,
  .ag-history ~ .ag-split{
    transition: padding-left var(--sb-dur) var(--sb-ease),
                margin-left  var(--sb-dur) var(--sb-ease);
  }
}

/* Durations rather than `transition:none`: the labels are held at
   max-width:0 when the rail is shut, and a transition removed outright can
   strand one mid-collapse. */
@media (prefers-reduced-motion: reduce){
  :root{ --sb-dur: 1ms }
  .ag-history,
  .ag-history.on,
  .ag-history:hover,
  .ag-history.hover-open,
  .ag-hist-tab .lbl,
  .ag-hist-brand-text,
  .ag-user-main .nm,
  .ag-ws .nm,
  .ag-history ~ .ag-main,
  .ag-history ~ .ag-split{
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
}