/* =============================================================================
   Kod QR - only what the shared tool components do not cover: one column in
   the stage with what the code holds and the code right under it, the empty
   square, the resolved address, warnings and the logo row.
   ============================================================================= */
/* The field and the code share one column, as wide as the biggest preview
   (440 px), so both edges line up. */
.qr__col{width:100%;max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.qr__pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}

.qr__empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  width:100%;aspect-ratio:1/1;padding:28px 20px;text-align:center;
  border:1px dashed rgba(250,250,247,.28);border-radius:var(--r-sm);color:var(--fg-3);
}
.qr__empty .drop__icon{opacity:.7}
.qr__emptyText{font-size:15px;font-style:italic;color:var(--fg-3)}
.qr__canvas{display:block;max-width:100%;border-radius:var(--r-xs)}

/* The address the code will open, right under the field it came from. */
.qr__group{display:flex;flex-direction:column;gap:14px}
.qr__url{margin-top:-4px;font-size:12px;line-height:1.5;letter-spacing:.02em;color:var(--fg-2);overflow-wrap:anywhere}
.qr__note{margin-top:10px;line-height:1.5}

.qr__warn{
  display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid rgba(255,138,122,.45);background:rgba(255,138,122,.07);
  font-size:14px;line-height:1.5;color:var(--fg);
}
.qr__warn p::before{content:"! ";color:#ff8a7a;font-weight:600}

.qr__logo{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.qr__file{display:inline-flex;align-items:center;cursor:pointer}
.qr__file:has(input:focus-visible){outline:2px solid var(--olive);outline-offset:3px}
.qr__logoName{min-width:0;font-size:11px;letter-spacing:.06em;color:var(--fg-3);overflow-wrap:anywhere}

@media (max-width:640px){
  #qr .field select{font-size:16px}   /* below 16px iOS zooms in */
}
@media (max-width:560px){.qr__empty{aspect-ratio:auto;min-height:200px}}

/* The custom colour lights up only when it, not a swatch, holds the colour.
   (The shared rule in styles.css checks the splitter's swatches only.) */
#qr .swatches:has(.swatch input:checked) .swatch-custom{border-color:var(--rule-d)}
#qr .swatches:not(:has(.swatch input:checked)) .swatch-custom{border-color:var(--olive)}