/* Cliptica — Usage page (the ledger). */

.usage-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;}
.usage-card{display:flex;flex-direction:column;gap:12px;}

.usage-ring-wrap{position:relative;width:110px;height:110px;margin:4px auto;}
.usage-ring{width:100%;height:100%;}
#usageRingFill{transition:stroke-dashoffset 600ms var(--snap);}
.usage-ring-label{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;}
.usage-ring-label strong{font-size:22px;font-weight:500;color:var(--text);}
.usage-ring-label span{font-size:11px;color:var(--muted);letter-spacing:0;}

.usage-big{display:flex;align-items:baseline;gap:8px;padding:10px 0 2px;}
.usage-big strong{font-size:30px;font-weight:500;color:var(--text);}
.usage-big span{font-size:11.5px;color:var(--muted);letter-spacing:0;}

.usage-limits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
  font-size:11.5px;color:var(--muted);}
.usage-limits li{display:flex;justify-content:space-between;gap:10px;}
.usage-limits strong{color:var(--text);font-weight:500;}

.usage-proj{max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--text);font-weight:500;}
.usage-empty td{text-align:center;padding:40px;color:var(--muted);}

/* ── Status pill (premium, Linear/Vercel-style: glowing dot + micro label) ── */
.stat-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font);
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  padding:4px 11px 4px 9px;border-radius:7px;border:1px solid var(--border2);
  background:var(--s2);color:var(--muted);white-space:nowrap;line-height:1;}
.stat-pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;}
.stat-pill.is-ready{color:var(--green);border-color:rgba(61,214,140,.26);background:rgba(61,214,140,.07);}
.stat-pill.is-ready .dot{box-shadow:0 0 7px rgba(61,214,140,.65);}
.stat-pill.is-failed{color:#f2555a;border-color:rgba(242,85,90,.26);background:rgba(242,85,90,.07);}
.stat-pill.is-failed .dot{box-shadow:0 0 7px rgba(242,85,90,.55);}
.stat-pill.is-queued{color:#e8b84d;border-color:rgba(232,184,77,.26);background:rgba(232,184,77,.06);}
.stat-pill.is-queued .dot{animation:statPulse 1.3s ease-in-out infinite;}
@keyframes statPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.78)}}
@media (prefers-reduced-motion:reduce){.stat-pill.is-queued .dot{animation:none}}