/* The life bar, for the one place it appears outside the app: the homepage
   section explaining how it is read. The app's own copy of this lives in
   app.css and is loaded by the demo iframe — this is the only duplication, and
   it is here because a single illustrative bar does not justify a second frame.
   Keep the two in step. */
.life { margin-top: 9px; }
.life-track { height: 9px; border-radius: 5px; background: var(--surface-2);
              position: relative; overflow: hidden; }
/* The fill is how old the thing is. The line is the top of its typical range,
   so a fill running past the line has outlived what it should have. */
.life-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; z-index: 5;
             background: var(--text-2); border-radius: 1px; }
.life-fill { height: 100%; border-radius: 5px; background: var(--good);
             position: relative; z-index: 2; opacity: .9; }
.life-fill.mid  { background: var(--warn); }
.life-fill.late { background: var(--bad); }

/* The typical range, bracketed underneath with its two figures.
   It was a tint laid over the track before, which the fill covered for exactly
   the items where it mattered -- and where it did show, green over orange came
   out olive and looked like a third state nobody had defined. Underneath it is
   legible either way, and the numbers save the reader measuring pixels to work
   out where "6" fell. */
.life-axis { position: relative; height: 17px; margin-top: 4px; }
.life-axis .rng { position: absolute; top: 0; height: 3px; border-radius: 2px;
                  background: rgba(18,153,107,.55); }
.life-axis span { position: absolute; top: 5px; transform: translateX(-50%);
                  font-size: 10.5px; font-weight: 620; color: var(--text-2);
                  white-space: nowrap; }
.life-cap { display: flex; justify-content: space-between; gap: 10px; font-size: 12px;
            color: var(--muted); margin-top: 7px; }
.life-cap b { color: var(--text-2); font-weight: 620; }
.life-cap .over { color: var(--bad); font-weight: 570; }