/* ════════════════════════════════════════════════════════════════════
   CANVASS PRO · pro.css  (window.Pro surfaces)
   The monetization layer, kept premium and structural. Token-only: every
   color, space, radius, and motion value comes from assets/tokens.css.
   Ember appears ONLY where money or trust moves (the PRO mark, the unlock,
   the single gold CTA, the featured plan rail). No raw hex. No em-dashes.

   Three surfaces:
     1. the PRO lock BADGE  .pro-badge      (ember hairline lozenge, never filled)
     2. the soft GATE ROW   .pro-gate        (a ruled bar under a teased feature)
     3. the upgrade MODAL   .pro-modal       (centered dialog, the one allowed
                                              centered surface + the one allowed
                                              3-col grid: a real ruled table)
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   1 · THE PRO BADGE · a bespoke lozenge for a gated control
   Ember hairline + ember text. Filled gold is reserved for actions, so the
   badge is never solid by default; .solid is an opt-in for a hero moment.
   ════════════════════════════════════════════════════════════════════ */
.pro-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1; white-space: nowrap;
  padding: 4px 7px; border-radius: var(--r-chip);
  color: var(--ember-hi); border: 1px solid color-mix(in srgb, var(--ember) 45%, var(--line));
  background: var(--tint-ember);
  box-shadow: var(--e1), var(--e-inset);
  cursor: pointer; vertical-align: middle;
  transition: border-color var(--m-fast) var(--ease), background var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease);
}
.pro-badge:hover { border-color: var(--ember); background: var(--tint-ember-2); }
.pro-badge:focus-visible { outline: none; box-shadow: var(--ring-ember); }
.pro-badge .pro-lock-ico { flex-shrink: 0; opacity: .9; }
.pro-badge .pb-t { display: inline-block; }
.pro-badge.solid { color: var(--ember-ink); background: var(--grad-ember); border-color: transparent; box-shadow: var(--e2), var(--e-inset); }
.pro-badge.solid:hover { background: var(--ember-hi); }

/* ════════════════════════════════════════════════════════════════════
   2 · THE SOFT GATE ROW · never a hard wall
   A hairline-ruled bar the integrator drops under a teased feature: a PRO
   mark, the name + teaser, and one gold unlock. It reads as part of the
   instrument, not a popup.
   INTEGRATOR-ONLY: this styles the public Pro.gateRow() API surface; no
   call site in this app renders it yet, so it will not appear until a
   feature row calls Pro.gateRow(). Kept here because the API is public.
   ════════════════════════════════════════════════════════════════════ */
.pro-gate {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; margin: 4px 0 14px;
  border: 1px solid color-mix(in srgb, var(--ember) 28%, var(--line));
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--ember) 4%, var(--graphite));
  box-shadow: var(--e2), var(--e-inset);
}
.pro-gate-mark { flex-shrink: 0; }
.pro-gate-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pro-gate .pg-name { font-size: 13px; font-weight: 650; color: var(--platinum); letter-spacing: -.01em; }
.pro-gate .pg-teaser { font-size: 12px; color: var(--plat-dim); line-height: 1.45; }
.pro-unlock {
  flex-shrink: 0; font: 700 12.5px var(--body); letter-spacing: .01em;
  padding: 8px 14px; min-height: 38px; border: none; border-radius: var(--r-control);
  background: var(--grad-ember); color: var(--ember-ink); white-space: nowrap;
  box-shadow: var(--e2), var(--e-inset);
  transition: background var(--m-fast) var(--ease), box-shadow var(--m-press) var(--ease-press), transform var(--m-press) var(--ease-press);
}
.pro-unlock:hover { background: var(--ember-hi); }
.pro-unlock:focus-visible { outline: none; box-shadow: var(--ring-ember), var(--e2); }
.pro-unlock:active { box-shadow: var(--e-press); transform: translateY(1px) scale(.99); }
@media (prefers-reduced-motion: reduce) { .pro-unlock:active { transform: none; } }
@media (max-width: 460px) {
  .pro-gate { flex-wrap: wrap; }
  .pro-gate-copy { flex-basis: 100%; order: 2; }
  .pro-gate-mark { order: 1; }
  .pro-unlock { order: 3; width: 100%; }
}

