/* passcard.styles 1.0.0 — GMXPasscard v1.0.1 surface styles (ART spec, Navy Luxe / Midnight Pearl).
   Light-surface floor (FOUNDATIONAL #1): ink #14171f on pearl #fbf9e4; NO reverse type on body.
   Deep navy is chrome/CTA-fill only. Every pair below was AA-checked at design time (see V101_ART_DESIGN).
   NO Claude-drawn SVG content art — sticker imagery is a flagged unicode/emoji PLACEHOLDER for ART. */
:root{
  --pc-page:#fbf9e4; --pc-card:#ffffff; --pc-ink:#14171f; --pc-muted:#5b6473;
  --pc-deep:#122c4f; --pc-deep2:#1b3a66; --pc-mid:#5b88b2; --pc-line:#c9c3ac;
  --pc-gold:#d7be80; --pc-ok:#1e7d4f; --pc-surface2:#f2ead7;
}
body{ background:var(--pc-page); color:var(--pc-ink); }
#gmxshell-content{ background:var(--pc-page); color:var(--pc-ink); }
.pc-wrap{ max-width:680px; margin:0 auto; padding:0 16px 96px; } /* 16px side gutter (mobile) */
.pc-h1{ font-family:"Source Serif 4",Georgia,serif; font-weight:700; font-size:1.35rem; color:var(--pc-deep); margin:.6rem 0 .2rem; }
.pc-sub{ color:var(--pc-muted); font-size:.9rem; margin:0 0 1rem; }
.pc-hint{ color:var(--pc-muted); font-size:.85rem; }
.pc-i{ font-style:normal; line-height:1; } /* phosphor <i> reset */

/* ── top ICON RAIL (kills the bottom text rail). icon + rounded square + label + title tooltip. ── */
.pc-rail{ position:sticky; top:0; z-index:20; display:flex; gap:8px; justify-content:center;
  padding:8px 12px; background:var(--pc-page); border-bottom:1px solid var(--pc-line); }
.pc-rail button{ display:flex; flex-direction:column; align-items:center; gap:3px; width:52px;
  padding:6px 2px; border:0; background:transparent; color:var(--pc-ink); cursor:pointer; border-radius:12px;
  min-height:48px; }
