/* ═══════════════════════════════════════════════════════════════════════════
   GMXPasscard v1.1.0 — REAL-OBJECT CARD FACES  ·  passcard.cardfaces.1.0.0.css
   ART · 2026-09-19 · lands on gmxshell-template-1.1.0, layers over www/app.css
   ---------------------------------------------------------------------------
   Each KIND renders AS the real credential (wordless, self-evident — discovery
   §12/§12a). The face shows a DISTINGUISHING MID SUBSET only (§12a). The QR is
   the MAGNETIC STRIPE (§12a-i) — pure #000/#fff, high-contrast, always scannable.
   OGILVY RECONCILE (V1.1·8): the OBJECT layer may be true-to-real (dark metal,
   security card, ticket stock) INSIDE the card bounds only; app chrome/body/forms
   stay light Navy-Luxe. All human-readable text on a face meets WCAG AA >=4.5:1.
   Textures = self-generated procedural raster PNG (card_faces/img/) — NO Claude SVG.
   Reuses live app.css tokens: --ink --pearl --navy --card --cloud --line --muted.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- face object tokens (object layer only — NOT applied to chrome) ---- */
.pcf {
  --pcf-metal:      #2b2f38;   /* badge brushed charcoal */
  --pcf-metal-ink:  #f5f7fa;   /* on metal: 13.6:1 */
  --pcf-sec:        #20242c;   /* access-pass security base */
  --pcf-sec-ink:    #f2f5f9;   /* on security: 15.9:1 */
  --pcf-org:        #122c4f;   /* org/deep accent bar (matches Navy Luxe --deep) */
  --pcf-org-ink:    #ffffff;   /* on org bar: 12.6:1 */
  --pcf-paper:      #f6eeda;   /* ticket stock */
  --pcf-linen:      #ffffff;   /* business-card stock */
  --pcf-pearl:      #fbf9e4;   /* membership stock */
  --pcf-attend:     #eef1f5;   /* attendance stock */
  --pcf-paper-ink:  #1A1A30;   /* ink on any light stock: >=14:1 */
  --pcf-honey:      #D4A84B;   /* earned/level accent — fill only, dark ink on it */
  --pcf-ok:         #1e7d4f;   /* attendance PASS state (with white + shape) */
  --pcf-radius: 16px;
  --pcf-pad: 14px;

  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 4px auto 10px;
  border-radius: var(--pcf-radius);
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(20,23,31,.22), 0 1px 0 rgba(255,255,255,.4) inset;
  font-family: Inter, "IBM Plex Sans", system-ui, sans-serif;
  color: var(--pcf-paper-ink);
  -webkit-font-smoothing: antialiased;
}
.pcf * { box-sizing: border-box; }
.pcf-portrait  { aspect-ratio: 5 / 7; }    /* badge, access-pass */
.pcf-landscape { aspect-ratio: 8 / 5; }    /* ticket, biz-card, membership, attendance */

/* generic slots (fixed-slot anatomy) */
.pcf-logo   { position: absolute; top: var(--pcf-pad); left: var(--pcf-pad); height: 22px; display: flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: .02em; font-size: 13px; }
.pcf-logo img { height: 22px; width: auto; display: block; }
.pcf-name   { font-weight: 700; line-height: 1.12; }
.pcf-role   { font-weight: 500; opacity: .92; }
.pcf-chips  { display: flex; gap: 6px; flex-wrap: wrap; }
.pcf-chip   { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }

