/* ===========================================================================
   share.css — Share experience (Session 1 — feature/mobile-share)
   QR digital card in a bottom sheet (mobile) / centered modal (>=768px).
   Reuses main.css design tokens and its global fadeIn/slideUp keyframes.
   z-index: 150 — above .pw-overlay (100), below .lightbox-overlay (200).
   =========================================================================== */

  /* Share trigger — topnav icon. Mirrors .theme-toggle, but unlike the theme
     toggle it STAYS visible at <=479px: the QR card is the in-person
     "scan my code" pocket move, so it earns a one-tap, always-on affordance. */
  .topnav-share {
    background: none; border: 1px solid var(--border); border-radius: 50%;
    width: 32px; height: 32px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
    color: var(--text-secondary);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .topnav-share:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); }
  .topnav-share svg { width: 15px; height: 15px; }

  /* Overlay — same backdrop language as .pw-overlay, but anchored to the
     bottom edge on mobile so the sheet slides up from the thumb zone. */
  .share-overlay {
    position: fixed; inset: 0; z-index: 150;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
    display: flex; align-items: flex-end; justify-content: center;
    animation: fadeIn 0.2s ease; /* keyframes defined in main.css */
  }

  .share-sheet {
    position: relative;
    background: var(--bg-primary); border: 1px solid var(--border);
    border-bottom: none; border-radius: 20px 20px 0 0;
    width: 100%;
    padding: 0.75rem 1.5rem calc(1.75rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -20px 60px rgba(0,0,0,0.18);
    animation: shareSheetUp 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    text-align: center;
    transition: background var(--transition), border-color var(--transition);
  }
  @keyframes shareSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* Grabber pill — mouse/touch dismiss affordance; hidden from the a11y tree
     (the labeled .share-close button is the accessible dismiss). */
  .share-grabber {
    width: 40px; height: 4px; border-radius: 2px; background: var(--border);
    border: none; padding: 0; display: block; margin: 0 auto 2.25rem;
    /* margin-bottom clears the absolutely-positioned .share-close (bottom
       edge ≈ 44px) so the × never collides with the card frame below. */
    cursor: pointer;
  }

  .share-close {
    position: absolute; top: 1rem; right: 1rem;
    width: 28px; height: 28px; border-radius: 50%;
    background: none; border: none; cursor: pointer; color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .share-close:hover { background: var(--bg-hover); color: var(--text-primary); }
  .share-close svg { width: 16px; height: 16px; }

  /* The digital card — name + title + QR inside a framed card, not a bare
     modal. Card chrome follows the theme; the QR plaque inside does NOT. */
  .share-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 16px; padding: 1.5rem 1.5rem 1.25rem;
    max-width: 320px; margin: 0 auto 1rem;
    transition: background var(--transition), border-color var(--transition);
  }
  .share-name {
    font-family: var(--font-display); font-weight: 500;
    font-size: var(--fs-lg); color: var(--text-primary);
  }
  .share-title-line {
    font-family: var(--font-display); font-weight: 500;
    font-size: var(--fs-sm); color: var(--accent-2);
    letter-spacing: 0.01em; margin: 0.2rem 0 1rem;
  }
  /* QR plaque — FIXED light tile regardless of theme (like a physical card
     insert). Inverting or tinting the modules in dark mode kills camera
     scans; the dark/light module pair never changes. */
  .share-qr {
    background: #FFFFFF; border: 1px solid var(--border-light);
    border-radius: 12px; padding: 10px; max-width: 224px; margin: 0 auto;
  }
  .share-qr svg { display: block; width: 100%; height: auto; }
  .share-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 0.85rem; }

  .share-actions {
    display: flex; gap: 0.6rem; max-width: 320px; margin: 0 auto;
  }
  .share-btn {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: 0.45rem; padding: 0.65rem 1rem; border-radius: 10px; cursor: pointer;
    font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
    background: none; border: 1px solid var(--border); color: var(--text-secondary);
    transition: all 0.15s ease;
  }
  .share-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
  .share-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
  .share-btn-primary {
    background: var(--accent-solid); border-color: var(--accent-solid); color: #FFFFFF;
  }
  .share-btn-primary:hover {
    background: var(--accent-hover); border-color: var(--accent-hover); color: #FFFFFF;
  }

  .share-toast {
    position: fixed; left: 50%; bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(6px);
    background: var(--text-primary); color: var(--bg-primary);
    font-size: var(--fs-sm); font-weight: 500;
    padding: 0.5rem 1rem; border-radius: 8px;
    opacity: 0; pointer-events: none; z-index: 160;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .share-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* Desktop (>=768px): same component, centered as a modal — mirrors the
     .pw-modal presentation so the overlay family feels consistent. */
  @media (min-width: 768px) {
    .share-overlay { align-items: center; }
    .share-sheet {
      width: 400px; max-width: 90vw;
      border-bottom: 1px solid var(--border); border-radius: 16px;
      /* No grabber on desktop, so padding-top reserves the header zone for
         the .share-close × (bottom edge ≈ 44px) — keeps it clear of the
         card frame instead of overlapping its top-right corner. */
      padding: 3.25rem 2rem 2rem;
      box-shadow: 0 20px 60px rgba(0,0,0,0.15);
      animation: slideUp 0.25s ease; /* keyframes defined in main.css */
    }
    .share-grabber { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .share-overlay, .share-sheet { animation: none; }
    .share-toast { transition: opacity 0.01s linear; }
  }