/* ============================================================================
   nox-cards.css  —  The NOX Business-Card Component Layer  (print + digital)
   ----------------------------------------------------------------------------
   PURPOSE
     Two component families for client identity:

       1. PRINT CARDS (.nox-pcard*) — true-to-size 3.5in × 2in business cards
          with print-ready @page / bleed / crop-guide support, plus a set of
          layout variants (minimal, bold, split, mono, dark, light). On screen
          they sit on a neutral "stage" with a soft drop shadow so they read as
          real, physical cards.

       2. DIGITAL / VIRTUAL CARDS (.nox-vcard*) — a mobile-first contact page
          (the modern "tap to save my info" card): accent cover, overlapping
          avatar, action grid, social row, scan-anywhere QR panel, optional
          wallet buttons, and a "Powered by NOX" credit.

   LOAD ORDER (later wins)
     nox-tokens → nox-dashboard → nox-website → nox-premium → nox-icons
       → nox-motion → nox-experience → nox-cards   ◀ THIS FILE LOADS LAST

   THEMING CONTRACT
     • Every card is themed to the CLIENT'S site through --nox-accent (and its
       siblings --nox-accent-2 / --nox-accent-s / --nox-accent-g). Set that
       one variable per page and every accent block, sidebar, cover gradient,
       primary action and QR frame re-tints automatically — the NOX brand blue
       (#2E5F8A) is only the default fallback.
     • All color/spacing pull from var(--nox-*) tokens, so both families work
       across all 7 themes (dark / light / midnight / cream / frost / carbon /
       paper). The only literals are accent fallbacks and translucent tints.

   CONVENTIONS
     • Print cards use real-world units (in / mm) so they export at exact size.
       Screen rounding + shadow is suppressed inside @media print.
     • All motion is disabled under prefers-reduced-motion (guarded block at
       the very bottom of this file).
     • Data-URIs escape '#' as %23 (utf8 SVG escaping) so they parse correctly.
   ========================================================================== */


/* ============================================================================
   0 · LOCAL TUNING TOKENS
   Scoped knobs so the whole layer can be re-tuned from one place. These read
   from the theme/accent tokens and never override them globally.
   ========================================================================== */
:root {
  /* Physical print dimensions (US standard business card). */
  --nox-pcard-w:        3.5in;
  --nox-pcard-h:        2in;
  --nox-pcard-bleed:    0.125in;   /* per-edge bleed for pro printing       */
  --nox-pcard-safe:     0.125in;   /* safe-area inset from trim             */
  --nox-pcard-pad:      0.22in;    /* default interior padding              */

  /* Bleed-card outer size = trim + 2 × bleed. */
  --nox-pcard-bleed-w:  3.75in;
  --nox-pcard-bleed-h:  2.25in;

  /* Screen-only card chrome (ignored in print). */
  --nox-pcard-screen-r: 12px;
  --nox-pcard-scale:    1;         /* bump to preview cards larger on screen */

  /* Accent fallbacks — NOX steel blue when a client accent isn't set. */
  --nox-card-accent:    var(--nox-accent,   #2E5F8A);
  --nox-card-accent-2:  var(--nox-accent-2, #244a6e);
  --nox-card-on:        #ffffff;   /* (reserved) text on accent fields      */

  /* Virtual card frame. */
  --nox-vcard-max:      420px;
  --nox-vcard-cover-h:  132px;
  --nox-vcard-avatar:   96px;
}


/* ============================================================================
   1 · SCREEN STAGE
   The neutral surface print cards rest on so they look physical. Purely a
   screen affordance — collapsed to nothing in @media print.
   ========================================================================== */
.nox-pcard-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--nox-7, 32px);
  padding: clamp(24px, 5vw, 64px);
  background:
    radial-gradient(120% 120% at 50% 0%,
      var(--nox-bg-2) 0%, var(--nox-bg-0) 70%);
  border-radius: var(--nox-r-lg, 10px);
}

