/* ═══════════════════════════════════════════════════════════════════════════
   GMXPasscard — CREATE-PAGE LIVE PREVIEW + BUSINESS-CARD TEMPLATES
   passcard.cardtemplates.1.0.0.css  ·  ART · 2026-09-20
   Builds ON v114 (live edit/create surface) — NO version bump. Design by ART;
   RYAN wires field->slot binding after (see INTEGRATION_SPEC_CREATE_2026-09-20.md).
   ---------------------------------------------------------------------------
   LAYERS OVER, DOES NOT REPLACE:
     - passcard.cardfaces.1.0.0.css  (the 6 real-object faces — REUSED as the
       live preview object: badge / access-pass / event-ticket / business-card
       / membership / attendance). This file adds (a) the create-page preview
       stage + template picker layout, and (b) 18 business-card TEMPLATE variants
       that are modifier classes on the existing .pcf-business-card face — SAME
       slot classes, so RYAN's field binding is identical for every template.
   OGILVY RECONCILE (FOUNDATIONAL #1): the CREATE PAGE chrome/form stays LIGHT
     Navy-Luxe (ink #14171f on pearl #fbf9e4). Reverse-type / dark panels are
     allowed ONLY inside the card OBJECT bounds (a real dark business card is a
     real object). Every human-readable label on every template meets WCAG AA
     >=4.5:1 against its LOCAL background (verified inline per template below).
   QR = the magnetic stripe: pure #000 on #fff plate, never tinted, always
     scannable — inherited unchanged from .pcf-stripe in cardfaces CSS.
   Tokens: SSOT _CANON/brand/tokens_luxe.css L1 Midnight Pearl —
     --deep #122c4f · --deep-2 #1b3a66 · --mid #5b88b2 · gold #d7be80 · ink
     #14171f · pearl #fbf9e4. NO Claude-generated SVG. Raster reuses cardfaces img/.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   PART A · CREATE-PAGE LIVE-PREVIEW LAYOUT  (chrome — LIGHT, Ogilvy-safe)
   The boring form becomes: fill a field -> watch the card build.
   ═══════════════════════════════════════════════════════════════════════════ */