.pc-rail button .pc-sq{ display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:12px; background:var(--pc-surface2); font-size:1.35rem; color:var(--pc-ink); }
.pc-rail button .pc-lbl{ font-size:.66rem; color:var(--pc-muted); }
.pc-rail button[aria-current="page"] .pc-sq{ background:var(--pc-deep); color:#fff; } /* fill+glyph, not color-alone */
.pc-rail button[aria-current="page"] .pc-lbl{ color:var(--pc-ink); font-weight:700; }
.pc-rail button:focus-visible{ outline:2px solid var(--pc-deep); outline-offset:2px; }

/* ── buttons / chips ── */
.pc-btn{ display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:.55rem 1rem;
  border:0; border-radius:12px; background:var(--pc-deep); color:#fff; font-weight:600; font-size:.95rem; cursor:pointer; }
.pc-btn:focus-visible{ outline:2px solid var(--pc-deep2); outline-offset:2px; }
.pc-btn--ghost{ background:transparent; color:var(--pc-deep); border:1px solid var(--pc-line); }
/* ANON-GUEST DEMO disabled affordance (ANON_GUEST_DEMO_EPHEMERAL_2026-09-22): Save/Share are OFF for a
   guest/bot. NOT an illegible ghost — a clearly-DIMMED but WCAG-AA-READABLE state: muted ink #5b6473 on
   pale surface #f2ead7 = 4.99:1 (AA small-text ≥4.5:1). Dashed border + not-allowed cursor signal "off".
   Overrides both the filled pc-btn (navy/#fff) and the ghost variant so either reads as disabled. */
.pc-demo-disabled,
.pc-btn.pc-demo-disabled,
.pc-btn--ghost.pc-demo-disabled{
  background:var(--pc-surface2)!important; color:var(--pc-muted)!important;
  border:1px dashed var(--pc-line)!important; box-shadow:none!important;
  cursor:not-allowed!important; opacity:1!important;   /* opacity:1 — we dim via color tokens, NOT alpha, to preserve the contrast ratio */
}
.pc-demo-disabled i.pc-i{ color:var(--pc-muted)!important; }   /* the glyph shares the readable muted ink */
/* the env pill's anon-locked state: keeps the high-contrast is-sandbox gold face (dark ink on gold), only
   swaps the cursor to signal it cannot be toggled (there is no live for a guest). */
.gmxshell-env.pc-demo-locked{ cursor:not-allowed; }
.pc-chip{ display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:999px;
  background:var(--pc-surface2); color:var(--pc-ink); font-size:.8rem; }
.pc-chip--ok{ background:var(--pc-ok); color:#fff; }

/* ── SCANNER / courier ── */
.pc-modeseg{ display:inline-flex; border:1px solid var(--pc-line); border-radius:12px; overflow:hidden; margin:.4rem 0; }
.pc-modeseg button{ min-height:44px; padding:.4rem 1rem; border:0; background:var(--pc-card); color:var(--pc-ink); cursor:pointer; font-size:.9rem; }
.pc-modeseg button[aria-pressed="true"]{ background:var(--pc-deep); color:#fff; font-weight:700; }
.pc-viewfinder{ position:relative; background:var(--pc-card); border:1px solid var(--pc-line); border-radius:16px;
  overflow:hidden; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.pc-viewfinder video{ width:100%; height:100%; object-fit:cover; }
.pc-vf-brackets{ position:absolute; inset:14%; border:0; pointer-events:none; }
.pc-vf-brackets::before,.pc-vf-brackets::after{ content:""; position:absolute; width:34px; height:34px; }
.pc-vf-brackets::before{ top:0; left:0; border-top:3px solid #fff; border-left:3px solid #fff; }
.pc-vf-brackets::after{ bottom:0; right:0; border-bottom:3px solid #fff; border-right:3px solid #fff; }
.pc-vf-scrim{ position:absolute; left:0; right:0; bottom:0; padding:.4rem .6rem; background:rgba(18,44,79,.82); color:#fff; font-size:.8rem; text-align:center; }
.pc-vf-line{ position:absolute; left:14%; right:14%; height:2px; background:var(--pc-mid); top:14%; animation:pc-scan 2.4s ease-in-out infinite; }
@keyframes pc-scan{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(220px); } }
.pc-ribbon{ display:flex; gap:.5rem; align-items:center; margin:.8rem 0; }
.pc-step{ display:flex; align-items:center; gap:.35rem; font-size:.85rem; color:var(--pc-muted); }
.pc-step .dot{ width:14px; height:14px; border-radius:50%; border:2px solid var(--pc-deep); display:inline-block; }
.pc-step.is-done .dot{ background:var(--pc-deep); } /* filled vs hollow = shape, not color-alone */
.pc-step.is-active{ color:var(--pc-ink); font-weight:700; }
.pc-roster{ display:flex; align-items:center; gap:.6rem; background:var(--pc-surface2); border-radius:14px; padding:.7rem 1rem; margin:.8rem 0; }
.pc-roster .num{ font-family:"Source Serif 4",Georgia,serif; font-weight:700; font-size:2rem; color:var(--pc-deep); }

/* ── STICKER gallery ── */
.pc-packhead{ font-family:"Source Serif 4",Georgia,serif; font-weight:600; color:var(--pc-ink); margin:1rem 0 .4rem; font-size:1rem; }
/* v1.1.5 §A-a: fluid auto-fill grid (no 2/3-col media-query cliff) — 2-up phone, 3-up ~500px, 4-up tablet. */
.pc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.pc-sticker{ position:relative; background:var(--pc-card); border-radius:18px; padding:12px; text-align:center;
  box-shadow:0 2px 6px rgba(20,23,31,.12); border:1px solid var(--pc-line); }
.pc-sticker:nth-child(even){ transform:rotate(-1.5deg); }
.pc-sticker:nth-child(3n){ transform:rotate(1.5deg); }
.pc-sticker .art{ font-size:3rem; line-height:1; display:block; margin:.3rem 0; } /* PLACEHOLDER emoji — ART swaps for raster */
.pc-sticker .cap{ font-size:.8rem; color:var(--pc-ink); }
.pc-sticker .earned{ position:absolute; top:-6px; right:-6px; background:var(--pc-gold); color:#14171f;
  font-size:.62rem; font-weight:700; padding:2px 7px; border-radius:999px; } /* gold + word "Earned" + check = never color-alone */
.pc-make{ display:flex; align-items:center; gap:.7rem; width:100%; background:var(--pc-surface2); border:1px dashed var(--pc-line);
  border-radius:16px; padding:1rem; margin:1rem 0; color:var(--pc-ink); cursor:pointer; min-height:56px; text-align:left; }
.pc-make .art{ font-size:1.8rem; }

/* ── CARD / QR show (fixed-slot; face + flip to back) ── */
.pc-cardwrap{ perspective:1200px; max-width:340px; margin:1rem auto; }
.pc-card3d{ position:relative; transition:transform .5s; transform-style:preserve-3d; }
.pc-cardwrap.flip .pc-card3d{ transform:rotateY(180deg); }
.pc-face,.pc-back{ display:flex; align-items:center; gap:.6rem; padding:10px 12px; border-bottom:1px solid var(--pc-line); background:var(--pc-page); position:relative; z-index:1; }
.pc-back{ position:absolute; inset:0; transform:rotateY(180deg); overflow:auto; }
.pc-card-top{ display:flex; align-items:center; justify-content:space-between; }
.pc-card-logo{ font-weight:700; color:var(--pc-deep); }
.pc-strip{ height:100px; border-radius:12px; background:linear-gradient(135deg,var(--pc-deep),var(--pc-deep2)); margin:.6rem 0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:2.2rem; } /* PLACEHOLDER strip — ART raster */
.pc-hero{ font-family:"Source Serif 4",Georgia,serif; font-weight:700; font-size:1.5rem; color:var(--pc-ink); text-align:center; }
.pc-qrbox{ background:#fff; padding:10px; border-radius:12px; width:180px; margin:.6rem auto 0; }
.pc-qrbox svg{ width:100%; height:auto; display:block; }
.pc-kindrow{ display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; margin:.6rem 0; }

/* ── Doorman-lite pad ── */
.pc-pad{ background:var(--pc-card); border:1px solid var(--pc-line); border-radius:16px; padding:14px; margin:1rem 0; }
.pc-pad canvas{ width:100%; height:200px; touch-action:none; background:var(--pc-surface2); border-radius:12px; display:block; }
.pc-pad .lbl{ display:flex; align-items:center; gap:.4rem; font-weight:600; color:var(--pc-ink); margin-bottom:.5rem; }

@media (prefers-reduced-motion: reduce){
  .pc-vf-line{ animation:none; }
  .pc-card3d{ transition:none; }
  .pc-tapcue-hand{ animation:none; }        /* #3: static hand, no bob */
  .pc-tapcue-ripple{ display:none; }        /* #3: no ripple under reduced-motion */
}

/* ── REAL-LOOP rebuild (v1.0.1 §13 / ART V1.2 professional) ── */
.pc-in{ width:100%; min-height:44px; border:1px solid var(--pc-line); border-radius:10px; padding:.5rem .6rem;
  font-size:.95rem; color:var(--pc-ink); background:var(--pc-card); margin:.3rem 0; box-sizing:border-box; }
.pc-in:focus-visible{ outline:2px solid var(--pc-deep); outline-offset:1px; }
.pc-form{ margin:.4rem 0 .2rem; }
.pc-kindrow .pc-chip{ cursor:pointer; border:1px solid var(--pc-line); }
.pc-kindrow .pc-chip[aria-selected="true"]{ background:var(--pc-deep); color:#fff; }
.pc-card{ background:var(--pc-card); border:1px solid var(--pc-line); border-radius:16px; padding:16px; margin:.6rem 0; text-align:center; }
.pc-lane{ display:inline-flex; align-items:center; border:1px solid var(--pc-line); border-radius:999px; padding:.25rem .7rem; font-size:.72rem; font-weight:700;
  cursor:pointer; background:var(--pc-card); color:var(--pc-ink); min-height:44px; }
.pc-lane.is-live{ color:var(--pc-ok); border-color:var(--pc-ok); }
.pc-lane.is-demo{ color:var(--pc-deep); border-color:var(--pc-deep); background:var(--pc-surface2); }
.pc-lane.is-sandbox{ color:#7a5a12; border-color:#a8862f; background:var(--pc-surface2); }   /* amber/gold sandbox (#7a5a12 on surface ~AA) */
.pc-lane:focus-visible{ outline:2px solid var(--pc-deep); outline-offset:2px; }
.pc-empty{ text-align:center; padding:2rem 1rem; color:var(--pc-ink); }
.pc-empty p{ margin:.3rem 0; }
.pc-detail{ background:var(--pc-card); border:1px solid var(--pc-line); border-radius:16px; padding:16px; margin:.8rem 0; text-align:center; }
.pc-detail .pc-qrbox{ margin:.6rem auto 0; }

/* ── v1.1.0: back-to-launcher bar (launcher->page->back; NO persistent nav) ── */
.pc-back{ display:flex; align-items:center; gap:.6rem; padding:10px 12px; border-bottom:1px solid var(--pc-line); position:sticky; top:0; z-index:50; background:var(--pc-page); box-shadow:0 2px 6px rgba(20,23,31,.10); }
.pc-backbtn{ display:inline-flex; flex:0 0 auto; align-items:center; gap:.35rem; min-height:44px; padding:.35rem .8rem; border:1px solid var(--pc-line);
  border-radius:10px; background:var(--pc-card); color:var(--pc-deep); font-weight:600; cursor:pointer; }
.pc-backbtn:focus-visible{ outline:2px solid var(--pc-deep); outline-offset:2px; }
.pc-backttl{ font-weight:700; color:var(--pc-ink); }

/* ── v1.1.0: v10 tile LAUNCHER home (navy #2B2D5E / cloud #F0EEE9 / gold #9A7830) ── */
.gx-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:14px 12px; margin-top:8px; }
.gx-tile{ display:flex; flex-direction:column; align-items:center; gap:8px; border:0; background:transparent; cursor:pointer;
  padding:6px 2px; animation:gx-tile-in 240ms ease-out both; }
.gx-tile:active{ transform:scale(.96); }
.gx-tile:focus-visible{ outline:2px solid #2B2D5E; outline-offset:3px; border-radius:16px; }
.gx-tile-ico{ position:relative; width:76px; height:76px; border-radius:20px; background:#2B2D5E; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -8px rgba(43,45,94,.55); }
.gx-tile:hover .gx-tile-ico{ box-shadow:0 12px 24px -8px rgba(43,45,94,.6); }
.gx-tile-ico .gx-glyph{ font-size:40px; line-height:1; }
.gx-tile-lbl{ font-size:13px; font-weight:700; color:var(--pc-ink); }
.gx-tile-count{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:999px;
  background:#9A7830; color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
@media(min-width:768px){ .gx-tile-ico .gx-glyph{ font-size:46px; } .gx-tile-lbl{ font-size:14px; } }
@keyframes gx-tile-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .gx-tile{ animation:none; } }

/* ── v1.1.2 JNY-standard shell chrome (injected by passcard.jnychrome addon) ── */
/* These live in the NAVY top bar = chrome (icon/≤2-word labels) → white-on-navy is the allowed
   FOUNDATIONAL #1 chrome exception (never body). */
.pcx-nav{ display:inline-flex; align-items:center; gap:6px; min-width:0; flex:0 1 auto; }
.pcx-btn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 auto;
  border:0; border-radius:9px; background:rgba(255,255,255,.16); color:#fff; font-size:1.2rem; line-height:1; cursor:pointer; }
.pcx-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.pcx-btn[hidden]{ display:none; }
.pcx-title{ color:#fff; font-weight:700; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; max-width:110px; }
.pcx-title[hidden]{ display:none; }
.pcx-id{ color:#fff; opacity:.9; font-size:.72rem; white-space:nowrap; cursor:pointer; margin-left:6px; overflow:hidden; text-overflow:ellipsis; max-width:120px; }
/* greeting banner — BELOW the bar, on the LIGHT surface (FOUNDATIONAL #1: ink on light, NO reverse) */
#gmxshell-banner .pcx-greet{ display:flex; align-items:center; flex-wrap:wrap; gap:.35rem .55rem; background:var(--pc-surface2); color:var(--pc-ink); padding:.4rem 16px; border-bottom:1px solid var(--pc-line); }
.pcx-greet-hi{ display:block; font-family:"Source Serif 4",Georgia,serif; font-weight:700; font-size:1rem; color:var(--pc-ink); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* CIRCLE CHIP (V115): passed-in name@circle in the identity region. Light Navy Luxe — ink #14171f on white
   card (>=16:1 AA) with a deep-navy community glyph (#122c4f on white ~11:1). Static text (not interactive),
   so no 44px min. On narrow (375) the greeting fills row 1 and the chip wraps to its own row as a compact chip
   (flex-wrap) — both stay fully legible instead of clipping. */
.pcx-circle{ display:inline-flex; align-items:center; gap:.3rem; flex:0 1 auto; min-width:0; max-width:100%;
  padding:.2rem .55rem; background:var(--pc-card); border:1px solid var(--pc-line);
  border-radius:999px; color:var(--pc-ink); font-size:.8rem; font-weight:600; }
.pcx-circle i.pc-i{ font-size:1rem; color:var(--pc-deep); flex:0 0 auto; }
.pcx-circle-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* FOCUSED-HERO (v115): when a wallet card is opened as the hero, collapse the persistent greeting banner too
   (mini-wallet sets body.pc-card-open) so the tapped card lands at the very top — critical on short phones
   (360x640). Mirrors the wallet-head hide; restored on close. */
body.pc-card-open #gmxshell-banner{ display:none !important; }
/* #1 Daisy HUD-companion avatar (V115 game header): real botanical mark on a navy disc so the white petals
   read; ~40px image, chip padded to a >=44px tap target. Replaces the deleted "Daisy's keeping an eye" line. */
.pcx-daisy-chip{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:44px; height:44px; min-width:44px; border-radius:50%; background:#1b2a4a; }
.pcx-daisy-av{ display:block; width:40px; height:40px; border-radius:50%; object-fit:contain; }

/* ── v1.1.3: app logo in chrome bar + de-dup identity + version-off-bar ── */
.gmxshell-brand{ display:inline-flex; align-items:center; gap:6px; }
.pcx-logo{ height:26px; width:26px; border-radius:6px; object-fit:cover; display:block; flex:0 0 auto; }
/* single identity element on the bar = the JNY name·device (#pcxId). Hide the shell's own duplicates
   (name·device strip, @handle, avatar) + the on-bar version badge (moved into the account menu). */
#gmxshell-id, #gmxshell-handle, .gmxshell-tag{ display:none !important; }
/* version line inside the account menu */
.cm-version{ padding:8px 14px; font-size:12px; color:var(--pc-muted); border-top:1px solid var(--pc-line); }

/* ── v1.1.4 SCAN page: primary Start control first + compact-idle / expand-live viewfinder + camera picker ── */
.pc-scan-controls{ display:flex; align-items:flex-end; gap:.6rem; margin:.6rem 0 .5rem; flex-wrap:wrap; }
.pc-btn--big{ font-size:1.05rem; padding:.75rem 1.2rem; min-height:52px; flex:1 1 auto; justify-content:center; }
/* V115 login polish: the anon Sign-in CTA reads as the clear primary — full-width, centered, obviously tappable. */
.pc-signin{ width:100%; justify-content:center; }
.pc-camsel{ display:flex; flex-direction:column; gap:2px; flex:0 1 auto; min-width:140px; }
.pc-camsel select{ min-height:44px; border:1px solid var(--pc-line); border-radius:10px; padding:.4rem .5rem; background:var(--pc-card); color:var(--pc-ink); font-size:.9rem; }
/* COMPACT when idle (no big empty white box) */
.pc-viewfinder.is-idle{ aspect-ratio:auto; min-height:64px; }
.pc-viewfinder.is-idle video, .pc-viewfinder.is-idle .pc-vf-brackets, .pc-viewfinder.is-idle .pc-vf-line{ display:none; }
.pc-viewfinder.is-idle .pc-vf-scrim{ position:static; background:transparent; color:var(--pc-muted); padding:.7rem; }
/* EXPAND when the camera is live */
.pc-viewfinder.is-live{ aspect-ratio:1/1; }

/* ── cap-scanresult: honest gated-shell affordances (visible, clearly "not yet") ── */
.pc-gatewrap{ margin-top:.8rem; padding-top:.6rem; border-top:1px solid var(--pc-line); }
.pc-gate-head{ display:flex; align-items:center; justify-content:center; gap:.4rem; font-size:.8rem; color:var(--pc-muted); margin-bottom:.4rem; }
.pc-btn.pc-gate{ background:var(--pc-surface2); color:var(--pc-muted); border:1px dashed var(--pc-line); font-weight:600; }
.pc-chip.pc-gate{ background:var(--pc-surface2); color:var(--pc-muted); border:1px dashed var(--pc-line); }
[data-role="gate-note"]{ margin-top:.5rem; text-align:center; }

/* ── S2 COMPOSITE: own-image + earned/not-yet demo controls (ADDITIVE, light chrome / Ogilvy) ── */
.pcc-extras{ margin:.5rem 0 .2rem; padding-top:.5rem; border-top:1px solid var(--pc-line); display:flex; flex-direction:column; gap:.5rem; }
.pcc-extras-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pc-file{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--pc-deep); font-weight:600;
  background:var(--pc-card); border:1px dashed var(--pc-line); border-radius:12px; padding:.45rem .6rem; cursor:pointer; }
.pc-file input[type="file"]{ font-size:.72rem; color:var(--pc-muted); max-width:150px; }
.pc-file:focus-within{ outline:2px solid var(--pc-deep); outline-offset:2px; }
.pcc-state-row{ display:flex; flex-wrap:wrap; gap:.4rem; }
.pcc-state-row .pc-chip[aria-pressed="true"]{ background:var(--pc-deep); color:#fff; font-weight:700; }

/* ── v1.1.5 PHONE-FIRST LAYOUT FIXES (VERA sweep 2026-09-22; 375×812 default) ──────────
   #1 CARD DETAIL = FOCUSED HERO: on tap, the opened card is the hero at the TOP of the
   viewport — hide the wallet heading/sub/grid while a card is open (grid returns on Close).
   Real-object-card doctrine (the card IS the content); two-sided render is identical (same
   passcardFaceHTML). Toggled by is-card-open on the wallet surface (mini-wallet). */
.pc-wrap.is-card-open .pc-wallet-head,
.pc-wrap.is-card-open .pc-sub,
.pc-wrap.is-card-open [data-role="body"]{ display:none !important; }
.pc-detail{ scroll-margin-top:64px; }   /* clear the sticky chrome bar when scrolled into view */

/* #4 CHROME TAP-TARGETS → ≥44px (iOS HIG / WCAG 2.5.5) via HIT-AREA, glyph size unchanged.
   Trim the top-bar vertical padding so the taller controls keep the chrome compact. */
.pcx-btn{ width:44px; height:44px; border-radius:11px; }
#gmxshell-root .gmxshell-top{ padding-top:4px; padding-bottom:4px; }
/* the account avatar is a flex item in the top bar — min-width + no-shrink so the 44px hit-area holds
   (a bare width:44 gets squeezed back to ~18px by flex-shrink). */
#gmxshell-me{ width:44px; height:44px; min-width:44px; flex:0 0 auto; }

/* #5 SEARCH/STICKER thumbs: contain the seeded PNG inside the sticker card (kills the ~5px
   right-edge bleed on the Saved/Search + Stickers galleries). */
.pc-sticker .art img{ max-width:100%; height:auto; display:block; margin:0 auto; }

/* ── v1.1.5 GALLERY + BUTTONS-OVER-WORDS (ART V115_GALLERY_BUTTONS design, 2026-09-22) ──────────────
   §A-a — WALLET tiles render a scaled REAL card-face (a badge looks like a badge). Mirrors the proven
   .pcc-thumb scaling (a fixed-width .pcf transform-scaled into a fixed box), so the mini is pixel-faithful
   to the full face. Professional-only (V1.2): NO scrapbook rotation in the wallet (kept only elsewhere). */
/* size the tile to the face (132 + 8px padding each side = 148) and CENTER it in the auto-fill track,
   so the fixed-width scaled face never overflows the track or the viewport. */
[data-testid="surface-wallet"] .pc-sticker{ transform:none !important; text-align:center; align-self:start;
  justify-self:center; width:148px; box-sizing:border-box; }
[data-testid="surface-wallet"] .pc-sticker.has-face{ padding:8px; }
.pc-facewrap{ position:relative; width:132px; margin:2px auto 6px; overflow:hidden; border-radius:10px;
  background:var(--pc-surface2); }
.pc-facewrap .pcf{ width:300px; max-width:none; transform:scale(.44); transform-origin:top left;
  margin:0; box-shadow:none; pointer-events:none; border-radius:0; }
.pc-facewrap.is-landscape{ height:83px; }   /* 132 * 5/8 (8:5 landscape) */
.pc-facewrap.is-portrait { height:185px; }  /* 132 * 7/5 (5:7 portrait) */
.pc-facewrap.is-square   { height:132px; }
[data-testid="surface-wallet"] .pc-sticker .cap{ font-size:.8rem; color:var(--pc-ink); font-weight:600;
  line-height:1.2; display:block; overflow:hidden; text-overflow:ellipsis; }

/* ── v1.1.12 COLLECTIONS ALBUM-GRID FIX (ART review GMXPASSCARD_V117_ALBUM_GRID_REVIEW_2026-09-27-v1,
   v117 lane, 2026-09-27). Root cause: the GENERIC album (event-ticket / membership / access-pass / badge /
   attendance / podcast / link / text — every kind that is NEITHER business-card [binder pockets] NOR
   sticker [scrapbook]) reused the plain STICKER tile shape (.pc-sticker: random per-nth-child tilt +
   passcard.art.1.0.0.css's die-cut peel-corner ::after) as its card backing. That aesthetic is right for an
   actual collected sticker; it is WRONG for a real card kind — the backing must sit flush, untilted, and
   correctly shaped for the card it holds, exactly like the wallet already does it (mirrored below, not
   invented) and exactly like the BINDER pockets already do for business-card. Scoped to the Collections
   surface's album only — does not touch the Saved/Search gallery or any other reuse of .pc-sticker/.pc-grid. */
[data-testid="surface-collections"] [data-role="album"] .pc-grid{ justify-content:center; }
[data-testid="surface-collections"] [data-role="album"] .pc-grid .pc-sticker.has-face{
  transform:none !important; text-align:center; align-self:start; justify-self:center;
  width:148px; box-sizing:border-box; padding:8px; border-radius:12px; }
[data-testid="surface-collections"] [data-role="album"] .pc-grid .pc-sticker.has-face::after{ content:none; }

/* No text caret / no text selection on tap-to-open (operator report, 2026-09-27): the face itself already
   carries pointer-events:none so no click/drag ever targets its text nodes, but harden every album tile
   container against selection/callout too (belt-and-suspenders across engines) — these containers hold
   ONLY display content, never editable text, so this can never suppress a real input. */
.pc-pocket, .pc-scrap-sticker, .pc-sticker, .pc-facewrap{
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }

/* §B — icon-only control: the Phosphor glyph stands ALONE (full name in aria-label+title). Keep ≥44px. */
.pc-btn--icon{ padding:.55rem; min-width:44px; justify-content:center; gap:0; }

/* §C — empty-state NUMBERED 3-picture strip (Scan -> Make -> Show): teaches the whole app wordlessly. */
.pc-steps3{ list-style:none; margin:.8rem 0 .2rem; padding:0; display:flex; align-items:center;
  justify-content:center; gap:.4rem; flex-wrap:wrap; }
.pc-step3{ display:flex; flex-direction:column; align-items:center; gap:.2rem; min-width:64px; }
.pc-step3-n{ display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px;
  background:var(--pc-deep); color:#fff; font-size:.72rem; font-weight:700; line-height:1; } /* fill+number, not colour-alone */
.pc-step3-i{ font-size:2rem; line-height:1; color:var(--pc-deep); }
.pc-step3-l{ font-size:.82rem; font-weight:700; color:var(--pc-ink); }
.pc-step3-arw{ font-size:1.1rem; color:var(--pc-muted); }
@media (max-width:340px){ .pc-step3-arw{ display:none; } }

/* ── V115 GAME HEADER (ART Variation A) — wordless HUD tokens ─────────────────────────────────── */
/* #2 COUNT TOKEN: ph-wallet glyph + live card number (replaces the "Wallet" word). >=44px tap/hit area. */
.pc-count{ display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:.25rem .5rem;
  color:var(--pc-deep); }
.pc-count i.pc-i{ font-size:1.6rem; color:var(--pc-deep); }
.pc-count-n{ font-family:"Source Serif 4",Georgia,serif; font-weight:800; font-size:1.5rem; color:var(--pc-ink); }
/* #4 MODE TOKEN: game mode badge (amber DEMO / navy LIVE). Keeps data-testid="lane-chip" (toggle). The WORD
   stays on the token (security — never glyph-only); distinguished by color + shape + glyph + word. >=44px. */
.pc-mode{ display:inline-flex; align-items:center; gap:.35rem; min-height:44px; padding:.35rem .85rem;
  border:1px solid var(--pc-line); border-radius:999px; font-weight:800; font-size:.8rem; letter-spacing:.05em;
  cursor:pointer; }
.pc-mode i.pc-i{ font-size:1.2rem; }
.pc-mode.is-demo{ background:#F5B800; color:#14171f; border-color:#d9a400; }   /* amber PLAY-mode, ink 9.3:1 */
.pc-mode.is-live{ background:#122c4f; color:#fff; border-color:#122c4f; }      /* navy LIVE, white 12.6:1 */
.pc-mode.is-sandbox{ background:#0f766e; color:#fff; border-color:#0f766e; }   /* teal SANDBOX, white ~5.5:1 (not amber, not navy) */
.pc-mode:focus-visible{ outline:2px solid var(--pc-deep); outline-offset:2px; }
/* #3 TAP-CUE: first-run pointing hand + ripple over the first tile. Decoration only. */
.pc-tapcue{ position:absolute; right:6px; bottom:6px; width:44px; height:44px; z-index:3;
  display:flex; align-items:center; justify-content:center; pointer-events:none; }
.pc-tapcue-hand{ font-size:1.9rem; color:var(--pc-muted);
  filter:drop-shadow(0 1px 2px rgba(255,255,255,.95)); animation:pc-tapbob 1.1s ease-in-out infinite; }
.pc-tapcue-ripple{ position:absolute; width:26px; height:26px; border-radius:50%;
  background:rgba(18,44,79,.30); animation:pc-tapripple 1.6s ease-out infinite; }
.pc-tapcue.is-static .pc-tapcue-hand{ animation:none; }
.pc-tapcue.is-static .pc-tapcue-ripple{ display:none; }
@keyframes pc-tapbob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }
@keyframes pc-tapripple{ 0%{ transform:scale(.5); opacity:.7;} 100%{ transform:scale(2.4); opacity:0;} }

/* ── v1.1.5 TOP-BAR OVERLAP FIX (passcard-scoped, 2026-09-22) ────────────────────────────────
   BUG: on inner routes (#/wallet #/create #/scan) at <=375, the passcard nav (#pcxBack/#pcxHome
   in .pcx-nav) horizontally overlapped the shell's env pill #gmxshell-env (~29px; the home ⌂ sat
   under the DEMO pill). The shell top bar .gmxshell-top (display:flex; gap:10px; .gmxshell-spacer
   flex:1) holds brand(logo + "GMXPasscard" wordmark ~110px) + .pcx-nav on the left and env + avatar
   on the right; at narrow widths the flex spacer collapses to 0 and the two groups crowd/overlap.
   FIX (passcard-scoped — this stylesheet is loaded ONLY by passcard; the shared shell files
   app/gmxshell.styles.1.0.4.css + app/gmxshell.shell.*.js are UNTOUCHED): at <=400px, HIDE the
   wordmark TEXT only, keep the .pcx-logo mark. The wordmark is a BARE TEXT NODE inside
   .gmxshell-brand (shell renders `<span class="gmxshell-brand">GMXPasscard</span>`; jnychrome
   injects <img class="pcx-logo"> as its first child) — a bare text node can't be targeted directly,
   so we collapse it with font-size:0 on the brand and restore explicit sizing on the logo img
   (the img has its own width/height, so it is unaffected). Frees ~110px, fully resolving the ~29px
   overlap while the DEMO/env safety pill (#gmxshell-env) stays fully visible (NOT hidden).
   #pcxHome KEPT: tapping the brand logo does NOT route home (jnychrome attaches click handlers only
   to #pcxBack/#pcxHome, none to .pcx-logo/.gmxshell-brand), so #pcxHome is the only home affordance
   on the bar and must remain. A small nav-gap/title tighten is added as a safety margin.
   OPERATOR 2026-09-22: remove the "GMXPasscard" wordmark TEXT ENTIRELY at ALL widths (icon-only top
   bar), keeping only the logo mark — so the wordmark-collapse is now UNCONDITIONAL (not media-gated).
   The wordmark is a BARE TEXT NODE inside .gmxshell-brand (no span to display:none), so it is collapsed
   with font-size:0 on the brand while the .pcx-logo img keeps its own explicit size. */
/* remove the app-name wordmark text at ALL widths — icon-only top bar (passcard-scoped) */
#gmxshell-root .gmxshell-top .gmxshell-brand{ font-size:0; gap:0; }
#gmxshell-root .gmxshell-top .gmxshell-brand .pcx-logo{ font-size:initial; }
@media (max-width:400px){
  /* declutter the injected passcard nav so back/home never crowd the env pill on narrow phones */
  #gmxshell-root .gmxshell-top .pcx-nav{ gap:4px; }
  #gmxshell-root .gmxshell-top .pcx-title{ max-width:88px; }
}

/* ═══ COLLECTOR-FIRST v116 (operator 2026-09-23 §COLLECTOR-FIRST) — passcard-scoped. Light Navy Luxe, no
   reverse BODY type (filled navy chips = chrome/CTA exception, FOUNDATIONAL #1). Phosphor glyphs, ≥44px. ═══ */

/* ── persistent BOTTOM TAB BAR (thin nav; injected into the shell's reserved #gmxshell-bottom shelf) ── */
.pcx-tabbar{ display:flex; align-items:stretch; width:100%;
  padding-bottom:max(0px, env(safe-area-inset-bottom)); background:var(--pc-page); }
.pcx-tab{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:52px; border:0; background:transparent; color:var(--pc-muted); cursor:pointer; padding:6px 2px; }
.pcx-tab i.pc-i{ font-size:1.35rem; line-height:1; }
.pcx-tab .pcx-tab-l{ font-size:.66rem; letter-spacing:.01em; }
.pcx-tab[aria-current="page"]{ color:var(--pc-deep); font-weight:700; }
.pcx-tab:focus-visible{ outline:2px solid var(--pc-deep); outline-offset:-3px; border-radius:8px; }

/* ── wallet header: the ONE "+" (filled navy chrome CTA) + the anon sign-in ── */
.pc-add{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0;
  border-radius:50%; background:var(--pc-deep); color:#fff; cursor:pointer; }
.pc-add i.pc-i{ font-size:1.3rem; }
.pc-add:focus-visible{ outline:2px solid var(--pc-deep2); outline-offset:2px; }
.pc-signin{ display:inline-flex; align-items:center; gap:.35rem; min-height:44px; padding:.4rem .8rem;
  border:1px solid var(--pc-line); border-radius:12px; background:transparent; color:var(--pc-deep);
  font-weight:600; font-size:.9rem; cursor:pointer; }
.pc-signin:focus-visible{ outline:2px solid var(--pc-deep2); outline-offset:2px; }

/* ── the "+" ADD-A-CARD bottom sheet ── */
.pc-addsheet{ position:fixed; inset:0; z-index:1200; display:flex; flex-direction:column; justify-content:flex-end; }
.pc-addsheet-scrim{ position:absolute; inset:0; background:rgba(18,28,47,.42); }
.pc-addsheet-panel{ position:relative; background:var(--pc-page); border-radius:20px 20px 0 0;
  max-width:680px; margin:0 auto; width:100%; max-height:82vh; overflow:auto;
  padding:14px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px rgba(18,28,47,.22);
  animation:pc-sheet-up .2s ease-out; }
@keyframes pc-sheet-up{ from{ transform:translateY(24px); opacity:.6 } to{ transform:none; opacity:1 } }
@media (prefers-reduced-motion: reduce){ .pc-addsheet-panel{ animation:none } }
.pc-addsheet-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.pc-addsheet-ttl{ font-family:"Source Serif 4",Georgia,serif; font-weight:700; font-size:1.15rem; color:var(--pc-deep); margin:.2rem 0; }
.pc-addsheet-sub{ color:var(--pc-muted); font-size:.85rem; margin:0 0 .6rem; }
.pc-addsheet-list{ display:flex; flex-direction:column; gap:6px; }
.pc-addrow{ display:flex; align-items:center; gap:.7rem; width:100%; min-height:52px; padding:.5rem .7rem;
  border:1px solid var(--pc-line); border-radius:14px; background:var(--pc-card); color:var(--pc-ink);
  cursor:pointer; text-align:left; font-size:.98rem; }
.pc-addrow:focus-visible{ outline:2px solid var(--pc-deep); outline-offset:2px; }
.pc-addrow-ic{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:10px; background:var(--pc-surface2); color:var(--pc-deep); flex:0 0 auto; }
.pc-addrow-ic i.pc-i{ font-size:1.25rem; }
.pc-addrow-l{ flex:1 1 auto; font-weight:600; }
.pc-addrow-arw{ color:var(--pc-muted); }

/* ── Recently-Used row (wallet) ── */
.pc-recent{ margin:.2rem 0 1rem; }
.pc-recent-h{ font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--pc-muted); margin:.2rem 0 .4rem; }
.pc-recent-row{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
.pc-recent-row .pc-sticker{ flex:0 0 auto; width:150px; transform:none !important; }

/* ── Collections INDEX (type-grouped album picker) ── */
.pc-coll-index{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.pc-coll-card{ display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; min-height:88px;
  padding:.7rem .8rem; border:1px solid var(--pc-line); border-radius:16px; background:var(--pc-card);
  color:var(--pc-ink); cursor:pointer; text-align:left; position:relative; }
.pc-coll-card:focus-visible{ outline:2px solid var(--pc-deep); outline-offset:2px; }
.pc-coll-ic{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:11px; background:var(--pc-surface2); color:var(--pc-deep); }
.pc-coll-ic i.pc-i{ font-size:1.35rem; }
.pc-coll-l{ font-weight:600; font-size:.92rem; }
.pc-coll-n{ position:absolute; top:.6rem; right:.7rem; min-width:22px; height:22px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
  background:var(--pc-deep); color:#fff; font-size:.75rem; font-weight:700; }

/* ── BINDER pocket-sheet (business-card album) ── */
.pc-binder{ position:relative; background:var(--pc-surface2); border:1px solid var(--pc-line);
  border-radius:14px; padding:14px 14px 14px 30px; margin:.4rem 0; }
.pc-binder-rings{ position:absolute; left:10px; top:14px; bottom:14px; width:8px;
  background:repeating-linear-gradient(to bottom, var(--pc-line) 0 6px, transparent 6px 26px);
  border-radius:6px; }
.pc-binder-sheet{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.pc-pocket{ background:var(--pc-card); border:1px solid var(--pc-line); border-radius:12px; padding:10px;
  box-shadow:inset 0 -10px 14px -12px rgba(18,28,47,.28), 0 1px 3px rgba(18,28,47,.12);
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.pc-pocket:focus-visible{ outline:2px solid var(--pc-deep); outline-offset:2px; }
.pc-pocket-cap{ font-size:.78rem; color:var(--pc-ink); text-align:center; }
.pc-pocket-glyph{ font-size:2.4rem; color:var(--pc-deep); }

/* ── SCRAPBOOK page (sticker album) ── */
.pc-scrapbook{ position:relative; background:var(--pc-surface2); border:1px solid var(--pc-line);
  border-radius:14px; padding:20px 14px 14px; margin:.4rem 0; }
.pc-scrap-spiral{ position:absolute; left:14px; right:14px; top:6px; height:10px;
  background:repeating-linear-gradient(to right, transparent 0 10px, var(--pc-deep) 10px 14px, transparent 14px 24px);
  opacity:.5; border-radius:6px; }
.pc-scrap-page{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; align-items:flex-start; }
.pc-scrap-sticker{ background:transparent; cursor:pointer; filter:drop-shadow(0 3px 4px rgba(18,28,47,.28)); }
.pc-scrap-sticker:focus-visible{ outline:2px solid var(--pc-deep); outline-offset:2px; }
.pc-scrap-tilt-0{ transform:rotate(-4deg) }
.pc-scrap-tilt-1{ transform:rotate(3deg) }
.pc-scrap-tilt-2{ transform:rotate(-1.5deg) }
@media (prefers-reduced-motion: reduce){ .pc-scrap-sticker{ transform:none !important } }