/*
  /css/_lib/tier-gate.css

  Marketplace "Upgrade to Business" interstitial (Sprint 2b-i / Marketplace
  tier gating, C102). Shared /css/_lib/ module loaded by the seven Business-
  only portal pages that render window.TG.tierGate.renderUpgrade() for
  marketplace-tier sessions: clients, client-detail, contracts, invoices,
  team-members, client-create, invoice-detail.

  CSS architecture: see /css/AGENTS.md. Precached in sw.js alongside the other
  /css/_lib/ shared modules (cis-form.css / dropdown.css / list-header.css).

  Dark-mode parity: every colour is token-driven (var(--text) / var(--text-muted)
  / var(--surface) / var(--border) / var(--red) / var(--white)). Those tokens
  swap on :root[data-theme="dark"] in shared-themes.css, so the interstitial
  adapts with no explicit [data-theme="dark"] overrides. The button mirrors the
  .cis-upgrade-btn style precedent (pill, --red bg, --white text).

  Class precedent: .tier-gate-* (this file) is the only consumer of these names.
*/
.tier-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 420px;
  margin: var(--space-10) auto;
  padding: var(--space-8) var(--space-5) var(--space-6);
  box-sizing: border-box;
}

.tier-gate-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  background: var(--red-wash);
  margin-bottom: var(--space-5);
}

.tier-gate-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tier-gate-title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--text);
  margin: 0 0 var(--space-3);
}

.tier-gate-body {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  margin: 0 0 var(--space-6);
}

.tier-gate-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--btn-radius);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  background: var(--btn-primary-bg);
  border: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
  color: var(--btn-primary-text);
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.18s var(--ease-spring);
}

.tier-gate-cta:hover {
  filter: brightness(1.06);
}

.tier-gate-cta:active {
  transform: scale(var(--press-scale));
}

.tier-gate-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}