/* QR = the magnetic stripe. Always a white plate, pure #000/#fff QR inside. */
.pcf-stripe { background: #fff; border-radius: 8px; padding: 6px; display: flex; align-items: center; justify-content: center; }
.pcf-stripe .gx-qr-code,
.pcf-stripe canvas,
.pcf-stripe svg { width: 100%; height: auto; display: block; background: #fff; }
.pcf-stripe .gx-qr-code { border: 0; padding: 0; }

/* focus + reduced motion inherit from shell; faces add nothing that animates */

/* ═══ 1 · BADGE — office/facility access badge, portrait, lanyard cue ═══════ */
.pcf-badge {
  background: var(--pcf-metal) url("img/badge/brushed-metal-charcoal.png") center/cover;
  color: var(--pcf-metal-ink);
  padding: 34px var(--pcf-pad) var(--pcf-pad);
}
/* lanyard clip notch — the single biggest real-object move for badge */
.pcf-badge::before {                       /* woven lanyard strip descending into the clip */
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 46px; height: 20px;
  background: url("img/badge/lanyard-navy.png") center/cover;
  border-radius: 0 0 4px 4px;
}
.pcf-badge::after {                        /* slot cut-out under the clip */
  content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 6px; border-radius: 6px;
  background: #14171f; box-shadow: 0 1px 0 rgba(255,255,255,.14);
}
.pcf-badge .pcf-org-bar { position: absolute; left: 0; right: 0; bottom: 88px; height: 4px; background: var(--pcf-org); }
.pcf-badge .pcf-photo { width: 88px; height: 88px; border-radius: 10px; overflow: hidden; margin: 6px auto 10px; background: #e7ecf3; border: 2px solid rgba(255,255,255,.18); }
.pcf-badge .pcf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcf-badge .pcf-name { font-size: 19px; text-align: center; }
.pcf-badge .pcf-role { font-size: 13px; text-align: center; margin-top: 2px; }
.pcf-badge .pcf-chips { justify-content: center; margin-top: 8px; }
.pcf-badge .pcf-chip  { background: rgba(255,255,255,.14); color: var(--pcf-metal-ink); }
.pcf-badge .pcf-stripe { position: absolute; left: var(--pcf-pad); bottom: var(--pcf-pad); width: 70px; height: 70px; padding: 5px; }

/* ═══ 2 · ACCESS-PASS — keycard / elevator pass, portrait, QR dominant ═════ */
.pcf-access-pass {
  background: var(--pcf-sec) url("img/access-pass/guilloche-security.png") center/cover;
  color: var(--pcf-sec-ink);
  padding: var(--pcf-pad);
  display: flex; flex-direction: column;
}
.pcf-access-pass .pcf-logo { color: var(--pcf-sec-ink); }
.pcf-access-pass .pcf-zone { margin-top: 30px; font-size: 30px; font-weight: 700; line-height: 1; }
.pcf-access-pass .pcf-role { font-size: 13px; margin-top: 4px; }
.pcf-access-pass .pcf-chips { margin-top: 8px; }
.pcf-access-pass .pcf-chip  { background: rgba(255,255,255,.12); color: var(--pcf-sec-ink); }
/* the pass IS the code carrier — QR is the dominant element, centered low */
.pcf-access-pass .pcf-stripe { margin: auto auto 4px; width: 58%; aspect-ratio: 1; }
.pcf-access-pass .pcf-valid { text-align: center; font-size: 11px; opacity: .85; margin-bottom: 2px; }

/* ═══ 3 · EVENT-TICKET — torn-stub ticket, landscape, perforation ══════════ */
.pcf-event-ticket {
  background: var(--pcf-paper) url("img/event-ticket/ticket-stock.png") center/cover;
  color: var(--pcf-paper-ink);
  display: grid; grid-template-columns: 1fr 96px; align-items: stretch;
}
.pcf-event-ticket .pcf-body { padding: var(--pcf-pad); display: flex; flex-direction: column; }
.pcf-event-ticket .pcf-event { font-size: 20px; font-weight: 700; line-height: 1.1; margin-top: 26px; }
.pcf-event-ticket .pcf-date  { font-size: 13px; color: var(--muted); margin-top: 4px; }
.pcf-event-ticket .pcf-chips { margin-top: auto; }
.pcf-event-ticket .pcf-chip  { background: var(--pcf-org); color: var(--pcf-org-ink); }
/* the stub — the single biggest real-object move: a perforation tear line */
.pcf-event-ticket .pcf-stub {
  position: relative; padding: var(--pcf-pad) 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  border-left: 2px dashed rgba(20,26,48,.45);
}
.pcf-event-ticket .pcf-stub::before,          /* punched perforation holes on the tear */
.pcf-event-ticket .pcf-stub::after {
  content: ""; position: absolute; left: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--pearl);
}
.pcf-event-ticket .pcf-stub::before { top: -7px; }
.pcf-event-ticket .pcf-stub::after  { bottom: -7px; }
.pcf-event-ticket .pcf-stripe { width: 76px; height: 76px; padding: 5px; }
.pcf-event-ticket .pcf-seat { font-size: 11px; font-weight: 700; text-align: center; }

/* ═══ 4 · BUSINESS-CARD — real business card, landscape, print margins ═════ */
.pcf-business-card {
  background: var(--pcf-linen) url("img/business-card/linen-stock.png") center/cover;
  color: var(--pcf-paper-ink);
  padding: 18px;
  display: flex; flex-direction: column; justify-content: center;
}
.pcf-business-card .pcf-name { font-size: 20px; }
.pcf-business-card .pcf-role { font-size: 13px; color: var(--muted); margin-top: 2px; }
.pcf-business-card .pcf-rule { height: 3px; width: 44px; background: var(--pcf-org); margin: 10px 0; }  /* the one accent rule */
.pcf-business-card .pcf-contact { font-size: 12px; color: var(--pcf-paper-ink); }
.pcf-business-card .pcf-stripe { position: absolute; right: 14px; bottom: 14px; width: 62px; height: 62px; padding: 4px; }
.pcf-business-card .pcf-logo { color: var(--pcf-org); }

/* ═══ 5 · MEMBERSHIP — club/library membership card, landscape ═════════════ */
.pcf-membership {
  background: var(--pcf-pearl) url("img/membership/pearl-stock.png") center/cover;
  color: var(--pcf-paper-ink);
  padding: 16px;
  display: flex; flex-direction: column;
}
.pcf-membership .pcf-name { font-size: 19px; margin-top: 26px; }
.pcf-membership .pcf-role { font-size: 13px; color: var(--muted); margin-top: 2px; }  /* circle */
.pcf-membership .pcf-since { margin-top: auto; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* member LEVEL band — the biggest real-object move (honey earned-cue, ink on it) */
.pcf-membership .pcf-level { position: absolute; top: 14px; right: 14px; background: var(--pcf-honey); color: #14171f; font-weight: 700; font-size: 11px; padding: 4px 10px; border-radius: 999px; }
.pcf-membership .pcf-stripe { position: absolute; right: 14px; bottom: 14px; width: 60px; height: 60px; padding: 4px; }

/* ═══ 6 · ATTENDANCE — check-in / timeclock card, landscape ════════════════ */
.pcf-attendance {
  background: var(--pcf-attend) url("img/attendance/timeclock-stock.png") center/cover;
  color: var(--pcf-paper-ink);
  padding: 16px;
  display: flex; flex-direction: column;
}
.pcf-attendance .pcf-event { font-size: 17px; font-weight: 700; margin-top: 26px; line-height: 1.1; }
.pcf-attendance .pcf-role  { font-size: 13px; color: var(--muted); margin-top: 2px; }  /* member@circle */
/* check-in status token: shape (check glyph) + WORD + colour — never colour alone */
.pcf-attendance .pcf-status { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  background: var(--pcf-ok); color: #fff; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 8px; }
.pcf-attendance .pcf-status::before { content: "\2713"; font-size: 13px; }   /* check mark = shape */
.pcf-attendance .pcf-stamp { margin-top: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pcf-attendance .pcf-stripe { position: absolute; right: 14px; bottom: 14px; width: 60px; height: 60px; padding: 4px; }

/* ═══ tablet / native uplift — larger, same tokens (phone-first verified) ══ */
@media (min-width: 700px) {
  .pcf { max-width: 460px; }
}