/* css/meter.css — the hours ledger meter, its legend and the headline figure.
   One of the files src/index.html links in order; see tokens.css for why. */

/* ==========================================================================
   The hours ledger meter
   ==========================================================================
   VERBATIM fills from the spec. Solid = approved, diagonal hatch = pending, so
   "banked" versus "submitted" is legible by SHAPE and not only by hue.
   ========================================================================== */
.meter{
  position:relative;height:14px;border-radius:var(--r-sm);margin:20px 0 10px;
  background:var(--paper);border:1px solid var(--rule-strong);
  box-shadow:var(--inset);overflow:hidden;
}
.meter-track{position:absolute;inset:0}
.meter-fill{position:absolute;inset:0 auto 0 0;background:var(--approved)}
.meter-fill--pending{background:repeating-linear-gradient(135deg,var(--pending) 0 3px,transparent 3px 7px);
  border-right:1px solid var(--pending)}

.meter-legend{
  display:flex;gap:var(--gap);flex-wrap:wrap;margin-top:10px;
  font-family:var(--data);font-size:.75rem;color:var(--ink-soft);
}
.meter-legend span{display:inline-flex;align-items:center;gap:.4rem}
.swatch{width:14px;height:14px;border-radius:2px;border:1px solid var(--rule-strong);flex:0 0 auto}
.swatch--approved{background:var(--approved)}
.swatch--pending{background:repeating-linear-gradient(135deg,var(--pending) 0 3px,transparent 3px 7px)}

/* The headline. APPROVED HOURS ONLY — pending hours are reported separately and
   are never added in. */
.headline{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-bottom:5px}
.headline .figure{
  font-family:var(--data);font-size:clamp(2rem,4vw,2.75rem);font-weight:600;
  letter-spacing:-.02em;line-height:1;
}
.headline .of{font-family:var(--data);font-size:1rem;color:var(--ink-soft)}