/* A side-by-side front/back pairing on screen. */
.nox-pcard-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--nox-6, 24px);
}


/* ============================================================================
   2 · PRINT CARD — BASE
   The shared 3.5in × 2in surface used by both front and back. Real units keep
   exports exact; screen-only radius + shadow + scale are added on top and then
   stripped inside @media print (§9).
   ========================================================================== */
.nox-pcard {
  /* Local accent aliases so variants can lean on one name. */
  --_acc:   var(--nox-card-accent);
  --_acc2:  var(--nox-card-accent-2);
  --_ink:   var(--nox-ink);
  --_ink2:  var(--nox-ink-2);
  --_paper: var(--nox-bg-1);

  position: relative;
  box-sizing: border-box;
  width:  var(--nox-pcard-w);
  height: var(--nox-pcard-h);
  flex: 0 0 auto;
  padding: var(--nox-pcard-pad);
  overflow: hidden;

  display: flex;
  flex-direction: column;

  background: var(--_paper);
  color: var(--_ink);
  font-family: var(--nox-font-body);
  font-size: 9pt;
  line-height: 1.32;

  /* Screen affordances (removed in print). */
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-pcard-screen-r);
  box-shadow:
    0 1px 1px rgba(0,0,0,.04),
    0 10px 24px -8px rgba(0,0,0,.28),
    0 28px 48px -20px rgba(0,0,0,.30);
  transform: scale(var(--nox-pcard-scale));
  transform-origin: center;
  transition: transform var(--nox-ease-slow, .3s ease),
              box-shadow var(--nox-ease-slow, .3s ease);
}

/* Gentle lift on hover (screen only; killed for reduced-motion). */
.nox-pcard-pair:hover .nox-pcard,
.nox-pcard.is-interactive:hover {
  box-shadow:
    0 2px 2px rgba(0,0,0,.05),
    0 16px 30px -10px rgba(0,0,0,.32),
    0 40px 64px -24px rgba(0,0,0,.34);
}

/* Front / back are the same surface; back defaults to a calmer field. */
.nox-pcard-front { z-index: 1; }
.nox-pcard-back  {
  background: var(--nox-bg-2);
  align-items: center;
  justify-content: center;
  text-align: center;
}


/* ============================================================================
   3 · PRINT CARD — SUB-PARTS
   The interchangeable pieces variants compose. Defaults are conservative;
   variants in §4 reflow / recolor them.
   ========================================================================== */

/* Brand mark — "NO" + accent "X" wordmark by default; can wrap an <img>. */
.nox-pcard-logo {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--nox-font-display);
  font-weight: 700;
  font-size: 13pt;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--_ink);
}
.nox-pcard-logo .nox-x,
.nox-pcard-logo b { color: var(--_acc); font-weight: 700; }
.nox-pcard-logo img { height: 1.7em; width: auto; }

/* Identity block. */
.nox-pcard-name {
  font-family: var(--nox-font-display);
  font-weight: 700;
  font-size: 14pt;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--_ink);
}
.nox-pcard-title {
  font-size: 8pt;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--_acc);
  margin-top: 0.04in;
}
.nox-pcard-company {
  font-size: 9pt;
  font-weight: 600;
  color: var(--_ink2);
  margin-top: 0.02in;
}
.nox-pcard-tagline {
  font-size: 7.5pt;
  font-style: italic;
  color: var(--nox-ink-3);
  margin-top: 0.04in;
  max-width: 2.2in;
}

/* Hairline divider used by mono / minimal variants. */
.nox-pcard-rule {
  height: 1px;
  width: 100%;
  background: var(--nox-line);
  margin: 0.07in 0;
}

/* Contact list. */
.nox-pcard-contact {
  display: flex;
  flex-direction: column;
  gap: 0.045in;
  margin-top: auto;            /* pins contact to the bottom by default     */
  font-size: 8pt;
  color: var(--_ink2);
}
.nox-pcard-contact-row {
  display: flex;
  align-items: center;
  gap: 0.07in;
  line-height: 1.2;
}
.nox-pcard-contact-row .nox-icon {
  width: 11px;
  height: 11px;
  color: var(--_acc);
  flex-shrink: 0;
}
.nox-pcard-contact-row a { color: inherit; }

