/* Stock bar — option 19b from her Claude Design file `Live Progress Bars.dc.html`
   ("16a, polished — the same stripes and speed with a slightly warmer red and a soft
   glossy highlight along the top edge"). Colours, stripes, gloss, knob and ring are
   copied from that file; it sits where her artwork's bar was (erased from the art). */
.bar19 { position: absolute; left: 38px; top: 908px; width: 308px; height: 28px; z-index: 1;
         box-sizing: border-box; border-radius: 999px; pointer-events: none;
         background: linear-gradient(180deg, #e4c57c, #c9a24b); border: 1.5px solid #e2c88a;
         box-shadow: inset 0 2px 3px rgba(90,60,10,.25), 0 2px 6px rgba(90,60,10,.12); }
.bar19__in { position: absolute; left: 2px; right: 2px; top: 2px; bottom: 2px; }
.bar19__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; overflow: hidden; border-radius: 999px;
               background: linear-gradient(180deg, #c22a33, #8f1a21);
               box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 3px rgba(60,0,6,.25);
               transition: width 1.2s cubic-bezier(.3,.8,.3,1); }
.bar19__stripes { position: absolute; inset: 0;
  background-image: linear-gradient(45deg, rgba(255,236,214,.18) 25%, transparent 25%, transparent 50%,
                    rgba(255,236,214,.18) 50%, rgba(255,236,214,.18) 75%, transparent 75%, transparent);
  background-size: 28px 28px; background-position: 0 50%; animation: bar19-flow 1.1s linear infinite; }
.bar19__gloss { position: absolute; left: 10px; right: 10px; top: 3px; height: 6px; border-radius: 999px;
                background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0)); }
.bar19__knob { position: absolute; top: 50%; left: 0; width: 24px; height: 24px; margin: -12px 0 0 -24px;
               transition: left 1.2s cubic-bezier(.3,.8,.3,1); }
.bar19__knob i { position: absolute; inset: 0; border-radius: 50%; }
.bar19__ring { border: 2px solid #f3dc9e; animation: bar19-ring 1.8s ease-out infinite; }
.bar19__face { background: radial-gradient(60% 60% at 40% 35%, #fff, #efe6d6); border: 2px solid #c9a24b;
               box-shadow: 0 2px 6px rgba(0,0,0,.25); }
@keyframes bar19-flow { from { background-position: 0 0 } to { background-position: 28px 0 } }
@keyframes bar19-ring { 0% { transform: scale(1); opacity: .7 } 100% { transform: scale(2.4); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .bar19__stripes, .bar19__ring { animation: none; } }
