/* // progress.css
functional */
#progress { min-height: 24px; max-height: 44px; height: 44px; }
.bar { display: flex; } /* otherwise it turns vertical. */
.seg { position: relative; height: 24px; width: 10vw; } /* without width they collapse */
.fill { position: absolute; width:0%; left:0; transform-origin:left center; background: #4a0; height: 24px; }
.label { position: relative; } /* keeps label visible above green fill */
/* decoration
fixme, we should center it - body should be flex too..
*/
html.classy { background: #345; font-family: sans-serif; padding-top: 0.0em; }
.classy body { margin: 0; padding-left: 0; display:flex; flex-direction: column; align-items: center;}
.gone { background: #0b1220; }
.classy .bar {
  margin: 0px 15px 15px 0px;
  padding: 15px;
  align-items: center; gap: 4px; width: fit-content;
  box-shadow: 0 10px 40px rgba(2,6,12,0.6); border-radius: 14px;
  background: linear-gradient(180deg,#071021,#081426);
}
.classy .seg {
    border-radius: 9px; background: #002; color: white;
    display: flex; justify-content: center;
}
.sharer {
    border-radius: 8px; background: #002; color: white;
    display: flex; justify-content: center;
    padding-left: 6px; padding-right: 7px;
}

.classy .fill { border-radius: 9px; }
.classy .label { display: flex; align-items: center; }