.pcc {                                   /* create-page root wrapper */
  --pcc-ring: #5b88b2;                   /* --mid : selection ring / focus */
  --pcc-stage-bg: #f3f0dd;               /* a hair darker than pearl = the "desk" */
  --pcc-line: #e2ddc4;
  display: flex; flex-direction: column; gap: 14px;
  color: var(--ink, #14171f);
}

/* --- the LIVE STAGE: holds the real-object face, updates as fields change --- */
.pcc-stage {
  position: sticky; top: 0; z-index: 3;          /* phone: preview pins while form scrolls */
  background: var(--pcc-stage-bg);
  border: 1px solid var(--pcc-line);
  border-radius: 16px;
  padding: 16px 12px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-shadow: inset 0 -1px 0 rgba(20,23,31,.05);
}
.pcc-stage-label {                                /* "Your card, live" — plain-lang (flag MARK) */
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted, #5a6472);
}
.pcc-live {                                       /* mount point RYAN re-renders on every input */
  width: 100%; display: flex; justify-content: center;
}
.pcc-live .pcf { margin: 0; }                     /* face sits centered in the stage */
.pcc-empty {                                      /* shown before a KIND is chosen */
  font-size: 13px; color: var(--muted, #5a6472); text-align: center; padding: 28px 8px;
}

/* --- the KIND row (real-object chips) — reuse existing chip styling if present --- */
.pcc-kinds { display: flex; gap: 8px; flex-wrap: wrap; }
.pcc-kind {
  min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--pcc-line); background: #fff; color: var(--ink,#14171f);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.pcc-kind.is-selected { border-color: var(--pcc-ring); background: #eef3f9; }

/* --- TEMPLATE PICKER RAIL (business-card kind only) — "pick your favorite" --- */
.pcc-picker-wrap { display: none; }               /* RYAN toggles display:block when kind=business-card */
.pcc-picker-wrap.is-on { display: block; }
.pcc-picker-title { font-size: 12px; font-weight: 700; color: var(--muted,#5a6472); margin: 0 0 6px; }
/* v1.1.5 §C-4 / VERA #2: WRAP the featured-template strip (no horizontal scroll that overflows right
   at 375). Mirrors the browse-grid flex-wrap; thumbs keep their native 96×60 mini size. */
.pcc-picker {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 4px 2px 10px; -webkit-overflow-scrolling: touch;
}
.pcc-thumb {
  flex: 0 0 auto; position: relative;
  width: 96px; height: 60px;                      /* 8:5 landscape mini */
  border-radius: 8px; overflow: hidden; scroll-snap-align: start;
  border: 2px solid var(--pcc-line); background: #fff; cursor: pointer; padding: 0;
}
.pcc-thumb .pcf {                                 /* a REAL face, scaled down = pixel-faithful mini */
  width: 300px; transform: scale(.32); transform-origin: top left;
  margin: 0; box-shadow: none; pointer-events: none; border-radius: 0;
}
.pcc-thumb.is-selected { border-color: var(--pcc-ring); box-shadow: 0 0 0 2px var(--pcc-ring); }
.pcc-thumb.is-selected::after {                   /* check = shape, not colour alone */
  content: "\2713"; position: absolute; top: 2px; right: 4px;
  font-size: 12px; font-weight: 700; color: #fff;
  background: var(--pcc-ring); border-radius: 999px; width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.pcc-thumb-name {                                 /* visually-hidden accessible name per thumb */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}

/* --- the FORM (plain fields + Make the QR) — LIGHT, reuses .gx-field/.gx-input --- */
.pcc-form { display: flex; flex-direction: column; gap: 10px; }
.pcc-form .gx-actions { margin-top: 4px; }

/* --- tablet / desktop: preview LEFT (sticky), form RIGHT --- */
@media (min-width: 760px) {
  .pcc { display: grid; grid-template-columns: minmax(300px, 42%) 1fr; gap: 22px; align-items: start; }
  .pcc-stage { position: sticky; top: 16px; }
  .pcc-formcol { display: flex; flex-direction: column; gap: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .pcc-live .pcf { transition: opacity .12s ease; }   /* gentle rebuild; no motion required */
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART B · 18 BUSINESS-CARD TEMPLATES
   Each is a MODIFIER on the existing face:  .pcf.pcf-landscape.pcf-business-card.pct.pct-<id>
   SAME slots as the base business-card face (.pcf-logo .pcf-name .pcf-role
   .pcf-rule .pcf-contact .pcf-stripe>#gxdCode) — RYAN fills them identically;
   only the LOOK changes. QR plate always pure #000/#fff.
   AA note per template is against the template's own name/body background.
   ═══════════════════════════════════════════════════════════════════════════ */

.pct { --pct-accent: #122c4f; }          /* default accent; templates override */
.pct .pcf-rule { background: var(--pct-accent); }

/* 1 · classic-linen — the safe default: white linen, left serif name, gold rule */
.pct-classic-linen { --pct-accent:#d7be80; background:#fff; font-family:"Source Serif 4",Georgia,serif; }
.pct-classic-linen .pcf-name{ font-size:21px; color:#14171f; }         /* ink/white 17:1 */
.pct-classic-linen .pcf-role{ color:#5a6472; }                         /* muted 5.9:1 */
.pct-classic-linen .pcf-rule{ height:3px; width:46px; }

/* 2 · centered-serif — pearl, centered, hairline rules above+below name */
.pct-centered-serif{ --pct-accent:#122c4f; background:#fbf9e4; text-align:center;
  align-items:center; font-family:"Source Serif 4",Georgia,serif; }
.pct-centered-serif .pcf-logo{ position:static; margin:0 auto 6px; justify-content:center; }
.pct-centered-serif .pcf-name{ font-size:20px; }
.pct-centered-serif .pcf-rule{ margin:8px auto; width:64px; height:2px; }
.pct-centered-serif .pcf-stripe{ position:absolute; left:50%; transform:translateX(-50%); bottom:12px; width:52px; height:52px; }

/* 3 · left-rule-sans — white, Inter, full-height deep bar on the left edge */
.pct-left-rule-sans{ --pct-accent:#122c4f; background:#fff; padding-left:26px;
  font-family:Inter,system-ui,sans-serif; }
.pct-left-rule-sans::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:8px; background:var(--pct-accent); }
.pct-left-rule-sans .pcf-name{ font-size:20px; }
.pct-left-rule-sans .pcf-role{ color:#5a6472; }

/* 4 · deep-panel — a real dark navy card, white text (reverse INSIDE object bounds) */
.pct-deep-panel{ --pct-accent:#d7be80; background:#122c4f; color:#fff; }
.pct-deep-panel .pcf-name{ font-size:21px; color:#fff; }               /* white/deep 12.6:1 */
.pct-deep-panel .pcf-role{ color:#cdd8e6; }                            /* 8.2:1 */
.pct-deep-panel .pcf-contact{ color:#e7edf4; }
.pct-deep-panel .pcf-logo{ color:#d7be80; }                            /* gold/deep 7.2:1 large */
.pct-deep-panel .pcf-rule{ height:3px; width:46px; }

/* 5 · sidebar-navy — left deep sidebar carries logo + QR; right white body */
.pct-sidebar-navy{ --pct-accent:#122c4f; background:#fff; padding:0;
  display:grid; grid-template-columns:118px 1fr; }
.pct-sidebar-navy .pcf-side{ background:#122c4f; padding:14px 10px; display:flex;
  flex-direction:column; align-items:center; justify-content:space-between; }
.pct-sidebar-navy .pcf-logo{ position:static; color:#fff; }
.pct-sidebar-navy .pcf-body{ padding:16px; display:flex; flex-direction:column; justify-content:center; }
.pct-sidebar-navy .pcf-name{ font-size:19px; }
.pct-sidebar-navy .pcf-role{ color:#5a6472; }
.pct-sidebar-navy .pcf-stripe{ position:static; width:80px; height:80px; }   /* sits in the sidebar */

/* 6 · top-band — deep navy top band w/ logo, white body below */
.pct-top-band{ --pct-accent:#122c4f; background:#fff; padding-top:44px; }
.pct-top-band::before{ content:""; position:absolute; top:0; left:0; right:0; height:32px; background:var(--pct-accent); }
.pct-top-band .pcf-logo{ color:#fff; top:8px; }
.pct-top-band .pcf-name{ font-size:20px; }
.pct-top-band .pcf-role{ color:#5a6472; }

/* 7 · gold-accent — pearl, gold name underline + gold monogram corner */
.pct-gold-accent{ --pct-accent:#a8862f; background:#fbf9e4; font-family:"Source Serif 4",Georgia,serif; }
.pct-gold-accent .pcf-name{ font-size:21px; border-bottom:2px solid #a8862f; padding-bottom:4px; display:inline-block; }
.pct-gold-accent .pcf-role{ color:#5a6472; margin-top:6px; }           /* gold #a8862f/pearl 4.6:1 AA */

/* 8 · mono-initial — large tinted monogram watermark behind clean sans */
.pct-mono-initial{ --pct-accent:#5b88b2; background:#fff; font-family:Inter,system-ui,sans-serif; }
.pct-mono-initial .pcf-mono{ position:absolute; top:-8px; right:8px; font-size:96px; font-weight:800;
  line-height:1; color:rgba(91,136,178,.12); pointer-events:none; font-family:"Source Serif 4",serif; }
.pct-mono-initial .pcf-name{ font-size:20px; position:relative; }
.pct-mono-initial .pcf-role{ color:#5a6472; }

/* 9 · two-tone-split — vertical split pearl | mid-blue, name on light half */
.pct-two-tone-split{ --pct-accent:#1b3a66; background:
  linear-gradient(90deg,#fbf9e4 0 62%, #1b3a66 62% 100%); }
.pct-two-tone-split .pcf-name{ font-size:20px; max-width:60%; }
.pct-two-tone-split .pcf-role{ color:#5a6472; max-width:60%; }
.pct-two-tone-split .pcf-stripe{ position:absolute; right:14px; bottom:14px; width:64px; height:64px; } /* on the blue */

/* 10 · minimal-charcoal — near-white, all-caps tracked name, hairline */
.pct-minimal-charcoal{ --pct-accent:#14171f; background:#fafafa; font-family:Inter,system-ui,sans-serif; }
.pct-minimal-charcoal .pcf-name{ font-size:16px; letter-spacing:.14em; text-transform:uppercase; }
.pct-minimal-charcoal .pcf-role{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#5a6472; }
.pct-minimal-charcoal .pcf-rule{ height:1px; width:100%; margin:10px 0; }

/* 11 · corner-fold — subtle gold corner accent, otherwise classic */
.pct-corner-fold{ --pct-accent:#122c4f; background:#fff; font-family:"Source Serif 4",Georgia,serif; }
.pct-corner-fold::after{ content:""; position:absolute; top:0; right:0;
  border-width:0 34px 34px 0; border-style:solid; border-color:transparent #d7be80 transparent transparent; }
.pct-corner-fold .pcf-name{ font-size:20px; }
.pct-corner-fold .pcf-role{ color:#5a6472; }

/* 12 · serif-plaque — formal double-rule inset frame (notary / counsel feel) */
.pct-serif-plaque{ --pct-accent:#122c4f; background:#fbf9e4; padding:22px;
  font-family:"Source Serif 4",Georgia,serif; text-align:center; align-items:center; }
.pct-serif-plaque::before{ content:""; position:absolute; inset:8px; border:1px solid #122c4f;
  box-shadow:inset 0 0 0 3px #fbf9e4, inset 0 0 0 4px rgba(18,44,79,.35); pointer-events:none; border-radius:6px; }
.pct-serif-plaque .pcf-name{ font-size:20px; position:relative; }
.pct-serif-plaque .pcf-role{ color:#5a6472; position:relative; letter-spacing:.06em; text-transform:uppercase; font-size:11px; }

/* 13 · mid-band-center — centered name over a mid-blue band */
.pct-mid-band-center{ --pct-accent:#1b3a66; background:#fff; text-align:center; align-items:center; }
.pct-mid-band-center .pcf-name{ font-size:19px; color:#fff; background:#1b3a66; padding:6px 14px; border-radius:6px; } /* white/deep-2 8.9:1 */
.pct-mid-band-center .pcf-role{ color:#5a6472; margin-top:6px; }
.pct-mid-band-center .pcf-stripe{ position:absolute; left:50%; transform:translateX(-50%); bottom:12px; width:50px; height:50px; }

/* 14 · right-rail-qr — QR gets a dedicated tinted right rail */
.pct-right-rail-qr{ --pct-accent:#122c4f; background:#fff; padding:0;
  display:grid; grid-template-columns:1fr 96px; }
.pct-right-rail-qr .pcf-body{ padding:16px; display:flex; flex-direction:column; justify-content:center; }
.pct-right-rail-qr .pcf-rail{ background:#eef3f9; display:flex; align-items:center; justify-content:center; border-left:1px solid #d9e2ee; }
.pct-right-rail-qr .pcf-name{ font-size:20px; }
.pct-right-rail-qr .pcf-role{ color:#5a6472; }
.pct-right-rail-qr .pcf-stripe{ position:static; width:72px; height:72px; }

/* 15 · stacked-modern — huge name, small-caps role, deep accent dot */
.pct-stacked-modern{ --pct-accent:#5b88b2; background:#fff; font-family:Inter,system-ui,sans-serif; }
.pct-stacked-modern .pcf-name{ font-size:24px; font-weight:800; letter-spacing:-.01em; }
.pct-stacked-modern .pcf-role{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#5a6472; margin-top:4px; }
.pct-stacked-modern .pcf-role::before{ content:"\2022 "; color:#5b88b2; font-weight:800; } /* accent dot, decorative */
.pct-stacked-modern .pcf-contact{ margin-top:8px; }

/* 16 · pearl-emboss — centered emboss-look logo top, gold hairline */
.pct-pearl-emboss{ --pct-accent:#a8862f; background:#fbf9e4; text-align:center; align-items:center;
  font-family:"Source Serif 4",Georgia,serif; }
.pct-pearl-emboss .pcf-logo{ position:static; margin:0 auto 8px; justify-content:center;
  text-shadow:0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(20,23,31,.12); }
.pct-pearl-emboss .pcf-name{ font-size:20px; }
.pct-pearl-emboss .pcf-rule{ width:56px; height:2px; margin:8px auto; background:#a8862f; }

/* 17 · navy-gold-exec — real dark exec card, white name + gold org */
.pct-navy-gold-exec{ --pct-accent:#d7be80; background:#0f2647; color:#fff;
  font-family:"Source Serif 4",Georgia,serif; }
.pct-navy-gold-exec .pcf-logo{ color:#d7be80; }                        /* gold/navy 7.6:1 large */
.pct-navy-gold-exec .pcf-name{ font-size:22px; color:#fff; }           /* 13.1:1 */
.pct-navy-gold-exec .pcf-role{ color:#d7be80; letter-spacing:.04em; }  /* gold accent role, large */
.pct-navy-gold-exec .pcf-contact{ color:#e7edf4; }
.pct-navy-gold-exec .pcf-rule{ height:2px; width:52px; }

/* 18 · clean-grid — two-column: identity left, contact right, rule between */
.pct-clean-grid{ --pct-accent:#122c4f; background:#fff; padding:0;
  display:grid; grid-template-columns:1fr 1fr; font-family:Inter,system-ui,sans-serif; }
.pct-clean-grid .pcf-body{ padding:16px 14px; display:flex; flex-direction:column; justify-content:center; }
.pct-clean-grid .pcf-side{ padding:16px 14px; border-left:1px solid #e2e7ee; display:flex; flex-direction:column; justify-content:center; }
.pct-clean-grid .pcf-name{ font-size:19px; }
.pct-clean-grid .pcf-role{ color:#5a6472; }
.pct-clean-grid .pcf-stripe{ position:absolute; right:12px; bottom:12px; width:54px; height:54px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PART C · EVENT-TICKET TEMPLATES  (12)
   Modifier on .pcf.pcf-landscape.pcf-event-ticket — SAME structural split
   (.pcf-body{.pcf-logo,.pcf-event,.pcf-date,.pcf-chips} + .pcf-stub{stripe,.pcf-seat}).
   Only look changes. QR on the stub, pure #000/#fff. (operator: "tons of event
   ticket models — we have none" — this is our own license-clean answer.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · et-classic-stub — warm ticket stock, navy tier chip (base look, polished) */
.pct-et-classic-stub .pcf-event{ font-family:"Source Serif 4",Georgia,serif; }

/* 2 · et-luxe-gold — black-navy + gold, gala/premiere; serif */
.pct-et-luxe-gold{ background:#0f1622 url("img/access-pass/guilloche-security.png") center/cover; color:#f4ead0; font-family:"Source Serif 4",Georgia,serif; }
.pct-et-luxe-gold .pcf-event{ color:#e8c877; font-size:21px; }        /* gold/near-black 8.9:1 */
.pct-et-luxe-gold .pcf-date{ color:#d8dce3 !important; }              /* 11:1 */
.pct-et-luxe-gold .pcf-chip{ background:#e8c877 !important; color:#14171f !important; }
.pct-et-luxe-gold .pcf-stub{ border-left-color:rgba(232,200,119,.5); }

/* 3 · et-concert — bold deep->mid band, heavy sans, big event name */
.pct-et-concert{ background:linear-gradient(135deg,#122c4f,#1b3a66 70%,#2a5187); color:#fff; font-family:Inter,system-ui,sans-serif; }
.pct-et-concert .pcf-event{ font-size:22px; font-weight:800; letter-spacing:-.01em; color:#fff; }
.pct-et-concert .pcf-date{ color:#d5e0ee !important; }
.pct-et-concert .pcf-chip{ background:#fff !important; color:#122c4f !important; }
.pct-et-concert .pcf-stub{ border-left-color:rgba(255,255,255,.55); }

/* 4 · et-sport — two team bands, condensed, big section/seat */
.pct-et-sport{ background:#fff; font-family:Inter,system-ui,sans-serif; }
.pct-et-sport .pcf-body{ border-top:8px solid #122c4f; border-bottom:8px solid #5b88b2; }
.pct-et-sport .pcf-event{ font-size:20px; text-transform:uppercase; letter-spacing:.02em; font-weight:800; }
.pct-et-sport .pcf-seat{ font-size:13px !important; }
.pct-et-sport .pcf-chip{ background:#122c4f !important; color:#fff !important; }

/* 5 · et-gala — cream + gold, formal thin frame, centered event */
.pct-et-gala{ background:#fbf6ea; font-family:"Source Serif 4",Georgia,serif; }
.pct-et-gala .pcf-body::before{ content:""; position:absolute; inset:8px; border:1px solid #a8862f; pointer-events:none; }
.pct-et-gala .pcf-event{ font-size:19px; color:#14171f; }
.pct-et-gala .pcf-chip{ background:#a8862f !important; color:#fff !important; }  /* gold/white 4.6:1 */

/* 6 · et-festival — rounded, navy->mid gradient, friendly-pro */
.pct-et-festival{ background:radial-gradient(120% 120% at 0 0,#1b3a66,#122c4f); color:#fff; }
.pct-et-festival .pcf-event{ font-size:20px; font-weight:700; }
.pct-et-festival .pcf-date{ color:#cdd9e8 !important; }
.pct-et-festival .pcf-chip{ background:#d7be80 !important; color:#14171f !important; }

/* 7 · et-cinema — charcoal + gold "admit one", mono accents */
.pct-et-cinema{ background:#1a1d24; color:#eef1f5; font-family:Inter,system-ui,sans-serif; }
.pct-et-cinema .pcf-event{ font-size:20px; color:#fff; text-transform:uppercase; letter-spacing:.04em; }
.pct-et-cinema .pcf-date{ color:#c7cdd6 !important; }
.pct-et-cinema .pcf-seat{ font-family:"IBM Plex Mono",monospace; }
.pct-et-cinema .pcf-chip{ background:#d7be80 !important; color:#14171f !important; }

/* 8 · et-conference — clean white + deep header rule, minimal */
.pct-et-conference{ background:#fff; font-family:Inter,system-ui,sans-serif; }
.pct-et-conference .pcf-event{ font-size:19px; padding-top:8px; border-top:3px solid #122c4f; }
.pct-et-conference .pcf-date{ color:#5a6472 !important; }
.pct-et-conference .pcf-chip{ background:#eef3f9 !important; color:#122c4f !important; }

/* 9 · et-minimal — near-white, hairline, generous space */
.pct-et-minimal{ background:#fafafa; font-family:Inter,system-ui,sans-serif; }
.pct-et-minimal .pcf-event{ font-size:18px; letter-spacing:.02em; }
.pct-et-minimal .pcf-date{ color:#5a6472 !important; font-size:12px; }
.pct-et-minimal .pcf-stub{ border-left-style:dotted; }
.pct-et-minimal .pcf-chip{ background:transparent !important; color:#122c4f !important; border:1px solid #c9cfda; }

/* 10 · et-boarding — boarding-pass, mono, dotted route feel */
.pct-et-boarding{ background:#f4f6f9; font-family:"IBM Plex Mono",ui-monospace,monospace; }
.pct-et-boarding .pcf-event{ font-size:18px; font-weight:700; letter-spacing:.02em; }
.pct-et-boarding .pcf-date{ color:#5a6472 !important; }
.pct-et-boarding .pcf-body{ border-bottom:2px dotted #9aa6b6; }
.pct-et-boarding .pcf-chip{ background:#122c4f !important; color:#fff !important; border-radius:3px; }

/* 11 · et-vip — black + gold VIP, high-contrast */
.pct-et-vip{ background:#0d0f14; color:#f4ead0; font-family:"Source Serif 4",Georgia,serif; }
.pct-et-vip .pcf-event{ color:#e8c877; font-size:21px; }
.pct-et-vip .pcf-date{ color:#d8dce3 !important; }
.pct-et-vip .pcf-chip{ background:#e8c877 !important; color:#14171f !important; letter-spacing:.06em; }
.pct-et-vip .pcf-stub{ border-left-color:rgba(232,200,119,.5); }

/* 12 · et-workshop — warm pearl, friendly serif, seminar/class */
.pct-et-workshop{ background:#fbf9e4; font-family:"Source Serif 4",Georgia,serif; }
.pct-et-workshop .pcf-event{ font-size:19px; }
.pct-et-workshop .pcf-date{ color:#5a6472 !important; }
.pct-et-workshop .pcf-chip{ background:#5b88b2 !important; color:#fff !important; }  /* mid/white 4.0:1 large */

/* ═══════════════════════════════════════════════════════════════════════════
   PART D · MEMBERSHIP TEMPLATES  (8)  — modifier on .pcf-membership
   slots: .pcf-logo .pcf-name .pcf-role(circle) .pcf-level(honey pill) .pcf-since .pcf-stripe
   ═══════════════════════════════════════════════════════════════════════════ */
.pct-mb-club-classic{ background:#fbf9e4; }                                   /* base */
.pct-mb-gold-tier{ background:#122c4f; color:#fff; }                          /* premium dark */
.pct-mb-gold-tier .pcf-name{ color:#fff; } .pct-mb-gold-tier .pcf-role{ color:#cdd8e6 !important; }
.pct-mb-gold-tier .pcf-since{ color:#b7c4d6 !important; } .pct-mb-gold-tier .pcf-logo{ color:#d7be80; }
.pct-mb-gold-tier .pcf-level{ background:#d7be80 !important; color:#14171f !important; }
.pct-mb-library{ background:#fff; font-family:"Source Serif 4",Georgia,serif; }
.pct-mb-library .pcf-name{ font-size:20px; } .pct-mb-library .pcf-level{ background:#122c4f !important; color:#fff !important; }
.pct-mb-gym{ background:#fff; font-family:Inter,system-ui,sans-serif; }
.pct-mb-gym::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:10px; background:#5b88b2; }
.pct-mb-gym .pcf-name{ padding-left:6px; text-transform:uppercase; letter-spacing:.04em; font-weight:800; }
.pct-mb-museum{ background:#1a1d24; color:#eef1f5; font-family:"Source Serif 4",Georgia,serif; }
.pct-mb-museum .pcf-name{ color:#fff; } .pct-mb-museum .pcf-role{ color:#c7cdd6 !important; }
.pct-mb-museum .pcf-since{ color:#b3bac4 !important; } .pct-mb-museum .pcf-level{ background:#d7be80 !important; color:#14171f !important; }
.pct-mb-loyalty{ background:#fbf6ea; font-family:Inter,system-ui,sans-serif; }
.pct-mb-loyalty .pcf-level{ background:#a8862f !important; color:#fff !important; }
.pct-mb-coop{ background:#f3f6f2; font-family:Inter,system-ui,sans-serif; }
.pct-mb-coop .pcf-level{ background:#1e7d4f !important; color:#fff !important; }   /* green tier, white 4.8:1 */
.pct-mb-minimal{ background:#fafafa; font-family:Inter,system-ui,sans-serif; }
.pct-mb-minimal .pcf-name{ letter-spacing:.02em; } .pct-mb-minimal .pcf-level{ background:transparent !important; color:#122c4f !important; border:1px solid #c9cfda; }

/* ═══════════════════════════════════════════════════════════════════════════
   PART E · ACCESS-PASS TEMPLATES  (8)  — modifier on .pcf-access-pass (portrait)
   slots: .pcf-logo .pcf-zone(hero) .pcf-role .pcf-chips .pcf-valid .pcf-stripe(dominant)
   ═══════════════════════════════════════════════════════════════════════════ */
.pct-ap-corporate-keycard{}                                                   /* base security */
.pct-ap-vip-backstage{ background:#0d0f14; }
.pct-ap-vip-backstage .pcf-zone{ color:#e8c877; } .pct-ap-vip-backstage .pcf-chip{ background:#e8c877 !important; color:#14171f !important; }
.pct-ap-campus{ background:#1b3a66; }
.pct-ap-campus .pcf-zone{ color:#fff; } .pct-ap-campus .pcf-chip{ background:#fff !important; color:#122c4f !important; }
.pct-ap-visitor{ background:#f4f6f9; color:#14171f; }                          /* LIGHT temp pass */
.pct-ap-visitor .pcf-logo,.pct-ap-visitor .pcf-zone,.pct-ap-visitor .pcf-role,.pct-ap-visitor .pcf-valid{ color:#14171f; }
.pct-ap-visitor .pcf-zone{ color:#b3261e; }                                   /* VISITOR red 5.9:1 + word */
.pct-ap-visitor .pcf-chip{ background:#122c4f !important; color:#fff !important; }
.pct-ap-elevator-floor{ background:#20242c; }
.pct-ap-elevator-floor .pcf-zone{ font-size:44px; }                            /* big floor number */
.pct-ap-parking{ background:#1b3a66; }
.pct-ap-parking .pcf-zone{ color:#fff; font-size:40px; } .pct-ap-parking .pcf-chip{ background:#d7be80 !important; color:#14171f !important; }
.pct-ap-secure-clearance{ background:#0f1622; }
.pct-ap-secure-clearance .pcf-zone{ color:#e8c877; } .pct-ap-secure-clearance .pcf-chip{ background:#b3261e !important; color:#fff !important; }
.pct-ap-event-lanyard{ background:radial-gradient(120% 120% at 100% 0,#2a5187,#122c4f); }
.pct-ap-event-lanyard .pcf-zone{ color:#fff; } .pct-ap-event-lanyard .pcf-chip{ background:#d7be80 !important; color:#14171f !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PART F · BADGE TEMPLATES  (8)  — modifier on .pcf-badge (portrait)
   slots: .pcf-logo .pcf-org-bar .pcf-photo>img .pcf-name .pcf-role .pcf-chips .pcf-stripe
   Light printed-paper badges (conference/visitor) are MORE Ogilvy-friendly; allowed.
   ═══════════════════════════════════════════════════════════════════════════ */
.pct-bd-corporate{}                                                            /* base brushed metal */
.pct-bd-conference-attendee{ background:#fff; color:#14171f; }                 /* LIGHT printed badge */
.pct-bd-conference-attendee .pcf-name,.pct-bd-conference-attendee .pcf-role{ color:#14171f; }
.pct-bd-conference-attendee::before{ background:none; }                        /* drop lanyard metal cue */
.pct-bd-conference-attendee .pcf-org-bar{ background:#122c4f; }
.pct-bd-conference-attendee .pcf-chip{ background:#eef3f9 !important; color:#122c4f !important; }
.pct-bd-staff-crew{ background:#122c4f; }
.pct-bd-staff-crew .pcf-name{ color:#fff; } .pct-bd-staff-crew .pcf-chip{ background:#d7be80 !important; color:#14171f !important; }
.pct-bd-volunteer{ background:#f3f6f2; color:#14171f; }
.pct-bd-volunteer .pcf-name,.pct-bd-volunteer .pcf-role{ color:#14171f; } .pct-bd-volunteer::before{ background:none; }
.pct-bd-volunteer .pcf-org-bar{ background:#1e7d4f; } .pct-bd-volunteer .pcf-chip{ background:#1e7d4f !important; color:#fff !important; }
.pct-bd-press-media{ background:#0d0f14; }
.pct-bd-press-media .pcf-name{ color:#e8c877; } .pct-bd-press-media .pcf-chip{ background:#e8c877 !important; color:#14171f !important; }
.pct-bd-exhibitor{ background:#1b3a66; }
.pct-bd-exhibitor .pcf-name{ color:#fff; } .pct-bd-exhibitor .pcf-chip{ background:#fff !important; color:#122c4f !important; }
.pct-bd-contractor{ background:#f4f6f9; color:#14171f; }
.pct-bd-contractor .pcf-name,.pct-bd-contractor .pcf-role{ color:#14171f; } .pct-bd-contractor::before{ background:none; }
.pct-bd-contractor .pcf-org-bar{ background:#a8862f; } .pct-bd-contractor .pcf-chip{ background:#a8862f !important; color:#fff !important; }
.pct-bd-visitor-photo{ background:#fff; color:#14171f; }
.pct-bd-visitor-photo .pcf-name,.pct-bd-visitor-photo .pcf-role{ color:#14171f; } .pct-bd-visitor-photo::before{ background:none; }
.pct-bd-visitor-photo .pcf-org-bar{ background:#b3261e; } .pct-bd-visitor-photo .pcf-chip{ background:#b3261e !important; color:#fff !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PART G · ATTENDANCE TEMPLATES  (6)  — modifier on .pcf-attendance
   slots: .pcf-logo .pcf-event .pcf-role(member@circle) .pcf-status(shape+word+colour) .pcf-stamp .pcf-stripe
   Status token ALWAYS keeps check-glyph + WORD + colour — never colour alone.
   ═══════════════════════════════════════════════════════════════════════════ */
.pct-at-checkin-receipt{}                                                      /* base neutral */
.pct-at-class-roster{ background:#f3f6f2; font-family:Inter,system-ui,sans-serif; }
.pct-at-class-roster .pcf-event{ font-weight:800; }
.pct-at-shift-clock{ background:#eef1f5; font-family:"IBM Plex Mono",ui-monospace,monospace; }
.pct-at-shift-clock .pcf-stamp{ font-size:12px; }
.pct-at-event-scan{ background:#122c4f; color:#fff; }
.pct-at-event-scan .pcf-event{ color:#fff; } .pct-at-event-scan .pcf-role{ color:#cdd8e6 !important; } .pct-at-event-scan .pcf-stamp{ color:#b7c4d6 !important; }
.pct-at-volunteer-hours{ background:#f3f6f2; }
.pct-at-volunteer-hours .pcf-status{ background:#1e7d4f; }                     /* green PASS + check + word */
.pct-at-workshop{ background:#fbf9e4; font-family:"Source Serif 4",Georgia,serif; }

/* ═══════════════════════════════════════════════════════════════════════════
   PART H · ENGINE + PRINT/PDF
   ═══════════════════════════════════════════════════════════════════════════ */

/* keep QR pure regardless of template background (defense-in-depth over cardfaces) */
.pct .pcf-stripe{ background:#fff !important; }
/* .pcf-mono (template 8) is decorative — HTML must carry aria-hidden="true" */

/* --- TWO-SIDED ENGINE: the SAME face renders at CREATE and at RECEIVE ---
   A card renders purely from {kind, template_id, data}. The receiver's
   scan-result mini applies the identical classes:
     pcf pcf-<orient> pcf-<kind> pct pct-<template_id>
   and fills the same slots from `data`. No create-only state in any rule above.
   The receive/scan-result context just wraps the face in .pcr (read-only). */
.pcr .pcf{ margin:10px auto; }                 /* received card, centered in scan-result */
.pcr .pcc-stage,.pcr .pcc-picker-wrap{ display:none; }  /* no picker on the receive side */

/* --- PRINT / PDF: recipient exports the rendered card to a clean PDF --- */
@media print {
  /* hide all app chrome; show ONLY the card object */
  body *{ visibility:hidden !important; }
  .pcf, .pcf *{ visibility:visible !important; }
  .pcf{
    position:absolute !important; left:50%; top:24px; transform:translateX(-50%);
    box-shadow:none !important; margin:0 !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;   /* dark templates print true */
  }
  /* physical sizes: landscape kinds ~ 3.5in x 2in (standard card); portrait ~ 2.13in x 3.375in */
  .pcf.pcf-landscape{ width:3.5in !important; max-width:none !important; }
  .pcf.pcf-portrait { width:2.13in !important; max-width:none !important; }
  /* event-ticket prints larger (a real ticket): 6in wide */
  .pcf.pcf-event-ticket{ width:6in !important; }
  /* podcast share card prints portrait */
  .pcf.pcf-podcast{ width:2.5in !important; max-width:none !important; }
  /* sticker prints as a real die-cut: 2in square, cut-line inked + a bleed margin indicator */
  .pcf.pcf-square{ width:2in !important; height:2in !important; max-width:none !important;
    outline:0.5pt solid #000 !important; outline-offset:0.1in; }   /* bleed line */
  .pcf-sticker .pcf-cut{ border-color:#000 !important; }           /* cut-line prints crisp */
  /* QR stays crisp: render at device resolution, never scaled blurry */
  .pcf-stripe .gx-qr-code,.pcf-stripe canvas,.pcf-stripe img{ image-rendering:pixelated; }
  .pcc, .pcc-stage, .pcc-picker-wrap, .pcc-form, .pcc-kinds{ display:none !important; }
  @page{ margin:12mm; }
}

/* tablet uplift inherits cardfaces .pcf max-width bump (700px). Nothing to add. */

/* ═══════════════════════════════════════════════════════════════════════════
   PART I · FLAGSHIP POLISH  (operator: "one of our MOST BEAUTIFUL apps")
   Showcase-grade refinement over Parts A–H. All still LIGHT chrome (Ogilvy),
   AA-safe (adds no text-on-low-contrast), license-clean, print-safe (all
   decorative-only; @media print already strips it). Motion is tasteful and
   fully disabled under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- the STAGE becomes a premium "presentation desk": soft depth, warm light --- */
.pcc-stage{
  background:
    radial-gradient(120% 80% at 50% 0%, #f7f4e6 0%, #f0edd7 60%, #ebe7cf 100%);
  border-color:#e6e1c6;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 10px 30px -18px rgba(20,23,31,.35);
}
.pcc-stage-label{ display:flex; align-items:center; gap:6px; }
.pcc-stage-label::before{                          /* tiny live dot — decorative, aria-hidden in HTML */
  content:""; width:6px; height:6px; border-radius:50%; background:#1e7d4f;
  box-shadow:0 0 0 3px rgba(30,125,79,.16);
}

/* the live card gets a refined lift + a soft cast shadow on the desk */
.pcc-live .pcf{
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 2px 6px rgba(20,23,31,.14),
    0 18px 34px -20px rgba(20,23,31,.55);
}

/* --- tasteful REBUILD motion: a whisper of lift when a field updates the face --- */
@keyframes pcc-rebuild{ from{ opacity:.55; transform:translateY(3px) scale(.994);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: no-preference){
  .pcc-live.is-rebuilding .pcf{ animation:pcc-rebuild .22s cubic-bezier(.2,.7,.2,1); }
  .pcc-thumb{ transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
  .pcc-thumb:active{ transform:scale(.97); }
  .pcc-kind{ transition:background .15s ease, border-color .15s ease; }
}

/* --- refined TEMPLATE PICKER: elegant framing, tactile selection --- */
.pcc-picker{ scroll-padding-left:2px; }
.pcc-thumb{
  background:linear-gradient(180deg,#ffffff,#f7f5ee);
  box-shadow:0 1px 2px rgba(20,23,31,.10);
}
.pcc-thumb:hover{ border-color:#c3cedd; }
.pcc-thumb:focus-visible{ outline:none; border-color:var(--pcc-ring); box-shadow:0 0 0 3px rgba(91,136,178,.4); }
.pcc-thumb.is-selected{ box-shadow:0 0 0 2px var(--pcc-ring), 0 4px 12px -4px rgba(18,44,79,.4); }

/* --- premium EMPTY state: an inviting prompt, not a dead label --- */
.pcc-empty{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:#5a6472; font-size:13px;
}
.pcc-empty strong{ color:#14171f; font-family:"Source Serif 4",Georgia,serif; font-size:16px; font-weight:700; }

/* --- typographic finesse for real-object fidelity across faces --- */
.pcf .pcf-name{ text-wrap:balance; }
.pcf-business-card .pcf-contact,
.pct-et-boarding .pcf-seat{ font-variant-numeric:tabular-nums; }
.pcf .pcf-logo{ text-transform:none; }
/* hairline top highlight on dark templates = the sheen of a real laminated card */
.pct-deep-panel::after,.pct-navy-gold-exec::after,.pct-et-luxe-gold::before,
.pct-mb-gold-tier::after,.pct-et-vip::before{ pointer-events:none; }
.pct-deep-panel, .pct-navy-gold-exec, .pct-mb-gold-tier, .pct-mb-museum,
.pct-et-concert, .pct-et-cinema{
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 6px 22px rgba(20,23,31,.28);
}

/* --- the "Make the QR" primary action, elevated to match flagship bar --- */
.pcc-form .gx-btn-primary{
  background:linear-gradient(180deg,#1b3a66,#122c4f);
  border:0; color:#fff; font-weight:700; letter-spacing:.01em;
  box-shadow:0 6px 16px -8px rgba(18,44,79,.8);
}
@media (prefers-reduced-motion: no-preference){
  .pcc-form .gx-btn-primary{ transition:transform .12s ease, box-shadow .12s ease; }
  .pcc-form .gx-btn-primary:active{ transform:translateY(1px); box-shadow:0 3px 10px -8px rgba(18,44,79,.8); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART J · PARAMETRIC ENGINE  (operator: 50-100 templates PER KIND -> ~600-900)
   ---------------------------------------------------------------------------
   We do NOT hand-write 900 rules. A template = a COMPOSITION of three data
   dimensions, each a CLASS, so the render is deterministic + tiny + identical
   on create/receive/print:
       template_id  =  <kind>-<layout>-<palette>-<bg>[-<imgN>]
       class string =  pcf pcf-<orient> pcf-<kind> pct
                        pcl-<layout>  pal-<palette>  bg-<treatment>
       image bg     =  add style="--t-bg-img:url('img/bg/<file>')"  (bundled-local, SOV)
   The named signature templates in Parts B–G stay as CURATED presets (they map
   1:1 onto a {layout,palette,bg} triple in the manifest). The generator emits
   the rest as manifest rows — NO new CSS per template.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- the parametric face reads tokens the palette/bg classes set ---- */
.pct{
  --t-bg:      #ffffff;      /* base surface (solid) */
  --t-bg2:     #f3f0dd;      /* gradient 2nd stop */
  --t-ink:     #14171f;      /* primary text — MUST be AA on --t-bg (or on scrim for image) */
  --t-muted:   #5a6472;      /* secondary text (>=4.5:1 regular) */
  --t-accent:  #122c4f;      /* rule / edge / band */
  --t-chip-bg: #122c4f;      /* chip fill */
  --t-chip-ink:#ffffff;      /* chip text (AA on chip-bg) */
  --t-font:    "Source Serif 4", Georgia, serif;
}
/* apply the tokens (guarded: only when a pal-* class is present) */
.pct[class*="pal-"]{ background: var(--t-bg); color: var(--t-ink); font-family: var(--t-font); }
.pct[class*="pal-"] .pcf-name{ color: var(--t-ink); }
.pct[class*="pal-"] .pcf-role,
.pct[class*="pal-"] .pcf-date,
.pct[class*="pal-"] .pcf-since,
.pct[class*="pal-"] .pcf-contact{ color: var(--t-muted); }
.pct[class*="pal-"] .pcf-logo{ color: var(--t-accent); }
.pct[class*="pal-"] .pcf-rule{ background: var(--t-accent); }
.pct[class*="pal-"] .pcf-chip,
.pct[class*="pal-"] .pcf-level{ background: var(--t-chip-bg) !important; color: var(--t-chip-ink) !important; }

/* ---- BACKGROUND TREATMENTS ---- */
.bg-solid{ background: var(--t-bg) !important; }
.bg-gradient{ background: linear-gradient(135deg, var(--t-bg), var(--t-bg2)) !important; }
/* IMAGE bg: bundled-local Pixabay-licensed raster + a SCRIM so text/QR stay AA */
.bg-image{
  background:
    linear-gradient(180deg, var(--t-scrim, rgba(10,16,28,.62)), var(--t-scrim, rgba(10,16,28,.62))),
    var(--t-bg-img) center/cover no-repeat !important;
  color: var(--t-img-ink, #ffffff) !important;
}
.bg-image .pcf-name{ color: var(--t-img-ink, #fff); }
.bg-image .pcf-role,.bg-image .pcf-date,.bg-image .pcf-since,.bg-image .pcf-contact{ color: rgba(255,255,255,.9); }
.bg-image .pcf-logo{ color: var(--t-img-accent, #e8c877); }
/* light-scrim variant for image bgs meant to read as LIGHT (ink text over a pale wash) */
.bg-image.scrim-light{ --t-scrim: rgba(251,249,228,.80); --t-img-ink:#14171f; --t-img-accent:#122c4f; }
.bg-image.scrim-light .pcf-role,.bg-image.scrim-light .pcf-date,
.bg-image.scrim-light .pcf-since,.bg-image.scrim-light .pcf-contact{ color:#3a4150; }
/* QR always sits on its own #fff plate (Part H) so it stays scannable over any bg */

/* ═══ PALETTE LIBRARY (14) — each sets the --t-* tokens. AA noted inline. ═══ */
/* LIGHT palettes (ink on light — Ogilvy-preferred, chrome-safe) */
.pal-pearl      { --t-bg:#fbf9e4; --t-bg2:#f0edd7; --t-ink:#14171f; --t-accent:#122c4f; --t-chip-bg:#122c4f; --t-chip-ink:#fff; } /* 16:1 */
.pal-linen      { --t-bg:#ffffff; --t-bg2:#f4f2ea; --t-ink:#14171f; --t-accent:#122c4f; --t-chip-bg:#eef3f9; --t-chip-ink:#122c4f; }
.pal-mist       { --t-bg:#f4f6f9; --t-bg2:#e8edf3; --t-ink:#14171f; --t-accent:#1b3a66; --t-chip-bg:#1b3a66; --t-chip-ink:#fff; }
.pal-sage       { --t-bg:#f3f6f2; --t-bg2:#e7efe8; --t-ink:#14171f; --t-accent:#1e7d4f; --t-chip-bg:#1e7d4f; --t-chip-ink:#fff; } /* green 4.8:1 */
.pal-cream-gold { --t-bg:#fbf6ea; --t-bg2:#f3ead2; --t-ink:#14171f; --t-accent:#a8862f; --t-chip-bg:#a8862f; --t-chip-ink:#fff; } /* gold/white 4.6 */
.pal-slate      { --t-bg:#fafafa; --t-bg2:#eef0f2; --t-ink:#14171f; --t-muted:#5a6472; --t-accent:#14171f; --t-chip-bg:transparent; --t-chip-ink:#122c4f; }
.pal-blush-warm { --t-bg:#fbf3ec; --t-bg2:#f3e4d7; --t-ink:#2a1f18; --t-accent:#8a5a2b; --t-chip-bg:#8a5a2b; --t-chip-ink:#fff; } /* warm brown 5.3:1 */
/* DARK / real-object palettes (white/gold on deep — ALLOWED inside card bounds only) */
.pal-navy       { --t-bg:#122c4f; --t-bg2:#1b3a66; --t-ink:#ffffff; --t-muted:#cdd8e6; --t-accent:#d7be80; --t-chip-bg:#d7be80; --t-chip-ink:#14171f; } /* 12.6:1 */
.pal-navy-gold  { --t-bg:#0f2647; --t-bg2:#163257; --t-ink:#ffffff; --t-muted:#d7be80; --t-accent:#d7be80; --t-chip-bg:#d7be80; --t-chip-ink:#14171f; }
.pal-charcoal   { --t-bg:#1a1d24; --t-bg2:#22262f; --t-ink:#eef1f5; --t-muted:#c7cdd6; --t-accent:#d7be80; --t-chip-bg:#d7be80; --t-chip-ink:#14171f; }
.pal-onyx-gold  { --t-bg:#0d0f14; --t-bg2:#15181f; --t-ink:#f4ead0; --t-muted:#d8dce3; --t-accent:#e8c877; --t-chip-bg:#e8c877; --t-chip-ink:#14171f; }
.pal-midnight   { --t-bg:#0f1622; --t-bg2:#152033; --t-ink:#eaf0f7; --t-muted:#c3ccd8; --t-accent:#5b88b2; --t-chip-bg:#5b88b2; --t-chip-ink:#0f1622; }
.pal-deep-teal  { --t-bg:#0e2f33; --t-bg2:#144046; --t-ink:#eafbfa; --t-muted:#bfe0dd; --t-accent:#e8c877; --t-chip-bg:#e8c877; --t-chip-ink:#14171f; }
.pal-wine       { --t-bg:#3a1220; --t-bg2:#4d1a2c; --t-ink:#fbeef2; --t-muted:#e6c9d2; --t-accent:#d7be80; --t-chip-bg:#d7be80; --t-chip-ink:#2a0d16; } /* deep wine, cream text 12:1 */

/* ═══ LAYOUT FAMILIES (.pcl-*) — structural arrangement of the SAME slots ═══
   These are kind-agnostic arrangement modifiers; the generator pairs a layout
   with a kind whose slots support it (manifest declares compatibility). The
   named signature templates (Parts B–G) already embody these; the .pcl-* below
   are the reusable generalizations for the parametric rows.               */
.pcl-flow        { }                                                     /* base: face's own layout */
.pcl-centered    { text-align:center; align-items:center; }
.pcl-centered .pcf-logo{ position:static; margin:0 auto 6px; justify-content:center; }
.pcl-left-rule   { padding-left:26px; }
.pcl-left-rule::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:8px; background:var(--t-accent); }
.pcl-top-band    { padding-top:44px; }
.pcl-top-band::before{ content:""; position:absolute; top:0; left:0; right:0; height:32px; background:var(--t-accent); }
.pcl-corner      { }
.pcl-corner::after{ content:""; position:absolute; top:0; right:0; border-width:0 32px 32px 0; border-style:solid; border-color:transparent var(--t-accent) transparent transparent; }
.pcl-frame       { }
.pcl-frame::before{ content:""; position:absolute; inset:8px; border:1px solid var(--t-accent); pointer-events:none; border-radius:6px; }
.pcl-uppercase .pcf-name{ text-transform:uppercase; letter-spacing:.06em; }
.pcl-mono        { font-family:"IBM Plex Mono", ui-monospace, monospace !important; }
.pcl-oversize .pcf-name{ font-size:24px; font-weight:800; letter-spacing:-.01em; }

/* keep QR pure over ALL parametric combinations (defense-in-depth) */
.pct[class*="pal-"] .pcf-stripe,
.bg-image .pcf-stripe{ background:#fff !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PART K · CROSS-APP KINDS + ON/OFF STATE  (engine is app-neutral; kinds OPEN)
   These render classes are OWNED BY THE STANDALONE ENGINE (stencil_api), NOT by
   Passcard. Passcard is consumer #1; GMXPlay (podcast) + the attestation/badge
   system are consumers #2/#3. Any app adds a kind the same way.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── KIND · PODCAST (portrait · GMXPlay) — cover-art hero + show/episode + QR-to-feed footer ──
   Honours the podcast-COVER rule (memory podcast_covers): TEXT TOP, ART BELOW, no multi-face.
   LIGHT Navy-Luxe (podcast card = content, not dark chrome): ink #14171f on pearl = 16:1 (AA).
   Slots: .pcf-podhead{.pcf-name(show) .pcf-role(episode)} · .pcf-cover>img · .pcf-stripe(QR-to-feed). */
.pcf-podcast{
  background: var(--pcf-pearl, #fbf9e4);
  color: var(--pcf-paper-ink, #14171f);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  font-family: Inter, "IBM Plex Sans", system-ui, sans-serif;
}
.pcf-podcast.pcf-portrait{ aspect-ratio: 5 / 7; }
.pcf-podcast .pcf-podhead{ display:flex; flex-direction:column; gap:2px; }   /* TEXT TOP */
.pcf-podcast .pcf-name{ font-size:18px; line-height:1.15; font-weight:700; color:#14171f; }  /* show title 16:1 */
.pcf-podcast .pcf-role{ font-size:13px; color:#5a6472; }                     /* episode 5.9:1 */
.pcf-podcast .pcf-cover{                        /* ART BELOW — cover art = the hero (art-over-photo raster) */
  width: 100%; flex: 1 1 auto; min-height: 0; aspect-ratio: 1 / 1;
  border-radius: 10px; overflow: hidden; background:#e7ecf3;
  box-shadow:0 2px 8px rgba(20,23,31,.18);
}
.pcf-podcast .pcf-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.pcf-podcast .pcf-stripe{                       /* QR-TO-FEED — footer stripe (in-flow, centered) */
  position:static; align-self:center; width:58px; height:58px; padding:5px; margin-top:auto;
}
/* dark parametric podcast covers use pal-* + bg-image the same as any kind */

/* --- PODCAST template presets (3) — all LIGHT, ink on light stock (Ogilvy/AA) --- */
.pct-pc-cover-hero{ background:#fbf9e4; }                                      /* base classic Apple-tile feel */
.pct-pc-episode{ background:#ffffff; }                                        /* Spotify-episode: emphasise episode */
.pct-pc-episode .pcf-role{ color:#122c4f; font-weight:700; }                  /* deep/white 12.6:1 */
.pct-pc-show-qr{ background:#fbf6ea; }                                         /* share card: bigger QR-to-feed */
.pct-pc-show-qr .pcf-stripe{ width:78px; height:78px; }
.pct-pc-show-qr .pcf-cover{ flex:0 1 auto; }

/* ── KIND · STICKER (square · printable) — QR IS THE HERO; printable die-cut + cut-line/bleed ──
   LIGHT (#fff/ink, AA); the QR-CREDENTIAL sticker (NOT the cute kitten/teddy art lane).
   Slots: .pcf-logo(tiny optional mark) · .pcf-cut(die-cut line, decorative) · .pcf-name(short label) ·
   .pcf-stripe>#gxdCode(QR hero, centered/dominant). Shape is per-template (circle/rounded/square). */
.pcf-square{ aspect-ratio: 1 / 1; }
.pcf-sticker{
  background:#ffffff; color:#14171f;
  padding:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  text-align:center; font-family: Inter, "IBM Plex Sans", system-ui, sans-serif;
}
.pcf-sticker .pcf-logo{ position:static; height:auto; font-size:11px; font-weight:700; color:#5a6472; letter-spacing:.04em; }
.pcf-sticker .pcf-name{ font-size:13px; font-weight:700; letter-spacing:.02em; color:#14171f; order:3; }  /* short label */
.pcf-sticker .pcf-stripe{                       /* QR = the hero: centered + dominant */
  position:static; width:60%; aspect-ratio:1; padding:8px; order:2;
}
/* the DIE-CUT line — a dashed ring that follows the sticker's own shape (border-radius:inherit) */
.pcf-sticker .pcf-cut{
  position:absolute; inset:7px; border:1.5px dashed rgba(20,23,31,.32);
  border-radius:inherit; pointer-events:none;
}
/* --- STICKER die-cut shape templates (5) — shape = the whole point --- */
.pct-st-circle{ border-radius:50%; }                                          /* round die-cut */
.pct-st-square-hero{ border-radius:0; }                                       /* sharp square, QR maximal */
.pct-st-square-hero .pcf-stripe{ width:66%; }
.pct-st-rounded{ border-radius:22px; }                                        /* StickerMule rounded-square */
.pct-st-minimal-label{ border-radius:16px; }                                  /* minimal: label only, calm */
.pct-st-minimal-label .pcf-logo{ display:none; }
.pct-st-badge-round{ border-radius:50%; }                                     /* badge-round: gold ring accent */
.pct-st-badge-round .pcf-cut{ border-style:solid; border-color:#a8862f; }     /* gold ring, decorative (large) */
.pct-st-badge-round .pcf-name{ color:#122c4f; }

/* --- v1.0 QR-bearing STICKER styles (§9d · MVP) — simple, QR-centric; the QR is the working core.
   Extra optional slots (only rendered when the data carries them; existing 5 shapes unaffected):
   .pcf-cta = the call-to-action line (order 1, above QR) · .pcf-meta = hours/phone/handle (order 4, bottom). */
.pcf-sticker .pcf-cta{ order:1; font-size:12px; font-weight:700; color:#122c4f; line-height:1.2; letter-spacing:.01em; }  /* #122c4f on #fff ~11:1 */
.pcf-sticker .pcf-meta{ order:4; font-size:10px; font-weight:600; color:#5a6472; line-height:1.3; }                        /* #5a6472 on #fff ~4.9:1 (AA) */
/* (a) Follow-Us social — round; "Follow us on …" over the QR, @handle below */
.pct-st-follow-social{ border-radius:50%; }
.pct-st-follow-social .pcf-stripe{ width:54%; }
/* (b) Scan-to-menu / Hours — storefront rounded panel; logo + CTA + QR + hours/phone */
.pct-st-scan-menu{ border-radius:16px; }
.pct-st-scan-menu .pcf-stripe{ width:50%; }
.pct-st-scan-menu .pcf-logo{ font-size:13px; color:#122c4f; }                 /* storefront name reads as a small heading */
/* (c) Die-cut logo/character — round die-cut with a solid inked edge; logo/character + embedded QR */
.pct-st-diecut-logo{ border-radius:50%; }
.pct-st-diecut-logo .pcf-stripe{ width:56%; }
.pct-st-diecut-logo .pcf-cut{ border-style:solid; border-color:#2f5d43; }     /* inked die-cut edge (decorative) */
.pct-st-diecut-logo .pcf-name{ color:#2f5d43; }                               /* #2f5d43 on #fff ~6.4:1 (AA) */

/* ── ON/OFF EARNED STATE (attestation/badge; mirrors GMXPlay earned toggle) ──
   Applies to ANY achievement-bearing kind. state-earned = full render.
   state-locked = the "not yet" render: desaturated + lock + WORD (never colour
   alone). The engine renders BOTH from the same {template_id, data, earned}. */
.pcf.state-locked{ filter: grayscale(.85) opacity(.92); }
.pcf.state-locked::after{                       /* lock veil + word — shape + word, not colour */
  content:"Not yet earned"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; text-align:center;
  background:rgba(20,23,31,.42); color:#fff; font-weight:700; font-size:13px;
  letter-spacing:.02em; padding:0 12px;
}
.pcf.state-locked::before{                      /* padlock glyph (Unicode, not Claude SVG) */
  content:"\1F512"; position:absolute; top:10px; right:12px; z-index:1; font-size:18px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.pcf.state-earned .pcf-earned{                  /* earned ribbon: check + WORD + gold fill-in-shape */
  position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; gap:5px;
  background:var(--pcf-honey,#D4A84B); color:#14171f; font-weight:700; font-size:11px;
  padding:4px 9px; border-radius:999px; box-shadow:0 1px 3px rgba(20,23,31,.3);
}
.pcf.state-earned .pcf-earned::before{ content:"\2713"; font-size:12px; }  /* check = shape */
.pcf .pcf-earned{ display:none; }
.pcf.state-earned .pcf-earned{ display:inline-flex; }

/* ═══════════════════════════════════════════════════════════════════════════
   PART L · BATCH-EXPANSION — 2 NEW LAYOUT FAMILIES + 4 NEW PALETTES
   passcard.cardtemplates.1.0.0.css addendum · ART/RYAN · 2026-09-20
   Additive ONLY (does NOT alter Parts A–K). Mirrors TEMPLATE_ENGINE_BATCH_PLAN
   §§8–14 + DESIGN_INVENTORY_AND_REFERENCES §3/§5 — the specs, not invention.
   Takes the parametric engine (Part J) from 9→11 layout families and 14→18
   palettes, so the curated §10 math lands the full ~700 (600–900) catalog.
   GOLD GUARD (batch-plan §9, load-bearing): gold #d7be80/#e8c877 is AA-LARGE
   ONLY (>=18.66px bold / >=24px) — used here ONLY as accent/rule/logo/chip-FILL,
   NEVER as body or microcopy text. Light Navy-Luxe default; reverse type stays
   inside card bounds (FP#1 chrome carve-out); image bg keeps the .scrim contract.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 2 NEW LAYOUT FAMILIES (.pcl-*) — kind-agnostic; generator pairs per §8 matrix ═══ */

/* perforated — ticket tear-stub STRUCTURAL (batch-plan §8/§13: event-ticket + attendance).
   A dashed vertical perforation/tear line + a faintly tinted stub zone on the right where
   the QR lives. Uses --t-accent so it recolours with the palette; decorative only (print
   already inks a real cut-line via @media print + the face's own .pcf-stub). */
.pcl-perforated{ position:relative; }
.pcl-perforated::before{                 /* the STUB ZONE tint (right ~28%) — where QR sits */
  content:""; position:absolute; top:0; bottom:0; right:0; width:28%;
  background:var(--t-accent, #122c4f); opacity:.06; pointer-events:none;
}
.pcl-perforated::after{                  /* the PERFORATION / tear line — dashed, at ~72% */
  content:""; position:absolute; top:7px; bottom:7px; right:28%;
  border-left:2px dashed var(--t-accent, #122c4f); opacity:.55; pointer-events:none;
}
/* when the face already carries a real .pcf-stub split, reinforce the tear on it */
.pcl-perforated .pcf-stub{ border-left-style:dashed !important; }

/* portrait-hero — big hero-image/photo top, text band below (batch-plan §8/§13:
   access-pass + badge + podcast, all portrait). The hero band is --t-bg-img when an
   image bg is composed, else a palette-derived gradient. Text slots flow into the band
   below and get side padding; QR/absolute logo overlay as a hero credential would. */
.pcl-portrait-hero{ display:flex !important; flex-direction:column; padding:0 !important; overflow:hidden; }
.pcl-portrait-hero::before{              /* the HERO band (order:-1 pins it to the top) */
  content:""; order:-1; width:100%; aspect-ratio:16 / 10; flex:0 0 auto; margin-bottom:10px;
  background:var(--t-bg-img, linear-gradient(135deg, var(--t-accent, #122c4f), var(--t-bg2, #1b3a66))) center/cover no-repeat;
}
.pcl-portrait-hero > *{ padding-left:14px; padding-right:14px; }   /* text band gutters (pseudo unaffected) */
.pcl-portrait-hero > :last-child{ padding-bottom:14px; }
.pcl-portrait-hero .pcf-photo{ margin:0 14px; }                    /* badge portrait sits inside the band */

/* ═══ 4 NEW PALETTES (.pal-*) — set the --t-* tokens; AA-checked hex per batch-plan §9 ═══ */
/* LIGHT (ink on light — Ogilvy-preferred) */
.pal-pastel-cream { --t-bg:#fdf6ec; --t-bg2:#f7ecd9; --t-ink:#14171f; --t-muted:#5a6472; --t-accent:#7a6a3e; --t-chip-bg:#7a6a3e; --t-chip-ink:#ffffff; } /* ink/paper 16.4:1 · muted 5.9:1 · accent #7a6a3e (rule/logo, large) · chip #fff-on-#7a6a3e ~5:1 */
.pal-kraft        { --t-bg:#cdb896; --t-bg2:#c0aa84; --t-ink:#241a0e; --t-muted:#5a3d1e; --t-accent:#5a3d1e; --t-chip-bg:#5a3d1e; --t-chip-ink:#ffffff; } /* ink/kraft 8.4:1 · muted/accent #5a3d1e ~5.3:1 · chip #fff-on-#5a3d1e ~10:1 (eco/sticker) */
/* DARK / real-object (light body on deep — ALLOWED inside card bounds only) */
.pal-mono-black   { --t-bg:#0a0a0b; --t-bg2:#161618; --t-ink:#f2f2f2; --t-muted:#bdbdbd; --t-accent:#bdbdbd; --t-chip-bg:#bdbdbd; --t-chip-ink:#14171f; } /* ink/black 17.6:1 · muted #bdbdbd ~10:1 · press/editorial (no gold) */
.pal-emerald      { --t-bg:#10362a; --t-bg2:#164436; --t-ink:#f0f7f2; --t-muted:#bfe0dd; --t-accent:#e8c877; --t-chip-bg:#e8c877; --t-chip-ink:#14171f; } /* ink/emerald 12.4:1 · muted #bfe0dd ~8.7:1 · gold accent = LOGO/RULE only (large) + chip FILL w/ dark ink (GMN nonprofit lean) */

/* --- CATALOG BROWSE (v115 feature: "Browse all N →" full-catalog panel; LIGHT surface, AA, phone-first) --- */
.pcc-browse-bar { margin: 2px 0 6px; }
.pcc-browse-all {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 40px;
  background: transparent; border: 1px solid var(--pcc-line,#c9c3ac); border-radius: 12px;
  padding: .4rem .8rem; color: var(--pc-deep,#122c4f); font-weight: 700; font-size: .9rem; cursor: pointer;
}
.pcc-browse-all:hover { background: var(--pc-surface2,#f2ead7); }
.pcc-browse-all:focus-visible { outline: 2px solid var(--pc-deep,#122c4f); outline-offset: 2px; }
.pcc-browse { margin: .4rem 0 .2rem; padding-top: .6rem; border-top: 1px solid var(--pcc-line,#c9c3ac); }
.pcc-browse-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.pcc-browse-title { font-family: "Source Serif 4",Georgia,serif; font-weight: 700; color: var(--pc-deep,#122c4f); font-size: 1rem; }
.pcc-browse-filters { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .5rem; }
.pcc-fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.pcc-flabel { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--pc-muted,#5b6473); min-width: 52px; }
.pcc-fchip { min-height: 32px; cursor: pointer; border: 1px solid var(--pc-line,#c9c3ac); text-transform: capitalize; }
.pcc-fchip.is-on { background: var(--pc-deep,#122c4f); color: #fff; font-weight: 700; }
.pcc-fchip:focus-visible { outline: 2px solid var(--pc-deep,#122c4f); outline-offset: 2px; }
.pcc-browse-count { font-size: .8rem; color: var(--pc-muted,#5b6473); margin: 0 0 .5rem; }
/* wrap + vertical scroll (NOT the featured strip's horizontal snap) — thumbs keep their native 96×60 mini size */
.pcc-browse-grid {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start;
  overflow-x: hidden; overflow-y: auto; max-height: 46vh; scroll-snap-type: none; padding: 4px 2px;
}
.pcc-browse-more { text-align: center; margin: .6rem 0 .2rem; }
/* [hidden] must win over .pc-btn{display:inline-flex} for the Load-more control */
#pccBrowseMore[hidden], #pccBrowseBar[hidden], #pccBrowse[hidden] { display: none !important; }

/* ── v1.1.5 PHONE-FIRST FIXES (VERA sweep 2026-09-22; 375×812 default) ──────────────────
   #2 Contain the featured-template scroller WITHIN the form column: harden the flex chain
   so overflow-x:auto clips inside the column instead of blowing the column out on phone. */
.pcc-formcol, .pcc-picker-wrap { min-width: 0; max-width: 100%; }
.pcc-picker { scrollbar-width: thin; overscroll-behavior-x: contain; }
/* #3 Catalog-browse tap targets → ≥44px (WCAG 2.5.5 / iOS HIG): filter chips + the Done control. */
.pcc-fchip { min-height: 44px; }
.pcc-browse-head .pc-chip { min-height: 44px; padding: .5rem .9rem; }