/* ============================================================
   components/qr.css — .dd-qr
   A QR code and the address it carries (#327). The hub's QR modal
   and the release page's share panel both draw one, so a code looks
   the same wherever it was handed out.

   Markup contract:
     <figure class="dd-qr">
       <img class="dd-qr__code" src="….svg" width="240" height="240" alt="…">
       <figcaption class="dd-qr__address">https://…</figcaption>
     </figure>

   The image brings its own ground, dots and quiet zone (features/
   portfolio/qr.py) — ink on the brand pink, drawn in the brand dot — so
   nothing here paints behind it: a scanner reads the picture, not the
   surface under it. The address wraps anywhere — a preview link is one
   unbroken 43-character token.
   ============================================================ */

.dd-qr {
  /* The code is the thing the panel is for, so it gets real air on both sides
     of it rather than sitting tight under the title and on top of the
     buttons. On a phone the panel has the screen's height to live in, so the
     air comes back to something a small screen can hold. */
  margin: var(--space-10) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.dd-qr__code {
  display: block;
  width: min(240px, 100%);
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--border);
}

@media (max-width: 480px) {
  .dd-qr {
    margin: var(--space-8) 0;
  }
}

.dd-qr__address {
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
  text-align: center;
  overflow-wrap: anywhere;
}