/* ─────────────────────────────────────────────────────────────────────────────
 * feature-gate.css
 * Styles for the client-side feature gating layer (see assets/js/feature-gate.js).
 *
 * Two responsibilities:
 *   1. The upgrade modal shown when a locked [data-feature] element is clicked.
 *      Markup is built by createModal() in feature-gate.js.
 *   2. The visual treatment applied to locked elements themselves
 *      (via the [data-fg-locked="true"] attribute set by FretlyGate.apply()).
 *
 * This file replaces the inline <style> block that used to be injected from JS.
 * Project rule: no CSS inside JS / HTML / PHP.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Upgrade modal ───────────────────────────────────────────────────────── */
#fgUpgradeModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
}

#fgUpgradeModal.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fg-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}

.fg-modal-box {
  position: relative;
  background: var(--surface, #fff);
  border-radius: var(--radius-lg, 14px);
  padding: var(--space-2xl);
  max-width: 27.1429rem;     /* ~380 px */
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, .2));
  animation: fgSlideUp var(--t-normal, .2s) ease;
}

@keyframes fgSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fg-modal-icon {
  margin: 0 auto var(--space-lg);
  color: var(--accent, #e8874a);
}

.fg-modal-title {
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  color: var(--text, #1a1a18);
  margin: 0 0 var(--space-sm);
}

.fg-modal-text {
  font-size: var(--font-base);
  color: var(--text-2, #4a4a46);
  line-height: var(--leading-normal, 1.5);
  margin: 0 0 var(--space-xl);
}

.fg-modal-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
}

.fg-modal-btn {
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md, 6px);
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: none;
  font-family: var(--font, "DM Sans", sans-serif);
  transition: all var(--t-fast, .15s);
}

.fg-modal-btn-primary {
  background: var(--accent, #e8874a);
  color: #fff;
}

.fg-modal-btn-primary:hover {
  background: var(--accent-hover, #d4713a);
}

.fg-modal-btn-secondary {
  background: var(--surface-2, #f7f6f3);
  color: var(--text, #1a1a18);
  border: var(--border-w, 1px) solid var(--border, rgba(0, 0, 0, .09));
}

.fg-modal-btn-secondary:hover {
  background: var(--bg-3, #f0eeeb);
}

/* ── Locked element treatment ────────────────────────────────────────────── */
/* Applied to non-option elements that carry data-feature and resolve to a
 * tier above the user's. Options handle their own affordance (🔒 suffix + snap-back). */
[data-fg-locked="true"]:not(option) {
  opacity: .45;
  cursor: not-allowed !important;
  position: relative;
  filter: grayscale(.6);
}

[data-fg-locked="true"]:not(option)::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: not-allowed;
}

/* ── Plan copy block inside the upgrade modal (Tier Plans, 2026-07-02) ───── */
.fg-modal-plan {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  background: var(--surface-2, #f7f6f3);
  border: var(--border-w, 1px) solid var(--border, rgba(0, 0, 0, .09));
  border-radius: var(--radius-md, 8px);
  text-align: left;
}

.fg-plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.fg-plan-name {
  font-weight: var(--weight-semibold, 600);
  color: var(--text, #1a1a18);
}

.fg-plan-price {
  font-weight: var(--weight-bold, 700);
  color: var(--accent, #c85a1a);
}

.fg-plan-tagline {
  margin: var(--space-xs) 0 var(--space-sm);
  font-size: var(--font-sm, 12px);
  color: var(--text-2, #555);
}

.fg-plan-bullets {
  margin: 0;
  padding-left: var(--space-lg);
  font-size: var(--font-sm, 12px);
  color: var(--text, #1a1a18);
}

.fg-plan-bullets li { margin-bottom: calc(var(--space-xs) / 2); }

/* ── Shared lock chip (FretlyGate.renderLockChip) ────────────────────────── */
.fg-lock-chip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-xs) / 2);
  padding: calc(var(--space-xs) / 2) var(--space-sm);
  font-family: inherit;
  font-size: var(--font-xs, 11px);
  font-weight: var(--weight-semibold, 600);
  color: var(--accent, #c85a1a);
  background: var(--accent-bg, rgba(200, 90, 26, .08));
  border: var(--border-w, 1px) solid var(--accent, #c85a1a);
  border-radius: var(--radius-pill, 999px);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast, .12s);
}

.fg-lock-chip:hover {
  background: var(--accent, #c85a1a);
  color: #fff;
}

/* ── Free-user upgrade banner ────────────────────────────────────────────── */
.fg-free-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  background: var(--text, #2a2a26);
  color: #fff;
  font-size: var(--font-sm, 13px);
}

.fg-free-banner-cta {
  color: #fff;
  font-weight: var(--weight-bold, 700);
  text-decoration: underline;
  white-space: nowrap;
}

.fg-free-banner-close {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  color: #fff;
  font-size: var(--font-lg, 18px);
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--space-xs);
  opacity: .7;
}

.fg-free-banner-close:hover { opacity: 1; }

/* ── Shared public-tier gating — approach B "ONE FADED GATE" ───────────────
   (shared/lock-affordance.js, owner 2026-07-12).  Free/sample content
   carries ZERO lock chrome.  Members-only content fades (grayscale +
   dim, names STILL LEGIBLE) behind ONE calm gate + CTA.  The 🔒 is on
   the REGION (`.fly-gate`), never the item — no per-row/tab/key padlock.
   Applied ONLY by applyDim() / buildGateBanner() — never hand-rolled. */
.fly-faded {
  opacity: 0.4;
  filter: grayscale(1) blur(5px);   /* UNREADABLE — owner 2026-07-13 */
  /* owner 2026-07-13: heavily-blurred content is INERT — clicking it does
     nothing (no CTA, no own action). The CTA is the region's gate banner or
     the inactive .fly-ctl-locked controls, never the blurred content. */
  pointer-events: none;
  cursor: default;
}
.fly-faded[aria-disabled="true"] { cursor: default; }
.fly-faded,
.fly-faded * { user-select: none; }
/* Passive faded BLOCK — a whole region dimmed with no interactivity of
   its own; the region's single `.fly-gate` banner carries the CTA. */
.fly-faded-block {
  opacity: 0.4;
  filter: grayscale(1) blur(5px);   /* UNREADABLE — owner 2026-07-13 */
  pointer-events: none;
  user-select: none;
}
/* Locked HEADER CONTROL (gear, help) for public tier-0 — dimmed + lock
   cursor, NOT blurred (icons stay recognisable); click → upgrade sheet. */
.fly-ctl-locked {
  opacity: 0.45;
  filter: grayscale(1);
  cursor: pointer;
}

/* The ONE calm gate placed over a faded region. */
.fly-gate {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0;
  background: var(--accent-bg, rgba(200, 90, 26, .06));
  border: var(--border-w, 1px) solid var(--border);
  border-radius: var(--radius-md, 10px);
}
.fly-gate-ico { font-size: var(--font-lg); line-height: 1; }
.fly-gate-body { flex: 1 1 auto; min-width: 0; }
.fly-gate-title {
  font-weight: var(--weight-semibold, 600);
  font-size: var(--font-sm);
  color: var(--text);
}
.fly-gate-text {
  font-size: var(--font-xs);
  color: var(--text-2);
  margin-top: 2px;
  line-height: 1.4;
}
.fly-gate-btn {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  background: var(--accent, #c85a1a);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill, 999px);
  padding: var(--space-xs) var(--space-md);
  font-family: inherit;
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold, 600);
  cursor: pointer;
  white-space: nowrap;
}
.fly-gate-btn:hover { background: var(--accent-hover, #d47a40); }

/* Chord diagrams grid hidden by the content gate in fretboard/browse mode
   (owner 2026-07-13) — a class so it never clobbers the view logic's inline
   display (which owns show/hide across Cards/List/Map). */
.cpg-diag-gate-hidden { display: none !important; }