/* Accent bar / block — the structural color element variants reposition. */
.nox-pcard-accentbar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0.12in;
  background: linear-gradient(180deg, var(--_acc), var(--_acc2));
}

/* QR slot for the back of a card (~0.8in). White tile = reliable scans. */
.nox-pcard-qr {
  width: 0.8in;
  height: 0.8in;
  background: #ffffff;
  border-radius: 6px;
  padding: 0.04in;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
}
.nox-pcard-qr img,
.nox-pcard-qr svg,
.nox-pcard-qr canvas { width: 100%; height: 100%; display: block; }
.nox-pcard-qr-label {
  font-size: 6.5pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nox-ink-3);
  margin-top: 0.05in;
}


/* ============================================================================
   4 · PRINT CARD — LAYOUT VARIANTS
   Modifiers on .nox-pcard. Each is self-contained so they can mix with the
   tone modifiers (.is-dark / .is-light) in §5.
   ========================================================================== */

/* ── 4a · .is-minimal — clean, airy, name + title + contact ───────────────── */
.nox-pcard.is-minimal {
  padding: 0.3in;
  justify-content: space-between;
}
.nox-pcard.is-minimal .nox-pcard-name { font-size: 15pt; }
.nox-pcard.is-minimal .nox-pcard-contact { gap: 0.05in; }
.nox-pcard.is-minimal .nox-pcard-logo {
  position: absolute;
  top: 0.3in; right: 0.3in;
  font-size: 11pt;
}

