/* Plan & usage — the rows, bars and countdowns of Settings -> Plan & Usage.
   Same LUX tokens as the rest of ALY; nothing here invents a colour.

   It used to be a dialog of its own, with a sidebar control that opened it and
   a card, backdrop and ✕ of its own. All four are gone: the control is a
   section of Settings and the card around this content belongs to
   aly-settings-modal.css, so what is left here is only the plan content
   itself — which has not changed. */

.aly-usage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.aly-usage-plan { margin: 2px 0 0; font-size: 20px; font-weight: 300; letter-spacing: .08em; color: var(--text); }

.aly-usage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.aly-usage-row { display: grid; gap: 6px; }
.aly-usage-manage-storage {
  justify-self: start; padding: 4px 0; border: none; background: none;
  font: inherit; font-size: 12px; color: var(--muted); text-decoration: underline;
  cursor: pointer;
}
.aly-usage-manage-storage:hover, .aly-usage-manage-storage:focus-visible { color: var(--text); }
.aly-usage-more-storage { justify-self: start; }
.aly-usage-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.aly-usage-label { color: var(--text); font-weight: 500; }
.aly-usage-value { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
/* Percent used, plain — no credit counts anywhere in this popup. */
.aly-usage-reset { margin: 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
/* Frozen: the plan-side window is genuinely full and gift credits are the
   ones paying right now — red, and said plainly, instead of quietly reading
   as fine again. */
.aly-usage-frozen { margin: 0; color: var(--danger); font-size: 12px; font-weight: 500; }
/* Storage / transfer at 80% (amber) and 100% (red) — aly-storage-meters.js. */
.aly-usage-capacity-warning { margin: 0; font-size: 12px; font-weight: 500; color: var(--aly-warn, color-mix(in srgb, var(--danger) 55%, var(--jade))); }
.aly-usage-capacity-warning.is-full { color: var(--danger); }
/* The bar fills with usage consumed. A short green line means plenty remains;
   amber means attention; a full red line means the allowance is exhausted. */
.aly-usage-meter { height: 6px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.aly-usage-meter > span {
  display: block; height: 100%; border-radius: 4px; background: var(--aly-usage-meter-color, var(--jade));
  transform-origin: left center; animation: aly-usage-meter-enter .65s ease-out both;
  transition: width .45s ease, background-color .25s ease;
}
.aly-usage-meter.is-good { --aly-usage-meter-color: var(--jade); background: color-mix(in srgb, var(--jade) 18%, var(--surface-2)); }
.aly-usage-meter.is-caution { --aly-usage-meter-color: var(--aly-warn, color-mix(in srgb, var(--danger) 55%, var(--jade))); }
/* Near the ceiling it stops being a neutral fact. */
.aly-usage-meter.is-high { --aly-usage-meter-color: var(--danger); }
.aly-usage-foot { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

@keyframes aly-usage-meter-enter {
  from { transform: scaleX(0); opacity: .55; }
  to { transform: scaleX(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .aly-usage-meter > span { animation: none; transition: none; }
}

.aly-usage-actions { display: grid; gap: 8px; border-top: 1px solid var(--surface-line); padding-top: 14px; }
.aly-usage-actions .btn { width: 100%; justify-content: center; }
.aly-usage-state { margin: 0; font-size: 13px; line-height: 1.5; }
/* UPPERCASE, letter-spaced — the one call to action a plan's row of bars ends
   on, styled to read as a decision rather than another line of text. */
.aly-usage-cta { letter-spacing: .06em; font-size: 12px; font-weight: 600; }


/* The owner's transfer spend cap (aly-transfer-cap.js). */
.aly-usage-cap { display: grid; gap: 4px; }
.aly-usage-cap-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.aly-usage-cap-input {
  box-sizing: border-box; width: 7.5em; min-height: 36px; padding: 6px 8px;
  border: 1px solid var(--surface-line); border-radius: 4px;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px;
}