/* ==========================================================================
   QUOTAS — the office's "Plan & usage" card in its settings
   --------------------------------------------------------------------------
   Prefix: .quo-
   Rules for this file: design TOKENS only (no hex, no px colours), LOGICAL
   properties only (inline-start/end, block-start/end — never left/right), and
   nothing that cannot survive dir="rtl" and dir="ltr" alike. Loaded after
   app.css and apple.css, so it may rely on every token they define. The bar
   itself is the shared .progress; this file only lays the card out.

   Contents
     1  Facts     the plan, its status, when the term ends
     2  Meters    one row per limit: the label and the figures, the bar, the words
     3  Forced colours
   ========================================================================== */

/* ==========================================================================
   1 · FACTS
   ========================================================================== */

.quo-subtitle {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.quo-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-3) var(--space-5);
  margin: 0;
}

.quo-fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.quo-fact dt {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.quo-fact dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   2 · METERS
   Two or three to a row when there is room, one on a phone. A meter is its label and figures, the bar,
   and — only when there is something to say — the words that repeat what the bar's colour means.
   ========================================================================== */

.quo-meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-5) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.quo-meter {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
}

.quo-meter .progress-label {
  margin-block-end: 0;
  font-size: var(--font-size-sm);
}

.quo-meter .progress-label strong {
  color: var(--color-text);
}

.quo-meter__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

/* ==========================================================================
   3 · FORCED COLOURS
   ========================================================================== */

/* What the plan includes besides numbers: a short list, each with its word, never the icon alone. */
.quo-features {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.quo-feature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.quo-feature[data-included='no'] { color: var(--color-text-muted, inherit); }

@media (forced-colors: active) {
  .quo-meter .progress {
    border: 1px solid CanvasText;
  }

  .quo-meter .progress__bar {
    background: CanvasText;
  }
}