/* Usage awareness UI (#199, epic #195 Phase 3) — v2.
 *
 * Colors/spacing come from the base token palette in styles.css (theme-aware —
 * the tokens flip in light/dark), so this file adds no hard-coded colors. Uses
 * --accent (the one brand color, #141) rather than the retiring --purple alias.
 *
 * Surfaces: the Plan Usage settings meter + its compressed near/over message,
 * and the small on-home toolbar chip. The old large fixed banners were dropped
 * in v2 in favor of the chip + Plan Usage section.
 */

/* The `hidden` attribute must win over the flex display rules below — an
 * author `display:flex` otherwise overrides the UA `[hidden]{display:none}`,
 * which would leak an empty BYOK/managed row. Class+attr specificity (0,2,0)
 * beats the bare-class rule. */
.usage-meter[hidden],
.usage-meter-row[hidden] {
  display: none;
}

.usage-meter {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.usage-meter-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.usage-meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--text-2);
}

.usage-meter-head span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

.usage-meter-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.usage-meter-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .3s ease;
}

/* Approaching the cap (>=90%) — the one warning accent. */
.usage-meter-fill.is-warn {
  background: var(--amber);
}

.usage-meter-note {
  font-size: 10px;
  color: var(--text-2);
}

.usage-meter-note:empty {
  display: none;
}

/* ── Plan Usage compressed message (near/over limit) ── */
.plan-usage-msg {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
  background: var(--surface-hi);
  border-left: 2px solid var(--amber);
  font-size: 11px;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.plan-usage-msg[hidden] {
  display: none;
}

.plan-usage-action {
  padding: var(--space-1) var(--space-3);
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.plan-usage-action[hidden] {
  display: none;
}

.plan-usage-action:hover {
  filter: brightness(1.08);
}

/* ── On-home toolbar chip ── */
.toolbar-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  border: 1px solid var(--amber);
  background: transparent;
  color: var(--amber);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.toolbar-chip[hidden] {
  display: none;
}

.toolbar-chip.is-near {
  border-color: var(--amber);
  color: var(--amber);
}

.toolbar-chip.is-over {
  border-color: var(--red);
  color: var(--red);
}