/*
 * components/tier_control.css — Progressive-disclosure tier control (D8).
 *
 * Paired with templates/components/tier_control.html. Token-driven (D5).
 * Extracted from dashboard.css and detail.css where the same rules were
 * duplicated (UX Consistency Audit — D6 fold one-offs into the UI Lab).
 */

.tier-control {
  display: inline-flex;
  border: var(--border-1);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.tier-control__btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--color-fg-muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.tier-control__btn:hover {
  background: var(--color-surface-2);
}

.tier-control__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.tier-control__btn[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-accent-fg);
}

/*
 * Shared tier gating (D6): a section/column tagged .tier-gate--operational
 * or .tier-gate--expert is hidden until its ancestor [data-tier] surface is
 * at least that level. Page JS (detail.js/dashboard.js) or the generic
 * components/tier-control.js sets [data-tier]. Mirrors the rule detail.css
 * defines for #detail-surface; centralized here so any surface can gate.
 */
[data-tier="simple"] .tier-gate--operational,
[data-tier="simple"] .tier-gate--expert,
[data-tier="operational"] .tier-gate--expert {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .tier-control__btn {
    transition: none;
  }
}