/* ─────────────────────────────────────────────────────────────────────
   .dv-share-card — copyable share-link card.

   A shareable URL chip + Copy/Open actions, an optional eyebrow title +
   leading icon + description, and an optional QR code (beside the link, or
   stacked below — collapsible for the booking rail). Promotes the four
   hand-rolled "copyable URL" cards (3 in Settings → Storefront, 1 in the
   bookings show rail) into one component. Rendered by
   shared/patterns/_share_link_card.html.erb.

   Token-only (var(--token)); no raw hex, no raw Tailwind palette. Loaded
   after card.css (see application.css).

   Anatomy:
     .dv-share-card                 outer (clipboard controller host)
       .dv-share-card__head         icon + eyebrow title row (optional)
       .dv-share-card__desc         .dv-meta description (optional)
       .dv-share-card__body         link chip + actions  (+ QR when horizontal)
         .dv-share-card__field      the mono URL chip
         .dv-share-card__actions    Copy / Open buttons
       .dv-share-card__qr           QR tile (beside or below)
       .dv-share-card__qr-cap       QR caption

   Modifiers:
     .dv-share-card--boxed          card chrome (border + padding + radius)
     .dv-share-card--sm / --lg      size (padding / gap step; md is the base)
     .dv-share-card--vertical       QR stacks BELOW the link row
     .dv-share-card--default        baseline emphasis (no extra rules)
     .dv-share-card--accent         accent-soft header BAND + prominent QR
     .dv-share-card--quiet          inline-field actions, minimal chrome
   ───────────────────────────────────────────────────────────────────── */

.dv-share-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* Boxed chrome — surface fill, hairline border, rounded-card, padded. */
.dv-share-card--boxed {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.dv-share-card--boxed.dv-share-card--sm { padding: 12px; }
.dv-share-card--boxed.dv-share-card--lg { padding: 20px; }

/* Head — leading icon + eyebrow title. */
.dv-share-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dv-share-card__head svg,
.dv-share-card__head [data-lucide] { color: var(--accent); flex-shrink: 0; }

/* Description line. */
.dv-share-card__desc { margin-top: -2px; }

/* Body — link chip + actions (horizontal: QR sits beside via __layout). */
.dv-share-card__body {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* URL chip — mono, on the quiet canvas surface, single line + ellipsis so a
   long URL never reflows to a tower of one-char-per-line in a narrow column
   (e.g. when a QR sits beside it). Matches the mockup's `truncate` field. */
.dv-share-card__field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dv-share-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* QR tile — boxed crop on the canvas surface. */
.dv-share-card__qr {
  flex-shrink: 0;
  display: inline-block;
  padding: 8px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  line-height: 0;
}
.dv-share-card__qr svg { display: block; }
.dv-share-card__qr-cap { margin-top: 8px; text-align: center; }

/* ── Horizontal layout (default) — QR beside the link + actions column ──
   The __layout wraps the QR + the (body + desc-less) text column side by
   side. We model it directly: when a QR is present and horizontal, the
   card uses a row with the QR first and a min-width:0 text column. */
.dv-share-card__layout {
  display: flex;
  align-items: center;   /* QR + its link/actions read as one balanced pair */
  gap: 16px;
  min-width: 0;
}
.dv-share-card__layout > .dv-share-card__col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── Vertical — QR stacks BELOW the link row (booking rail). The QR is a
   normal flex-column child, so no extra rule needed beyond alignment. */
.dv-share-card--vertical .dv-share-card__qr { align-self: flex-start; }

/* Disclosure (collapsible QR) — accent summary, no marker, tidy spacing. */
.dv-share-card__disclosure { margin-top: 0; }
.dv-share-card__disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  cursor: pointer;
  color: var(--accent);
  font-size: var(--text-xs);
}
.dv-share-card__disclosure > summary::-webkit-details-marker { display: none; }
.dv-share-card__disclosure > summary:hover { color: var(--accent-strong); }
.dv-share-card__disclosure > summary svg { flex-shrink: 0; }
.dv-share-card__disclosure[open] > summary { margin-bottom: 12px; }

/* ══════════════════════ Emphasis: --accent (Direction C) ══════════════════
   Accent-soft header band flush to the card top + a padded content wrapper
   below it, a PRIMARY Copy CTA, and a prominent white QR tile. For share
   actions you want used on sight (booking-engine / walk-in flows). */
.dv-share-card--accent.dv-share-card--boxed {
  padding: 0;                 /* the band + __content own the padding */
  overflow: hidden;           /* clip the band to the card radius */
}
/* Header band — accent-soft fill, hairline underline, accent icon + eyebrow. */
.dv-share-card--accent .dv-share-card__head {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--hairline);
  padding: 10px 16px;
  margin: 0;
}
.dv-share-card--accent .dv-share-card__head .dv-eyebrow { color: var(--accent); }
/* Padded body wrapper below the band; owns the vertical rhythm. */
.dv-share-card--accent .dv-share-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 16px;
  min-width: 0;
}
.dv-share-card--accent.dv-share-card--sm .dv-share-card__head { padding: 8px 12px; }
.dv-share-card--accent.dv-share-card--sm .dv-share-card__content { padding: 12px; }
.dv-share-card--accent.dv-share-card--lg .dv-share-card__head { padding: 12px 20px; }
.dv-share-card--accent.dv-share-card--lg .dv-share-card__content { padding: 20px; }
/* Prominent QR — raised white tile (vs the recessed canvas tile elsewhere).
   Cap the intrinsic QR SVG to a proportionate size so it pairs with the link
   column instead of towering over it (RQRCode renders at module_size px, which
   for a longer URL can exceed 180px). Vector QR stays crisp when scaled. */
.dv-share-card--accent .dv-share-card__qr {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.dv-share-card--accent .dv-share-card__qr svg {
  width: 132px;
  height: 132px;
}
.dv-share-card--accent.dv-share-card--sm .dv-share-card__qr svg { width: 104px; height: 104px; }
.dv-share-card--accent.dv-share-card--lg .dv-share-card__qr svg { width: 160px; height: 160px; }

/* ══════════════════════ Emphasis: --quiet (Direction A) ═══════════════════
   Minimal chrome — the Copy/Open actions live INSIDE the URL field as ghost
   buttons; the field is a single inline chip. QR stays in the disclosure.
   Disappears into dense rails. */
.dv-share-card__field--inline {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 10px;  /* tighter right pad — ghost buttons sit inside */
}
.dv-share-card__url {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-share-card--quiet .dv-share-card__actions { flex-shrink: 0; gap: 2px; }