/* Indeterminate loading bar. Keyframes cannot be expressed as a theme
   variable or a style leaf, which is why this lives in the style document.
   The ids are component keys; a component inside a repeater renders its key
   on every row, so one rule covers every tab. */
@keyframes wsLoadSlide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(420%); }
}

#tabBusyFill,
#paneBusyFill {
  animation: wsLoadSlide 1.05s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* The site header is sticky at the top and 82px tall, so an in-page anchor
   would land its target underneath it. scroll-padding-top belongs on the
   scrolling element, which is <html>, and no component owns that element, so
   it cannot be a style leaf or a theme variable. 98px is the header plus a
   16px gap. Used by the docs page's on-this-page rail. */
html {
  scroll-padding-top: 98px;
}

/* ---------------------------------------------------------------------------
   Header logo idle animation.

   CSS has no source of randomness, so "pick one of six at load" is the only
   thing a roll can buy you -- and that gives one move repeating every 14s for
   as long as the tab is open. This is one 84s track holding all six moves in
   sequence instead, so the logo genuinely varies over time. shellPage's onLoad
   rolls a random NEGATIVE delay into Store.logoDelay, which starts each page
   load at a different point in the track: different move first, different
   order after that, no timer and no re-render.

   Each segment is 14s and spends the first 70% still. This runs on every page
   of the app; a logo in perpetual motion is a distraction, an occasional
   flourish is not. Every move begins and ends at identity so the segments
   chain and the loop has no seam.

   Percentages are generated, not hand-written, because two keyframes at the
   SAME percentage silently collapse -- the later one wins and the move in
   between never renders. Hence the 0.001% nudge past each segment boundary.
   --------------------------------------------------------------------------- */
@keyframes mdxLogoTrack {
  /* segment 0 -- spin right */
  0%, 11.667% { transform: none; }
  16.667% { transform: rotateY(360deg); }
  /* segment 1 -- pendulum */
  16.668%, 28.333% { transform: none; }
  30.333% { transform: rotateY(-22deg); }
  31.833% { transform: rotateY(18deg); }
  32.733% { transform: rotateY(-7deg); }
  33.333% { transform: rotateY(0deg); }
  /* segment 2 -- tumble */
  33.334%, 45% { transform: none; }
  50% { transform: rotateX(360deg); }
  /* segment 3 -- breathe */
  50.001%, 61.667% { transform: none; }
  63.917% { transform: scale(1.09) rotate(-4deg); }
  65.567% { transform: scale(.98) rotate(2deg); }
  66.667% { transform: scale(1) rotate(0deg); }
  /* segment 4 -- bob */
  66.668%, 78.333% { transform: none; }
  80.583% { transform: translateY(-6px) rotateX(16deg); }
  82.233% { transform: translateY(2px) rotateX(-6deg); }
  83.333% { transform: translateY(0) rotateX(0deg); }
  /* segment 5 -- spin left */
  83.334%, 95% { transform: none; }
  100% { transform: rotateY(-360deg); }
}

/* An animation that never stops has to be opt-out. The logo image carries no
   id of its own, so this hangs off the brand grid's component key; the id
   starts with a digit, which #-notation cannot express, hence the attribute
   selector. !important because the component's own generated rule sets the
   animation from its style leaves. */
@media (prefers-reduced-motion: reduce) {
  [id="3a3117b1eae64ef3ab5f237d73b43631"] img {
    animation: none !important;
  }
}

/* icon-migrate: size parity 1.4 */
/* Material Symbols are drawn on a 24px grid with padding inside the em box, so at
   the SAME font-size they paint about 70% of the ink Font Awesome did. Measured
   with canvas metrics on both live fonts, ink height at font-size 100:
   edit 100.4 -> 70.8, delete 100.0 -> 70.4, add 81.3 -> 54.2, search 100 -> 71.6.
   Nothing set a smaller size; the geometry of the font did.

   The explicit sizes are scaled in the theme and on the components that set one.
   This rule is for the rest: an icon with no size of its own inherits the text
   beside it, and the theme has no variable for that case, since `iconSize1..8`
   only bite when their class is present. `em` keeps it tracking the text, and
   `.ms._size1` is two classes so the deliberately large icons still win. */
.ms {
  font-size: 1.4em;
}

/* icon-migrate: Icon component sizes 1.4 */