/* delelisten for shops (developers/). Builds on ../admin/assets/admin.css. */
.dev .hero-dev { padding: 8px 0 4px; }
.dev .hero-dev h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 10px; }
.dev .hero-dev p { font-size: 1.05rem; color: var(--muted); max-width: 760px; line-height: 1.55; }
.dev .steps-dev { counter-reset: s; list-style: none; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.dev .steps-dev li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }
.dev .steps-dev li::before { counter-increment: s; content: counter(s); display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; align-items: center; justify-content: center; margin-bottom: .4rem; }
pre.code { position: relative; background: #0f1f1b; color: #e6f2ee; border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: .85rem; line-height: 1.5; margin: .5rem 0 1rem; }
pre.code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.code-copy { position: absolute; top: 8px; right: 8px; opacity: .85; }
.code-copy.copied, input.copied { border-color: var(--brand); }
.code-tabs [role="tablist"] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .5rem; }
.code-tabs [role="tab"] { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .88rem; cursor: pointer; color: var(--ink); }
.code-tabs [role="tab"][aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.dev .docs h2 { margin-top: 2rem; }
.dev .docs h3 { margin-top: 1.4rem; }
.dev .docs p, .dev .docs li { line-height: 1.6; }
.dev .docs code:not(pre code) { background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; font-size: .9em; }
.dev .toc { columns: 2 220px; }
.key-row { display: flex; gap: .5rem; align-items: center; }
.key-row input { font-family: ui-monospace, Menlo, Consolas, monospace; }
.secret-once { border: 2px solid var(--brand); }
.demo-button-row { padding: 1rem; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--bg); }
.admin-foot a { color: inherit; }
.demo-button-row [data-delelisten] { margin: 0 .6rem .4rem 0; vertical-align: middle; }
.dev .hero-dev-img { display: block; width: 100%; max-width: 860px; height: auto; margin: 1.2rem 0 .4rem; border-radius: 14px; border: 1px solid var(--line); }

/* ---- QR labels (labels.php): on screen as a preview, printed on A4 (190 x 277 mm inside the margins) ---- */
.qr-sheet {
  --qr-ink: #1b5a45; --qr-soft: #6f9f6c; --qr-bg: #eef6f1; --qr-line: #b9d8c8; --qr-muted: #3f5a4f;
  display: grid; gap: 2.5mm; margin: 1rem 0; padding: 0; background: #fff; color: var(--qr-ink);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.qr-sheet.qr-bw { --qr-ink: #000; --qr-soft: #000; --qr-bg: #fff; --qr-line: #000; --qr-muted: #222; }
.qr-small { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 37mm; }
.qr-big { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 66mm; gap: 3.5mm; }
.qr-label {
  display: flex; align-items: center; gap: 3mm;
  background: var(--qr-bg); border: .35mm solid var(--qr-line); border-radius: 4mm;
  padding: 2.5mm 3mm 2.5mm 2.5mm;
  break-inside: avoid; min-width: 0; overflow: hidden;
}
.qr-big .qr-label { flex-direction: column; justify-content: center; text-align: center; gap: 2.5mm; border-radius: 6mm; padding: 4mm; }
.qr-code { flex: none; width: 28mm; height: 28mm; color: var(--qr-ink); }
.qr-big .qr-code { width: 38mm; height: 38mm; }
.qr-code svg { width: 100%; height: 100%; display: block; }
.qr-text { display: flex; flex-direction: column; gap: .8mm; min-width: 0; line-height: 1.15; color: var(--qr-ink); }
.qr-text strong { font-size: 11.5pt; font-weight: 800; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qr-big .qr-text strong { font-size: 17pt; -webkit-line-clamp: 2; }
.qr-text span { font-size: 10pt; font-weight: 600; color: var(--qr-muted); }
.qr-text small { font-size: 7.5pt; color: var(--qr-muted); }
.qr-text em { font-style: normal; font-size: 7.5pt; font-weight: 800; letter-spacing: .02em; color: var(--qr-ink); margin-top: .6mm; }
.qr-big .qr-text small, .qr-big .qr-text em { font-size: 9pt; }
.qr-sign-sheet { display: block; }
.qr-sign {
  text-align: center; padding: 14mm 12mm; color: var(--qr-ink);
  background: var(--qr-bg); border: .5mm solid var(--qr-line); border-radius: 10mm;
}
.qr-sign-logo { width: 70mm; height: auto; }
.qr-bw .qr-sign-logo { filter: grayscale(1) brightness(.35); }
.qr-sign h2 { font-size: 26pt; margin: 7mm 0; color: var(--qr-ink); }
.qr-code.big { width: 95mm; height: 95mm; margin: 0 auto; }
.qr-sign-name { font-size: 18pt; font-weight: 800; margin: 6mm 0 2mm; }
.qr-sign p { font-size: 14pt; color: var(--qr-muted); }
.qr-colours { display: flex; gap: 8px; flex-wrap: wrap; }
.qr-colours label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #d8e0dc; border-radius: 10px; cursor: pointer; flex-direction: row; font-weight: 600; }
.qr-colours .swatch { width: 18px; height: 18px; border-radius: 50%; background: #1b5a45; box-shadow: inset 0 0 0 4px #eef6f1, 0 0 0 1px #b9d8c8; }
.qr-colours .swatch.bw { background: #000; box-shadow: inset 0 0 0 4px #fff, 0 0 0 1px #000; }
@media print {
  @page { size: A4; margin: 10mm; }
  .topbar, .admin-foot, .no-print, .flash { display: none !important; }
  body, main.page { background: #fff !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .qr-sheet { margin: 0; }
  .qr-sign-sheet { break-after: page; }
}