/* ── 4b · .is-bold — solid accent block anchoring the identity ────────────── */
.nox-pcard.is-bold { padding: 0; flex-direction: row; }
.nox-pcard.is-bold .nox-pcard-band {
  flex: 0 0 1.25in;
  background: linear-gradient(150deg, var(--_acc), var(--_acc2));
  color: #fff;
  padding: var(--nox-pcard-pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.nox-pcard.is-bold .nox-pcard-band .nox-pcard-logo,
.nox-pcard.is-bold .nox-pcard-band .nox-pcard-logo .nox-x,
.nox-pcard.is-bold .nox-pcard-band .nox-pcard-logo b { color: #fff; }
.nox-pcard.is-bold .nox-pcard-body {
  flex: 1;
  padding: var(--nox-pcard-pad);
  display: flex;
  flex-direction: column;
}
/* If no explicit band element, draw a top accent stripe instead. */
.nox-pcard.is-bold:not(:has(.nox-pcard-band)) {
  flex-direction: column;
  padding: var(--nox-pcard-pad);
  padding-top: 0.34in;
}
.nox-pcard.is-bold:not(:has(.nox-pcard-band))::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0.18in;
  background: linear-gradient(90deg, var(--_acc), var(--_acc2));
}

/* ── 4c · .is-split — left accent panel + right info column ────────────────── */
.nox-pcard.is-split { padding: 0; flex-direction: row; }
.nox-pcard.is-split .nox-pcard-panel {
  flex: 0 0 38%;
  background: linear-gradient(160deg, var(--_acc), var(--_acc2));
  color: #fff;
  padding: var(--nox-pcard-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.06in;
}
.nox-pcard.is-split .nox-pcard-panel .nox-pcard-logo,
.nox-pcard.is-split .nox-pcard-panel .nox-pcard-logo .nox-x,
.nox-pcard.is-split .nox-pcard-panel .nox-pcard-logo b,
.nox-pcard.is-split .nox-pcard-panel .nox-pcard-name { color: #fff; }
.nox-pcard.is-split .nox-pcard-panel .nox-pcard-title { color: rgba(255,255,255,.85); }
.nox-pcard.is-split .nox-pcard-info {
  flex: 1;
  padding: var(--nox-pcard-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── 4d · .is-mono — editorial/technical, mono type, hairline rules ───────── */
.nox-pcard.is-mono {
  font-family: var(--nox-font-mono);
  letter-spacing: -0.01em;
  padding: 0.26in;
}
.nox-pcard.is-mono .nox-pcard-name {
  font-family: var(--nox-font-mono);
  font-weight: 700;
  font-size: 12pt;
  letter-spacing: -0.02em;
  text-transform: none;
}
.nox-pcard.is-mono .nox-pcard-title {
  font-family: var(--nox-font-mono);
  font-size: 7pt;
  letter-spacing: 0.12em;
}
.nox-pcard.is-mono .nox-pcard-contact {
  font-family: var(--nox-font-mono);
  font-size: 7.5pt;
}
.nox-pcard.is-mono .nox-pcard-logo { font-family: var(--nox-font-mono); }
/* Editorial top + bottom hairlines. */
.nox-pcard.is-mono .nox-pcard-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.07in;
  border-bottom: 1px solid var(--nox-line);
  margin-bottom: 0.07in;
}
.nox-pcard.is-mono .nox-pcard-contact {
  padding-top: 0.07in;
  border-top: 1px solid var(--nox-line);
}


/* ============================================================================
   5 · PRINT CARD — TONE MODIFIERS  (.is-dark / .is-light)
   Force a card's surface independent of the page theme, so a client can pick a
   dark or light card on any theme. Accent stays the client's accent.
   ========================================================================== */
.nox-pcard.is-dark {
  --_paper: #0e0f10;
  --_ink:   #f2f2f2;
  --_ink2:  #b9b9b9;
  background: var(--_paper);
  color: var(--_ink);
  border-color: rgba(255,255,255,.08);
}
.nox-pcard.is-dark .nox-pcard-tagline,
.nox-pcard.is-dark .nox-pcard-qr-label { color: #8c8c8c; }
.nox-pcard.is-dark .nox-pcard-rule,
.nox-pcard.is-dark.is-mono .nox-pcard-head,
.nox-pcard.is-dark.is-mono .nox-pcard-contact { border-color: rgba(255,255,255,.1); }
.nox-pcard.is-dark.nox-pcard-back { background: #0a0b0b; }

.nox-pcard.is-light {
  --_paper: #ffffff;
  --_ink:   #14171a;
  --_ink2:  #41464b;
  background: var(--_paper);
  color: var(--_ink);
  border-color: rgba(0,0,0,.10);
}
.nox-pcard.is-light .nox-pcard-tagline,
.nox-pcard.is-light .nox-pcard-qr-label { color: #6b7177; }
.nox-pcard.is-light .nox-pcard-rule,
.nox-pcard.is-light.is-mono .nox-pcard-head,
.nox-pcard.is-light.is-mono .nox-pcard-contact { border-color: rgba(0,0,0,.10); }
.nox-pcard.is-light.nox-pcard-back { background: #f4f5f6; }


/* ============================================================================
   6 · PRINT CARD — BLEED + CROP / SAFE-AREA GUIDES
   For sending to a professional printer. The bleed variant grows the surface
   to 3.75 × 2.25in (0.125in bleed per edge); guides overlay crop ticks and a
   safe-area box, and are hidden in print so they never appear on the artwork.
   ========================================================================== */
.nox-pcard-bleed {
  width:  var(--nox-pcard-bleed-w);
  height: var(--nox-pcard-bleed-h);
  /* Push interior content in by the bleed so it lands inside the trim. */
  padding: calc(var(--nox-pcard-pad) + var(--nox-pcard-bleed));
}
/* When a layout variant zeroes padding (bold/split), the bleed inset moves to
   the inner regions instead. */
.nox-pcard-bleed.is-bold,
.nox-pcard-bleed.is-split { padding: var(--nox-pcard-bleed); }

/* Crop + safe-area guide overlay (screen preview only). */
.nox-pcard-guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
/* Trim box. */
.nox-pcard-guides::before {
  content: "";
  position: absolute;
  inset: var(--nox-pcard-bleed);
  outline: 1px dashed rgba(120,170,255,.7);
}
/* Safe-area box (inset from trim). */
.nox-pcard-guides::after {
  content: "";
  position: absolute;
  inset: calc(var(--nox-pcard-bleed) + var(--nox-pcard-safe));
  outline: 1px dashed rgba(120,255,170,.55);
}
/* Corner crop ticks via a single SVG (note: '#' escaped as %23). */
.nox-pcard-guides > .nox-pcard-crops {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cg stroke='%23ff5a7a' stroke-width='1'%3E%3Cline x1='0' y1='12' x2='9' y2='12'/%3E%3Cline x1='12' y1='0' x2='12' y2='9'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
}


/* ============================================================================
   7 · PRINT CARD — PRINT SHEET HELPER
   Lays out front + back for printing. On screen it's a tidy column; in print
   each child becomes its own page at exact card size.
   ========================================================================== */
.nox-pcard-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nox-6, 24px);
}
.nox-pcard-sheet .nox-pcard { break-inside: avoid; }


/* ============================================================================
   8 · DIGITAL / VIRTUAL CARD
   Mobile-first "tap to save my contact" page. Centered column, accent cover,
   overlapping avatar, action grid, social row, QR panel, wallet, NOX credit.
   ========================================================================== */
.nox-vcard {
  position: relative;
  width: 100%;
  max-width: var(--nox-vcard-max);
  margin-inline: auto;
  background: var(--nox-bg-1);
  color: var(--nox-ink);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl, 14px);
  box-shadow: var(--nox-shadow-lg);
  overflow: hidden;
  font-family: var(--nox-font-body);
}

/* ── 8a · Cover — accent gradient + subtle texture ────────────────────────── */
.nox-vcard-cover {
  position: relative;
  height: var(--nox-vcard-cover-h);
  background:
    linear-gradient(135deg,
      var(--nox-card-accent) 0%,
      var(--nox-card-accent-2) 100%);
  overflow: hidden;
}
/* Subtle fractal-noise grain (utf8 SVG; '#' → %23). */
.nox-vcard-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .10;
  mix-blend-mode: overlay;
}
/* Soft top sheen. */
.nox-vcard-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% -20%,
    rgba(255,255,255,.28), rgba(255,255,255,0) 60%);
}

/* ── 8b · Avatar — circular, overlapping the cover ────────────────────────── */
.nox-vcard-avatar {
  position: relative;
  z-index: 2;
  width: var(--nox-vcard-avatar);
  height: var(--nox-vcard-avatar);
  margin: calc(var(--nox-vcard-avatar) / -2) auto 0;
  border-radius: 50%;
  border: 4px solid var(--nox-bg-1);
  background: var(--nox-bg-3);
  object-fit: cover;
  box-shadow: var(--nox-shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.nox-vcard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nox-vcard-avatar .nox-icon { width: 40%; height: 40%; color: var(--nox-ink-3); }

/* ── 8c · Identity ────────────────────────────────────────────────────────── */
.nox-vcard-id {
  text-align: center;
  padding: 10px 24px 4px;
}
.nox-vcard-name {
  font-family: var(--nox-font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--nox-ink);
}
.nox-vcard-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nox-card-accent);
  margin-top: 4px;
}
.nox-vcard-company {
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink-2);
  margin-top: 2px;
}
.nox-vcard-tagline {
  font-size: 12.5px;
  color: var(--nox-ink-3);
  margin-top: 8px;
  line-height: 1.45;
}

/* ── 8d · Action grid (call / mail / map / site …) ────────────────────────── */
.nox-vcard-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 16px 20px 8px;
}
.nox-vcard-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: var(--nox-r-md, 8px);
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  color: var(--nox-ink-2);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  transition: transform var(--nox-ease), background var(--nox-ease),
              border-color var(--nox-ease), color var(--nox-ease);
}
.nox-vcard-action .nox-icon {
  width: 20px;
  height: 20px;
  color: var(--nox-card-accent);
}
.nox-vcard-action:hover {
  background: var(--nox-accent-s);
  border-color: var(--nox-accent-g);
  color: var(--nox-ink);
  transform: translateY(-2px);
}
.nox-vcard-action.is-primary {
  background: var(--nox-card-accent);
  border-color: transparent;
  color: #fff;
}
.nox-vcard-action.is-primary .nox-icon { color: #fff; }
.nox-vcard-action.is-primary:hover { background: var(--nox-card-accent-2); }

/* Big primary "Save contact" CTA. */
.nox-vcard-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - 40px);
  margin: 8px 20px 4px;
  padding: 14px 18px;
  border-radius: var(--nox-r-md, 8px);
  background: var(--nox-card-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px -6px var(--nox-accent-g);
  transition: transform var(--nox-ease), background var(--nox-ease),
              box-shadow var(--nox-ease);
}
.nox-vcard-save .nox-icon { width: 18px; height: 18px; color: #fff; }
.nox-vcard-save:hover {
  background: var(--nox-card-accent-2);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -8px var(--nox-accent-g);
}
.nox-vcard-save:active { transform: translateY(0); }

/* ── 8e · Social row (round icon buttons) ─────────────────────────────────── */
.nox-vcard-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
}
.nox-vcard-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  color: var(--nox-ink-2);
  transition: transform var(--nox-ease), background var(--nox-ease),
              color var(--nox-ease), border-color var(--nox-ease);
}
.nox-vcard-social-btn .nox-icon { width: 18px; height: 18px; }
.nox-vcard-social-btn:hover {
  background: var(--nox-card-accent);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
}

