/* ======================================================================
   STARKOS - THE WAITING INDICATOR.  MIKA ROW 5
   ======================================================================

   Linked by every page that waits. The behaviour is js/waiting.js; this file
   is what it looks like, and it lives on its own for one reason: the law says
   "one component, reused everywhere", and dashboard.html's <style> block
   cannot be read by sources.html. Two copies of these rules would be two
   things to keep in agreement, which is the thing the law is about.

   It reads --ease from css/tokens.css and --text, --steel and --text-dim from
   the page, which every page in this product already declares.
   ====================================================================== */

  /* ══ MIKA ROW 5 · THE APP NEVER SITS STILL WHILE IT WORKS ═══════════
     Mika: "No sign the app is working. Finding alternatives sat there with
     nothing moving." The law the call added: three dots that grow in turn, in
     the chrome colours, one component reused everywhere, and a static
     "Working." line under reduced motion.

     THREE STEPS OF THE PRODUCT'S OWN GREY and never the accent: the accent is
     an interactive tint and a man cannot interact with a wait. Nothing here is
     data, so nothing here wears a data colour.

     THEY GROW IN TURN, which is the law's word for it: each dot scales up and
     back on the same 1.2s cycle, a third of a cycle apart, so the motion reads
     as a wave rather than as three things blinking. TRANSFORM AND OPACITY ONLY,
     which is CLAUDE.md's motion rule kept exactly (MIKA ROW 1's override was
     for one screen and does not reach here).

     THE WORD IS ALWAYS IN THE DOM, clipped rather than `display: none`, so a
     screen reader hears it whatever the motion setting is. Under reduced
     motion the clip comes off and the dots stand still, which is the law's
     "static Working. line" as one media query and no JavaScript branch. */
  .waiting { display: flex; align-items: center; gap: 10px; padding: 14px 0; }
  .waiting-dots { display: inline-flex; align-items: center; gap: 7px; }
  .waiting-dots i {
    width: 7px; height: 7px; border-radius: 50%;
    display: block; transform: scale(0.6); opacity: 0.45;
    animation: waitGrow 1.2s var(--ease) infinite;
  }
  .waiting-dots i:nth-child(1) { background: var(--text); animation-delay: 0s; }
  .waiting-dots i:nth-child(2) { background: var(--steel); animation-delay: 0.2s; }
  .waiting-dots i:nth-child(3) { background: var(--text-dim); animation-delay: 0.4s; }
  @keyframes waitGrow {
    0%, 70%, 100% { transform: scale(0.6); opacity: 0.45; }
    35%           { transform: scale(1);   opacity: 1; }
  }
  /* CLIPPED, NOT HIDDEN. `display: none` would take it from a screen reader
     too, and the word is the only thing on this component that says anything. */
  .waiting-word {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
    font-size: 13px; color: var(--text-dim);
  }
  @media (prefers-reduced-motion: reduce) {
    .waiting-dots i { animation: none; transform: scale(1); opacity: 1; }
    .waiting-word {
      position: static; width: auto; height: auto; overflow: visible;
      clip-path: none;
    }
  }