.credential-quota.credential-quota-compact {
  container: credential-quota / inline-size;
  min-width: 0;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.credential-quota-compact .credential-quota-rows {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.credential-quota-compact .credential-quota-row {
  /* Long labels must shrink within their quota window, not widen the
     implicit grid track into the next window or the action column. */
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 5px;
}

.credential-quota-compact .credential-quota-label {
  gap: 6px;
}

.credential-quota-compact .credential-quota-label span {
  font-size: var(--font-size-caption);
}

.credential-quota-compact .credential-quota-label strong {
  font-size: var(--font-size-caption);
}

.credential-quota-compact .credential-quota-track {
  height: 5px;
}

.credential-quota-compact .credential-quota-row small {
  line-height: 1.4;
}

.credential-quota-compact .credential-quota-heading .credential-quota-reset {
  min-height: 22px;
  padding: 2px 6px;
}

.credential-quota-compact .credential-quota-footnotes {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}

.credential-quota-more > summary {
  width: fit-content;
  color: var(--primary-color);
  font-size: var(--font-size-caption);
  cursor: pointer;
}

.credential-quota-more[open] > summary {
  margin-bottom: 8px;
}

@container credential-quota (max-width: 280px) {
  .credential-quota-compact:not(.credential-quota-dense) .credential-quota-rows {
    grid-template-columns: minmax(0, 1fr);
  }
}

.credential-quota.credential-quota-dense {
  gap: 6px;
  line-height: 1.35;
}

.credential-quota-dense .credential-quota-rows {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 8px 12px;
}

.credential-quota-dense .credential-quota-row:only-child {
  grid-column: 1 / -1;
}

.credential-quota-dense .credential-quota-row {
  align-content: start;
  gap: 6px;
}

.credential-quota-dense .credential-quota-label {
  align-items: center;
  gap: 5px;
  min-height: 19px;
  line-height: 1.2;
}

.credential-quota-dense .credential-quota-label span {
  min-width: 0;
  padding: 2px 5px;
  overflow: hidden;
  padding: 2px 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 10px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dense quota cells follow the compact overview treatment: quiet labels and a
   single visual weight for the remaining amount. */
.credential-quota-dense .credential-quota-label span {
  border-radius: 5px;
  background: color-mix(in srgb, var(--text-tertiary) 8%, var(--bg-card));
  color: var(--text-secondary);
  font-weight: 600;
}
.credential-quota-dense .credential-quota-track {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-tertiary) 10%, var(--bg-card));
}
.credential-quota-dense .credential-quota-track i {
  border-radius: inherit;
  background: var(--quota-color, var(--success-color));
}
.credential-quota-dense .credential-quota-row.high { --quota-color: #20bf62; }
.credential-quota-dense .credential-quota-row.medium { --quota-color: #e6a523; }
.credential-quota-dense .credential-quota-row.low { --quota-color: #e25555; }
.credential-quota-dense .credential-quota-row small {
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.credential-quota-dense .credential-quota-empty {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 11px;
}

.credential-quota-dense .credential-quota-label strong {
  font-size: 12px;
  line-height: 1;
}

.credential-quota-dense .credential-quota-track {
  height: 5px;
}

.credential-quota-dense .credential-quota-row small {
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.4;
}

.credential-quota-dense .credential-quota-reset-time {
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credential-quota-dense .credential-quota-heading {
  gap: 4px 8px;
}

.credential-quota-dense .credential-quota-heading .credential-quota-reset {
  min-height: 21px;
  padding: 2px 6px;
  margin: 0;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.3;
}

.credential-quota-dense .credential-quota-reset-credits,
.credential-quota-dense .credential-quota-footnotes small {
  font-size: 10px;
  line-height: 1.4;
}

.credential-quota-dense .credential-quota-footnotes {
  gap: 2px 8px;
}

.credential-quota-dense .credential-quota-empty,
.credential-quota-dense .credential-quota-loading,
.credential-quota-dense .credential-quota-error,
.credential-quota-dense .credential-quota-more > summary {
  font-size: 11px;
  line-height: 1.4;
}

.credential-quota-dense .credential-quota-loading {
  gap: 5px;
}

.credential-quota-dense .credential-quota-error-details > summary {
  width: fit-content;
  cursor: pointer;
}

.credential-quota-dense .credential-quota-error-details > small {
  display: block;
  padding-top: 5px;
  overflow-wrap: anywhere;
}

.credential-quota-dense .credential-quota-more[open] > summary {
  margin-bottom: 6px;
}

@container credential-quota (max-width: 180px) {
  .credential-quota-dense .credential-quota-rows {
    grid-template-columns: minmax(0, 1fr);
  }
}