/* ── 8f · QR panel — collapsible white scan tile ──────────────────────────── */
.nox-vcard-qr-panel {
  margin: 4px 20px 16px;
  border-top: 1px solid var(--nox-line);
  padding-top: 14px;
  text-align: center;
}
.nox-vcard-qr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--nox-ink-2);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--nox-line);
  background: var(--nox-bg-3);
  transition: background var(--nox-ease), color var(--nox-ease);
}
.nox-vcard-qr-toggle .nox-icon { width: 15px; height: 15px; color: var(--nox-card-accent); }
.nox-vcard-qr-toggle:hover { background: var(--nox-accent-s); color: var(--nox-ink); }

/* Collapsible body — toggled via [hidden] or a wrapper class. */
.nox-vcard-qr-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--nox-ease-slow), opacity var(--nox-ease-slow);
}
.nox-vcard-qr-panel.is-open .nox-vcard-qr-body {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 12px;
}
.nox-vcard-qr-body > div { overflow: hidden; }

/* White rounded tile so the code scans on ANY theme. */
.nox-vcard-qr {
  width: 168px;
  height: 168px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: var(--nox-r-md, 8px);
  padding: 12px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset, var(--nox-shadow-sm);
}
.nox-vcard-qr img,
.nox-vcard-qr svg,
.nox-vcard-qr canvas { width: 100%; height: 100%; display: block; }

