/* ═══════════════════════════════════════════════════════════════
   QR-CODE-UI — Inline scannable QR code.
   ═══════════════════════════════════════════════════════════════ */

@scope (qr-code-ui) {
  :where(:scope) {
    --qr-code-fg: currentColor;
    --qr-code-bg: transparent;
  }

  :scope {
    box-sizing: border-box;
    display: block;
    /* The SVG itself carries explicit width/height; this is a fallback
       for cases where the SVG hasn't stamped yet (empty value/matrix). */
    line-height: 0;
    color: var(--qr-code-fg);
    background: var(--qr-code-bg);
  }

  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
  :scope[inline] { display: inline-block; }

  :scope svg {
    display: block;
    /* Width / height come from the explicit SVG attributes set by JS
       per the [size] prop. CSS `width: 100%` would stretch to fill the
       host, but the host is inline-block sized-to-content (the SVG
       itself), which produces a circular sizing dependency in some
       browsers + zero-height in others. Trust the SVG attributes. */
    shape-rendering: crispEdges;
  }

  /* Encode-error state — caller passed data too long for v1-10 at
     the configured ECC. Render an empty placeholder; the warning
     went to console. Visually: a dashed outline at the requested
     size so the layout doesn't collapse silently. */
  :scope[data-error] {
    border: 1px dashed var(--a-border-strong);
    border-radius: var(--a-radius-sm);
    min-width: 4em;
    min-height: 4em;
  }
}
