/* ⭐⭐ F-192 · THE ONE PROGRESS BAR — every filling bar on the POS, identical, everywhere.

   Christa, 9/4 1:15 PM, sent from /pos/apply (screenshot feedback-shots/from-page/FBMTN7T713.jpg):

     "see on this bar color on this image below how it has that kind of greenish orange…
      I kind of like that as it fills in… rather than what we currently have with the flat
      teal… make sure that that's a standard across all platforms, that that's the color on
      the POS side, so that all those bars are identical and there's no kind of flipping back
      and forth between them. It just creates consistency and branding."

   The bar she pointed at is the Pathfinder header bar on /pos/prequal (line ~49 of that file):
   a warm cream TRACK with a teal→amber FILL. Those two values are the standard now, and they
   are declared ONCE, here, as custom properties — so the next bar anyone adds inherits it
   instead of inventing a fourth teal.

     --pos-bar-track   #F5E3C9   warm cream — the unfilled remainder
     --pos-bar-fill    #1FABAA → #E4A24C   CLEAR teal into CLEAR amber ("greenish orange")

   ⛔ Do NOT add a new gradient to a new bar. Use var(--pos-bar-fill). The whole point of this
   file is that there is one answer, and "no flipping back and forth" is the requirement.

   ⛔ This file styles the BAR ONLY. It never touches what a bar measures. The 1003 meter still
   counts from updateMeter(); the 24-month coverage bar still counts from addrCovered()/
   jobCovered() in model.js. A colour file that changes a number is a colour file that lies. */

:root{
  --pos-bar-track:#F5E3C9;
  --pos-bar-fill:linear-gradient(90deg,#1FABAA 0%,#7CBE8A 46%,#E4A24C 100%);
  --pos-bar-done:#3F9E6B;      /* only when a bar is genuinely FINISHED — a solid, calm green */
  --pos-bar-h:7px;
}

/* ── every track ─────────────────────────────────────────────────────────────
   Listed by selector rather than by page, because each POS screen grew its own bar markup
   before there was a standard. Adding a page = adding its selector here, not a new colour. */
body .meter1003 .mbar,     /* /pos/apply · the 1003 fill meter                     */
body .cover2 .bar2,        /* /pos/apply · "14 of 24 months covered — 10 to go"    */
body .pos-track,           /* anything new: give it .pos-track / .pos-bar and stop */
body.door-skin .meter1003 .mbar,
body.door-skin.door-canvas .meter1003 .mbar{
  background:var(--pos-bar-track);
  height:var(--pos-bar-h);
  border-radius:99px;
  overflow:hidden;
}

/* ── every fill ────────────────────────────────────────────────────────────── */
/* ⚠️ Prefixed with `body` ON PURPOSE. Each POS page carries its own inline <style> block, and
   that block is parsed AFTER this file — at equal specificity the page's own flat teal would
   win and this standard would silently do nothing. Caught by verify-look1003.mjs, which is
   exactly the kind of "it looks applied" failure a screenshot alone does not catch. */
body .meter1003 .mbar i,
body .cover2 .bar2 i,
body .pos-track .pos-bar{
  background:var(--pos-bar-fill);
  border-radius:99px;
  height:100%;
  display:block;
  /* she watches it move — "see the progress the entire time" */
  transition:width .5s cubic-bezier(.2,.8,.2,1);
}

/* ── finished ──────────────────────────────────────────────────────────────── */
body .meter1003.mdone .mbar i,
body .cover2.done .bar2 i{ background:var(--pos-bar-done); }