/* ── 8g · Wallet row (optional Apple / Google buttons) ────────────────────── */
.nox-vcard-wallet {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 0 20px 14px;
}
.nox-vcard-wallet-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--nox-r-md, 8px);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--nox-line);
  background: var(--nox-bg-3);
  color: var(--nox-ink);
  transition: transform var(--nox-ease), border-color var(--nox-ease);
}
.nox-vcard-wallet-btn .nox-icon { width: 16px; height: 16px; }
.nox-vcard-wallet-btn:hover { transform: translateY(-1px); border-color: var(--nox-ink-4); }
.nox-vcard-wallet-btn.is-apple  { background: #000; color: #fff; border-color: #000; }
.nox-vcard-wallet-btn.is-apple .nox-icon  { color: #fff; }
.nox-vcard-wallet-btn.is-google { background: #fff; color: #1a1a1a; border-color: rgba(0,0,0,.15); }
.nox-vcard-wallet-btn.is-google .nox-icon { color: #1a73e8; }
/* "Optional" affordance — quieter until hovered. */
.nox-vcard-wallet { opacity: .92; }
.nox-vcard-wallet::before {
  content: "Add to wallet (optional)";
  flex: 1 0 100%;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nox-ink-4);
  margin-bottom: 2px;
}

/* ── 8h · Footer credit ───────────────────────────────────────────────────── */
.nox-vcard-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--nox-line);
  font-size: 11px;
  color: var(--nox-ink-3);
}
.nox-vcard-foot .nox-vcard-foot-mark {
  font-family: var(--nox-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--nox-ink-2);
}
.nox-vcard-foot .nox-vcard-foot-mark .nox-x { color: var(--nox-accent, #2E5F8A); }


/* ============================================================================
   9 · TOAST  (e.g. "Link copied")
   Self-contained mini toast for the virtual card's copy / share actions.
   Toggle visibility with the .is-visible class.
   ========================================================================== */
.nox-vcard-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--nox-bg-4);
  color: var(--nox-ink);
  border: 1px solid var(--nox-line);
  box-shadow: var(--nox-shadow-lg);
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nox-ease), transform var(--nox-ease);
}
.nox-vcard-toast .nox-icon { width: 15px; height: 15px; color: var(--nox-green); }
.nox-vcard-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}


