/* THE BUILD PROGRESS BAR.   <link rel="stylesheet" href="../assets/gen-bar.css">

   The owner, 13 Aug 2026: "an accurate progress bar when it is thinking up the
   build; a dark crimson red one with cool texture, and number/percent complete
   below it."

   ACCURATE IS THE LOAD-BEARING WORD, and it is why the generator was split into
   stages before this was drawn. The width is stages-finished over stages-total
   and nothing else — no elapsed time, no easing toward a number we hope is
   coming. It steps, and each step is an event that really happened.

   THE CRAWLING HATCH IS NOT THE PROGRESS. A stage takes tens of seconds and a
   bar that sits perfectly still through it looks broken, so the FILLED portion
   carries a moving diagonal sheen. It says "still working"; it encodes nothing,
   it never advances the width, and it is the only animation here. Anything that
   moved the width on a timer would be inventing a number, which is the one
   thing this project does not do (ReadErrors 8r).

   Gradients only — no `filter`, and no alpha art anywhere near it. A CSS filter
   on art with an alpha channel is what turned the skill tree's cluster gates
   into white silhouettes in the owner's Firefox (ReadErrors 8h).

   ⚠ MOVED OUT OF d4theorycraft/index.html's inline <style>, 13 Aug 2026, when
   the Character Wizard's modal became a second place this bar is drawn. The
   owner asked for one "similar to what is on the theorycraft page" — and
   "similar to" is exactly how two bars end up drifting apart. One stylesheet,
   two pages, and gen-stream.js is the matching split on the behaviour side. */

/* ⚠ EVERY RULE BELOW CARRIES BOTH AN ID AND A CLASS SELECTOR, and they are the
   SAME rule rather than two — one set of declarations, two ways in. The reason
   is that the hub page now draws this bar TWICE: once in the Character Wizard's
   modal and once in the DPS Checker's, and two elements with id="genWrap" in
   one document is invalid HTML that getElementById silently resolves in favour
   of whichever came first. The wizard's markup is untouched and keeps its ids;
   the new modal uses the classes. Copying the declarations into a second
   stylesheet would have been two bars free to disagree about what the owner's
   "accurate" means, which is the thing this file exists to prevent. */
#genWrap,.genWrap{display:none}
#genWrap.on,.genWrap.on{display:block}
#genBar,.genBar{
  position:relative;height:15px;border-radius:3px;overflow:hidden;
  background:#160809;border:1px solid #40161a;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.85);
}
#genFill,.genFill{
  position:absolute;top:0;bottom:0;left:0;width:0;
  /* Slower than a click and faster than a thought: long enough that the step
     reads as a step, short enough that it is finished before anyone looks. */
  transition:width .5s cubic-bezier(.22,.61,.36,1);
  /* Dark crimson, and DARK is the half that took a second pass — the first
     version read as a candy stripe because the highlight was too bright over
     too light a base. The hatch is now mostly shadow, which reads as forged
     metal rather than as barber pole. */
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.055) 0 5px, rgba(0,0,0,.22) 5px 11px),
    linear-gradient(to bottom,#8d1a22 0%,#5f0f15 46%,#3d070b 74%,#611017 100%);
  box-shadow:0 0 9px rgba(150,22,32,.45),inset 0 0 8px rgba(0,0,0,.55);
}
/* The leading edge, so a part-filled bar reads as a bar rather than a block. */
#genFill::before,.genFill::before{
  content:"";position:absolute;top:0;bottom:0;right:0;width:2px;
  background:linear-gradient(to bottom,#ff8d7a,#e04a48);
  box-shadow:0 0 7px 1px rgba(255,120,100,.75);
}
#genFill.working::after,.genFill.working::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,
    rgba(255,196,164,.17) 0 6px,transparent 6px 18px);
  animation:genCrawl 1.15s linear infinite;
}
/* An 18px period on a 135deg gradient repeats every 18*sqrt(2) horizontally,
   so this is the shortest shift that loops without a visible jump. */
@keyframes genCrawl{from{background-position:0 0}to{background-position:25.46px 0}}
@media (prefers-reduced-motion:reduce){
  #genFill.working::after,.genFill.working::after{animation:none}
  #genFill,.genFill{transition:none}
}
#genPct,.genPct{color:#e8a9ac;text-shadow:0 0 10px rgba(200,40,50,.4)}
/* THE VERDICT BUTTONS. Quiet by default — a run that worked should not be
   shouted at — and they pick up the bar's own crimson on hover so the whole
   feature reads as one thing. */
.genVote{
  font:11.5px/1 ui-monospace,monospace;letter-spacing:.04em;
  color:#8d8375;background:#170f10;border:1px solid #3a2a2c;border-radius:3px;
  padding:4px 8px;cursor:pointer;
}
.genVote:hover{color:#e8a9ac;border-color:#6d2027;background:#1e1113}
.genVote:disabled{opacity:.5;cursor:default}
.genChip{color:#6d6357}
.genChip.done{color:#c8a24a}
.genChip.now{color:#e8a9ac}
.genChip.bad{color:#c96b62;text-decoration:line-through}