/* qr.css — Lane L4. QR holders, #dlg-qr inner layout, mode radios.
 * Values come from tokens.css. The one literal is the QR paper white: a scanner needs
 * maximum contrast, the warm --c-bg would lower it (local custom property, see --qr-paper).
 */

.qr-holder {
  --qr-paper: #ffffff;
  --qr-size: 62%;
  inline-size: var(--qr-size);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  padding: var(--s-4);
  background: var(--qr-paper);
  border-radius: 12px;
  border: var(--hairline-soft);
  box-sizing: border-box;
  display: grid;
  place-items: center;
  overflow: hidden;
  contain: layout paint;
}

.qr-holder > svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1 / 1;
  animation: qr-in var(--t-mid) var(--ease-out) both;
}

/* large variant: dialog */
.qr-holder--lg {
  --qr-size: min(78vw, 360px);
  padding: var(--s-8);
}

@keyframes qr-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- segmented control: [ Link | Kontakt direkt ] ---- */
.qr-mode {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  inline-size: min(100%, 420px);
  margin-inline: auto;
  padding: var(--s-4);
  border: var(--hairline);
  border-radius: var(--r-pill);
  box-sizing: border-box;
}

.qr-mode [data-qr-mode] {
  flex: 1 1 0;
  min-inline-size: 0;
  min-block-size: var(--tap);
  padding-inline: var(--s-12);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-label);
  line-height: var(--lh-snug);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-fast) var(--ease-out);
}

.qr-mode [data-qr-mode]:active { transform: scale(.97); }

.qr-mode [data-qr-mode][aria-checked="true"] {
  background: var(--c-ink);
  color: var(--c-on-ink);
}

@media (hover: hover) {
  .qr-mode [data-qr-mode][aria-checked="false"]:hover {
    background: var(--c-line-soft);
  }
}

.qr-mode [data-qr-mode]:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}

/* very narrow screens: stack instead of squeezing */
@media (max-width: 360px) {
  .qr-mode { border-radius: var(--r-ctl); }
  .qr-mode [data-qr-mode] { flex-basis: 100%; }
}

.qr-caption {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-label);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
  text-align: center;
  max-inline-size: 36ch;
  margin-inline: auto;
  overflow-wrap: anywhere;
}

/* ---- #dlg-qr specifics ---- */
#dlg-qr .dlg__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-16);
  text-align: center;
}

#dlg-qr .dlg__head {
  align-self: stretch;
  text-align: start;
}

/* vCard codes are denser: give them the full plate (only where :has() is supported) */
@supports selector(:has(*)) {
  #dlg-qr .dlg__panel:has([data-qr-mode="vcard"][aria-checked="true"]) .qr-holder--lg {
    padding: var(--s-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qr-holder > svg { animation: none; }
  .qr-mode [data-qr-mode] { transition: none; }
  .qr-mode [data-qr-mode]:active { transform: none; }
}

@media print {
  .qr-holder { border: 0; }
}