/* WCL points chip — sits beside the model picker in every topbar. Its own file
   because index.html loads style.css while report/ni6/coach load report.css;
   both define the tokens used below. */
.wcl-quota {
  font-family: var(--font-gob); font-weight: 500; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-dim, var(--ink)); background: var(--card);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 10px; white-space: nowrap; align-self: center;
}
.wcl-quota[hidden] { display: none; }
/* Colour is a SECOND signal, never the only one: the numbers themselves say how
   close the budget is, so a CVD reader loses nothing by not seeing the shift. */
/* Escalation must READ as escalation: --hazard is gold and --blood is red, so
   gold->red. (--ember sits between them but is orange enough to read as the
   warning tier, which would make the two states hard to tell apart.) */
.wcl-quota.q-warn { border-color: var(--hazard); color: var(--hazard); }
.wcl-quota.q-crit { border-color: var(--blood); color: var(--ember); }
/* Brief flash on an actual value change (never on an unchanged 60s poll) —
   the visible cue that "up to date" means, not just a silent number snap. */
@keyframes wcl-quota-flash {
  0% { background: var(--card); }
  30% { background: var(--gold-deep); }
  100% { background: var(--card); }
}
.wcl-quota.q-flash { animation: wcl-quota-flash 700ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .wcl-quota.q-flash { animation: none; }
}