/* ============================================================================
   10 · RESPONSIVE
   ========================================================================== */
@media (max-width: 380px) {
  .nox-vcard-actions { grid-template-columns: repeat(3, 1fr); }
  .nox-vcard-qr { width: 144px; height: 144px; }
}


/* ============================================================================
   11 · PRINT RULES
   Page is sized to a single card; screen chrome (stage, shadows, rounding,
   guides, scale) is stripped so the artwork prints clean and exact.
   ========================================================================== */
/* @page sizing lives in nox-card-print.html (page-local) so this shared module
   never hijacks printing of other pages that link it (e.g. the cards gallery). */

@media print {
  /* Hide anything explicitly marked screen-only. */
  .no-print,
  .nox-pcard-guides { display: none !important; }

  /* Neutralize the screen stage. */
  .nox-pcard-stage,
  .nox-pcard-pair,
  .nox-pcard-sheet {
    display: block !important;
    background: none !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 0 !important;
  }

  /* Print cards: exact size, no rounding / shadow / scale, one per page. */
  .nox-pcard {
    width: var(--nox-pcard-w);
    height: var(--nox-pcard-h);
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    break-inside: avoid;
    page-break-after: always;
  }
  .nox-pcard-sheet > .nox-pcard:last-child { page-break-after: auto; }

  /* Bleed cards size to the larger sheet (printer trims to 3.5 × 2). */
  .nox-pcard-bleed {
    width: var(--nox-pcard-bleed-w);
    height: var(--nox-pcard-bleed-h);
    page: nox-card-bleed;
  }

  /* Force accent fields + QR tiles to render with their fills. */
  .nox-pcard,
  .nox-pcard-band,
  .nox-pcard-panel,
  .nox-pcard-accentbar,
  .nox-pcard-qr,
  .nox-vcard-cover {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* The virtual card isn't meant for paper. */
  .nox-vcard,
  .nox-vcard-toast { display: none !important; }
}


/* ============================================================================
   12 · REDUCED MOTION  (disable hover lifts / transitions / toast slide)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .nox-pcard,
  .nox-vcard-action,
  .nox-vcard-save,
  .nox-vcard-social-btn,
  .nox-vcard-wallet-btn,
  .nox-vcard-qr-toggle,
  .nox-vcard-qr-body,
  .nox-vcard-toast {
    transition: none !important;
  }
  .nox-pcard-pair:hover .nox-pcard,
  .nox-pcard.is-interactive:hover,
  .nox-vcard-action:hover,
  .nox-vcard-save:hover,
  .nox-vcard-social-btn:hover,
  .nox-vcard-wallet-btn:hover {
    transform: none !important;
  }
}