/* a control that is locked can carry .is-locked to dim its teaser state;
   the integrator adds this on a gated button so the surface looks present
   but quiet until Pro is on. The data-plan body flag lets it self-resolve. */
.is-locked { position: relative; opacity: .55; }
body[data-plan="pro"] .is-locked,
body[data-plan="enterprise"] .is-locked { opacity: 1; /* unlocked: nothing to dim */ }

/* ════════════════════════════════════════════════════════════════════
   3 · THE UPGRADE MODAL · centered dialog (the one allowed centered surface)
   Structural, editorial, ruled. No glow, no halo, no card grid except the
   one real comparison table.
   ════════════════════════════════════════════════════════════════════ */
.pro-scrim {
  position: fixed; inset: 0; z-index: 1390; background: var(--scrim);
  -webkit-backdrop-filter: saturate(120%) blur(3px);
  backdrop-filter: saturate(120%) blur(3px);
  animation: proFade var(--m-base) var(--ease);
}
@keyframes proFade { from { opacity: 0; } to { opacity: 1; } }

.pro-modal {
  position: fixed; z-index: 1400;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(880px, calc(100vw - 28px));
  max-height: calc(100dvh - 36px); overflow-y: auto;
  background: var(--graphite); border: 1px solid var(--line-hi);
  border-radius: var(--r-card-lg); padding: 28px 28px max(22px, env(safe-area-inset-bottom));
  box-shadow: var(--e4), var(--e-inset);
  animation: proRise var(--m-enter) var(--ease-exit);
}
@keyframes proRise { from { transform: translate(-50%, calc(-50% + 12px)); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pro-modal { animation: none; }
  .pro-scrim { animation: none; }
}

.pm-x {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--graphite-2); border: 1px solid var(--line-hi); border-radius: var(--r-inner);
  color: var(--plat-dim);
  box-shadow: var(--e1);
  transition: color var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease), background var(--m-fast) var(--ease);
}
.pm-x:hover { color: var(--platinum); border-color: var(--plat-faint); background: var(--graphite-3); }
.pm-x:focus-visible { outline: 2px solid var(--plat-faint); outline-offset: 2px; }

/* ── head · editorial, left-aligned (the table is the only centered grid) ── */
.pm-head { max-width: 600px; margin-bottom: 22px; padding-right: 40px; }
.pm-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); margin-bottom: 12px; }
.pm-title { font-family: var(--disp); font-size: clamp(22px, 3.4vw, 30px); font-weight: 400; letter-spacing: -.01em; line-height: 1.12; color: var(--platinum); margin: 0 0 10px; }
.pm-sub { font-size: 14px; line-height: 1.55; color: var(--plat-dim); margin: 0; }

/* ── the plan rail · three columns, but ruled blocks, not icon cards ──── */
.pm-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin-bottom: 22px; }
.pm-plan { padding: 18px 16px; border-right: 1px solid var(--line); background: var(--graphite-2); display: flex; flex-direction: column; }
.pm-plan:last-child { border-right: none; }
.pm-plan.featured { background: color-mix(in srgb, var(--ember) 6%, var(--graphite)); }
.pm-plan.spot { box-shadow: inset 0 2px 0 0 var(--ember); }
.pm-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; min-height: 18px; }
.pm-plan-name { font-family: var(--disp); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--platinum); }
.pm-flag { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ember-hi); border: 1px solid color-mix(in srgb, var(--ember) 40%, var(--line)); background: var(--tint-ember); border-radius: var(--r-chip); padding: 3px 5px; white-space: nowrap; }
.pm-flag.cur { color: var(--plat-faint); border-color: var(--line-hi); background: var(--tint-hover); }
.pm-price { display: flex; align-items: baseline; gap: 7px; margin-bottom: 8px; flex-wrap: wrap; }
.pm-amt { font-size: 26px; font-weight: 750; letter-spacing: -.03em; color: var(--platinum); line-height: 1; }
.pm-plan.featured .pm-amt { background: var(--grad-ember); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pm-unit { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--plat-faint); }
.pm-tag { font-size: 12px; color: var(--plat-dim); line-height: 1.45; margin-bottom: 14px; min-height: 34px; }
.pm-blurb { font-size: 11.5px; line-height: 1.5; color: var(--plat-faint); margin-top: 12px; }

/* the plan CTA · exactly one is gold (Pro). Free is a quiet ghost, Ent a line button */
.pm-cta { width: 100%; min-height: 44px; font: 700 13.5px var(--body); letter-spacing: .01em; border-radius: var(--r-control); border: 1px solid var(--line-hi); background: var(--graphite-2); color: var(--platinum); box-shadow: var(--e1); transition: border-color var(--m-fast) var(--ease), background var(--m-fast) var(--ease), box-shadow var(--m-press) var(--ease-press), transform var(--m-press) var(--ease-press); margin-top: auto; }
.pm-cta.gold { background: var(--grad-ember); color: var(--ember-ink); border: none; box-shadow: var(--e2), var(--e-inset); }
.pm-cta.gold:hover { background: var(--ember-hi); }
.pm-cta.gold:focus-visible { outline: none; box-shadow: var(--ring-ember), var(--e2); }
.pm-cta.gold:active { box-shadow: var(--e-press); transform: translateY(1px) scale(.99); }
.pm-cta.line:hover { border-color: var(--plat-faint); background: var(--graphite-3); }
.pm-cta.ghost { color: var(--plat-dim); background: transparent; box-shadow: none; }
.pm-cta.ghost:hover { color: var(--platinum); border-color: var(--plat-faint); background: var(--tint-hover); }
.pm-cta[disabled] { opacity: .55; cursor: default; }
.pm-cta[disabled]:hover { transform: none; }
.pm-cta.gold[disabled]:hover { background: var(--grad-ember); border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .pm-cta.gold:active { transform: none; } }

/* ── the comparison TABLE · the one permitted 3-col grid, hairline-ruled ── */
.pm-matrix { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin-bottom: 18px; }
.pm-row { display: grid; grid-template-columns: 1fr 76px 76px 76px; align-items: center; border-bottom: 1px solid var(--line); }
.pm-row:last-child { border-bottom: none; }
.pm-row:hover:not(.pm-mhead) { background: var(--tint-row); }
.pm-mhead { background: var(--obsidian); }
.pm-mh-t { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--plat-faint); }
.pm-mhead .pm-c { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--plat-faint); }
.pm-mhead .pm-c.pro { color: var(--ember-hi); }
.pm-rl { padding: 11px 14px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pm-rl-name { font-size: 13px; color: var(--platinum); font-weight: 500; }
.pm-rl-note { font-family: var(--mono); font-size: 10px; letter-spacing: .03em; color: var(--plat-faint); }
.pm-c { padding: 11px 8px; text-align: center; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--line); min-height: 42px; }
.pm-c.pro { background: color-mix(in srgb, var(--ember) 6%, transparent); }
.pm-yes { color: var(--green); }
.pm-c.pro .pm-yes { color: var(--ember-hi); }
.pm-no { display: block; width: 10px; height: 1px; background: var(--line-hi); }
.pm-txt { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--plat-dim); text-transform: uppercase; }
.pm-c.pro .pm-txt { color: var(--ember-hi); }

/* ── foot · the per-active-operator promise, the trust line ──────────── */
.pm-foot { padding-top: 4px; }
.pm-foot-note { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; line-height: 1.6; color: var(--plat-faint); }

/* ── responsive · the modal collapses to a single readable column ────── */
@media (max-width: 720px) {
  .pro-modal { width: 100vw; top: 0; left: 0; transform: none; max-height: 100dvh; border-radius: 0; padding: calc(22px + env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); }
  @keyframes proRise { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  .pm-plans { grid-template-columns: 1fr; }
  .pm-plan { border-right: none; border-bottom: 1px solid var(--line); }
  .pm-plan:last-child { border-bottom: none; }
  .pm-plan.spot { box-shadow: inset 2px 0 0 0 var(--ember); }
  .pm-row { grid-template-columns: 1fr 52px 52px 52px; }
  .pm-c { padding: 11px 4px; }
  .pm-rl-note { display: none; }
}
@media (max-width: 460px) {
  .pm-row { grid-template-columns: 1fr 44px 44px 44px; }
  .pm-rl-name { font-size: 12.5px; }
}